@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700;800&display=swap');

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
 *    specificity and defer to the .w-button selector
 */
button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
 * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
 *    (similar to normalize.css >=4.0.0)
 */
input[type='search'] {
  -webkit-appearance: none;
  /* 1 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

/* ============================================================
   Webflow base resets (formerly /landing/css/webflow.css)
   Only the rules that actually apply to elements present in the
   page; the .w-nav* / .w-inline-block / commerce / forms / tabs
   / sliders / lightbox subsystems were dead code and dropped.
   ============================================================ */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-bottom: 10px;
}
h1 { font-size: 38px; line-height: 44px; margin-top: 20px; }
h2 { font-size: 32px; line-height: 36px; margin-top: 20px; }
h3 { font-size: 24px; line-height: 30px; margin-top: 20px; }
h4 { font-size: 18px; line-height: 24px; margin-top: 10px; }
h5 { font-size: 14px; line-height: 20px; margin-top: 10px; }
h6 { font-size: 12px; line-height: 18px; margin-top: 10px; }
p { margin-top: 0; margin-bottom: 10px; }
blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}
figure { margin: 0; margin-bottom: 10px; }
figcaption { margin-top: 5px; text-align: center; }
ul, ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
fieldset { padding: 0; margin: 0; border: 0; }
button, [type='button'], [type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================================
   Wordlize design tokens + base typography
   (formerly /landing/css/wordlize-december-landing-2-2.webflow.css)
   Only the rules whose selectors match this page's HTML.
   ============================================================ */
:root {
  --neutral-color--grey-01: #eaeeff;
  --_fonts---primary-font: Poppins, sans-serif;
  --neutral-color--dark: #121d35;
  --_font-sizes---h1: 4.125rem;
  --_font-sizes---h2: 2.75rem;
  --_font-sizes---h3: 2.25rem;
  --_font-sizes---h4: 1.5rem;
  --_font-sizes---h5: 1.25rem;
  --_font-sizes---h6: 1.125rem;
  --base--white: white;
  --base--transparent: transparent;
  --primary-color--blue: #2145fb;
  --_font-sizes---regular-paragraph: 1rem;
  --base--text-color: #787798;
  --primary-color--yellow: #f5dc3c;
  --base--text-color-light: #f6f5fd;
  --base--border-color: #d1e0ff;
  --neutral-color--grey-02: #dfe4ff;
  --_font-sizes---small-paragraph: .875rem;
  --_spacing---section-padding: 9.375rem;
  --_spacing---none: 0rem;
  --bg-color: #f0f5ff;
  --base--paragraph-color: #636370;
  --_font-sizes---title-medium: 2rem;
  --_font-sizes---paragraph-xs: .75rem;
  --base--black: black;
  --pastel-green: #adf7b6;
}
body {
  background-color: var(--neutral-color--grey-01);
  font-family: var(--_fonts---primary-font);
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
h1 { color: var(--neutral-color--dark); font-size: var(--_font-sizes---h1); letter-spacing: -.02em; margin-top: 0; margin-bottom: 0; font-weight: 600; line-height: 120%; }
h2 { color: var(--neutral-color--dark); font-size: var(--_font-sizes---h2); letter-spacing: -.03em; margin-top: 0; margin-bottom: 0; font-weight: 600; line-height: 120%; }
h3 { color: var(--neutral-color--dark); font-size: var(--_font-sizes---h3); letter-spacing: -.02em; margin-top: 0; margin-bottom: 0; font-weight: 600; line-height: 120%; }
h4 { color: var(--neutral-color--dark); font-size: var(--_font-sizes---h4); letter-spacing: -.02em; margin-top: 0; margin-bottom: 0; font-weight: 500; line-height: 120%; }
h5 { color: var(--neutral-color--dark); font-size: var(--_font-sizes---h5); letter-spacing: -.01em; margin-top: 0; margin-bottom: 0; font-weight: 500; line-height: 120%; }
h6 { color: var(--neutral-color--dark); font-size: var(--_font-sizes---h6); margin-top: 0; margin-bottom: 0; font-weight: 400; line-height: 150%; }
p { margin-bottom: 0; }
a { text-decoration: none; }
ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 40px; }
img { max-width: 100%; display: inline-block; }
strong { font-size: var(--_font-sizes---h5); font-weight: 500; }
blockquote {
  border-left: 5px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}
figure { margin-bottom: 10px; }

.page-wrapper.white-bg { background-color: var(--base--white); }
.container {
  text-align: center;
  width: 100%;
  max-width: 84.38rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: .94rem;
  padding-right: .94rem;
}
/* Tablet/desktop (>767px): guarantee a generous minimum side gutter so the
   hero/main content never hugs the viewport edge at narrow-desktop, square, or
   unusual aspect ratios. Capping the centered container at 86vw keeps a ~7%
   margin on each side; the 84.38rem cap still wins once the viewport is wide
   enough that auto-centering already exceeds 7vw, so wide screens keep their
   full content width (no double-applied padding shrinking the layout). Purely
   viewport-relative, so it stays responsive at any width — tune the 86vw to
   taste (lower = more margin). Mobile (≤767px) keeps its own tuned padding. */
@media screen and (min-width: 768px) {
  .container { max-width: min(84.38rem, 86vw); }
}
.main-logo-wrap { max-width: 9.5rem; padding: 0; }
.nav-menu-wrapper { float: none; }
.secondary-button {
  background-color: var(--neutral-color--dark);
  color: var(--base--white);
  font-size: var(--_font-sizes---regular-paragraph);
  border-radius: 62.5rem;
  padding: .75rem 1.87rem;
  font-weight: 700;
  line-height: 175%;
  display: inline-block;
  overflow: clip;
}
.secondary-button-text-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.preview-navbar {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 100px;
  padding: 0.5rem 2.5rem;
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  width: calc(100% - 4rem);
  max-width: 84.38rem;
}
.nav-menu-flex-wrap { justify-content: center; align-items: center; display: flex; }
.preview-nav-link {
  color: var(--neutral-color--dark);
  font-size: var(--_font-sizes---regular-paragraph);
  border-radius: 50px;
  padding: .56rem 1.5rem;
  font-weight: 400;
  line-height: 150%;
}
.preview-nav-link.w--current {
  color: var(--primary-color--blue);
  background-color: #2145fb1a;
  margin-right: 20px;
}
.nav-flex-wrap { justify-content: space-between; align-items: center; display: flex; }
.nav-right-wrap {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.preview-banner {
  padding-top: 9.8rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.banner-container { display: flex; flex-direction: column; gap: 0.5rem; }
.preview-banner-header { text-align: center; margin-bottom: 0rem; }
.preview-banner-title {
  color: #ffffff;
  font-size: 3.66rem;
  font-family: "EB Garamond", serif;
  width: auto;
  margin-bottom: 1.3rem;
  font-weight: 400;
  line-height: 112%;
  display: block;
}
.preview-banner-details {
  color: #ffffff;
  font-size: var(--_font-sizes---h6);
  margin-bottom: 0.5rem;
  font-weight: 400;
  line-height: 150%;
}
.preview-banner-details::before {
  content: '';
  display: block;
  width: 300px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
  margin: 0 auto 1.5rem auto;
}
.nav-divider {
  display: none;
  background-color: #c6d8fe;
  width: 100%;
  height: 1px;
  position: absolute;
  inset: auto 0% 0%;
}

@media screen and (max-width: 991px) {
  body {
    --_font-sizes---h1: 3rem;
    --_font-sizes---h2: 2.25rem;
    --_font-sizes---h3: 1.75rem;
    --_font-sizes---h4: 1.25rem;
    --_font-sizes---h5: 1rem;
    --_font-sizes---h6: 1rem;
    --_font-sizes---regular-paragraph: .875rem;
    --_font-sizes---small-paragraph: .75rem;
    --_font-sizes---title-medium: 1.75rem;
    --_font-sizes---paragraph-xs: .625rem;
    --_spacing---section-padding: 6.25rem;
    --_spacing---none: 0rem;
  }
  .main-logo-wrap { max-width: 9rem; }
  .nav-menu-wrapper {
    background-color: var(--neutral-color--dark);
    max-height: 90vh;
    padding: 1.88rem;
    overflow: auto;
  }
  .secondary-button { padding: .625rem 1.5rem; }
  .preview-navbar { padding-top: 15px; padding-bottom: 15px; }
  .nav-menu-flex-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .preview-nav-link { color: var(--base--white); border-radius: 0; padding: 0; }
  .preview-nav-link.w--current { color: var(--primary-color--yellow); background-color: #0000; }
  .nav-right-wrap { grid-column-gap: 10px; grid-row-gap: 10px; }
  .preview-banner { padding-top: 7.2rem; }
  .banner-container { flex-direction: column; }
  .preview-banner-title { margin-bottom: 1rem; }
  .preview-banner-details { margin-bottom: 0.5rem; line-height: 140%; }
  .hamburger-menu {
    z-index: 1;
    background-color: transparent;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: .375rem;
    display: flex;
    position: relative;
    overflow: visible;
  }
}

@media screen and (max-width: 767px) {
  body {
    --_font-sizes---h1: 2.5rem;
    --_font-sizes---h2: 1.75rem;
    --_font-sizes---h3: 1.5rem;
    --_font-sizes---h4: 1.125rem;
    --_font-sizes---h5: 1rem;
    --_font-sizes---h6: .875rem;
    --_font-sizes---regular-paragraph: .875rem;
    --_font-sizes---small-paragraph: .75rem;
    --_font-sizes---title-medium: 1.5rem;
    --_font-sizes---paragraph-xs: .625rem;
    --_spacing---section-padding: 5rem;
    --_spacing---none: 0rem;
  }
  .main-logo-wrap { max-width: 8rem; }
  .nav-menu-wrapper { max-height: 90vh; padding: 1.25rem; overflow: auto; }
  .secondary-button { padding: .5rem 1.25rem; }
  .nav-button-wrap { display: none; }
  .preview-navbar { padding-top: 10px; padding-bottom: 10px; }
  .nav-menu-flex-wrap { grid-column-gap: 8px; grid-row-gap: 8px; }
  .preview-banner { padding-top: 6.75rem; }
  .preview-banner-title { margin-bottom: .5rem; }
  .preview-banner-details { margin-bottom: 0.5rem; }
  .hamburger-menu { width: 2.5rem; height: 2.5rem; padding: .25rem; }
}

@media screen and (max-width: 479px) {
  body {
    --_font-sizes---h1: 2rem;
    --_font-sizes---h2: 1.5rem;
    --_font-sizes---h3: 1.25rem;
    --_font-sizes---h4: 1rem;
    --_font-sizes---h5: .875rem;
    --_font-sizes---h6: .75rem;
    --_font-sizes---regular-paragraph: .75rem;
    --_font-sizes---small-paragraph: .625rem;
    --_font-sizes---title-medium: 1.25rem;
    --_font-sizes---paragraph-xs: .625rem;
    --_spacing---section-padding: 3.75rem;
    --_spacing---none: 0rem;
  }
  .main-logo-wrap { max-width: 7.5rem; }
  .nav-menu-wrapper { padding: 1rem; }
  .preview-banner { padding-top: 5.85rem; }
  .preview-banner-details { margin-bottom: 0.4rem; }
  .hamburger-menu { width: 2rem; height: 2rem; }
}

/* ============================================================
   Vanilla replacement for Webflow's [data-collapse='medium']
   navbar collapse + Lottie hamburger.
   - The middle nav links are hidden ≤991px via the
     `.nav-menu-wrapper` block below.
   - The hamburger button is hidden >991px (inline rules already
     define its visible appearance ≤991px).
   - The hamburger morphs ☰ → ✕ when `.is-open` is added by
     /landing_clean/js/main.js.
   - The mobile menu slides down from the navbar when `.is-open`
     is on `.nav-menu-wrapper`.
   ============================================================ */
.hamburger-menu {
  display: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
}
@media screen and (max-width: 991px) {
  .hamburger-menu { display: flex; cursor: pointer; }
  .nav-menu-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    border-radius: 16px;
    transform-origin: top center;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .nav-menu-wrapper.is-open {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }
}
.hamburger-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 13px;
  flex-shrink: 0;
}

.hamburger-line {
  position: absolute;
  right: 0;
  display: block;
  height: 2px;
  background: #141413;
  border-radius: 1px;
  transition: transform 220ms ease, top 220ms ease, width 220ms ease;
}

.hamburger-line-top { top: 3px; width: 24px; }
.hamburger-line-bottom { top: 9px; width: 15px; }

.hamburger-menu.is-open .hamburger-line-top {
  top: 5.5px;
  width: 24px;
  transform: rotate(45deg);
}

.hamburger-menu.is-open .hamburger-line-bottom {
  top: 5.5px;
  width: 24px;
  transform: rotate(-45deg);
}

.hamburger-menu:focus-visible {
  outline: 2px solid #2145fb;
  outline-offset: 2px;
}

    @font-face {
      font-family: 'AnthropicSans';
      src: url('/fonts/anthropic/69971989be3c6573c3128fd9_AnthropicSans-Roman-Web.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'AnthropicSans';
      src: url('/fonts/anthropic/6997198997e7c1d1fb995bd0_AnthropicSans-Italic-Web.woff2') format('woff2');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'AnthropicSerif';
      src: url('/fonts/anthropic/6997199fab1923a705f0042d_AnthropicSerif-Roman-Web.woff2') format('woff2');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'AnthropicMono';
      src: url('/fonts/anthropic/699719b721a24ad1b6ce2c47_AnthropicMono-Roman-Web.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    /* Title font override — also override Webflow's white default */
    .preview-banner-title {
      font-weight: 500 !important;
      color: #16120d !important;
    }

    :root {
      --_fonts---primary-font: 'AnthropicSans', Arial, sans-serif !important;
      --font-sans: 'AnthropicSans', Arial, sans-serif;
      --font-serif: 'AnthropicSerif', Georgia, serif;
    }

    /* Remove site background images - warm cream palette */
    html, body, .page-wrapper, .page-wrapper.white-bg, .preview-banner {
      background: #faf9f6 !important;
      background-image: none !important;
    }

    /* Darker background for focused sections */
    .section.include, .section.device, .preview-footer {
      background: #d2cfc5 !important;
      background-image: none !important;
    }

    /* Fix multiple scrollbars - nuclear option */
    html, body {
      margin: 0;
      padding: 0;
      scroll-behavior: smooth;
    }
    
    html {
      overflow-x: hidden;
      overflow-y: scroll !important;
    }
    
    body {
      overflow: visible !important;
    }
    
    .page-wrapper,
    .page-wrapper.white-bg {
      overflow: visible !important;
      height: auto !important;
      min-height: auto !important;
    }

    .landing-legal-footer {
      margin-top: 22px;
      padding: 28px 0 36px;
      border-top: 1px solid rgba(26, 26, 26, 0.14);
      background: #faf9f6 !important;
    }

    .landing-legal-footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }

    .landing-legal-copy {
      margin: 0;
      font-size: 0.83rem;
      font-family: var(--font-sans);
      color: #2c2c2c;
      flex: 1 1 230px;
    }

    .landing-legal-links {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      justify-content: flex-end;
      flex: 1 1 280px;
    }

    .landing-legal-links a {
      color: #2c2c2c;
      text-decoration: none;
      font-family: var(--font-sans);
      font-size: 0.79rem;
      letter-spacing: 0.01em;
      font-weight: 500;
    }

    .landing-legal-links a:hover {
      text-decoration: underline;
    }
    
    /* Better font rendering */
    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-family: 'AnthropicSans', Arial, sans-serif !important;
    }
    
    /* Prevent iOS zoom on input focus */
    @media screen and (max-width: 767px) {
      input, select, textarea {
        font-size: 16px !important;
      }
    }
    
    /* Fix for Safari flexbox issues */
    .safari-container,
    .hero-image-section {
      -webkit-flex-shrink: 0;
      flex-shrink: 0;
    }
    
    /* Prevent transforms from causing horizontal scroll */
    .preview-banner,
    .section {
      overflow-x: hidden;
      width: 100%;
    }
    
    /* Fix for Windows high-contrast mode */
    @media (prefers-contrast: high) {
      .toast-notification,
      .progress-overlay-card {
        border: 2px solid currentColor;
      }
    }
    
    /* Ensure images don't exceed container */
    img {
      max-width: 100%;
      height: auto;
    }
    
    /* Accessibility improvements */
    
    /* Better focus states for keyboard navigation */
    a:focus-visible,
    button:focus-visible {
      outline: 3px solid #8b5cf6;
      outline-offset: 2px;
    }
    
    /* Remove outline for mouse users */
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible) {
      outline: none;
    }
    
    /* Skip to main content link for screen readers */
    .skip-to-main {
      position: absolute;
      left: -9999px;
      z-index: 999;
      padding: 1em;
      background-color: white;
      color: #8b5cf6;
      text-decoration: none;
    }
    
    .skip-to-main:focus {
      left: 50%;
      transform: translateX(-50%);
      top: 10px;
    }
    
    /* Ensure interactive elements have min touch target size (44x44px for mobile) */
    @media (max-width: 767px) {
      /* Comfortable tap targets for real controls. Inline (text) links ignore
         min-width/height, so inline citations and in-paragraph links keep
         flowing as text instead of being forced into flex boxes. */
      a, button {
        min-height: 44px;
        min-width: 44px;
      }
    }
    
    /* Navbar - clean flat style matching Anthropic/Claude */
    .preview-navbar {
      background: #faf9f6 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      border: none !important;
      border-bottom: 1px solid #e9e6dc !important;
      padding: 0.8rem 0 !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      transform: none !important;
      width: 100% !important;
      max-width: none !important;
      position: fixed !important;
      z-index: 1000 !important;
    }

    .preview-navbar .container {
      max-width: 1460px;
      margin: 0 auto;
      padding: 0 2.5rem;
    }

    @media (max-width: 991px) {
      .preview-navbar {
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      .preview-navbar .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
      }

      .preview-navbar .nav-flex-wrap {
        min-height: 0;
        align-items: center;
      }

      .preview-navbar .main-logo-wrap {
        display: flex;
        align-items: center;
        line-height: 0;
      }

      .preview-navbar .main-logo-wrap img {
        display: block;
        height: 28px;
        width: auto;
        max-width: 100%;
      }

      .preview-navbar .nav-menu-wrapper {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        width: 100%;
      }

      .preview-navbar .hamburger-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent !important;
        color: #141413;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
      }

      .preview-navbar .hamburger-line {
        background: #141413 !important;
      }
    }

    .preview-navbar .nav-flex-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: auto;
      min-height: 48px;
    }

    .preview-navbar .nav-right-wrap {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-shrink: 0;
    }

    .preview-navbar .nav-menu-wrapper {
      margin-left: auto !important;
      margin-right: 2rem !important; /* Spacing between middle options and buttons */
      display: flex;
      align-items: center;
    }

    .preview-navbar .nav-button-wrap {
      display: flex !important;
      align-items: center;
      gap: 0.75rem;
    }

    /* Standardized Interactive Elements */
    .preview-nav-link,
    .navbar-signin-button,
    .login-button {
      height: 40px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
      line-height: 1 !important;
      font-family: 'AnthropicSans', Arial, sans-serif !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      text-decoration: none !important;
      transition: all 0.2s ease !important;
    }

    .preview-nav-link {
      color: #30302e !important;
      background: transparent !important;
      border-radius: 0 !important;
      padding: 0 !important;
      border: none !important;
      gap: 5px;
    }

    .preview-nav-link .nav-chevron {
      width: 14px;
      height: 14px;
      margin-left: 3px;
      opacity: 0.6;
      flex-shrink: 0;
    }

    .preview-nav-link:hover {
      color: #000000 !important;
    }

    .preview-nav-link.w--current {
      color: #30302e !important;
      font-weight: 500 !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
    }

    .nav-menu-flex-wrap {
      display: flex;
      align-items: center;
      gap: 28px !important;
    }

    .preview-navbar .nav-menu-wrapper {
      margin-left: auto !important;
      margin-right: 18px !important;
      display: flex;
      align-items: center;
    }

    .navbar-signin-button {
      background: transparent !important;
      color: #30302e !important;
      border: 1px solid #d2cfc5 !important;
      border-radius: 8px !important;
      padding: 0 1.25rem !important;
      font-weight: 500 !important;
    }

    .login-button {
      background: #141413 !important;
      color: #ffffff !important;
      border: 1px solid transparent !important;
      border-radius: 8px !important;
      padding: 0 1.25rem !important;
      min-width: auto !important;
      font-weight: 500 !important;
    }

    .login-button:hover {
      background: #0a0a09 !important;
    }

    .login-button .login-hover {
      display: none !important;
    }

    .login-button:hover .login-default {
      opacity: 1 !important;
      transform: none !important;
    }

    .nav-divider {
      display: none;
    }

    /* Offset body for fixed navbar */
    .preview-banner {
      padding-top: clamp(7.96rem, calc(6.698vw + 4.964rem), 16.749rem) !important;
      padding-bottom: clamp(8.378rem, calc(7.05vw + 5.225rem), 17.631rem) !important;
      position: relative;
      z-index: 1;
      overflow: visible !important;
    }

    @media (max-width: 991px) {
      .preview-banner {
        padding-top: clamp(6.462rem, calc(5.713vw + 3.272rem), 11.676rem) !important;
        padding-bottom: clamp(6.802rem, calc(6.014vw + 3.444rem), 12.29rem) !important;
      }
    }

    @media (max-width: 767px) {
      .preview-banner {
        padding-top: clamp(4rem, 4vw + 2.5rem, 5.5rem) !important;
        padding-bottom: clamp(1rem, 2vw + 0.5rem, 2.5rem) !important;
      }
    }

    .find-school-section {
      position: relative;
      z-index: 3;
    }

    .scroll-indicator {
      position: fixed;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      animation: scrollBob 1.8s ease-in-out infinite;
      opacity: 0.55;
      cursor: pointer;
      transition: opacity 0.3s ease;
    }

    .scroll-indicator:hover {
      opacity: 0.85;
    }

    .scroll-indicator.is-hidden {
      opacity: 0;
      pointer-events: none;
    }

    @keyframes scrollBob {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(8px); }
    }

    .mascot-anchor {
      position: absolute;
      bottom: -85px;
      left: 50%;
      z-index: 20;
      width: min(520px, calc(100vw - 24px));
      height: 200px;
      pointer-events: auto;
      /* Load-in: start hidden + dropped below its slot. JS adds `.is-popped`
         once the page has loaded (after ~2s) to play the bounce-up. The
         translateX(-50%) centering is baked into every keyframe so it is
         preserved throughout the animation. */
      opacity: 0;
      transform: translateX(-50%) translateY(130px) scale(0.55);
      will-change: transform, opacity;
    }

    .mascot-anchor.is-popped {
      animation: mascotPopIn 0.95s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
    }

    @keyframes mascotPopIn {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(130px) scale(0.55);
      }
      8% {
        opacity: 1;
      }
      55% {
        opacity: 1;
        transform: translateX(-50%) translateY(-22px) scale(1.06);
      }
      75% {
        transform: translateX(-50%) translateY(7px) scale(0.98);
      }
      90% {
        transform: translateX(-50%) translateY(-3px) scale(1.01);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }

    /* Reduced motion: appear in final position with a gentle fade, no bounce. */
    @media (prefers-reduced-motion: reduce) {
      .mascot-anchor.is-popped {
        animation: none;
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        transition: opacity 0.45s ease;
      }
    }

    @media (max-width: 479px) {
      .mascot-anchor {
        height: 140px;
        bottom: -60px;
      }
      #mascot-canvas {
        height: 140px !important;
      }
    }

    /* Hero title parts */
    .title-part {
      display: inline-block;
      font-weight: 500;
    }

    /* Hero subtitle (only in hero section) */
    .preview-banner-header .preview-banner-details {
      font-family: 'AnthropicSans', sans-serif !important;
      color: #5e5d5a !important;
      font-weight: 400;
      font-size: 1.2rem;
      line-height: 1.5;
    }
    
    /* CTA Button */
    .hero-cta-button {
      color: #ffffff;
    }
    
    
    /* Hero image container */
    .hero-image-section {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    /* Safari background image */
    .safari-bg-image {
      display: block;
    }

    /* Dream score overlay */
    .dream-score-overlay {
      object-fit: contain;
      transform-origin: center;
      pointer-events: none;
    }

    /* 8K+ Students Text Overlay */
    .students-text-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 3;
    }

    .students-title {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 1.8rem;
      font-weight: 700;
      color: #1e293b;
      margin: 0;
      padding: 0;
      line-height: 1.3;
    }

    .students-subtitle {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.95rem;
      font-weight: 400;
      color: #1e293b;
      margin: 6px 0 0 0;
      padding: 0;
      line-height: 1.4;
    }

    @media (max-width: 991px) {
      .students-title {
        font-size: 1.5rem;
      }
      
      .students-subtitle {
        font-size: 0.85rem;
      }
    }

    @media (max-width: 767px) {
      .students-title {
        font-size: 1.2rem;
      }
      
      .students-subtitle {
        font-size: 0.75rem;
      }
    }

    @media (max-width: 479px) {
      .students-title {
        font-size: 1rem;
      }
      
      .students-subtitle {
        font-size: 0.65rem;
      }
    }
    
    /* Reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
      }
    }
    
    /* Minion Pro fallback stack */
    @font-face {
      font-family: 'Minion Pro';
      src: local('Minion Pro Bold'), local('MinionPro-Bold');
      font-weight: 700;
      font-style: normal;
    }
    
    /* SAT Score Widget Overlay */
    .sat-score-widget {
      position: absolute;
      left: 39%;
      width: 28%;
      top: 15%;
      height: auto;
      z-index: 5;
      filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.15));
      transition: all 0.3s ease;
    }
    
    .sat-score-widget:hover {
      transform: translateY(-4px);
      filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.2));
    }
    
    @media (max-width: 991px) {
      .sat-score-widget {
        width: 32%;
        left: -5%;
        top: 5%;
      }
    }
    
    @media (max-width: 767px) {
      .sat-score-widget {
        width: 35%;
        left: 2%;
        top: 3%;
      }
    }
    
    @media (max-width: 479px) {
      .sat-score-widget {
        width: 40%;
        left: 0;
        top: 2%;
      }
    }
    
    /* Progress Card Overlay Styles */
    .progress-overlay-card {
      position: absolute;
      top: 8%;
      right: 1%;
      left: auto;
      bottom: auto;
      transform: scale(0.75);
      transform-origin: top right;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
      padding: 16px;
      min-width: 280px;
      max-width: 320px;
      z-index: 10;
      cursor: pointer;
      transition: box-shadow 0.3s ease;
    }
    
    @supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
      .progress-overlay-card {
        background: rgba(255, 255, 255, 0.65);
      }
    }
    
    /* Ring meter defaults */
    .ring-gray {
      stroke-dashoffset: 176;
    }
    
    .ring-blue {
      stroke-dashoffset: 176;
    }
    
    .ring-green {
      stroke-dashoffset: 176;
    }
    
    .progress-overlay-card:hover {
      transform: scale(0.85) translateY(-4px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
    }
    
    /* Goal Card Split Layout */
    .goal-card-inner-overlay {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      gap: 12px;
      margin-bottom: 14px;
      padding: 2px 0;
    }
    
    .goal-stat-left-overlay {
      flex: 1;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .goal-stat-right-overlay {
      flex: 1;
      text-align: right;
      border-left: 1px solid rgba(0,0,0,0.1);
      padding-left: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }
    
    .goal-title-purple-overlay {
      font-size: 1.2rem;
      font-weight: 700;
      color: #8b5cf6;
      margin-bottom: 2px;
      line-height: 1.1;
      font-family: 'AnthropicSans', sans-serif;
    }
    
    .goal-subtitle-overlay {
      font-size: 0.75rem;
      color: #718096;
      font-family: 'AnthropicSans', sans-serif;
      font-weight: 500;
    }
    
    .status-text-overlay {
      font-size: 0.95rem;
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 2px;
      font-family: 'AnthropicSans', sans-serif;
    }
    
    .status-text-overlay.good-overlay {
      color: #059669;
    }
    
    .status-subtext-overlay {
      font-size: 0.7rem;
      color: #718096;
      line-height: 1.3;
      font-family: 'AnthropicSans', sans-serif;
    }
    
    /* Stats Row with Ring */
    .stats-row-overlay {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 12px;
    }
    
    .progress-ring-mini-overlay {
      position: relative;
      width: 64px;
      height: 64px;
      flex-shrink: 0;
    }
    
    .ring-center-text-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    
    /* Quick Stats Widget */
    .quick-stats-widget-overlay {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .stat-card-widget-overlay {
      background: rgba(255, 255, 255, 0.6);
      border-radius: 10px;
      padding: 6px 10px;
      text-align: left;
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: transform 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .stat-card-widget-overlay:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.8);
    }
    
    .stat-value-widget-overlay {
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1;
      font-family: 'AnthropicSans', sans-serif;
    }
    
    .stat-label-widget-overlay {
      font-size: 0.65rem;
      color: #718096;
      margin-top: 0;
      font-weight: 500;
      font-family: 'AnthropicSans', sans-serif;
    }
    
    .stat-card-widget-overlay.accent-green-overlay .stat-value-widget-overlay {
      color: #059669;
    }
    
    .stat-card-widget-overlay.accent-blue-overlay .stat-value-widget-overlay {
      color: #3b82f6;
    }
    
    @media (max-width: 991px) {
      .progress-overlay-card {
        transform: scale(0.65);
        right: -3%;
        top: 2%;
      }
      
      .progress-overlay-card:hover {
        transform: scale(0.75) translateY(-4px);
      }
    }
    
    @media (max-width: 767px) {
      .progress-overlay-card {
        min-width: 240px;
        max-width: 280px;
        padding: 12px;
        top: auto;
        bottom: -10%;
        right: 5%;
        transform: scale(0.6);
        transform-origin: bottom right;
      }
      
      .progress-overlay-card:hover {
        transform: scale(0.65) translateY(-4px);
      }
      
      .goal-card-inner-overlay {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        margin-bottom: 12px;
      }
      
      .goal-stat-left-overlay {
        text-align: center;
        align-items: center;
      }
      
      .goal-stat-right-overlay {
        text-align: center;
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.1);
        padding-left: 0;
        padding-top: 10px;
        width: 100%;
        align-items: center;
      }
    }
    
    @media (max-width: 479px) {
      .progress-overlay-card {
        min-width: 200px;
        max-width: 240px;
        padding: 10px;
        transform: scale(0.5);
        right: 2%;
        bottom: -15%;
      }
      
      .progress-overlay-card:hover {
        transform: scale(0.55) translateY(-4px);
      }
      
      .goal-title-purple-overlay {
        font-size: 1rem;
      }
      
      .stat-value-widget-overlay {
        font-size: 0.95rem;
      }
    }
    
    /* Login Button */
    .login-button {
      transition: background 0.2s ease !important;
      white-space: nowrap !important;
      overflow: visible !important;
      line-height: 1.4 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    .login-button .secondary-button-text-wrap {
      min-width: max-content;
    }
    
    .login-text {
      position: relative !important;
      display: inline-block !important;
    }
    
    .login-default {
      display: inline-block;
      color: #ffffff !important;
    }
    
    .login-hover {
      display: none !important;
    }
    
    .login-button:hover .login-default {
      opacity: 1 !important;
      transform: none !important;
    }
    
    .login-button:hover .login-hover {
      display: none !important;
    }
    
    /* Fix button text disappearing on hover */
    .secondary-button,
    .primary-button {
      overflow: visible !important;
    }
    
    .secondary-button-text,
    .secondary-button-text-wrap,
    .primary-button-text,
    .primary-button-text-wrap {
      transform: none !important;
      position: relative !important;
    }
    
    .secondary-button-text.absolute,
    .primary-button-text.absolute {
      display: none !important;
    }
    
    /* Liquid Glass Toast Notification */
    .toast-notification {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 1000;
      max-width: 420px;
      width: auto;
      padding: 18px 24px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-shadow: 
        0 8px 32px rgba(139, 92, 246, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      opacity: 0;
      transform: translateX(450px);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity;
      /* Fallback for browsers without backdrop-filter support */
      background: rgba(255, 255, 255, 0.95);
    }
    
    @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
      .toast-notification {
        background: rgba(255, 255, 255, 0.85);
      }
    }
    
    .toast-notification.show {
      opacity: 1;
      transform: translateX(0);
    }
    
    .toast-notification.hide {
      opacity: 0;
      transform: translateX(450px);
    }
    
    .toast-content {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .toast-title {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      color: #8b5cf6;
      line-height: 1.3;
      margin: 0;
    }
    
    .toast-message {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      color: #2d3748;
      line-height: 1.4;
      margin: 0;
    }
    
    @media (max-width: 767px) {
      .toast-notification {
        bottom: 20px;
        right: 20px;
        max-width: 340px;
        padding: 16px 20px;
      }
      
      .toast-title {
        font-size: 0.9rem;
      }
      
      .toast-message {
        font-size: 0.8rem;
      }
    }
    
    @media (max-width: 479px) {
      .toast-notification {
        bottom: 15px;
        right: 15px;
        left: 15px;
        max-width: none;
        padding: 14px 18px;
      }
      
      .toast-title {
        font-size: 0.85rem;
      }
      
      .toast-message {
        font-size: 0.75rem;
      }
    }

    /* Hero Video Section */
    .preview-banner-main-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
      gap: clamp(1.8rem, 4.4vw, 4rem);
      align-items: center;
      width: 100%;
      min-height: clamp(23rem, 38vh, 30rem);
    }

    .preview-banner-header {
      --hero-stack-space: 0.8rem;
      margin: 0;
      text-align: left;
      justify-self: start;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: var(--hero-stack-space);
    }

    .preview-banner-header .preview-banner-title {
      text-align: left;
      margin: 0 !important;
    }

    .preview-banner-header .preview-banner-details {
      text-align: left;
      margin: var(--hero-stack-space) 0 var(--hero-stack-space) 0 !important;
      max-width: 36rem;
    }

    .preview-banner-header .hero-cta-button {
      margin: 0 !important;
    }

    .preview-banner-header .preview-banner-details::before,
    .preview-banner-header .preview-banner-details::after {
      content: none !important;
      display: none !important;
    }

    .hero-media-panel {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .hero-video-container {
      position: relative;
      width: min(560px, 100%);
      margin: 0;
      display: flex;
      justify-content: center;
    }

    .main-video-placeholder {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      border: none;
      z-index: 1;
    }

    .wordlize-animated-canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .portrait-video-placeholder {
      position: absolute;
      right: -50px;
      top: 50%;
      transform: translateY(-50%);
      width: 160px;
      aspect-ratio: 9/16;
      background: #e2e2e2;
      border-radius: 12px;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 4px solid #faf9f6;
      z-index: 2;
    }

    .video-label {
      color: #9ca3af;
      font-family: 'AnthropicSans', sans-serif;
      font-weight: 500;
      font-size: 0.9rem;
    }

    @media (max-width: 991px) {
      .preview-banner-main-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
      }

      .hero-media-panel {
        justify-content: flex-start;
      }

      .preview-banner-header {
        max-width: none;
      }
    }

    .play-icon-placeholder {
      width: 60px;
      height: 60px;
      background: rgba(255,255,255,0.8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* Social Proof Section */
    .social-proof-section {
      position: relative;
      z-index: 2;
      padding: 70px 0 64px;
      background: #f0eee6;
      border-top: 1px solid #d2cfc5;
      border-bottom: 1px solid #d2cfc5;
    }

    .social-proof-container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2.5rem;
    }

    .social-proof-title {
      margin: 0 0 40px;
      text-align: center;
      font-family: 'AnthropicSerif', serif;
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 400;
      line-height: 1.12;
      color: #16120d;
      letter-spacing: -0.03em;
    }

    .social-proof-rail {
      display: grid;
      grid-template-columns: 1fr 1fr 2fr;
      align-items: stretch;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .social-proof-item {
      padding: 36px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
      background: transparent;
      border-radius: 0;
      border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    .social-proof-item + .social-proof-item {
      border-left: 1px solid rgba(15, 23, 42, 0.07);
    }

    .social-proof-stats-group {
      display: flex;
      position: relative;
      padding: 14px 8px 12px;
      gap: 8px;
      border-top: 1px solid rgba(15, 23, 42, 0.08);
      border-left: 1px solid rgba(15, 23, 42, 0.07);
    }

    .social-proof-stats-group::before {
      content: 'vs. existing methods¹ ²';
      position: absolute;
      top: calc(-0.58em - 5px);
      left: 50%;
      transform: translateX(-50%);
      background: #f0eee6;
      padding: 0 10px;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.72rem;
      font-style: italic;
      font-weight: 400;
      color: rgba(23, 23, 23, 0.32);
      white-space: nowrap;
      letter-spacing: 0.01em;
    }

    .social-proof-item.is-stat {
      flex: 1;
      background: #fbf9f5;
      border-radius: 14px;
      border: none;
      margin: 0;
      padding: 28px 24px;
    }

    .social-proof-item.is-stat + .social-proof-item.is-stat {
      margin-left: 0;
    }

    .social-proof-stat {
      margin: 0;
      font-family: 'AnthropicSerif', serif;
      font-size: 1.9rem;
      font-weight: 400;
      line-height: 1;
      color: #1e293b;
      letter-spacing: -0.03em;
    }

    .social-proof-stat sup {
      font-size: 0.4em;
      vertical-align: super;
      color: rgba(23, 23, 23, 0.35);
      font-weight: 400;
      margin-left: 2px;
    }

    .social-proof-stat-label {
      margin: 3px 0 0 0;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(23, 23, 23, 0.4);
    }

    /* Mobile-only single subtext for the stat cards; hidden on desktop. */
    .social-proof-stat-sub-mobile {
      display: none;
    }

    .social-proof-headline {
      margin: 6px 0 0 0;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.87rem;
      font-weight: 400;
      line-height: 1.5;
      color: #475569;
      max-width: 210px;
    }


    .social-proof-cite {
      margin: 4px 0 0 0;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.72rem;
      line-height: 1.35;
      font-weight: 400;
      font-style: italic;
      color: rgba(23, 23, 23, 0.28);
    }

    .social-proof-footnotes {
      margin: 28px auto 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: baseline;
      column-gap: 2rem;
      row-gap: 8px;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.7rem;
      line-height: 1.5;
      color: rgba(23, 23, 23, 0.28);
      font-style: italic;
      text-align: center;
    }

    .social-proof-footnotes li {
      margin: 0;
    }

    .social-proof-footnotes a,
    .social-proof-footnotes a:link,
    .social-proof-footnotes a:visited {
      color: inherit;
      text-decoration: underline;
    }

    /* Citation labels: full text on desktop, shortened on mobile (see the
       767px block where these are flipped). */
    .social-proof-footnotes .cite-mobile { display: none; }

    /* The page-bottom citation copy is mobile-only (hidden on desktop, where
       the citations stay in the #reviews section). */
    .social-proof-footnotes--mobile { display: none; }

    /* Mobile-only "vs. existing methods" bracket row (replaces stat cards). */
    .social-proof-vs-mobile { display: none; }

    /* Pilot proof: desktop shows the copy inside #reviews; the copy under
       "Join your school" is mobile-only. Toggled at the 767px boundary. */
    .pilot-proof--mobile { display: none; }

    /* How It Works Section */
    .find-school-section {
      padding: 100px 0;
      background: #f1eee6;
      border-top: 1px solid #d2cfc5;
      border-bottom: 1px solid #e9e6dc;
    }

    .find-school-container {
      max-width: 680px;
      margin: 0 auto;
      padding: 0 2.5rem;
      text-align: center;
    }

    .find-school-title {
      font-family: 'AnthropicSerif', serif;
      font-size: 2.8rem;
      font-weight: 400;
      color: #000000;
      margin: 0 0 16px 0;
      letter-spacing: -0.02em;
    }

    .find-school-subtitle {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 1.08rem;
      line-height: 1.7;
      color: #4a4a48;
      margin: 0 0 40px 0;
    }

    .find-school-search-wrap {
      position: relative;
      max-width: 480px;
      margin: 0 auto 28px auto;
    }

    .find-school-input {
      width: 100%;
      padding: 15px 20px 15px 48px;
      border-radius: 12px;
      border: 1px solid #d2cfc5;
      background: #ffffff;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 1rem;
      color: #1a1a1a;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      box-sizing: border-box;
    }

    .find-school-input::placeholder {
      color: #94918a;
    }

    .find-school-input:focus {
      border-color: #8b5cf6;
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
    }

    .find-school-search-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #94918a;
      pointer-events: none;
    }

    .find-school-results {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      background: #ffffff;
      border: 1px solid #e2dfd8;
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
      max-height: 240px;
      overflow-y: auto;
      z-index: 20;
      display: none;
    }

    .find-school-results.visible {
      display: block;
    }

    .find-school-result-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      cursor: pointer;
      transition: background 0.15s ease;
      text-align: left;
    }

    .find-school-result-item:first-child {
      border-radius: 12px 12px 0 0;
    }

    .find-school-result-item:last-child {
      border-radius: 0 0 12px 12px;
    }

    .find-school-result-item:only-child {
      border-radius: 12px;
    }

    .find-school-result-item:hover,
    .find-school-result-item.active {
      background: #f6f3fb;
    }

    .find-school-result-item + .find-school-result-item {
      border-top: 1px solid #f0ede6;
    }

    .find-school-result-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: #ede9fe;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #7c3aed;
    }

    .find-school-result-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .find-school-result-name {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
      color: #1a1a1a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .find-school-result-location {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.82rem;
      color: #7a7770;
    }

    .find-school-no-results {
      padding: 20px 18px;
      text-align: center;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.92rem;
      color: #7a7770;
    }

    .find-school-divider {
      display: flex;
      align-items: center;
      gap: 16px;
      max-width: 480px;
      margin: 0 auto 28px auto;
    }

    .find-school-divider-line {
      flex: 1;
      height: 1px;
      background: #d2cfc5;
    }

    .find-school-divider-text {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.82rem;
      color: #94918a;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 500;
    }

    .find-school-features {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }

    .find-school-feature {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.88rem;
      color: #5a5850;
    }

    .find-school-feature svg {
      width: 16px;
      height: 16px;
      color: #7c3aed;
      flex-shrink: 0;
    }

    .find-school-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .find-school-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.95rem;
      font-weight: 500;
      color: #1a1a1a;
      text-decoration: none;
      padding: 11px 24px;
      border-radius: 999px;
      border: 1px solid #d2cfc5;
      background: transparent;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .find-school-action-btn:hover {
      border-color: #1a1a1a;
      background: #1a1a1a;
      color: #ffffff;
    }

    .find-school-action-btn.educator {
      background: #000000;
      border-color: #000000;
      color: #ffffff;
    }

    .find-school-action-btn.educator:hover {
      background: #2d2d52;
      border-color: #2d2d52;
    }

    .find-school-action-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Impact Section */
    .impact-section {
      padding: 100px 0;
      background: #ffffff;
    }

    .impact-container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .impact-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .impact-label {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 600;
      color: #7c3aed;
      margin: 0;
    }

    .impact-title {
      font-family: 'AnthropicSerif', serif;
      font-size: 2.6rem;
      font-weight: 400;
      color: #000000;
      margin: 0;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .impact-right {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-left: 2px solid #e8e5de;
      padding-left: 40px;
    }

    .impact-item {
      padding: 24px 0;
      border-bottom: 1px solid #e8e5de;
    }

    .impact-item:last-child {
      border-bottom: none;
    }

    .impact-item-text {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 1.02rem;
      line-height: 1.65;
      color: #30302e;
      margin: 0;
    }

    .impact-item-num {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      color: #b5b0a8;
      margin-bottom: 6px;
      letter-spacing: 0.02em;
    }

    @media (max-width: 767px) {
      .impact-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .impact-title {
        font-size: 2.1rem;
      }
      .impact-right {
        border-left: none;
        padding-left: 0;
        border-top: 2px solid #e8e5de;
        padding-top: 32px;
      }
    }

    @media (max-width: 479px) {
      .find-school-features {
        gap: 16px;
        flex-direction: column;
        align-items: center;
      }
      .find-school-actions {
        flex-direction: column;
        align-items: center;
      }

      .social-proof-container,
      .find-school-container,
      .use-wordlize-container,
      .impact-container {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }

    @media (max-width: 991px) {
      .social-proof-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .social-proof-item + .social-proof-item {
        border-left: none;
      }

      .social-proof-item.is-stat + .social-proof-item.is-stat {
        margin-left: 0;
      }

      .find-school-section,
      .impact-section,
      .use-wordlize-section {
        padding-top: clamp(48px, 4vw + 24px, 84px);
        padding-bottom: clamp(48px, 4vw + 24px, 84px);
      }

      .impact-container {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .impact-right {
        border-left: none;
        padding-left: 0;
        border-top: 2px solid #e8e5de;
        padding-top: 32px;
      }
    }

    @media (max-width: 767px) {
      .preview-banner-main-grid {
        grid-template-columns: 1fr;
        min-height: 0;
        align-items: start;
      }

      .preview-banner-header {
        max-width: none;
      }

      .hero-media-panel {
        justify-content: center;
      }

      .social-proof-section,
      .use-wordlize-section,
      .find-school-section,
      .impact-section {
        padding-top: clamp(2.5rem, 7vw, 4rem);
        padding-bottom: clamp(2.5rem, 7vw, 4rem);
      }

      .social-proof-container,
      .find-school-container,
      .use-wordlize-container,
      .impact-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
      }

      .social-proof-footnotes {
        display: block;
        text-align: center;
        padding: 0 1.25rem;
      }

      .social-proof-footnotes li {
        display: inline;
      }

      .hero-video-container {
        margin: 4px 0 0;
        padding: 0;
        width: min(640px, 100%);
        display: flex;
      }
      .main-video-placeholder {
        width: 100%;
      }
      .portrait-video-placeholder {
        position: absolute;
        right: 10px;
        bottom: -20px;
        top: auto;
        transform: none;
        width: 100px;
        border-width: 2px;
      }
      .find-school-title {
        font-size: 2.1rem;
      }
    }

    /* Use Wordlize Section */
    .use-wordlize-section {
      padding: 100px 0;
      background: #ffffff;
    }

    .use-wordlize-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2.5rem;
    }

    .use-wordlize-heading {
      font-family: 'AnthropicSerif', serif;
      font-size: 3rem;
      font-weight: 400;
      color: #000000;
      text-align: center;
      margin: 0 0 48px 0;
      letter-spacing: -0.02em;
    }

    .use-wordlize-tabs {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: 1px solid #dce8fb;
      box-shadow: none;
      padding: 6px 10px;
      border-radius: 999px;
      width: fit-content;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .use-wordlize-tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 20px;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.9rem;
      font-weight: 400;
      color: #454545;
      cursor: pointer;
      border: none;
      border: 1px solid transparent;
      background: transparent;
      transition: all 0.2s ease;
      white-space: nowrap;
      box-shadow: none;
    }

    .use-wordlize-tab:hover {
      border-color: #aeccf6;
      color: #1a1a1a;
      background: transparent;
    }

    .use-wordlize-tab.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      font-weight: 500;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
    }

    .use-wordlize-tab:focus-visible {
      outline: 2px solid #5b8def;
      outline-offset: 2px;
    }

    .use-wordlize-tab svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .use-wordlize-showcase {
      background: #d8e6fb;
      border-radius: 16px;
      padding: 48px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 0.48fr);
      gap: 28px;
      align-items: stretch;
      min-height: 420px;
      transition: background 0.3s ease;
    }

    .use-wordlize-showcase.tab-learn {
      background: #ddd0f0;
    }

    .use-wordlize-showcase.tab-games {
      background: #d8e6fb;
    }

    .use-wordlize-showcase.tab-practice {
      background: #bfe6c9;
    }

    .use-wordlize-showcase.tab-track {
      background: #f2ddc2;
    }

    /* Big, minimal per-tab title sitting inside the colored block, above the
       preview containers. Sans-serif, recessed tone so it reads as part of the
       block's background rather than a card. */
    .use-wordlize-showcase-head {
      grid-column: 1 / -1;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 20px;
      min-width: 0;
    }

    .use-wordlize-showcase-title {
      margin: 0;
      flex: 0 1 auto;
      min-width: 0;
      font-family: 'AnthropicSans', sans-serif;
      font-size: clamp(1.5rem, 2.6vw, 2.25rem);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: rgba(24, 24, 27, 0.5);
    }

    .use-wordlize-terminal {
      background: #1a1a2e;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    }

    .quest-preview-window {
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      isolation: isolate;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0;
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .quest-preview-topbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      background: rgba(5, 16, 39, 0.65);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .quest-preview-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .quest-preview-dot.red { background: #ff5f56; }
    .quest-preview-dot.yellow { background: #ffbd2e; }
    .quest-preview-dot.green { background: #27c93f; }

    .quest-preview-url {
      margin-left: 8px;
      font-family: 'AnthropicMono', 'SF Mono', 'Fira Code', monospace;
      font-size: 0.76rem;
      color: #e2e8f0;
      text-transform: lowercase;
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .quest-preview-inner {
      flex: 1;
      min-height: 0;
      padding: 12px;
      display: flex;
    }

    .quest-preview-main-content {
      margin: 0 auto;
      width: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: none;
  overflow: visible;
      font-family: 'AnthropicSans', sans-serif;
    }

    .quest-preview-main-content button,
    .quest-preview-main-content input,
    .quest-preview-main-content select,
    .quest-preview-main-content textarea {
      font-family: inherit;
    }

    .quest-preview-question-wrapper {
      padding: 24px 20px 22px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.92);
      color: #1e293b;
    }

    .quest-preview-progress-timeline-container {
      position: relative;
      width: 100%;
      height: 30px;
      margin-bottom: 18px;
      padding: 0 30px;
    }

    .quest-preview-progress-timeline {
      position: absolute;
      top: 50%;
      left: 30px;
      right: 30px;
      height: 4px;
      background: #d1d5db;
      border-radius: 99px;
      transform: translateY(-50%);
    }

    .quest-preview-progress-fill {
      height: 100%;
      width: 64%;
      background: linear-gradient(90deg, #38bdf8, #22c55e);
      border-radius: 99px;
      box-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
    }

    .quest-preview-progress-badge-wrapper {
      position: absolute;
      top: 50%;
      left: 64%;
      transform: translate(-50%, -50%);
      z-index: 2;
      pointer-events: none;
    }

    .quest-preview-mastery-badge {
      background: #3b82f6;
      color: #ffffff;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
      white-space: nowrap;
    }

    .quest-preview-question-text {
      font-size: 0.92rem;
      color: #475569;
      margin: 0;
      font-weight: 500;
    }

    .quest-preview-word-highlight {
      margin-top: 8px;
      display: inline-flex;
      padding: 0;
      background: transparent;
      color: #111827;
      border-radius: 0;
      font-size: 1.6rem;
      font-family: 'AnthropicSerif', 'Georgia', serif;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.15;
    }

    .quest-preview-word-focus {
      margin-bottom: 22px;
      text-align: center;
    }

    .quest-preview-context-label {
      margin: 12px 0 14px;
      font-size: 0.9rem;
      font-weight: 600;
      color: #1e293b;
    }

    .quest-preview-context-passages {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 18px;
    }

    .quest-preview-context-passage {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border-radius: 12px;
      border: 1px solid rgba(15, 23, 42, 0.1);
      background: #f8fafc;
      padding: 14px 14px;
      font-size: 0.86rem;
      line-height: 1.45;
      color: #1e293b;
    }

    @media (max-width: 479px) {
      .quest-preview-context-passage {
        gap: 6px;
        padding: 10px;
      }
    }

    .quest-preview-passage-number {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #0f172a;
      color: #ffffff;
      font-size: 0.72rem;
      font-weight: 700;
      margin-top: 2px;
    }

    .quest-preview-passage-text {
      margin: 0;
      font-size: 0.86rem;
      line-height: 1.45;
      color: #1f2937;
      text-wrap: pretty;
    }

    .quest-preview-target-word {
      background: #fde68a;
      border-radius: 4px;
      padding: 0 3px;
      font-weight: 700;
      color: #111827;
      font-size: inherit;
      line-height: inherit;
    }

    .quest-preview-target-word-inline {
      font-weight: 700;
      font-size: inherit;
      line-height: inherit;
    }

    .quest-preview-context-chat {
      margin: 10px 0;
      padding: 12px 8px 8px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 16px;
      background: rgba(248, 250, 252, 0.72);
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-family: 'AnthropicSans', sans-serif;
    }

    .quest-preview-chat-message {
      max-width: 84%;
      padding: 10px 12px;
      border-radius: 14px;
      font-size: 0.82rem;
      line-height: 1.5;
      position: relative;
    }

    @media (max-width: 479px) {
      .quest-preview-chat-message {
        max-width: 90%;
        font-size: 0.78rem;
      }
    }

    .quest-preview-chat-message.right {
      align-self: flex-end;
      border-bottom-right-radius: 5px;
      color: #f8fbff;
      background: linear-gradient(135deg, #2f88ff, #1877ff);
      box-shadow: 0 3px 14px rgba(24, 119, 255, 0.24);
    }

    .quest-preview-chat-message.left {
      align-self: flex-start;
      border-bottom-left-radius: 5px;
      color: #1f2937;
      background: #e9ecef;
    }

    .quest-preview-answer-section {
      margin-top: 10px;
    }

    .quest-preview-answer-label {
      margin: 0 0 10px;
      font-size: 0.9rem;
      color: #1f2937;
      font-weight: 600;
    }

    .quest-preview-answer-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 14px;
    }

    .quest-preview-context-question-label {
      text-align: center;
    }

    .quest-preview-context-bubbles {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .quest-preview-context-option {
      width: 54px;
    }

    .quest-preview-context-option .quest-preview-option {
      width: 54px;
      height: 54px;
      min-height: 54px;
      padding: 0;
      border-radius: 999px;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .quest-preview-context-option .quest-preview-option-letter {
      margin: 0;
      width: auto;
      height: auto;
      border: none;
      background: transparent;
      border-radius: 0;
      padding: 0;
    }

    .quest-preview-context-option .quest-preview-option-text {
      display: none;
    }

    .use-wordlize-showcase {
      position: relative;
      overflow: hidden;
    }

    .use-wordlize-tab-panel {
      display: none;
      animation: fadeInWordlizePanel 0.2s ease;
    }

    .use-wordlize-tab-panel.is-active {
      display: block;
    }

    @keyframes fadeInWordlizePanel {
      from {
        opacity: 0.65;
      }

      to {
        opacity: 1;
      }
    }

    .focus-blast-preview {
      padding: 54px 16px 42px;
      color: #1a1a1b;
      max-width: 552px;
      margin: 0 auto;
    }

    .focus-blast-header {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 12px;
      text-align: left;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid #e0e0e0;
    }

    .focus-blast-header-content {
      min-width: 0;
    }

    .focus-blast-title {
      margin: 0;
      font-family: 'AnthropicSerif', 'Georgia', serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: #1a1a1b;
      letter-spacing: -0.01em;
      line-height: 1.15;
    }

    .focus-blast-subtitle {
      margin: 2px 0 0;
      font-size: 0.82rem;
      font-family: 'AnthropicSans', sans-serif;
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
      color: #787878;
    }

    .focus-blast-instructions {
      text-align: center;
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 14px 0 6px;
      margin-bottom: 0;
    }

    .focus-blast-instructions p {
      margin: 0;
      font-size: 0.88rem;
      color: #1a1a1b;
      line-height: 1.4;
      font-weight: 400;
    }

    .focus-blast-completed {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 8px;
    }

    .focus-blast-group {
      border-radius: 10px;
      padding: 14px 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      animation: fb-group-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes fb-group-pop {
      0% { transform: scale(0.92); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    .focus-blast-group-label {
      font-weight: 800;
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      /* Poppins/Arial provide a real bold face; AnthropicSans only ships 400. */
      font-family: 'Poppins', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    }

    .focus-blast-group-words {
      font-weight: 500;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.01em;
    }

    .focus-blast-group.color-0 { background: #f9df6d; color: #1a1a1b; }
    .focus-blast-group.color-1 { background: #a0c35a; color: #1a1a1b; }
    .focus-blast-group.color-2 { background: #b0c4ef; color: #1a1a1b; }
    .focus-blast-group.color-3 { background: #ba81c5; color: #1a1a1b; }

    .focus-blast-words {
      display: grid;
      /* minmax(0, 1fr) keeps all four columns exactly equal so a long word
         (e.g. CONFLAGRATION) can never stretch its own column — tiles match
         the in-product Connections grid instead of adapting to word length. */
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 0;
    }

  .focus-blast-words .focus-blast-word {
    border: none;
    background: #f3f2eb;
    border-radius: 10px;
    padding: 0 2px;
    text-align: center;
    /* Sized to fit the longest word inside this compact preview board
       while reading like the in-product tiles. */
    font-size: 0.84rem;
    font-weight: 700;
    color: #1a1a1b;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    height: 58px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.015em;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    /* Beat .quest-preview-main-content button { font-family: inherit } */
    font-family: 'Poppins', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  }

  .focus-blast-words .focus-blast-word:hover:not(.selected) {
    background: #e9e8e0;
  }

    .focus-blast-words .focus-blast-word.selected {
      background: #5a594e;
      color: #ffffff;
      transform: scale(0.97);
    }

    .focus-blast-words .focus-blast-word.used {
      display: none;
    }

    /* Answer-reveal cube colors (mirrors the in-product Connections reveal). */
    .focus-blast-words .focus-blast-word.reveal-0 { background: #f9df6d; color: #1a1a1b; pointer-events: none; }
    .focus-blast-words .focus-blast-word.reveal-1 { background: #a0c35a; color: #1a1a1b; pointer-events: none; }
    .focus-blast-words .focus-blast-word.reveal-2 { background: #b0c4ef; color: #1a1a1b; pointer-events: none; }
    .focus-blast-words .focus-blast-word.reveal-3 { background: #ba81c5; color: #1a1a1b; pointer-events: none; }

    .focus-blast-group.reveal-bar {
      box-sizing: border-box;
      padding: 8px 14px;
      gap: 2px;
      margin: 0;
      border-radius: 10px;
      justify-content: center;
    }

    .focus-blast-group.reveal-bar .focus-blast-group-label { font-size: 0.82rem; line-height: 1.1; }
    .focus-blast-group.reveal-bar .focus-blast-group-words { font-size: 0.7rem; line-height: 1.1; }

    .focus-blast-mistakes-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 14px 0 4px;
    }

    .focus-blast-mistakes-label {
      font-size: 0.78rem;
      color: #787878;
      font-weight: 400;
      margin: 0;
    }

    .focus-blast-mistakes-dots {
      display: flex;
      gap: 5px;
      align-items: center;
    }

    .focus-blast-mistakes-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #5a594e;
      transition: background 0.25s ease, transform 0.25s ease;
    }

    .focus-blast-mistakes-dot.lost {
      background: #d4d4d0;
      transform: scale(0.85);
    }

    .focus-blast-actions {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 42px;
      margin-bottom: 42px;
    }

    .focus-blast-btn {
      border-radius: 999px;
      border: 1px solid #1a1a1b;
      background: #ffffff;
      color: #1a1a1b;
      padding: 9px 20px;
      font-weight: 600;
      font-size: 0.82rem;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
      font-family: 'AnthropicSans', sans-serif;
    }

    .focus-blast-btn:hover {
      background: #1a1a1b;
      color: #ffffff;
    }

    .focus-blast-btn:disabled {
      border-color: #c8c8c0;
      color: #c8c8c0;
      cursor: default;
      background: #ffffff;
      pointer-events: none;
    }

    .focus-blast-btn.primary {
      background: #1a1a1b;
      color: #ffffff;
      border-color: #1a1a1b;
    }

    .focus-blast-btn.primary:hover {
      background: #333;
    }

    .focus-blast-btn.primary:disabled {
      background: #c8c8c0;
      border-color: #c8c8c0;
      color: #ffffff;
      cursor: default;
      pointer-events: none;
    }

    .focus-blast-feedback {
      margin: 6px 0 0;
      min-height: 20px;
      font-size: 0.82rem;
      line-height: 1.4;
      font-weight: 600;
      color: #1a1a1b;
      text-align: center;
    }

    .focus-blast-define-prompt {
      background: #fff7d6;
      border: 1px solid #f0d878;
      color: #5a4500;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 0.78rem;
      font-weight: 500;
      text-align: center;
      margin: 6px 0 0;
      animation: fb-group-pop 0.25s ease;
    }

    .focus-blast-define-prompt.hidden { display: none; }

    .focus-blast-define-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(20, 20, 24, 0.55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 16px;
      animation: fb-modal-fade 0.18s ease;
    }

    .focus-blast-define-modal-backdrop.open { display: flex; }

    @keyframes fb-modal-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .focus-blast-define-modal {
      background: #ffffff;
      border-radius: 14px;
      max-width: 520px;
      width: 100%;
      max-height: 80vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
      animation: fb-group-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .focus-blast-define-modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid #ececec;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .focus-blast-define-modal-title {
      margin: 0;
      font-family: 'AnthropicSerif', 'Georgia', serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: #1a1a1b;
    }

    .focus-blast-define-modal-close {
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 1.4rem;
      line-height: 1;
      color: #5a594e;
      padding: 4px 8px;
      border-radius: 6px;
    }

    .focus-blast-define-modal-close:hover {
      background: #f3f3f3;
      color: #1a1a1b;
    }

    .focus-blast-define-modal-body {
      padding: 12px 20px 20px;
      overflow-y: auto;
    }

    .focus-blast-define-entry {
      padding: 14px 0;
      border-bottom: 1px solid #f0f0f0;
    }

    .focus-blast-define-entry:last-child {
      border-bottom: none;
    }

    .focus-blast-define-entry-word {
      font-family: 'AnthropicSerif', 'Georgia', serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: #1a1a1b;
      text-transform: lowercase;
      margin: 0 0 6px;
    }

    .focus-blast-define-entry-meaning {
      margin: 4px 0;
      font-size: 0.86rem;
      line-height: 1.45;
      color: #2c2c2d;
    }

    .focus-blast-define-entry-pos {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #6a6a6a;
      background: #f3f3f3;
      padding: 2px 7px;
      border-radius: 999px;
      margin-right: 6px;
    }

    .focus-blast-define-not-found {
      margin-top: 10px;
      font-size: 0.78rem;
      color: #b91c1c;
    }

    .focus-blast-define-loading,
    .focus-blast-define-error {
      padding: 24px 16px;
      text-align: center;
      color: #5a594e;
      font-size: 0.88rem;
    }

    .focus-blast-define-error { color: #b91c1c; }

    .focus-blast-btn.define {
      border-color: #1a1a1b;
      color: #1a1a1b;
      background: #ffffff;
    }

    .focus-blast-btn.define.focus-blast-define-inline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      height: auto;
      color: #1a1a1b;
      background: #ffffff;
      border: 1px solid #1a1a1b;
      border-radius: 999px;
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      align-self: flex-end;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .focus-blast-btn.define.focus-blast-define-inline::before {
      content: "";
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      background-color: currentColor;
      -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
      mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
    }

    .focus-blast-btn.define.focus-blast-define-inline:focus,
    .focus-blast-btn.define.focus-blast-define-inline:hover {
      background: #1a1a1b;
      color: #ffffff;
      border-color: #1a1a1b;
    }

    .focus-blast-btn.define.focus-blast-define-inline.is-active {
      background: #0f766e;
      border-color: #0f766e;
      color: #ffffff;
      box-shadow: 0 2px 10px rgba(15, 118, 110, 0.28);
    }

    .focus-blast-btn.define.focus-blast-define-inline.is-active:hover {
      background: #0c5f59;
      border-color: #0c5f59;
      color: #ffffff;
    }

    .focus-blast-btn.define.focus-blast-define-inline.is-active::before {
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    }

    /* Game mode subtabs */
    .quest-preview-topbar.game-mode-topbar {
      flex-wrap: wrap;
      gap: 10px;
    }

    .game-mode-selector {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .game-subtab {
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.84);
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      padding: 5px 10px;
      line-height: 1;
      cursor: pointer;
      border-radius: 999px;
      transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    .game-subtab:hover {
      color: #ffffff;
      border-color: #ffffff;
      background: rgba(255, 255, 255, 0.15);
    }

    .game-subtab.active {
      color: #111827;
      background: #fff;
      border-color: #fff;
    }

    .game-subtab.is-coming-soon {
      opacity: 0.76;
      border-style: dashed;
      cursor: default;
    }

    .game-subtab.is-coming-soon:hover {
      color: rgba(255, 255, 255, 0.84);
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.35);
    }

    .game-slides-viewport {
      overflow: hidden;
      border-radius: 0 0 14px 14px;
    }

    @media (min-width: 768px) {
      .use-wordlize-showcase .game-slides-viewport {
        border-radius: 14px;
      }
    }

    .game-slides-track {
      display: flex;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .game-slide {
      min-width: 100%;
      flex-shrink: 0;
      background: #ffffff;
    }

    .use-wordlize-showcase.track-active {
      grid-template-columns: 1fr;
    }

    .use-wordlize-showcase.track-active .use-wordlize-cards {
      display: none;
    }

    .use-wordlize-showcase.tab-practice .use-wordlize-cards {
      display: none;
    }

    .use-wordlize-showcase.tab-practice {
      grid-template-columns: 1fr;
    }

    .use-wordlize-tab-panel > .use-wordlize-terminal {
      border-radius: 14px;
    }

    /* ========================================
       PROGRESS PREVIEW (Track tab)
       ======================================== */
    .prog-wrapper {
      padding: 14px 16px 12px;
      font-family: 'AnthropicSans', 'Poppins', sans-serif;
      color: #2d3748;
    }

    .prog-header {
      text-align: center;
      margin-bottom: 16px;
    }

    .prog-title {
      font-family: 'AnthropicSerif', 'Georgia', serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: #2d3748;
      letter-spacing: -0.01em;
      line-height: 1.15;
      margin: 0 0 2px;
    }

    .prog-subtitle {
      font-size: 0.72rem;
      color: #718096;
      font-weight: 500;
      margin: 0;
    }

    .prog-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 2fr;
      gap: 8px;
      margin-bottom: 14px;
    }

    .prog-main > .prog-stats,
    .prog-main > .prog-ring-section,
    .prog-main > .prog-word-lists {
      width: 85%;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }

    .prog-stat-card {
      border-radius: 14px;
      padding: 12px 10px;
      text-align: center;
      border: 1.5px solid;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .prog-stat-card.purple {
      align-items: stretch;
      text-align: left;
    }

    .prog-stat-card.green  { background: #dcfce7; border-color: #86efac; }
    .prog-stat-card.blue   { background: #dbeaff; border-color: #93c5fd; }
    .prog-stat-card.purple { background: #f3e8ff; border-color: #d8b4fe; }

    .prog-stat-val {
      font-size: 1.3rem;
      font-weight: 700;
      line-height: 1.1;
      margin: 0;
    }

    .prog-stat-card.green .prog-stat-val { color: #16a34a; }
    .prog-stat-card.blue .prog-stat-val { color: #2563eb; }
    .prog-stat-card.purple .prog-stat-val { color: #8b5cf6; }

    .prog-stat-label {
      font-size: 0.65rem;
      color: #64748b;
      margin: 2px 0 0;
      font-weight: 500;
    }

    .prog-goal-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .prog-goal-left .prog-stat-val {
      font-size: 1rem;
      margin-bottom: 2px;
    }

    .prog-goal-right {
      text-align: right;
      border-left: 1.5px solid #d8b4fe;
      padding-left: 12px;
    }

    .prog-on-track {
      font-size: 0.8rem;
      font-weight: 600;
      color: #16a34a;
      margin: 0;
    }

    .prog-on-track-msg {
      font-size: 0.65rem;
      color: #64748b;
      margin: 0;
      line-height: 1.3;
    }

    .prog-ring-section {
      background: #ffffff;
      border-radius: 16px;
      padding: 18px;
      margin-bottom: 12px;
      border: 1.5px solid #e2e8f0;
    }

    .prog-ring-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      flex-wrap: wrap;
    }

    .prog-ring {
      position: relative;
      width: 120px;
      height: 120px;
      flex-shrink: 0;
    }

    .prog-ring svg {
      transform: rotate(-90deg);
    }

    .prog-ring .ring-bg {
      fill: none;
      stroke: #e5e7eb;
      stroke-width: 10;
    }

    .prog-ring .ring-progress {
      fill: none;
      stroke-width: 10;
      stroke-linecap: round;
    }

    .prog-ring .ring-mastered { stroke: #059669; }
    .prog-ring .ring-learning { stroke: #3b82f6; }
    .prog-ring .ring-inprogress { stroke: #9ca3af; }

    .prog-ring-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .prog-ring-pct {
      font-size: 1.4rem;
      font-weight: 700;
      color: #2d3748;
      line-height: 1;
    }

    .prog-ring-label {
      font-size: 0.62rem;
      color: #718096;
    }

    .prog-breakdown {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 140px;
    }

    .prog-breakdown-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .prog-breakdown-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .prog-breakdown-dot.mastered { background: #059669; }
    .prog-breakdown-dot.learning { background: #3b82f6; }
    .prog-breakdown-dot.new { background: #9ca3af; }

    .prog-breakdown-info {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .prog-breakdown-name {
      font-size: 0.76rem;
      color: #4a5568;
      font-weight: 500;
    }

    .prog-breakdown-count {
      font-size: 0.76rem;
      font-weight: 600;
    }

    .prog-breakdown-item.green .prog-breakdown-count { color: #059669; }
    .prog-breakdown-item.blue .prog-breakdown-count { color: #3b82f6; }
    .prog-breakdown-item.gray .prog-breakdown-count { color: #718096; }

    .prog-word-lists {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }

    .prog-word-card {
      background: #ffffff;
      border-radius: 14px;
      padding: 12px;
      border: 1.5px solid #e2e8f0;
      max-height: 180px;
      display: flex;
      flex-direction: column;
    }

    .prog-word-card.green { border-color: #86efac; }
    .prog-word-card.blue  { border-color: #93c5fd; }
    .prog-word-card.gray  { border-color: #cbd5e1; }

    .prog-word-card-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid #e2e8f0;
    }

    .prog-word-card.green .prog-word-card-header { border-bottom-color: #bbf7d0; }
    .prog-word-card.blue  .prog-word-card-header { border-bottom-color: #bfdbfe; }
    .prog-word-card.gray  .prog-word-card-header { border-bottom-color: #e2e8f0; }

    .prog-word-icon {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      font-weight: 700;
    }

    .prog-word-icon.mastered { background: rgba(5, 150, 105, 0.12); color: #059669; }
    .prog-word-icon.learning { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
    .prog-word-icon.nextup { background: rgba(156, 163, 175, 0.15); color: #6b7280; }

    .prog-word-card-title {
      font-size: 0.76rem;
      font-weight: 600;
      color: #2d3748;
      margin: 0;
    }

    .prog-word-card-count {
      font-size: 0.62rem;
      color: #718096;
      margin-left: auto;
    }

    .prog-word-card.green .prog-word-card-title { color: #059669; }
    .prog-word-card.blue .prog-word-card-title { color: #3b82f6; }
    .prog-word-card.gray .prog-word-card-title { color: #718096; }

    .prog-word-list {
      flex: 1;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #d1d5db transparent;
    }

    .prog-word-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 0;
      border-bottom: 1px dashed #e5e7eb;
      font-size: 0.72rem;
      color: #2d3748;
      font-weight: 500;
    }

    .prog-word-item:last-child {
      border-bottom: none;
    }

    .prog-activity-section {
      background: #ffffff;
      border-radius: 14px;
      padding: 14px;
      border: 1.5px solid #e2e8f0;
    }

    .prog-activity-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .prog-activity-title {
      font-size: 0.82rem;
      font-weight: 600;
      color: #2d3748;
      margin: 0;
    }

    .prog-streak-badge {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 0.68rem;
      font-weight: 600;
      color: #ea580c;
      background: rgba(234, 88, 12, 0.08);
      padding: 2px 7px 2px 5px;
      border-radius: 8px;
    }

    .prog-streak-badge svg {
      width: 12px;
      height: 12px;
    }

    .prog-activity-stat {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
    }

    .prog-activity-val {
      font-size: 1.2rem;
      font-weight: 700;
      color: #2d3748;
      line-height: 1.1;
      margin: 0;
    }

    .prog-activity-label {
      font-size: 0.6rem;
      color: #94a3b8;
      font-weight: 500;
      margin: 0;
    }

    .prog-heatmap-labels {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
      margin-bottom: 2px;
    }

    .prog-heatmap-labels span {
      font-size: 0.5rem;
      font-weight: 500;
      color: #94a3b8;
      text-align: center;
      line-height: 1;
      user-select: none;
    }

    .prog-heatmap-grid {
      display: flex;
      flex-direction: column;
      gap: 3px;
      margin-bottom: 6px;
    }

    .prog-heatmap-week {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
    }

    .prog-heatmap-cell {
      aspect-ratio: 1;
      border-radius: 2px;
    }

    .prog-heatmap-cell.l0 { background: #eef2f7; }
    .prog-heatmap-cell.l1 { background: #bfdbfe; }
    .prog-heatmap-cell.l2 { background: #7cb3f5; }
    .prog-heatmap-cell.l3 { background: #3b82f6; }
    .prog-heatmap-cell.l4 { background: #1d4ed8; }
    .prog-heatmap-cell.future { background: transparent; }

    .prog-heatmap-legend {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
    }

    .prog-heatmap-legend-label {
      font-size: 0.5rem;
      color: #94a3b8;
      font-weight: 500;
      margin: 0 2px;
    }

    .prog-heatmap-legend-cell {
      width: 8px;
      height: 8px;
      border-radius: 2px;
    }

    .prog-layout {
      display: flex;
      gap: 0;
      align-items: flex-start;
    }

    .prog-main {
      flex: 1;
      min-width: 0;
    }

    .prog-sidebar {
      width: 160px;
      flex-shrink: 0;
      position: relative;
      left: -5%;
    }

    @media (max-width: 767px) {
      .prog-layout {
        flex-direction: column;
      }

      /* Activity tracker: move to the very top and align it exactly with the
         cards below (same 85% width, centered; cancel the base -5% sidebar
         shift so the outlines line up). */
      .prog-sidebar {
        order: -1;
        width: 85%;
        margin: 0 auto 14px;
        left: 0;
      }

      /* Lay the whole card out horizontally — text block on the left, heatmap
         filling the right — so the container is a short, wide (~2x8) rectangle
         instead of a tall square. */
      .prog-activity-section {
        display: grid;
        grid-template-columns: minmax(72px, auto) 1fr;
        column-gap: 12px;
        align-items: center;
        padding: 10px 12px;
      }
      .prog-activity-header {
        grid-column: 1;
        grid-row: 1;
        gap: 8px;
        margin: 0 0 2px;
      }
      .prog-activity-stat { grid-column: 1; grid-row: 2; margin: 0; }
      .prog-activity-val { font-size: 0.95rem; }
      .prog-activity-label { font-size: 0.55rem; line-height: 1.2; }

      /* Heatmap: weeks as columns (13), days as rows (7), filling the right. */
      .prog-heatmap-grid {
        grid-column: 2;
        grid-row: 1 / 3;
        flex-direction: row;
        gap: 2px;
        align-self: center;
        margin: 0;
      }
      .prog-heatmap-week {
        grid-template-columns: 1fr;   /* 7 day-cells stack into a column */
        flex: 1 1 0;
        min-width: 0;
        gap: 2px;
      }
      .prog-heatmap-cell {
        aspect-ratio: auto;
        height: 5px;
      }
      /* Labels + legend only fit the vertical layout; drop them here. */
      .prog-heatmap-labels { display: none; }
      .prog-heatmap-legend { display: none; }

      .prog-stats {
        grid-template-columns: 1fr 1fr;
      }

      .prog-stats .prog-stat-card:nth-child(3) {
        grid-column: span 2;
      }

      .prog-word-lists {
        grid-template-columns: 1fr;
      }

      /* Match the real progress page on mobile: a clean sans (Poppins) title
         at the same fluid size, not a serif. */
      .prog-title {
        font-family: 'Poppins', 'AnthropicSans', sans-serif;
        font-size: clamp(1.35rem, 5vw, 2rem);
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      .prog-subtitle {
        font-size: clamp(0.8rem, 3vw, 1rem);
      }

      /* Goal card: stack its two halves and center them (like the real page)
         instead of cramming them into a divided row. */
      .prog-goal-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 10px;
      }
      .prog-goal-left { text-align: center; }
      .prog-goal-left .prog-stat-val { font-size: 1.1rem; }
      .prog-goal-right {
        text-align: center;
        border-left: none;
        border-top: 1.5px solid #d8b4fe;
        padding-left: 0;
        padding-top: 10px;
      }
      .prog-on-track-msg { font-size: 0.72rem; }
    }

    .daily-tab-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      padding: 18px 16px;
    }

    .daily-card {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      padding: 28px 22px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .daily-card-title {
      margin: 0 0 16px;
      font-family: 'AnthropicSerif', 'Georgia', serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: #1a1a2e;
      letter-spacing: -0.01em;
      line-height: 1.15;
    }

    .daily-stats-row {
      display: flex;
      gap: 0;
      background: #f1f5f9;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 20px;
      width: 100%;
    }

    .daily-stat {
      flex: 1;
      padding: 12px 8px;
      text-align: center;
    }

    .daily-stat + .daily-stat {
      border-left: 1px solid #e2e8f0;
    }

    .daily-stat-num {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 700;
      color: #1a1a2e;
    }

    .daily-stat-label {
      margin: 2px 0 0;
      font-size: 0.7rem;
      color: #64748b;
      font-weight: 500;
    }

    .daily-progress-label {
      margin: 0 0 8px;
      font-size: 0.82rem;
      font-weight: 600;
      color: #1a1a2e;
      width: 100%;
      text-align: left;
    }

    .daily-progress-bar {
      width: 100%;
      height: 8px;
      background: #e2e8f0;
      border-radius: 99px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .daily-progress-fill {
      width: 35%;
      height: 100%;
      background: linear-gradient(90deg, #d1fae5 0%, #86efac 50%, #22c55e 100%);
      border-radius: 99px;
    }

    .daily-meta-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 22px;
    }

    .daily-meta-item {
      text-align: left;
    }

    .daily-meta-item:last-child {
      text-align: right;
    }

    .daily-meta-key {
      margin: 0;
      font-size: 0.72rem;
      color: #94a3b8;
      font-weight: 500;
    }

    .daily-meta-val {
      margin: 2px 0 0;
      font-size: 0.95rem;
      font-weight: 700;
      color: #1a1a2e;
    }

    .daily-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 28px;
      border-radius: 999px;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.88rem;
      font-weight: 600;
      color: #1a1a2e;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .daily-btn:hover {
      border-color: #94a3b8;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .daily-tokens-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f1f5f9;
      border-radius: 999px;
      padding: 6px 16px;
      margin-bottom: 14px;
      font-size: 0.82rem;
      font-weight: 600;
      color: #1a1a2e;
    }

    .daily-tokens-label {
      font-weight: 500;
      color: #64748b;
    }

    .daily-card-desc {
      margin: 0 0 18px;
      font-size: 0.86rem;
      line-height: 1.5;
      color: #64748b;
      font-weight: 400;
    }

    .daily-games-list {
      width: 100%;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid rgba(15, 23, 42, 0.06);
      overflow: hidden;
      margin-bottom: 20px;
    }

    .daily-game-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 11px 16px;
    }

    .daily-game-row + .daily-game-row {
      border-top: 1px solid rgba(15, 23, 42, 0.05);
    }

    .daily-game-name {
      font-size: 0.86rem;
      font-weight: 600;
      color: #1a1a2e;
    }

    .daily-game-name.dimmed {
      color: #94a3b8;
      font-weight: 500;
    }

    .daily-game-tag {
      font-size: 0.72rem;
      font-weight: 500;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    @media (max-width: 767px) {
      .daily-tab-layout {
        grid-template-columns: 1fr;
      }
    }

    .quest-preview-answer-option {
      position: relative;
    }

    .quest-preview-option-input {
      display: none;
    }

    .quest-preview-option {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 12px;
      border: 1px solid #dbeafe;
      border-radius: 12px;
      background: #ffffff;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.84rem;
      line-height: 1.35;
      color: #1f2937;
      min-height: 62px;
      box-sizing: border-box;
    }

    .quest-preview-option:hover {
      border-color: #93c5fd;
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(59, 130, 246, 0.16);
    }

    .quest-preview-input:checked + label {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
    }

    .quest-preview-option-letter {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #f1f5f9;
      border: 2px solid #e2e8f0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .quest-preview-option-text {
      display: inline-block;
      flex: 1;
      min-width: 0;
    }

    .quest-preview-submit {
      width: 100%;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      background: linear-gradient(135deg, #60a5fa, #34d399);
      color: #ffffff;
      padding: 11px;
      font-weight: 700;
      font-size: 0.92rem;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 10px 22px rgba(96, 165, 250, 0.35);
    }

    .quest-preview-submit.enabled {
      cursor: pointer;
      background: linear-gradient(135deg, #60a5fa, #34d399);
      border-color: rgba(255, 255, 255, 0.4);
      color: #ffffff;
      box-shadow: 0 10px 22px rgba(96, 165, 250, 0.35);
    }

    .quest-preview-submit:disabled {
      cursor: not-allowed;
      opacity: 1;
      filter: none;
      background: linear-gradient(135deg, #60a5fa, #34d399);
      border-color: rgba(255, 255, 255, 0.4);
      color: #ffffff;
      box-shadow: 0 10px 22px rgba(96, 165, 250, 0.35);
    }

    .quest-preview-submit:hover,
    .quest-preview-submit:focus-visible,
    .quest-preview-submit:active {
      background: linear-gradient(135deg, #60a5fa, #34d399);
      border-color: rgba(255, 255, 255, 0.4);
      color: #ffffff;
      box-shadow: 0 10px 22px rgba(96, 165, 250, 0.35);
    }

    .penurious-continue-btn {
      margin-top: 14px;
      border: none;
      background: #000000;
      border: 1px solid #000000;
      color: #ffffff;
    }

    .penurious-continue-btn:hover,
    .penurious-continue-btn:focus-visible,
    .penurious-continue-btn:active {
      background: #000000;
      border: 1px solid #000000;
      color: #ffffff;
    }

    .quest-preview-option-shade-1 {
      background: #fef2f2;
      border-color: #fecaca;
    }

    .quest-preview-option-shade-2 {
      background: #f0fdf4;
      border-color: #bbf7d0;
    }

    .quest-preview-option-shade-3 {
      background: #eff6ff;
      border-color: #bfdbfe;
    }

    .quest-preview-option-shade-4 {
      background: #fefce8;
      border-color: #fde68a;
    }

    .quest-preview-input:checked + .quest-preview-option-shade-1 {
      border-color: #2563eb;
      background: #fef2f2;
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
    }

    .quest-preview-input:checked + .quest-preview-option-shade-2 {
      border-color: #2563eb;
      background: #f0fdf4;
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
    }

    .quest-preview-input:checked + .quest-preview-option-shade-3 {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
    }

    .quest-preview-input:checked + .quest-preview-option-shade-4 {
      border-color: #2563eb;
      background: #fefce8;
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
    }

    .penurious-question-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .penurious-back-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: #000000;
      color: #ffffff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: opacity 0.2s ease;
    }

    .penurious-back-btn:hover,
    .penurious-back-btn:focus-visible {
      opacity: 0.85;
    }

    .penurious-next-word-btn {
      flex: 1;
    }

    .penurious-next-word-btn:not(:disabled) {
      background: #000000;
      border: 1px solid #000000;
      color: #ffffff;
      box-shadow: none;
    }

    .penurious-next-word-btn:not(:disabled):hover,
    .penurious-next-word-btn:not(:disabled):focus-visible,
    .penurious-next-word-btn:not(:disabled):active {
      background: #000000;
      border: 1px solid #000000;
      color: #ffffff;
      box-shadow: none;
      opacity: 0.85;
    }

    .penurious-next-word-btn:disabled {
      background: #e5e7eb;
      border: 1px solid #d1d5db;
      color: #9ca3af;
      box-shadow: none;
      cursor: not-allowed;
      opacity: 1;
      filter: none;
    }

    .quest-preview-questions-left {
      text-align: center;
      margin-top: 8px;
      font-size: 0.78rem;
      color: #64748b;
      font-weight: 500;
    }

    .use-wordlize-terminal-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 18px;
      background: #252540;
    }

    .use-wordlize-terminal-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .use-wordlize-terminal-dot.red { background: #ff5f56; }
    .use-wordlize-terminal-dot.yellow { background: #ffbd2e; }
    .use-wordlize-terminal-dot.green { background: #27c93f; }

    .use-wordlize-terminal-content {
      padding: 24px;
      font-family: 'AnthropicMono', 'SF Mono', 'Fira Code', monospace;
      font-size: 0.85rem;
      line-height: 1.8;
      color: #e0dfe4;
    }

    .use-wordlize-terminal-content .tree-dir {
      color: #c4b5fd;
    }

    .use-wordlize-terminal-content .tree-file {
      color: #e0dfe4;
    }

    .use-wordlize-terminal-content .tree-branch {
      color: #6b7280;
    }

    .use-wordlize-cards {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: none;
      width: 100%;
      min-width: 0;
    }

    .use-wordlize-card,
    .use-wordlize-cards .wl-pointer-card {
      min-width: 0;
      overflow: visible;
    }

    .use-wordlize-card-label {
      white-space: nowrap;
    }

    .use-wordlize-showcase.tab-learn .use-wordlize-cards {
      align-self: start;
      gap: 10px;
    }

    .use-wordlize-showcase.tab-games .use-wordlize-cards {
      align-self: start;
      gap: 10px;
    }

    .use-wordlize-card {
      background: #2a2a3e;
      border-radius: 12px;
      padding: 20px 24px;
    }

    .use-wordlize-showcase.tab-learn .use-wordlize-card {
      padding: 16px 18px;
    }

    .use-wordlize-showcase.tab-games .use-wordlize-card {
      padding: 16px 18px;
    }

    .use-wordlize-card--tagline {
      padding: 12px 16px;
    }

    .use-wordlize-card-label {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      color: #ffffff;
      margin: 0 0 10px 0;
    }

    .use-wordlize-card--tagline .use-wordlize-card-label {
      margin-bottom: 0;
    }

    .use-wordlize-showcase.tab-learn .use-wordlize-card:not(.use-wordlize-card--tagline) .use-wordlize-card-label {
      margin-bottom: 8px;
    }

    .use-wordlize-showcase.tab-games .use-wordlize-card .use-wordlize-card-label {
      margin-bottom: 8px;
    }

    .use-wordlize-card-text {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.82rem;
      line-height: 1.6;
      color: #c0bfc4;
      margin: 0;
    }

    .use-wordlize-footnote-mark {
      font-size: 0.54rem;
      line-height: 1;
      margin-left: 1px;
      vertical-align: super;
      color: rgba(192, 191, 196, 0.72);
      opacity: 0.75;
    }

    .use-wordlize-card-footnote {
      margin: 4px 0 0 0;
      font-size: 0.58rem;
      line-height: 1.25;
      color: rgba(192, 191, 196, 0.68);
    }

    /* Learn-tab sidebar cards (desktop): keep the existing muted card style. */
    .use-wordlize-card-text:empty {
      display: none;
    }

    .use-wordlize-card-text .uwc-intro {
      display: block;
      margin-bottom: 6px;
    }

    .use-wordlize-card-text .uwc-em {
      font-size: inherit;
      font-weight: 600;
      color: #ffffff;
    }

    .use-wordlize-card-text .uwc-bullet {
      display: block;
      position: relative;
      padding-left: 14px;
      margin-top: 4px;
      line-height: 1.45;
    }

    .use-wordlize-card-text .uwc-bullet::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 0.62em;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(192, 191, 196, 0.55);
    }

    .use-wordlize-card-text .uwc-style-pills {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      margin-top: 10px;
    }

    .use-wordlize-card-text .uwc-style-pill {
      box-sizing: border-box;
      width: 100%;
      text-align: center;
      padding: 6px 8px;
      border-radius: 7px;
      font-size: 0.72rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.01em;
      white-space: nowrap;
      color: #c0bfc4;
      background: rgba(255, 255, 255, 0.05);
      border: 1.5px solid rgba(255, 255, 255, 0.1);
    }

    .use-wordlize-card-text .uwc-sr-graphic {
      display: block;
      margin-top: 10px;
      padding: 10px 8px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .use-wordlize-card-text .uwc-sr-graphic svg {
      display: block;
      width: 100%;
      height: auto;
    }

    /* Mobile-only learn tab copy (replaces purple cards below 767px) */
    .wl-learn-mobile {
      display: none;
    }

    .wl-learn-mobile-block {
      display: flex;
      flex-direction: column;
    }

    .wl-learn-mobile-block + .wl-learn-mobile-block {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid rgba(91, 33, 182, 0.14);
    }

    .wl-learn-mobile-section-title {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.94rem;
      font-weight: 600;
      color: #27272a;
      margin: 0 0 14px;
      line-height: 1.45;
      letter-spacing: -0.015em;
    }

    .wl-learn-mobile-section-title em {
      font-style: italic;
      font-weight: 600;
    }

    .wl-learn-style-cards {
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
    }

    .wl-learn-style-card {
      flex: 1 1 0;
      min-width: 0;
      text-align: center;
      padding: 11px 10px;
      border-radius: 11px;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.78rem;
      font-weight: 500;
      color: #3f3f46;
      letter-spacing: -0.01em;
      line-height: 1.2;
      white-space: nowrap;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.85);
      box-shadow: 0 1px 2px rgba(91, 33, 182, 0.06);
    }

    .wl-learn-style-card:nth-child(1) {
      background: rgba(255, 255, 255, 0.78);
    }

    .wl-learn-style-card:nth-child(2) {
      background: rgba(255, 255, 255, 0.72);
    }

    .wl-learn-style-card:nth-child(3) {
      background: rgba(255, 255, 255, 0.72);
    }

    .wl-sr-graphic {
      padding: 18px 14px 12px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 2px 8px rgba(91, 33, 182, 0.08);
    }

    .wl-sr-graphic svg {
      display: block;
      width: 100%;
      height: auto;
    }

    @media (max-width: 767px) {
      .use-wordlize-showcase.tab-learn .quest-preview-window .wl-learn-mobile {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin-top: 20px;
        padding: 20px 0 0;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        background: transparent;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .use-wordlize-showcase.tab-learn .wl-learn-mobile-section-title {
        text-align: center;
      }

      .use-wordlize-showcase.tab-learn .quest-preview-question-wrapper {
        background: transparent;
        padding: 0;
        border-radius: 0;
      }

      .use-wordlize-showcase.tab-learn .use-wordlize-cards {
        display: none;
      }

      .use-wordlize-showcase.tab-games {
        /* Match the blue showcase margin (padding) on the sides. */
        gap: 12px;
      }
    }

    /* Preview panels: frosted card (matches GRE wordset card), no browser chrome */
    .use-wordlize-showcase .use-wordlize-terminal {
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      overflow: visible;
    }

    .use-wordlize-showcase .quest-preview-window {
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 14px;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
      backdrop-filter: blur(14px) saturate(140%);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      padding: 14px 12px 12px;
      overflow: hidden;
      min-height: 0;
    }

    .use-wordlize-showcase.tab-learn .quest-preview-window {
      box-shadow: 0 2px 8px rgba(91, 33, 182, 0.08);
    }

    .use-wordlize-showcase.tab-practice .quest-preview-window {
      box-shadow: 0 2px 8px rgba(16, 120, 60, 0.08);
    }

    .use-wordlize-showcase.tab-track .quest-preview-window {
      box-shadow: 0 2px 8px rgba(180, 120, 40, 0.08);
    }

    /* Remove fake browser topbar (dots + url) on all tabs */
    .use-wordlize-showcase .quest-preview-topbar .quest-preview-dot,
    .use-wordlize-showcase .quest-preview-topbar .quest-preview-url {
      display: none;
    }

    .use-wordlize-showcase .quest-preview-topbar:not(.game-mode-topbar) {
      display: none;
    }

    /* Games subtab row lives inside the frosted card — no gray/blue chin bar */
    .use-wordlize-showcase .quest-preview-topbar.game-mode-topbar {
      display: none;
    }

    /* Games subtab row: minimal black underline tabs (not pills). */
    .use-wordlize-showcase .game-mode-selector {
      display: none;
      position: static;
      margin: 0;
      width: auto;
      flex: 0 0 auto;
      align-items: center;
      justify-content: flex-start;
      gap: 22px;
      min-width: 0;
    }

    .use-wordlize-showcase.tab-games .game-mode-selector {
      display: flex;
      flex-wrap: nowrap;
    }

    .use-wordlize-showcase.tab-games .game-subtab-wrap {
      display: contents;
    }

    .use-wordlize-showcase.tab-games .game-subtab {
      flex: 0 0 auto;
      min-width: 0;
      min-height: 0;
      height: auto;
      margin: 0;
      padding: 2px 0 5px;
      border: none;
      border-radius: 0;
      background: transparent;
      color: rgba(0, 0, 0, 0.42);
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1;
      box-shadow: none;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      cursor: pointer;
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    .use-wordlize-showcase.tab-games .game-subtab:hover {
      background: transparent;
      color: rgba(0, 0, 0, 0.65);
      border-color: transparent;
    }

    .use-wordlize-showcase.tab-games .game-subtab.active {
      background: transparent;
      color: #000000;
      border-bottom-color: #000000;
      box-shadow: none;
    }

    .use-wordlize-showcase.tab-games .game-subtab.active:hover {
      color: #000000;
      border-bottom-color: #000000;
    }

    .use-wordlize-showcase.tab-games .game-subtab.is-coming-soon,
    .use-wordlize-showcase.tab-games .game-subtab.is-coming-soon:hover {
      display: none;
    }

    .use-wordlize-showcase.tab-games .game-subtab-nudge {
      display: none;
    }

    .use-wordlize-showcase .quest-preview-inner {
      padding: 0;
    }

    @media (max-width: 767px) {
      .use-wordlize-showcase.tab-learn .wl-learn-mobile-block + .wl-learn-mobile-block {
        border-top-color: rgba(0, 0, 0, 0.06);
      }

      .wl-learn-style-card {
        background: rgba(255, 255, 255, 0.55);
        border-color: rgba(0, 0, 0, 0.06);
      }

      .wl-sr-graphic {
        background: rgba(255, 255, 255, 0.55);
        border-color: rgba(0, 0, 0, 0.06);
        box-shadow: none;
      }
    }

    @media (max-width: 479px) {
      .wl-learn-mobile-section-title {
        font-size: 0.88rem;
        margin-bottom: 12px;
      }

      .wl-learn-style-card {
        font-size: 0.72rem;
        padding: 10px 5px;
      }

      .wl-learn-mobile-block + .wl-learn-mobile-block {
        margin-top: 20px;
        padding-top: 20px;
      }
    }

    .use-wordlize-bottom {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 48px;
      align-items: start;
      margin-top: 64px;
    }

    .use-wordlize-bottom-title {
      font-family: 'AnthropicSerif', serif;
      font-size: 2rem;
      font-weight: 400;
      color: #000000;
      margin: 0;
      letter-spacing: -0.01em;
    }

    .use-wordlize-bottom-body {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .use-wordlize-bottom-text {
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.95rem;
      line-height: 1.65;
      color: #5c5c5c;
      margin: 0;
    }

    .use-wordlize-bottom-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 20px;
      border: 1px solid #1a1a1a;
      border-radius: 8px;
      font-family: 'AnthropicSans', sans-serif;
      font-size: 0.9rem;
      font-weight: 400;
      color: #1a1a1a;
      text-decoration: none;
      background: none;
      cursor: pointer;
      transition: all 0.2s ease;
      width: fit-content;
    }

    .use-wordlize-bottom-btn:hover {
      background: #1a1a1a;
      color: #ffffff;
    }

    .uwb-label-mobile {
      display: none;
    }

    @media (max-width: 991px) {
      .use-wordlize-showcase {
        grid-template-columns: 1fr;
        padding: 32px;
      }

      .use-wordlize-cards {
        max-width: none;
      }

      .use-wordlize-bottom {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    @media (max-width: 767px) {
      .use-wordlize-heading {
        /* keep the title on one line: scale with viewport so it never wraps,
           capped at the original 2.2rem on wider phones/tablets */
        white-space: nowrap;
        font-size: clamp(1.1rem, 6.4vw, 2.2rem);
        /* Sit the tab chips directly beneath the heading text. */
        margin-bottom: 14px;
      }

      /* Mobile: the showcase title sits BEHIND the preview, centered, peeking
         over the top edge with its bottom ~8% cropped by the preview. */
      .use-wordlize-showcase-head {
        align-items: center;
        flex-direction: column;
        gap: 4px;
        position: relative;
        z-index: 2;
      }

      .use-wordlize-showcase-title {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        margin: 0;
        text-align: center;
        /* allow long titles (e.g. Learn) to wrap instead of overflowing */
        white-space: normal;
        text-wrap: balance;
        font-size: clamp(1rem, 5vw, 1.35rem);
        line-height: 1.12;
        z-index: 1;
        pointer-events: none;
      }

      /* The Games title is short — keep it on one line so the selector row's
         calculated offset (single-line title height) stays correct. */
      .use-wordlize-showcase.tab-games .use-wordlize-showcase-title {
        white-space: nowrap;
      }

      /* Learn: the long title sits fully ABOVE the preview (not peeking behind
         it) so it can wrap and stay readable, in the desktop title style. */
      .use-wordlize-showcase.tab-learn {
        gap: 0;
      }

      .use-wordlize-showcase.tab-learn .use-wordlize-showcase-title {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        margin: 2px 0 14px;
        padding: 0 4px;
        white-space: normal;
        text-wrap: balance;
        font-size: clamp(1.3rem, 5.6vw, 1.75rem);
        line-height: 1.15;
      }

      .use-wordlize-showcase.tab-learn .use-wordlize-tab-panel {
        margin-top: 0;
      }

      .use-wordlize-tab-panel {
        position: relative;
        z-index: 2;
        /* reserve room above the preview so the title peeks over its top edge,
           with roughly the bottom ~8% tucked behind the preview */
        margin-top: 2em;
      }

      .use-wordlize-showcase {
        padding: 16px;
      }

      .use-wordlize-tabs {
        gap: 4px;
        /* Space below the chips before the preview showcase. */
        margin-bottom: 18px;
      }

      .use-wordlize-tab {
        padding: 6px 12px;
        font-size: 0.82rem;
      }

      /* Mobile: button only — no heading or body copy. */
      .use-wordlize-bottom {
        margin-top: 24px;
        gap: 0;
        padding-left: 5%;
        padding-right: 5%;
        grid-template-columns: 1fr;
        justify-items: center;
      }
      .use-wordlize-section {
        padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
      }
      .use-wordlize-bottom-title {
        display: none;
      }
      .use-wordlize-bottom-text {
        display: none;
      }
      .use-wordlize-bottom-body {
        align-items: center;
        width: 100%;
      }
      .uwb-label-desktop {
        display: none;
      }
      .uwb-label-mobile {
        display: inline;
      }
    }

    @media (max-width: 479px) {
      .use-wordlize-showcase {
        padding: 12px;
      }

      .use-wordlize-showcase.tab-games {
        gap: 10px;
      }

      /* Sit the tab chips directly beneath the heading text. */
      .use-wordlize-heading {
        margin-bottom: 14px;
      }

      /* Mode selector → single non-wrapping row of content-hugging CHIPS.
         The chips always stay on ONE line: they share the row and shrink to
         fit when space is tight rather than wrapping or scrolling. No outer
         frame — the chips ARE the control. All four share one resting style;
         the selected one takes the navy fill, so the set reads as one control
         in two states. */
      .use-wordlize-tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 0;
        border: none;
        background: transparent;
        overflow: hidden;
      }

      .use-wordlize-tab {
        /* hug content, but allow shrinking so all four stay on one line */
        flex: 0 1 auto;
        min-width: 0;
        width: auto;
        white-space: nowrap;
        overflow: hidden;
        justify-content: center;
        gap: 5px;
        min-height: 0;
        /* ~20% shorter (38px -> 30px) via less vertical padding; font/line
           and inner sizing unchanged. */
        padding: 4px 11px;
        font-size: 13px;
        font-weight: 500;
        color: #454545;
        background: #f4f8ff;
        border: 1px solid #dce8fb;
        border-radius: 11px;
      }

      .use-wordlize-tab:hover {
        background: #e8f1fe;
        border-color: #aeccf6;
        color: #1a1a1a;
      }

      .use-wordlize-tab:active {
        transform: translateY(1px);
      }

      .use-wordlize-tab.active {
        background: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18);
      }

      .use-wordlize-tab svg {
        width: 14px;
        height: 14px;
      }

      .use-wordlize-card {
        padding: 16px 18px;
      }
    }

    @media (max-width: 479px) and (prefers-reduced-motion: reduce) {
      .use-wordlize-tab { transition: none; }
      .use-wordlize-tab:active { transform: none; }
    }

    /* Why Wordlize Section */

    /* =============================================
       PAGE LOAD-IN SYSTEM
       Curtain + staggered reveal for hero & social proof
       ============================================= */

    /* Curtain overlay — matches page bg, sits on top of everything */
    .page-curtain {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #faf9f6;
      pointer-events: none;
      opacity: 1;
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .page-curtain.lift {
      opacity: 0;
    }

    /* Hero text — left-to-right clip wipe (like fast typing) */
    .hero-reveal {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .hero-reveal.revealed {
      clip-path: inset(0 0% 0 0);
    }

    /* The headline's clip-path wipe otherwise clips flush to the box's bottom
       edge, shaving descenders on the last line (e.g. the "g" in "learning").
       Extend the bottom inset slightly so glyphs render in full; only the right
       inset still animates, so the wipe is unchanged. */
    .styled-headline.hero-reveal { clip-path: inset(0 100% -0.16em 0); }
    .styled-headline.hero-reveal.revealed { clip-path: inset(0 0% -0.16em 0); }

    /* Hero media panel — soft fade up (separate from text wipe) */
    .hero-reveal-media {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .hero-reveal-media.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* Navbar — appear with curtain lift, no translate */
    .nav-reveal {
      opacity: 0;
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-reveal.revealed {
      opacity: 1;
    }

    /* Social proof section — subtle fade up */
    .social-proof-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .social-proof-reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .page-curtain { transition-duration: 0.01ms !important; }
      .hero-reveal {
        clip-path: none !important;
        transition-duration: 0.01ms !important;
      }
      .hero-reveal-media,
      .nav-reveal,
      .social-proof-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition-duration: 0.01ms !important;
      }
    }


    /* Hero CTA Button Styles */
    .hero-cta-button {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 8px;
      margin: 0;
      width: fit-content;
      max-width: max-content;
      padding: 11px 20px;
      background: #141413;
      color: #ffffff;
      font-family: 'AnthropicSans', Arial, sans-serif;
      font-size: 0.95rem;
      font-weight: 500;
      text-decoration: none;
      border-radius: 8px;
      border: 1px solid #141413;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .hero-cta-button:hover {
      background: #0a0a09;
    }

    .hero-cta-button:active {
      background: #000000;
    }

    .hero-cta-text {
      position: relative;
    }

    .hero-cta-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
    }

    .hero-cta-button:hover .hero-cta-arrow {
      transform: translateX(3px);
    }

    .hero-cta-arrow svg {
      width: 18px;
      height: 18px;
    }

    .hero-cta-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .hero-cta-button--outline {
      background: transparent;
      color: #141413;
      border-color: #141413;
    }

    .hero-cta-button--outline:hover {
      background: rgba(20, 20, 19, 0.06);
      color: #141413;
    }

    .hero-cta-button--outline:active {
      background: rgba(20, 20, 19, 0.12);
    }

    /* "Improve my vocabulary" becomes the shorter "Learn words!" on mobile. */
    .hero-cta-text--short {
      display: none;
    }

    @media (max-width: 767px) {
      .hero-cta-button {
        padding: 10px 18px;
        font-size: 0.9rem;
      }

      .hero-cta-text--full {
        display: none;
      }

      .hero-cta-text--short {
        display: inline;
      }

      /* breathing room under the CTA buttons (~10% of viewport height) */
      .hero-cta-row {
        margin-bottom: 10vh;
      }
    }

    @media (max-width: 479px) {
      .hero-cta-button {
        padding: 9px 16px;
        font-size: 0.86rem;
      }

      .hero-cta-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        width: 100%;
      }

      .hero-cta-row .hero-cta-button {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        gap: 6px;
        padding: 9px 10px;
      }
    }

    @keyframes twinkle {
      0%, 100% { opacity: 0.3; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.2); }
    }
    
    /* Vertical scroll animation for predicted words */
    @keyframes verticalScroll {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-50%);
      }
    }
    


    /* Hero Image Section - Centered Layout */
    .hero-image-section {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 750px;
      margin: 0 auto;
      padding: 40px 0;
    }

    .safari-container {
      position: relative;
      width: 100%;
      max-width: 1125px;
      z-index: 2;
    }

    .safari-bg-image {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 12px;
      filter: url(#colorGlow);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dream-score-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform-origin: center;
      z-index: 4;
      pointer-events: none;
      filter: url(#colorGlow);
    }

    @media (max-width: 991px) {
      /* Floating images removed, existing media queries can be simplified or removed if they only contained floating img styles */
    }

    @media (max-width: 991px) {
      .hero-image-section {
        max-width: 700px;
        padding: 30px 20px;
      }
    }

    @media (max-width: 767px) {
      .hero-image-section {
        max-width: 100%;
        padding: 20px 15px;
      }
    }
    
    /* Disable scroll-triggered animations on device section */
    .section.device,
    .section.device .container,
    .section.device .device-wrap,
    .section.device .device-container,
    .section.device .device-wrapper,
    .section.device .preview-section-title-wrap {
      opacity: 1 !important;
      transform: none !important;
      visibility: visible !important;
      overflow: visible !important;
      overflow-x: visible !important;
      overflow-y: visible !important;
      -webkit-overflow-scrolling: auto !important;
      scroll-snap-type: none !important;
      scroll-behavior: auto !important;
      position: static !important;
      height: auto !important;
      max-height: none !important;
      min-height: auto !important;
      top: auto !important;
      bottom: auto !important;
      left: auto !important;
      right: auto !important;
    }
    
    /* Ensure device section is not sticky or fixed */
    .section.device {
      position: relative !important;
    }

    /* New Headline Styles */
    .styled-headline {
      font-family: "AnthropicSerif", Georgia, sans-serif !important;
      font-weight: 500 !important;
      font-size: calc(42.5625px * 1.25) !important;
      line-height: 1.1 !important;
      color: #16120d !important;
      text-align: left;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0px;
      margin-bottom: 8px;
      text-transform: none !important;
      letter-spacing: normal;
      text-wrap-style: balance;
      -webkit-font-smoothing: antialiased;
    }

    .headline-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.45rem;
      position: relative;
      flex-wrap: nowrap;
      width: 100%;
    }
    
    .row-1 { z-index: 3; }

    .headline-row-1-comma { display: none; }
    .row-2 {
      z-index: 2;
      margin-top: -10px;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    /* Hero headline: original copy on desktop, condensed copy on mobile.
       Toggled at the 767px boundary; only one is ever in the DOM flow. */
    .preview-banner-header .hero-title--mobile { display: none; }
    .subtitle-br-mobile { display: none; }

    /* Keep badge to the right while keeping the headline anchored left */
    .headline-row-2-inner {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      flex-wrap: nowrap;
    }
    .row-3 { z-index: 1; margin-top: -5px; }

    /* Decorations */
    .deco-dots-container {
      margin-left: 10px;
      margin-bottom: 0px;
      display: flex;
      align-items: center;
    }

    .deco-badge-container {
      position: relative;
      right: auto;
      top: auto;
      margin-right: 0;
      transform: rotate(-6deg);
      display: inline-flex;
      z-index: 10;
      margin-top: 0;
      margin-bottom: 0;
      margin-left: 0.45rem;
      transform-origin: left center;
    }
    
    .deco-badge {
      font-family: 'AnthropicSerif', Georgia, serif;
      font-size: 12px;
      font-weight: 500;
      color: #334155;
      background: transparent;
      border: 0;
      padding: 5px 12px;
      border-radius: 0;
      border-bottom: 2px solid rgba(148, 163, 184, 0.7);
      box-shadow: none;
      white-space: nowrap;
      letter-spacing: 0.01em;
      text-transform: none;
      text-align: center;
      max-width: 100%;
      line-height: 1.2;
      position: relative;
      z-index: 1;
      transform: skew(-5deg);
      text-wrap: balance;
    }

    .deco-badge::after {
      content: '';
      position: absolute;
      left: -6px;
      right: -6px;
      bottom: -4px;
      height: 8px;
      background: linear-gradient(90deg, rgba(203, 213, 225, 0.35), rgba(148, 163, 184, 0.12));
      transform: skew(-12deg) rotate(-2deg);
      z-index: -1;
      border-radius: 4px 10px;
      filter: blur(0.4px);
    }

    .headline-text-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      white-space: nowrap;
    }
    
    .deco-curve {
      position: absolute;
      bottom: -15px;
      left: -10%;
      width: 120%;
      height: 50px;
      z-index: -1;
      pointer-events: none;
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
      .styled-headline { font-size: clamp(1.75rem, 1rem + 3.5vw, 3.15rem) !important; }
    }

    /* Mobile: keep each line on one row and shrink the type to fit the
       viewport rather than allowing the browser to add its own wraps.
       6.6vw keeps the longest line ("through context and games") within
       the screen down to ~320px. */
    @media (max-width: 767px) {
      /* Swap to the mobile headline copy. */
      .preview-banner-header .hero-title--desktop { display: none; }
      .preview-banner-header .hero-title--mobile { display: flex; }
      .subtitle-br-mobile { display: inline; }

      /* Margins: left doubled (.94rem container padding -> 1.88rem),
         right set to 15%. Zero the container's own padding so these are
         exact and neither side is exceeded. */
      .banner-container.container {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .preview-banner-header {
        padding-left: 1.88rem !important;
        padding-right: 15% !important;
        /* never let the nowrap title grow this box past its column and push
           the page into horizontal scroll */
        min-width: 0 !important;
        max-width: 100% !important;
      }

      /* Title: never wrap, never exceed the margins. font-size tracks the
         available width (100% - 1.88rem left - 15% right = 85vw - 1.88rem),
         divided by the longest line's character metric so it grows to fill
         the margins instead of overflowing them. */
      .hero-title--mobile.styled-headline {
        gap: 5px;
        font-size: clamp(1.5rem, calc((85vw - 1.88rem) / 12.5), 3.15rem) !important;
        /* Extend the box (and thus the hero-reveal clip-path) down far enough
           to fit the descender of "g" in "games"; pull the same amount back
           out of margin-bottom so the space below the title is unchanged
           (padding-bottom + margin-bottom still equals the original 8px). */
        padding-bottom: 0.2em;
        margin-bottom: calc(8px - 0.2em);
      }
      .hero-title--mobile .headline-row {
        flex-wrap: nowrap;
        white-space: nowrap;
        justify-content: flex-start;
      }
      .hero-title--mobile .headline-text-wrap { white-space: nowrap; }
      .hero-title--mobile .row-2 { margin-top: 0; }
      /* Subtitle: ~10% bigger, still no wrap, still inside the margins. */
      .preview-banner-header .preview-banner-details {
        white-space: nowrap;
        font-size: clamp(0.9rem, 4.2vw, 1.32rem) !important;
      }
    }

    /* ============================================================
       Responsive audit — mobile/tablet polish (375px pass)
       ============================================================ */

    /* 1A: hamburger replaces inline nav buttons at mobile. */
    @media (max-width: 767px) {
      .preview-navbar .nav-button-wrap { display: none !important; }
    }

    /* 1B: clear fixed nav (~75px) so it doesn't clip the hero H1. */
    @media (max-width: 767px) {
      .preview-banner { padding-top: 7rem !important; }
    }
    @media (max-width: 479px) {
      .preview-banner { padding-top: 6.5rem !important; }
    }

    /* 1C: the "Sesquipedalian!" sticker overlaid to the right of "Build
       vocabulary" in the mobile headline (row 1) so it never affects
       layout/spacing. The subtitle copy of the sticker stays hidden, and the
       row-1 decorative dots are hidden so the badge owns that spot. */
    .deco-badge-subtitle { display: none; }
    .deco-badge-title { display: none; }
    @media (max-width: 767px) {
      .hero-title--mobile .deco-dots-container { display: none; }

      .deco-badge-subtitle { display: none; }

      .vocab-anchor { position: relative; }
      .deco-badge-title {
        display: inline-flex;
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%) rotate(-6deg);
        transform-origin: left center;
        margin-left: 0.4rem;
        white-space: nowrap;
        pointer-events: none;
      }
      .deco-badge-title .deco-badge { font-size: 11px; padding: 4px 10px; }

      /* The hero-reveal wipe leaves the headline clipped flush to its right
         box edge (clip-path: inset(0 0% …)). On mobile the "Sesquipedalian!"
         sticker overhangs the right of "Build vocabulary", so that clip shaved
         it mid-word. Extend the revealed right inset to let the sticker show
         in full; the wipe animation itself is unchanged. */
      .hero-title--mobile.styled-headline.hero-reveal.revealed {
        clip-path: inset(0 -6.5rem -0.16em 0) !important;
      }
      /* shrink the underline effect ~33% and nudge it slightly down + right */
      .deco-badge-title .deco-badge::after {
        transform: translate(2px, 2px) skew(-12deg) rotate(-2deg) scale(0.67);
      }
    }

    /* 1D: spacing between book illustration and hero title on mobile. */
    @media (max-width: 767px) {
      .preview-banner-main-grid {
        gap: clamp(1.75rem, 5vw, 2.5rem) !important;
      }
    }

    /* Mobile social proof — vs. existing methods bracket + pilot block */
    @media (max-width: 767px) {
      .social-proof-rail {
        grid-template-columns: 1fr;
        gap: clamp(6px, 1.5vw, 8px);
        border-bottom: none;
      }

      .social-proof-stats-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        order: -1;
        width: 100%;
        gap: clamp(6px, 1.5vw, 8px);
        border-top: none;
        border-left: none;
        padding: 0;
      }

      .social-proof-stats-group::before {
        display: none;
      }

      .social-proof-vs-mobile {
        display: flex;
        align-items: center;
        order: -1;
        flex: 1 1 100%;
        width: 100%;
        margin: 0 0 clamp(10px, 2.5vw, 14px);
      }

      .social-proof-vs-bracket {
        flex: 1 1 0;
        min-width: 14px;
        height: 13px;
        align-self: center;
        /* Bracket sits above the cards: line with arms hanging DOWN, centered
           on the text's vertical axis. */
        transform: translateY(50%);
        border-top: 1px solid rgba(15, 23, 42, 0.14);
      }

      .social-proof-vs-bracket--left {
        border-left: 1px solid rgba(15, 23, 42, 0.14);
      }

      .social-proof-vs-bracket--right {
        border-right: 1px solid rgba(15, 23, 42, 0.14);
      }

      .social-proof-vs-core {
        flex: 0 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 92%;
        padding: 0 8px;
        background: #f0eee6;
        text-align: center;
      }

      .social-proof-vs-label {
        font-family: 'AnthropicSans', sans-serif;
        font-size: clamp(0.66rem, 3vw, 0.72rem);
        font-style: italic;
        font-weight: 400;
        color: rgba(23, 23, 23, 0.32);
        letter-spacing: 0.01em;
        white-space: nowrap;
      }

      .social-proof-vs-sup {
        font-size: 0.65em;
        font-style: normal;
        vertical-align: super;
        color: rgba(23, 23, 23, 0.35);
        margin-left: 1px;
        font-weight: 400;
      }

      .social-proof-title {
        margin-bottom: 22px;
        white-space: nowrap;
        font-size: clamp(1rem, 5vw, 1.8rem) !important;
        letter-spacing: -0.03em;
      }

      /* Swap pilot-proof copies: desktop one out, mobile one in. */
      .pilot-proof--desktop { display: none; }
      .pilot-proof--mobile { display: flex; }

      .social-proof-item:not(.is-stat) {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: clamp(12px, 3.5vw, 18px);
        padding: 14px 16px;
        text-align: left;
      }

      .social-proof-item:not(.is-stat) .social-proof-headline {
        margin: 0;
        flex: 0 1 auto;
        max-width: 40%;
        font-size: clamp(0.82rem, 3.4vw, 0.95rem);
        font-weight: 500;
        line-height: 1.3;
        color: #16120d;
      }

      .social-proof-cites {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: clamp(12px, 3.5vw, 18px);
        border-left: 1px solid rgba(15, 23, 42, 0.12);
        text-align: left;
      }

      .pilot-proof--mobile .social-proof-cites {
        text-align: right;
      }

      .social-proof-item:not(.is-stat) .social-proof-cite {
        margin: 0;
        line-height: 1.3;
      }

      .social-proof-cite {
        margin-top: 2px;
        line-height: 1.25;
      }

      .social-proof-item.is-stat {
        flex: 1 1 0;
        min-width: 0;
        padding: clamp(10px, 2.8vw, 14px) clamp(8px, 2.2vw, 12px);
        border-radius: 12px;
        gap: 3px;
        min-height: 72px;
        justify-content: center;
      }

      .social-proof-stat {
        font-size: clamp(1.25rem, 5.2vw, 1.65rem);
      }

      .social-proof-stat-label {
        margin-top: 2px;
        font-size: clamp(0.62rem, 2.4vw, 0.72rem);
      }

      /* On mobile the stat cards show ONE subtext line: hide the label and
         the original headline, show the dedicated mobile subtext instead. */
      .social-proof-item.is-stat .social-proof-stat-label,
      .social-proof-item.is-stat .social-proof-headline {
        display: none;
      }

      .social-proof-item.is-stat .social-proof-stat-sub-mobile {
        display: block;
        margin-top: 3px;
        line-height: 1.25;
        font-family: 'AnthropicSans', sans-serif;
        font-weight: 400;
        font-size: clamp(0.62rem, 2.6vw, 0.78rem);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(23, 23, 23, 0.4);
        max-width: none;
        text-wrap: balance;
      }

      /* Drop the footnote markers from the stat numbers on mobile. */
      .social-proof-item.is-stat .social-proof-stat sup {
        display: none;
      }

      /* Citations: pinned to the bottom-left corner of the section (absolute
         so the rest of the layout / total height is unaffected), tight to the
         left edge and the section's ending line. */
      #reviews .social-proof-footnotes {
        position: absolute;
        left: 12px;
        bottom: 8px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
        padding: 0;
        row-gap: 2px;
        text-align: left;
        font-size: clamp(0.5rem, 2.8vw, 0.62rem);
        line-height: 1.25;
        color: rgba(23, 23, 23, 0.32);
      }

      #reviews .social-proof-footnotes li {
        margin: 0;
        white-space: nowrap;
        text-wrap: nowrap;
      }

      #reviews .social-proof-footnotes .cite-full { display: none; }
      #reviews .social-proof-footnotes .cite-mobile { display: inline; }

      /* Extra bottom padding opens up vertical space between the stat cards
         and the bottom-pinned citations. */
      #reviews.social-proof-section {
        padding-bottom: clamp(3.6rem, 9vw, 5rem);
      }

      .social-proof-footnotes--mobile {
        display: none;
      }

      .social-proof-stat,
      .social-proof-stat sup,
      .social-proof-stat-label,
      .social-proof-stat-sub-mobile,
      .social-proof-headline,
      .social-proof-cite,
      .social-proof-vs-label,
      .social-proof-vs-sup,
      #reviews .social-proof-footnotes,
      #reviews .social-proof-footnotes li,
      #reviews .social-proof-footnotes a {
        font-family: 'AnthropicSans', sans-serif !important;
      }
    }

    @media (max-width: 360px) {
      .social-proof-title {
        font-size: clamp(0.92rem, 4.6vw, 1rem) !important;
      }

      .social-proof-vs-core {
        max-width: 96%;
        padding: 2px 4px 0;
      }
    }

    /* 3B: trim showcase padding so the frame doesn't dominate the phone, while
       still leaving a clear blue margin around the game window on all sides. */
    @media (max-width: 767px) {
      .use-wordlize-showcase { padding: 12px !important; }
    }
    @media (max-width: 479px) {
      .use-wordlize-showcase { padding: 10px !important; }
    }

    /* 3C: "Start Learning" CTA hugs its content (plus a little breathing room)
       rather than spanning the full column width. */
    @media (max-width: 767px) {
      .use-wordlize-bottom-btn {
        width: fit-content;
        justify-content: center;
        padding: 14px 30px;
      }
    }

    /* 5A: full-width "Try Wordlize today!" CTA. The inline style on this
       element forces width:fit-content + display:inline-flex, so override. */
    @media (max-width: 767px) {
      .impact-section .use-wordlize-bottom-btn {
        width: 100% !important;
        display: flex !important;
        justify-content: center;
        padding: 14px 20px;
      }
    }

    /* 6A: stack copyright + legal links so "Contact" doesn't end up orphaned. */
    @media (max-width: 767px) {
      .landing-legal-footer-inner {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
      }
      .landing-legal-copy { flex: 0 0 auto; }
      .landing-legal-links {
        flex: 0 0 auto;
        justify-content: center;
        gap: 12px 18px;
      }
    }

    /* 6B: hide fixed scroll-down indicator on mobile — overlays the footer area. */
    @media (max-width: 767px) {
      .scroll-indicator { display: none; }
    }

    /* 7A: kill accidental horizontal scroll on phones — one stray wide element
       shouldn't let the whole page pan sideways. */
    @media (max-width: 479px) {
      html, body { overflow-x: hidden; }
    }

    /* 7B: phone baseline — make the "find a school" CTAs span the column so
       every primary call-to-action reads as one consistently sized button
       family. (Hero + section CTAs already go full-width on phones.) */
    @media (max-width: 479px) {
      .find-school-actions {
        align-items: stretch;
      }
      .find-school-action-btn {
        width: 100%;
        justify-content: center;
      }
    }

    /* 7C: book animation first in the hero on phones — the canvas is the
       visual hook; headline + CTAs follow underneath. */
    @media (max-width: 767px) {
      .hero-media-panel {
        order: -1;
        /* gap under the book illustration expanded ~1.88x */
        margin-bottom: 2rem;
      }
      /* keep the title and subtext virtually touching on mobile.
         The header is a flex column whose `gap` doesn't collapse with
         margins, so zero out all three contributors between these two:
         the flex gap, the title's bottom margin, and the subtext's top
         margin. Restore breathing room before the CTA via the subtext's
         bottom margin so only the title↔subtext gap is removed. */
      .preview-banner-header {
        gap: 0 !important;
      }
      .preview-banner-header .hero-title--mobile {
        margin-bottom: 0 !important;
      }
      .preview-banner-header .preview-banner-details {
        margin-top: 0.5rem !important;
        margin-bottom: 1.2rem !important;
      }
    }

    /* 7D: "How you can use Wordlize" — let the colored showcase card breathe
       on phones. Container gutter is 2% per side so the card spans 2%→98% of
       the screen, giving the inner terminal more room. */
    @media (max-width: 767px) {
      .use-wordlize-container {
        padding-left: 2%;
        padding-right: 2%;
      }
    }

    /* 7E: trim the long second demo passage on phones — hide the trailing
       "Over time…" sentence so the context card stays compact on mobile. */
    @media (max-width: 767px) {
      .qp-passage-mobile-cut { display: none; }
    }

    /* 7F: fit the Connections game into the mobile demo container. */
    @media (max-width: 767px) {
      .use-wordlize-tab-panel[data-tab="games"] .quest-preview-window {
        position: relative;
      }

      /* Drop the horizontal carousel on mobile and show only the active slide,
         so the window sizes to its own content. The flex track otherwise
         stretches every slide to the height of the tallest one (Word Feud's
         4x4 grid), leaving a long empty "chin" under shorter slides like
         Connections. switchGameSubtab() toggles .is-active on the slides. */
      .game-slides-track {
        transform: none !important;
        display: block;
      }
      .game-slide { display: none; }
      .game-slide.is-active { display: block; }

      /* No inner white layer — game content sits on the frosted card. */
      .use-wordlize-showcase .game-slide {
        background: transparent;
      }

      .use-wordlize-showcase .quest-preview-topbar.game-mode-topbar {
        display: none;
      }

      /* Game subtabs: in the showcase head, under the peeking title. */
      .use-wordlize-showcase.tab-games {
        gap: 12px;
      }

      .use-wordlize-showcase.tab-games .use-wordlize-showcase-head {
        overflow: visible;
      }

      .use-wordlize-showcase.tab-games .game-mode-selector {
        position: relative;
        z-index: 3;
        justify-content: center;
        width: 100%;
        /* Title is hidden on mobile, so no need to reserve space for it. */
        margin-top: 4px;
        padding-top: 0;
        margin-bottom: 0;
      }

      .use-wordlize-showcase.tab-games .use-wordlize-tab-panel[data-tab="games"] {
        margin-top: 0;
        position: relative;
        z-index: 2;
      }

      .use-wordlize-showcase.tab-games .use-wordlize-tab-panel[data-tab="games"] > .quest-preview-window {
        border-radius: 14px;
      }

      .use-wordlize-showcase.tab-games .game-subtab {
        font-size: 0.72rem;
      }

      .use-wordlize-showcase.tab-games .quest-preview-window {
        padding: 14px 14px 14px;
      }

      .use-wordlize-showcase.tab-games .game-slides-viewport {
        padding: 0;
      }

      .use-wordlize-showcase.tab-games .focus-blast-preview {
        padding: 0;
        max-width: none;
        margin: 0;
      }

      .use-wordlize-showcase.tab-games .wl-imp,
      .use-wordlize-showcase.tab-games .wl-feud {
        padding: 0;
        max-width: none;
        margin: 0;
      }
      .focus-blast-header {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 7px;
      }

      .use-wordlize-showcase .wl-imp-header,
      .use-wordlize-showcase .wl-feud-head {
        margin-bottom: 7px;
      }
      .focus-blast-words {
        gap: 7px;
      }
      .focus-blast-words .focus-blast-word {
        height: auto;
        min-height: 0;
        padding: 7px 2px;
        font-size: clamp(0.55rem, 2.8vw, 0.98rem);
        letter-spacing: 0;
        /* Long words (CONFLAGRATION, CONCOMITANT) stay on one line and are
           shrunk to fit by fitFocusBlastWords() rather than wrapping. */
        white-space: nowrap;
        line-height: 1.1;
      }
      .focus-blast-actions {
        gap: 6px;
        margin-top: 17px;
        margin-bottom: 0;
        flex-wrap: wrap;
      }

      .focus-blast-actions + div {
        margin-top: 8px !important;
      }

      .focus-blast-btn {
        padding: 8px 14px;
        font-size: 0.76rem;
      }
    }

    /* ============================================================
       768/tablet pass
       ============================================================ */

    /* 2-768: stats group spans both columns once the rail goes 2-up,
       otherwise the bottom-right cell sits empty. */
    @media (max-width: 991px) {
      .social-proof-stats-group { grid-column: 1 / -1; }
    }

    /* 1D-768: drop the hero grid's reserved min-height once the right
       column collapses; otherwise the section leaves a tall empty band
       between the CTAs and the mascot anchor. */
    @media (max-width: 991px) {
      .preview-banner-main-grid { min-height: 0; }
    }

    /* ============================================================
       Mobile hamburger menu — OPEN state only (≤991px)
       A compact, full-width beige sheet that drops just below the
       navbar — sized to its options, not the whole screen — matching
       the site's warm cream palette and AnthropicSans nav type.
       Fixes the earlier dark-on-dark text, floating-card shape, and
       hero bleed-through. Scoped to .is-open: the closed header,
       logo, and the hamburger/X button are untouched.
       ============================================================ */
    @media (max-width: 991px) {
      /* Full-width drop sheet, height follows its content. */
      .preview-navbar .nav-menu-wrapper.is-open {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        width: 100vw !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 100%) !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background-color: #faf9f6 !important;
        border-bottom: 1px solid #e9e6dc !important;
        box-shadow: 0 14px 26px rgba(20, 20, 19, 0.10) !important;
        padding: 0.5rem 1.25rem 0.75rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }

      /* Stack the links full-width as a clean list. */
      .preview-navbar .nav-menu-wrapper.is-open .nav-menu-flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0 !important;
      }

      /* Themed dark-cream link text with comfortable tap targets. */
      .preview-navbar .nav-menu-wrapper.is-open .preview-nav-link {
        color: #30302e !important;
        width: 100% !important;
        height: auto !important;
        justify-content: space-between !important;
        padding: 0.85rem 0.5rem !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        font-family: 'AnthropicSans', Arial, sans-serif !important;
        border-bottom: 1px solid #ece9e0 !important;
        transition: color 0.15s ease, background-color 0.15s ease !important;
      }

      .preview-navbar .nav-menu-wrapper.is-open .preview-nav-link:last-child {
        border-bottom: none !important;
      }

      .preview-navbar .nav-menu-wrapper.is-open .preview-nav-link .nav-chevron {
        width: 16px;
        height: 16px;
        opacity: 0.45;
      }

      /* Visible hover / focus states. */
      .preview-navbar .nav-menu-wrapper.is-open .preview-nav-link:hover,
      .preview-navbar .nav-menu-wrapper.is-open .preview-nav-link:focus-visible {
        color: #141413 !important;
        background-color: rgba(20, 20, 19, 0.05) !important;
        outline: none !important;
      }

      /* Pressed / active feedback. */
      .preview-navbar .nav-menu-wrapper.is-open .preview-nav-link:active {
        background-color: rgba(20, 20, 19, 0.09) !important;
      }
    }

    /* ============================================================
       Stacked-but-not-mobile range (768–991px): the hero grid has
       collapsed to a single column (see the max-width:991 rule) but the
       page is still on the desktop copy/layout (the mobile swap is ≤767).
       These rules tune that in-between zone so it reads intentionally.
       ============================================================ */
    @media (min-width: 768px) and (max-width: 991px) {
      /* Book/animation always ABOVE the title once stacked, never below,
         and left-aligned to the same left axis as the text below it. */
      .hero-media-panel {
        order: -1;
        justify-content: flex-start;
      }
      .hero-video-container {
        margin: 0;
        justify-content: flex-start;
      }

      /* Title, subtext, and buttons all left-aligned on a single left axis
         (the container's left edge). */
      .preview-banner-header {
        align-items: flex-start;
        text-align: left;
        max-width: none;
      }
      .preview-banner-header .preview-banner-title,
      .preview-banner-header .preview-banner-details {
        text-align: left !important;
      }
      .hero-cta-row {
        justify-content: flex-start;
      }

      /* --- Social proof: stack the rail when the hero stacks --- */
      .social-proof-rail {
        grid-template-columns: 1fr;
        gap: 28px;
        border-bottom: none;
      }
      /* Stat cards stay side-by-side, full width, on top; drop the cell
         dividers/label that only make sense in the 3-up desktop rail. */
      .social-proof-stats-group {
        order: -1;
        padding: 0;
        gap: 14px;
        border-top: none;
        border-left: none;
      }
      .social-proof-stats-group::before { display: none; }

      /* Pilot block: free-standing (no bordered cell), citations first —
         each on a single line, never wrapping — and the "Piloted…" line
         below them, bigger and centered. */
      .pilot-proof--desktop {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: none;
        background: transparent;
      }
      .pilot-proof--desktop .social-proof-cite {
        order: 1;
        white-space: nowrap;
        text-align: center;
      }
      .pilot-proof--desktop .social-proof-headline {
        order: 2;
        margin-top: 10px;
        max-width: none;
        font-size: 1.3rem;
        font-weight: 500;
        line-height: 1.35;
        color: #16120d;
        text-align: center;
      }
    }