main[data-tabby-page] {
  position: relative;
  overflow: clip;
  background-color: var(--color-paper-cream);
  background-image: radial-gradient(rgba(61, 48, 64, 0.035) 0.65px, transparent 0.8px);
  background-size: 8px 8px;
}

.tabby-page-section {
  padding-block: var(--space-8);
}

.tabby-page-section > .container {
  min-width: 0;
}

.tabby-section-heading {
  max-width: 43.75rem;
  margin-bottom: var(--space-5);
}

.tabby-section-heading > :last-child { margin-bottom: 0; }

.tabby-hero {
  padding-block: var(--space-9) var(--space-8);
}

.tabby-hero-grid,
.tabby-checkin-grid,
.tabby-habitat-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-7);
  align-items: start;
}

.tabby-hero-copy,
.tabby-checkin-copy,
.tabby-habitat-copy,
.tabby-reader,
.tabby-ai-intro,
.tabby-closing-copy { min-width: 0; }

.tabby-hero-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.tabby-hero-copy > * { min-width: 0; margin: 0; }
.tabby-hero-copy h1 { max-width: 10.8em; }
.tabby-hero-lead { max-width: 35rem; font-size: var(--text-lg); font-weight: 700; line-height: 1.55; }

.tabby-editorial-note {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line-warm);
  color: var(--color-muted-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.tabby-editorial-note p { margin: 0; }
.tabby-paw { flex: 0 0 auto; color: var(--color-lavender); }
.tabby-play-note { max-width: 35rem; color: var(--color-muted-ink); font-size: var(--text-xs); line-height: 1.35; }

.tabby-screen-figure {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
}

.tabby-screen-button {
  width: min(100%, 23.75rem);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-line-warm);
  border-radius: var(--radius-lg);
  background: var(--color-soft-lilac);
  box-shadow: var(--shadow-elevated);
}

.tabby-screen-button img {
  width: 100%;
  max-height: 32.5rem;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.tabby-screen-figure figcaption { width: min(100%, 23.75rem); margin: 0; color: var(--color-muted-ink); font-size: var(--text-xs); line-height: 1.35; text-align: left; }

.tabby-features { padding-top: var(--space-7); }
.tabby-features-intro { max-width: 38.75rem; }

.tabby-feature-grid,
.tabby-ai-grid,
.tabby-audience-grid,
.tabby-topic-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.tabby-feature-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  min-height: 100%;
}

.tabby-feature-card > * { min-width: 0; margin: 0; }
.tabby-feature-icon { align-self: flex-end; font-family: var(--font-annotation); font-size: 1.35rem; line-height: 1; }
.tabby-feature-card h3 { font-size: var(--text-xl); }
.tabby-feature-card .button { width: 100%; margin-top: auto; font-size: var(--text-sm); }
.tabby-feature-detail { color: var(--color-ink-brown); font-size: var(--text-sm); line-height: var(--leading-compact); }

.tabby-reader {
  display: flex;
  max-width: 43.75rem;
  flex-direction: column;
  gap: var(--space-4);
  margin-inline: auto;
}

.tabby-reader > * { min-width: 0; margin: 0; }
.tabby-reader .eyebrow { margin-bottom: 0; }
.tabby-reader p { max-width: 100%; }
.tabby-takeaway { margin-top: var(--space-2); padding: var(--space-5); border: 2px solid var(--color-line-warm); border-radius: var(--radius-lg); background-color: var(--color-mint); font-size: var(--text-lg); line-height: var(--leading-body); }

.tabby-checkin-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); column-gap: calc(var(--space-7) + var(--space-5)); }
.tabby-checkin-copy { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.tabby-checkin-copy > * { min-width: 0; margin: 0; }
.tabby-checkin-copy p { max-width: 32.5rem; }
.tabby-checkin-lead { font-size: var(--text-lg); font-weight: 700; }
.tabby-peach-note { padding-bottom: var(--space-3); border-bottom: 3px solid var(--color-peach); font-size: var(--text-lg); }
.tabby-checkin-figure { margin-top: 0; }
.tabby-checkin-figure .tabby-screen-button { width: min(100%, 26.875rem); background: var(--color-powder-blue); }

.tabby-habit-grid,
.tabby-verdict-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
}

.tabby-note-panel { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.tabby-note-panel > * { min-width: 0; margin: 0; }
.tabby-note-panel p { max-width: 24.375rem; }
.tabby-note-panel h3 { margin: 0; }
.tabby-habit-summary { max-width: 43.75rem; margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line-warm); font-size: var(--text-lg); }

.tabby-habitat-grid { grid-template-columns: minmax(0, 8fr) minmax(17.5rem, 3fr); gap: var(--space-5); }
.tabby-habitat-figure { min-width: 0; margin: 0; }
.tabby-habitat-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--border-default); border-radius: var(--radius-xl); }
.tabby-habitat-copy { align-self: center; }
.tabby-habitat-copy p { margin: 0; }
.tabby-habitat-followup { max-width: 37.5rem; margin: var(--space-5) 0 0; }

.tabby-ai-intro { max-width: 42.5rem; }
.tabby-ai-intro p { max-width: 100%; font-size: var(--text-lg); }
.tabby-ai-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-5); }
.tabby-ai-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); min-height: 100%; }
.tabby-ai-card > * { min-width: 0; margin: 0; }
.tabby-step-number { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; }
.tabby-ai-card p { font-size: var(--text-sm); }

.tabby-verdict { display: flex; max-width: 56.25rem; flex-direction: column; gap: var(--space-4); margin-inline: auto; padding: var(--space-6); border: 2px solid var(--color-lavender); border-radius: var(--radius-lg); background: var(--color-soft-lilac); }
.tabby-verdict > * { min-width: 0; margin: 0; }
.tabby-verdict p { max-width: 47.5rem; margin-inline: auto; font-size: var(--text-lg); }
.tabby-verdict-grid { gap: var(--space-5); margin-top: var(--space-5); }
.tabby-list-panel { min-width: 0; }
.tabby-list-panel h3 { margin-bottom: var(--space-3); }
.tabby-list-panel ul { margin: 0; }
.tabby-list-panel li + li { margin-top: var(--space-3); }

.tabby-audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabby-audience-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); min-height: 100%; }
.tabby-audience-card > * { min-width: 0; margin: 0; }
.tabby-audience-card p { margin: 0; }

.tabby-cta-panel { display: flex; max-width: 61.25rem; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-4); margin-inline: auto; padding: var(--space-8) var(--space-7); border: var(--border-default); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-peach), var(--color-soft-lilac)); text-align: center; }
.tabby-cta-panel > * { min-width: 0; margin: 0; }
.tabby-cta-panel h2,
.tabby-cta-panel p { max-width: 38.75rem; }
.tabby-cta-panel .button { min-width: 16.25rem; }
.tabby-cta-panel .caption { align-self: stretch; text-align: left; }

.tabby-closing { padding-bottom: var(--space-9); }
.tabby-closing-copy { max-width: 43.75rem; }
.tabby-closing-copy p { max-width: 100%; }
.tabby-topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-5); }
.tabby-topic-link { display: flex; min-width: 0; min-height: 100%; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-paper-warm); text-decoration: none; transition: border-color var(--transition-standard), transform var(--transition-standard), box-shadow var(--transition-standard); }
.tabby-topic-link > * { min-width: 0; margin: 0; }
.tabby-topic-link:hover { border-color: var(--color-lavender); box-shadow: var(--shadow-elevated); transform: translateY(-2px); text-decoration: none; }
.tabby-topic-link strong { font-family: var(--font-heading); font-size: var(--text-lg); }
.tabby-topic-link span { color: var(--color-muted-ink); font-size: var(--text-sm); line-height: var(--leading-compact); }

.tabby-image-modal { position: fixed; z-index: 50; inset: 0; display: grid; min-width: 0; place-items: center; padding: var(--space-4); background: rgba(61, 48, 64, 0.72); }
.tabby-image-modal[hidden] { display: none; }
.tabby-modal-dialog { position: relative; display: flex; width: min(100%, 43.75rem); max-height: calc(100vh - 2rem); min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-5); overflow: auto; border-radius: var(--radius-lg); background: var(--color-paper-cream); }
.tabby-modal-dialog img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: var(--radius-md); }
.tabby-modal-dialog p { margin: 0; color: var(--color-muted-ink); font-size: var(--text-sm); }
.tabby-modal-close { align-self: flex-end; min-height: 2.75rem; }

@media (max-width: 68.6875rem) {
  .tabby-hero-grid,
  .tabby-checkin-grid,
  .tabby-habitat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .tabby-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabby-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabby-ai-card:last-child { grid-column: 1 / -1; }
  .tabby-verdict-grid { grid-template-columns: minmax(0, 1fr); }
  .tabby-audience-grid,
  .tabby-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabby-audience-card:last-child,
  .tabby-topic-link:last-child { grid-column: 1 / -1; }
}

@media (max-width: 44.9375rem) {
  .tabby-page-section { padding-block: var(--space-7); }
  .tabby-hero { padding-block: var(--space-8) var(--space-7); }
  .tabby-hero-grid,
  .tabby-checkin-grid,
  .tabby-habitat-grid,
  .tabby-habit-grid,
  .tabby-feature-grid,
  .tabby-ai-grid,
  .tabby-audience-grid,
  .tabby-topic-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .tabby-hero-copy { gap: var(--space-4); }
  .tabby-hero-copy h1 { max-width: none; font-size: clamp(2.8rem, 13vw, 3rem); }
  .tabby-hero-lead { max-width: none; }
  .tabby-screen-figure { margin-top: var(--space-2); }
  .tabby-screen-button,
  .tabby-screen-figure figcaption { width: min(100%, 22.5rem); }
  .tabby-screen-button img { max-height: 32.5rem; }
  .tabby-section-heading { margin-bottom: var(--space-4); }
  .tabby-feature-card { padding: var(--space-4); }
  .tabby-reader { gap: var(--space-4); }
  .tabby-takeaway,
  .tabby-note-panel,
  .tabby-verdict { padding: var(--space-4); }
  .tabby-checkin-copy p { max-width: none; }
  .tabby-habitat-followup { margin-top: var(--space-4); }
  .tabby-ai-card:last-child,
  .tabby-audience-card:last-child,
  .tabby-topic-link:last-child { grid-column: auto; }
  .tabby-cta-panel { padding: var(--space-7) var(--space-5); }
  .tabby-cta-panel .button { width: 100%; min-width: 0; }
  .tabby-topic-link { min-height: 2.75rem; padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .tabby-topic-link:hover { transform: none; }
}