/* ============================================================
   Academia Lendár[IA] — Responsive Adaptation Layer
   Keeps the brutalist art direction while preventing desktop
   layouts from leaking horizontal scroll into touch contexts.
   ============================================================ */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

#app {
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
}

:where(section, article, div, aside, main, header, footer, nav, form, fieldset) {
  min-width: 0;
}

:where(p, li, a, button, label, input, textarea) {
  overflow-wrap: anywhere;
}

:where(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none !important;
}

/* Display typography governor: titles stay editorial without becoming posters on every viewport. */
:where(
  .t-mega,
  .t-display,
  .t-h1,
  .hero-headline,
  .section-headline,
  .pull-quote,
  .pull,
  .hero-title,
  .dossie-title,
  .bsec-title,
  .sec-title,
  .chapter-title,
  .thesis-title,
  .statement,
  .dark-break h2,
  .final-cta h2,
  .signoff h2,
  .specimen,
  .outro h2,
  .outro-grid h3,
  .outro-grid-v2 h3,
  .companion-card .left h3,
  .hero-tagline,
  .hero-quote,
  .ficha-name,
  .ficha-stat .v,
  .vs-strip .y,
  .bcard h3,
  .mech-card h4,
  .attr-card .name,
  .cls-card h4,
  .cls-card .power .v,
  .beast .name,
  .beast .threat .lvl,
  .phase h4,
  .phase .msg,
  .skill-card h4,
  .inv-cell h4,
  .inv-card h4,
  .combat-step .n,
  .combat-step h4,
  .combat-example .ex-cell .v,
  .prog-row .lv,
  .prog-row .nm,
  .series-card h4,
  .stat-ribbon .v,
  .summary-list .v,
  .flow-step-h .t,
  .example-strip .ex .v,
  .phase-card .right .row .v,
  .mission-card h4,
  .phrase-tile .q,
  .phrases-foot .v,
  .boss-mini .v,
  .outro-card .row h4,
  .outro-card .next a,
  [style*="font-family:var(--font-display)"],
  [style*="font-family: var(--font-display)"]
) {
  letter-spacing: 0 !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none !important;
}

:where(
  .t-mega,
  .t-display,
  .hero-headline,
  .hero-title,
  .dossie-title,
  .pull-quote
) {
  font-size: clamp(38px, 5.1vw, 72px) !important;
  line-height: .98 !important;
}

:where(
  .section-headline,
  .sec-title,
  .bsec-title,
  .chapter-title,
  .thesis-title,
  .dark-break h2,
  .final-cta h2,
  .signoff h2,
  .outro h2,
  .outro-grid h3,
  .outro-grid-v2 h3,
  .companion-card .left h3
) {
  font-size: clamp(34px, 4.4vw, 62px) !important;
  line-height: 1 !important;
}

.specimen {
  font-size: clamp(72px, 10vw, 136px) !important;
  line-height: .9 !important;
}

#app [style*="font-family: var(--font-display)"],
#app [style*="font-family:var(--font-display)"] {
  letter-spacing: 0 !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none !important;
}

#app h1[style*="font-family: var(--font-display)"],
#app h1[style*="font-family:var(--font-display)"] {
  font-size: clamp(38px, 5.1vw, 72px) !important;
  line-height: 1 !important;
}

#app h2[style*="font-family: var(--font-display)"],
#app h2[style*="font-family:var(--font-display)"] {
  font-size: clamp(34px, 4.8vw, 66px) !important;
  line-height: 1.02 !important;
}

#app aside[style*="width: 320px"] > div:nth-child(2) h2 {
  font-size: 22px !important;
  line-height: 1.02 !important;
  text-wrap: auto !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

#app h3[style*="font-family: var(--font-display)"],
#app h3[style*="font-family:var(--font-display)"] {
  line-height: 1.04 !important;
}

#app [style*="font-family: var(--font-display)"][style*="font-size: 200px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: 180px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: 160px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: 140px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: 128px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: 120px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: 112px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: 96px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: 88px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: clamp(64px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: clamp(72px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: clamp(80px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: clamp(88px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: clamp(96px"],
#app [style*="font-family: var(--font-display)"][style*="font-size: clamp(120px"] {
  font-size: clamp(40px, 5.8vw, 78px) !important;
  line-height: 1 !important;
}

:where(a[href], button, input, textarea, select):focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 3px;
}

:where(a[href], button) {
  text-underline-offset: 5px;
}

:where(a[href], button):active {
  transform: translate(1px, 1px);
}

:where(a, button)[aria-disabled="true"],
:where(button:disabled) {
  cursor: not-allowed !important;
}

input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-signal-red) !important;
  box-shadow: 0 0 0 3px rgba(199, 43, 36, .14);
}

.meta .k,
.sec-num,
.bsec-num,
.bsec-counter,
.sec-counter,
.subnav a .n,
.dim {
  opacity: 1 !important;
}

.sec-num,
.bsec-num,
.bsec-counter,
.sec-counter {
  color: var(--color-mute) !important;
}

.subnav a .n {
  color: var(--color-paper-deep) !important;
}

.subnav a.is-active .n {
  color: var(--color-yellow) !important;
}

.section.dark .sec-num,
.b-section.ink .bsec-counter,
.outro-block .bsec-counter,
.vs-strip .dim {
  color: var(--color-paper-deep) !important;
}

.r.ex .v {
  color: color-mix(in srgb, var(--color-signal-red) 36%, var(--color-paper) 64%) !important;
}

.sec-title .y {
  color: var(--color-ink) !important;
}

.s-combat .sec-counter,
.nav-pair a span[style*="#6b6b6b"] {
  color: var(--color-paper-deep) !important;
}

.inv-card-v2 .ass {
  color: var(--color-on-ink-soft) !important;
}

.loop-step .v.y {
  color: var(--color-ink) !important;
}

.meta .k {
  color: var(--color-ink) !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  transform: translateY(-150%);
  background: var(--color-yellow);
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing:0;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--color-ink);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#app,
#app > * {
  max-width: 100vw;
}

#app * {
  min-width: 0;
}

/* Polish pass: keep desktop nav and app-shell controls comfortably clickable. */
nav[aria-label="Navegação principal"] a[href],
nav[aria-label="Navegação principal"] button,
nav[aria-label="Navegação da plataforma"] a[href],
header a[href],
header button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

nav[aria-label="Navegação da plataforma"] a[href] {
  min-height: 44px;
}

#app button {
  min-height: 44px;
}

#app input,
#app select,
#app textarea {
  min-height: 44px;
}

aside a[href] {
  min-height: 40px !important;
}

aside a[aria-label] {
  min-width: 44px !important;
}

aside a[href*="manifesto"] {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

#app footer a[href],
#app a[href][style*="font-family: var(--font-mono)"] {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

aside button[aria-label="Conta"] {
  min-width: 44px !important;
  min-height: 44px !important;
}

aside img[src*="lockup-white"],
footer img[src*="lockup-white"] {
  filter: none;
}

#app [style*="border-bottom: 2px solid var(--color-ink)"][style*="background: var(--color-yellow)"] > [style*="display: flex"][style*="align-items: center"][style*="gap: 16px"] {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#app [style*="border-bottom: 2px solid var(--color-ink)"][style*="background: var(--color-yellow)"] h3 {
  max-width: 34ch;
}

[style*="overflow: hidden"] {
  max-width: 100%;
}

[style*="animation: lkd-marquee"] {
  contain: layout paint;
}

#app [style*="font-family: var(--font-mono)"],
#app [style*="font-family:var(--font-mono)"] {
  overflow-wrap: anywhere;
}

#app span[style*="font-family: var(--font-mono)"],
#app span[style*="font-family:var(--font-mono)"] {
  max-width: 100%;
  white-space: normal !important;
  word-break: break-word;
}

#app [style*="font-family: var(--font-mono)"][style*="justify-content: space-between"],
#app [style*="font-family:var(--font-mono)"][style*="justify-content: space-between"] {
  flex-wrap: wrap;
  gap: 8px;
}

#app [data-screen-label="Lesson · Player"] > div:nth-child(2) > a[href="../fundador.html"] {
  box-shadow: none !important;
  transform: rotate(-0.8deg) !important;
  transition: background 100ms linear, color 100ms linear, transform 100ms linear, box-shadow 100ms linear !important;
}

#app [data-screen-label="Lesson · Player"] > div:nth-child(2) > a[href="../fundador.html"]:hover,
#app [data-screen-label="Lesson · Player"] > div:nth-child(2) > a[href="../fundador.html"]:focus-visible {
  background: var(--color-yellow) !important;
  color: var(--color-ink) !important;
  box-shadow: 6px 6px 0 var(--color-ink) !important;
  transform: translate(-2px, -2px) rotate(-0.8deg) !important;
}

#app [style*="grid-template-columns: 56px 1fr auto auto"] > span,
#app [style*="grid-template-columns: 44px 1fr auto auto"] > span,
#app [style*="grid-template-columns: 4px 44px 14px 1fr auto"] > span {
  min-width: 0;
  white-space: normal;
}

/* Impeccable composition pass: restore hierarchy after safety caps. */
@media (min-width: 1181px) {
  #app main > section[data-screen-label="01 Hero"] {
    min-height: calc(100vh - 72px);
    display: grid !important;
    align-items: center !important;
    padding-top: clamp(76px, 7vw, 112px) !important;
    padding-bottom: clamp(76px, 7vw, 112px) !important;
  }

  #app main > section[data-screen-label="01 Hero"] > div {
    width: min(1280px, 100%) !important;
  }

  #app main > section[data-screen-label="01 Hero"] > div > div:first-child[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .78fr) !important;
    gap: clamp(48px, 5vw, 82px) !important;
    align-items: center !important;
  }

  #app main > section[data-screen-label="01 Hero"] h1[style*="font-family: var(--font-display)"],
  #app main > section[data-screen-label="01 Hero"] .hero-headline {
    font-size: clamp(68px, 5.9vw, 88px) !important;
    line-height: .93 !important;
    max-width: 13ch !important;
  }

  #app main > section[data-screen-label="01 Hero"][style*="background: var(--color-yellow)"] h1,
  #app main > section[data-screen-label="01 Hero"][style*="background: var(--color-yellow)"] .hero-headline {
    max-width: 18.5ch !important;
    font-size: clamp(64px, 5.2vw, 76px) !important;
    line-height: .94 !important;
  }

  #app main > section[data-screen-label="01 Hero"][style*="background: var(--color-paper-warm)"] > div > div:first-child[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, .72fr) !important;
  }

  #app main > section[data-screen-label="01 Hero"][style*="background: var(--color-paper-warm)"] h1 {
    max-width: 15.5ch !important;
    font-size: clamp(62px, 5vw, 76px) !important;
    line-height: .95 !important;
  }

  #app main > section[data-screen-label="01 Hero"] p[style*="font-family: var(--font-sans)"] {
    max-width: 60ch !important;
  }

  #app main > section[data-screen-label="01 Hero"] > div > div[style*="grid-template-columns: repeat(4, 1fr)"] > div > div[style*="font-family: var(--font-display)"] {
    font-size: clamp(44px, 3.8vw, 56px) !important;
    line-height: .88 !important;
    white-space: nowrap !important;
  }

  #app main > section[data-screen-label="00 Cover"] h1[style*="font-family: var(--font-display)"] {
    font-size: clamp(80px, 5.8vw, 96px) !important;
    line-height: .92 !important;
  }

  body[data-screen-label="Manifesto"] .hero-inner {
    min-height: calc(100vh - 72px);
    align-items: stretch;
    padding-top: clamp(56px, 5.2vw, 84px);
    padding-bottom: clamp(48px, 5vw, 76px);
  }

  body[data-screen-label="Manifesto"] .hero-title {
    font-size: clamp(72px, 6.4vw, 96px) !important;
    line-height: .92 !important;
    max-width: 10.8ch;
  }

  body[data-screen-label="Manifesto"] .hero-copy {
    margin-top: 32px;
    max-width: 52ch;
  }

  #app main[data-screen-label="Platform · Dashboard"] {
    padding: 40px 40px 64px !important;
    gap: 28px !important;
  }

  #app main[data-screen-label="Platform · Dashboard"] h1 {
    font-size: clamp(58px, 4.8vw, 72px) !important;
    line-height: .94 !important;
  }

  #app main[data-screen-label="Platform · Dashboard"] > div[style*="grid-template-columns: 1.6fr 1fr"] {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr) !important;
    gap: 28px !important;
    align-items: start !important;
  }

  #app [data-screen-label="Lesson · Player"] > div:first-child {
    margin-bottom: 28px !important;
  }

  #app [data-screen-label="Lesson · Player"] > div:nth-child(2) {
    grid-template-columns: 220px minmax(0, 1fr) 196px !important;
    gap: 24px !important;
    align-items: center !important;
  }

  #app [data-screen-label="Lesson · Player"] h1 {
    font-size: 56px !important;
    line-height: .92 !important;
    max-width: 18ch !important;
  }

  #app [data-screen-label="Lesson · Player"] > div:nth-child(2) > div:last-child {
    align-items: stretch !important;
  }
}

@media (max-width: 1180px) {
  :where(
    .t-mega,
    .t-display,
    .hero-headline,
    .hero-title,
    .dossie-title,
    .pull-quote
  ) {
    font-size: clamp(36px, 7vw, 60px) !important;
    line-height: 1 !important;
  }

  :where(
    .section-headline,
    .sec-title,
    .bsec-title,
    .chapter-title,
    .thesis-title,
    .dark-break h2,
    .final-cta h2,
    .signoff h2,
    .outro h2,
    .outro-grid h3,
    .outro-grid-v2 h3,
    .companion-card .left h3
  ) {
    font-size: clamp(32px, 6vw, 52px) !important;
    line-height: 1.03 !important;
  }

  .specimen {
    font-size: clamp(54px, 11vw, 96px) !important;
  }

  /* App shells: sidebars become top panels on touch devices. */
  #app > div[style*="display: flex"][style*="min-height: 100vh"] {
    flex-direction: column !important;
  }

  aside[style*="width: 268px"],
  aside[style*="width: 320px"] {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    top: auto !important;
    border-right: 0 !important;
    border-bottom: 2px solid var(--color-ink) !important;
  }

  aside[style*="width: 268px"] nav,
  aside[style*="width: 320px"] nav {
    max-height: 280px !important;
    overflow-y: auto !important;
  }

  #app aside[style*="width: 268px"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  #app aside[style*="width: 268px"] > a:first-child {
    padding: 14px 16px !important;
    border-bottom: 0 !important;
  }

  #app aside[style*="width: 268px"] > div:nth-child(2) {
    padding: 10px 16px !important;
  }

  #app aside[style*="width: 268px"] > div:nth-child(n+3),
  #app aside[style*="width: 268px"] > nav {
    display: none !important;
  }

  #app aside[style*="width: 320px"] > nav,
  #app aside[style*="width: 320px"] > div:last-child {
    display: none !important;
  }

  #app aside[style*="width: 320px"] > div:first-child {
    padding: 12px 16px !important;
  }

  #app aside[style*="width: 320px"] > div:nth-child(2) {
    padding: 12px 16px !important;
  }

  #app aside[style*="width: 320px"] > div:nth-child(2) h2 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  #app [data-screen-label="Lesson · Player"] > div:nth-child(2) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  #app [data-screen-label="Lesson · Player"] h1 {
    max-width: 14ch !important;
    font-size: clamp(42px, 7vw, 64px) !important;
    line-height: .96 !important;
  }

  #app [data-screen-label="Lesson · Player"] > div:nth-child(2) > div:last-child {
    align-items: flex-start !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  header[style*="height: 72px"] {
    height: auto !important;
    min-height: 72px !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    padding: 12px 16px !important;
  }

  header[style*="height: 72px"] > div {
    flex: 1 1 100% !important;
    padding: 8px 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  header[style*="height: 72px"] > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  #app main > section[data-screen-label="01 Hero"] > div > div[style*="grid-template-columns: repeat(4, 1fr)"] > div > div[style*="font-family: var(--font-display)"] {
    font-size: clamp(36px, 4vw, 44px) !important;
    line-height: .9 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 900px) {
  section,
  main,
  footer,
  header,
  nav {
    max-width: 100vw;
  }

  main[style*="padding"] {
    padding: 24px 16px 64px !important;
  }

  #app aside[style*="width: 268px"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  #app aside[style*="width: 268px"] > a:first-child {
    padding: 14px 16px !important;
    border-bottom: 0 !important;
  }

  #app aside[style*="width: 268px"] > div:nth-child(2) {
    padding: 10px 16px !important;
  }

  #app aside[style*="width: 268px"] > div:nth-child(n+3),
  #app aside[style*="width: 268px"] > nav {
    display: none !important;
  }

  #app aside[style*="width: 320px"] > nav,
  #app aside[style*="width: 320px"] > div:last-child {
    display: none !important;
  }

  #app aside[style*="width: 320px"] > div:first-child {
    padding: 12px 16px !important;
  }

  #app aside[style*="width: 320px"] > div:nth-child(2) {
    padding: 12px 16px !important;
  }

  #app aside[style*="width: 320px"] > div:nth-child(2) h2 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  #app [data-screen-label="Lesson · Player"] > div:nth-child(2) > a[href="../fundador.html"] {
    width: max-content !important;
    max-width: 100% !important;
  }

  [style*="max-width: 1320px"],
  [style*="max-width: 1200px"],
  [style*="max-width: 1180px"],
  [style*="max-width: 1100px"] {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [style*="padding: 128px 0"],
  [style*="padding: 96px 0"],
  [style*="padding: 80px 0"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Marketing and editorial navs. */
  nav[style*="height: 72px"],
  nav[style*="height: 64px"],
  nav[style*="height:72px"],
  nav[style*="height:64px"] {
    height: auto !important;
    min-height: 64px !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 16px !important;
  }

  nav[style*="height: 72px"] > a,
  nav[style*="height: 64px"] > a,
  nav[style*="height:72px"] > a,
  nav[style*="height:64px"] > a {
    min-height: 44px;
  }

  nav[style*="height: 72px"] > div,
  nav[style*="height: 64px"] > div,
  nav[style*="height:72px"] > div,
  nav[style*="height:64px"] > div {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    overflow-x: clip !important;
  }

  nav[aria-label="Navegação principal"] > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  nav[aria-label="Navegação principal"] > div:last-child {
    display: flex !important;
    justify-content: flex-start !important;
  }

  nav[aria-label="Navegação principal"] a[href] {
    min-height: 44px !important;
    align-items: center !important;
  }

  nav[aria-label="Navegação principal"] a[href] > span[style*="position:absolute"] {
    bottom: -4px !important;
  }

  .alertbar,
  .topnav {
    height: auto !important;
    min-height: 64px;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 16px !important;
  }

  .topnav .links,
  .topnav .right {
    margin-left: 0 !important;
    width: 100%;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .subnav {
    width: 100%;
    max-width: 100vw;
    contain: paint;
    box-sizing: border-box;
    overflow-x: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .subnav-wrap {
    max-width: 100vw;
    overflow: hidden;
  }

  .subnav .progress {
    display: none !important;
  }

  .wrap {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .sec-head,
  .bsec-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .sec-head .right,
  .bsec-head .right,
  .sec-num,
  .bsec-num {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .sec-num,
  .bsec-num {
    font-size: clamp(42px, 15vw, 72px) !important;
    line-height: .9 !important;
  }

  .summary-row .v,
  .stats-panel .v,
  .dossier .v,
  .outro-card a,
  .nav-pair a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .stats-row,
  .bar-mini-row {
    grid-template-columns: 1fr !important;
  }

  .stat-block .v,
  .bar-mini-row .v {
    text-align: left !important;
  }

  .stats-panel,
  .ficha,
  .charcard,
  .outro-card,
  .outro-pair,
  .bcard,
  .card {
    max-width: 100% !important;
    box-shadow: 6px 6px 0 var(--color-yellow) !important;
  }

  /* Desktop grids collapse to native phone flow. */
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: auto 1fr"],
  [style*="grid-template-columns: auto 1fr auto"],
  [style*="grid-template-columns: 1fr auto"],
  [style*="grid-template-columns: repeat(7, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="grid-template-columns: 56px 1fr auto auto"],
  [style*="grid-template-columns: 44px 1fr auto auto"],
  [style*="grid-template-columns: 56px 1fr auto"],
  [style*="grid-template-columns: 44px 1fr"],
  [style*="grid-template-columns: 60px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="grid-template-columns: 4px 44px 14px 1fr auto"] {
    grid-template-columns: 4px 38px 18px minmax(0, 1fr) 48px !important;
    gap: 8px !important;
  }

  [style*="grid-template-columns: 4px 44px 14px 1fr auto"] > span:nth-child(5) {
    grid-column: auto !important;
  }

  [style*="display: flex"][style*="justify-content: space-between"],
  [style*="display: flex"][style*="align-items: center"] {
    flex-wrap: wrap !important;
  }

  [style*="align-items: flex-end"] {
    align-items: flex-start !important;
  }

  [style*="text-align: right"] {
    text-align: left !important;
  }

  [style*="transform: rotate"] {
    transform: none !important;
  }

  [style*="box-shadow: 12px 12px"],
  [style*="box-shadow: 8px 8px"],
  .lkd-block,
  .lkd-block-yellow,
  .lkd-card-block,
  .lkd-card-hover,
  .lkd-card-hover-yellow {
    box-shadow: 6px 6px 0 var(--color-ink) !important;
  }

  [style*="box-shadow: 12px 12px 0 var(--color-yellow)"],
  [style*="box-shadow: 8px 8px 0 var(--color-yellow)"] {
    box-shadow: 6px 6px 0 var(--color-yellow) !important;
  }

  h1,
  h2,
  h3,
  .pull-quote,
  .section-headline,
  .hero-headline {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none !important;
    letter-spacing: 0 !important;
  }

  [style*="font-size: 72px"],
  [style*="font-size: 64px"],
  [style*="font-size: 56px"],
  [style*="font-size: 80px"],
  [style*="font-size: 96px"],
  [style*="font-size: clamp(56px"],
  [style*="font-size: clamp(60px"],
  [style*="font-size: clamp(64px"],
  [style*="font-size: clamp(72px"],
  [style*="font-size: clamp(80px"] {
    font-size: clamp(30px, 8.6vw, 42px) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  a[href],
  button,
  input {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  a[href][style*="font-family: var(--font-mono)"] {
    display: inline-flex !important;
    align-items: center !important;
  }

  button,
  a[href] {
    touch-action: manipulation;
  }
}

@media (max-width: 560px) {
  :where(
    .t-mega,
    .t-display,
    .hero-headline,
    .hero-title,
    .dossie-title,
    .pull-quote
  ) {
    font-size: clamp(30px, 8.2vw, 38px) !important;
    line-height: 1.04 !important;
  }

  :where(
    .section-headline,
    .sec-title,
    .bsec-title,
    .chapter-title,
    .thesis-title,
    .dark-break h2,
    .final-cta h2,
    .signoff h2,
    .outro h2,
    .outro-grid h3,
    .outro-grid-v2 h3,
    .companion-card .left h3
  ) {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.02 !important;
  }

  .specimen {
    font-size: clamp(42px, 13vw, 68px) !important;
  }

  :where(
    [style*="font-size:11px"],
    [style*="font-size:11px"],
    [style*="font-size:11px"],
    [style*="font-size:11px"],
    [style*="font-size:11px"],
    [style*="font-size:11px"],
    .site-alert,
    .site-alert a,
    .primary,
    .margin-note
  ) {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  nav[style*="height: 72px"] > div:nth-of-type(1),
  nav[style*="height: 64px"] > div:nth-of-type(1),
  nav[style*="height:72px"] > div:nth-of-type(1),
  nav[style*="height:64px"] > div:nth-of-type(1) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
  }

  nav[style*="height: 72px"] > div:nth-of-type(2),
  nav[style*="height: 64px"] > div:nth-of-type(2),
  nav[style*="height:72px"] > div:nth-of-type(2),
  nav[style*="height:64px"] > div:nth-of-type(2) {
    width: 100% !important;
  }

  [style*="padding: 56px 64px"],
  [style*="padding: 40px 48px"],
  [style*="padding: 32px"],
  [style*="padding: 28px"],
  [style*="padding: 24px"] {
    padding: 20px !important;
  }

  [style*="gap: 64px"],
  [style*="gap: 56px"],
  [style*="gap: 48px"],
  [style*="gap: 32px"] {
    gap: 24px !important;
  }

  [style*="width: 200px"],
  [style*="height: 200px"] {
    width: 100% !important;
    height: auto !important;
    min-height: 180px;
  }

  [style*="width: 96px"][style*="height: 96px"] {
    width: 72px !important;
    height: 72px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}