.tips-page {
  overflow: hidden;
}

.tips-page .section,
.tips-page .section--large {
  position: relative;
}

.tips-hero {
  padding-block: var(--space-10) var(--space-9);
}

.tips-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.tips-hero__layout > * { min-width: 0; }
.tips-hero__copy { max-width: 38rem; }
.tips-hero__lead { max-width: 37rem; font-size: var(--text-lead); line-height: var(--leading-lead); }
.tips-hero__focus { max-width: 38rem; }
.tips-hero__note {
  max-width: 28rem;
  margin-block-end: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-block: var(--border-default);
  background: var(--color-paper-bright);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.tips-hero__actions { display: flex; min-width: 0; }
.tips-hero__actions > * { min-width: 0; }
.tips-hero__visual {
  display: block;
  width: 100%;
  max-width: 29.375rem;
  justify-self: end;
  color: var(--color-ink);
  text-decoration: none;
}
.tips-hero__visual img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tips-hero__caption { display: block; padding: var(--space-3) var(--space-4); color: var(--color-muted-ink); font-size: var(--text-caption); line-height: var(--leading-caption); }

.tips-start { background: color-mix(in srgb, var(--color-lavender) 12%, var(--color-paper)); }
.tips-start__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 20rem); gap: var(--space-7); align-items: start; }
.tips-start__layout > * { min-width: 0; }
.tips-start__reading { max-width: 43rem; }
.tips-start__intro { max-width: 43rem; }
.tips-start__notes { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.tips-prep-note { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-sheet); background: var(--color-paper-bright); }
.tips-prep-note > * { min-width: 0; }
.tips-prep-note__number { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; background: var(--color-lavender); color: var(--color-ink); font-size: var(--text-micro); font-weight: 800; letter-spacing: .08em; }
.tips-prep-note__number--pink { background: var(--color-dusty-pink); }
.tips-prep-note__body { min-width: 0; }
.tips-prep-note__body h3 { font-size: 1.35rem; }
.tips-prep-note__body p { margin-block-end: 0; }
.tips-blueprint-rail { width: 100%; max-width: 20rem; justify-self: end; }
.tips-blueprint-rail__diagram { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); height: 7rem; margin-block: var(--space-4); padding: var(--space-3); border: 1px dashed var(--color-line); }
.tips-blueprint-rail__diagram span { border: 1px solid color-mix(in srgb, var(--color-ink) 35%, transparent); background: color-mix(in srgb, var(--color-lavender) 28%, var(--color-paper-bright)); }
.tips-blueprint-rail__diagram i { position: absolute; inset: auto 15% 18%; border-top: 1px solid var(--color-ink); transform: rotate(-12deg); }
.tips-blueprint-rail p { margin-block-end: 0; font-size: var(--text-caption); }

.tips-readable__intro { max-width: 40rem; }
.tips-habit-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, 1fr); gap: var(--space-5); align-items: end; }
.tips-habit-grid > * { min-width: 0; }
.tips-habit { display: flex; flex-direction: column; gap: var(--space-3); min-height: 100%; padding: var(--space-5); }
.tips-habit > * { margin: 0; min-width: 0; }
.tips-habit h3 { font-size: 1.45rem; }
.tips-habit blockquote { margin-block-start: auto; }
.tips-grouping { display: grid; grid-template-columns: repeat(2, 2rem); gap: var(--space-2); }
.tips-grouping i { width: 2rem; height: 2rem; border: var(--border-default); background: var(--color-lavender); }
.tips-grouping i:nth-child(2), .tips-grouping i:nth-child(3) { background: var(--color-dusty-pink); }
.tips-habit__annotation { align-self: flex-end; color: var(--color-muted-ink); font-size: var(--text-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.tips-merge { background: color-mix(in srgb, var(--color-paper-bright) 65%, var(--color-lavender)); }
.tips-merge__layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.tips-merge__layout > * { min-width: 0; }
.tips-merge__copy { max-width: 38rem; }
.tips-merge__quote { max-width: 34rem; margin-block-end: 0; padding-inline-start: var(--space-4); border-left: 4px solid var(--color-terracotta); font-family: var(--font-heading); font-size: 1.3rem; font-style: italic; line-height: 1.3; }
.tips-merge__panel { padding: var(--space-6); }
.tips-merge-diagram { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); min-width: 0; }
.tips-merge-diagram__sources { display: flex; justify-content: center; gap: var(--space-3); width: 100%; min-width: 0; }
.tips-merge-diagram__sources > * { min-width: 7rem; }
.tips-tile { display: grid; width: 8rem; min-height: 6rem; place-items: center; padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--color-ink) 35%, transparent); border-radius: var(--radius-sheet); color: var(--color-ink); font-size: var(--text-caption); font-weight: 700; text-align: center; }
.tips-tile--pink { background: var(--color-dusty-pink); }
.tips-tile--lavender { background: var(--color-lavender); }
.tips-tile--sage { background: var(--color-sage); }
.tips-merge-diagram__connector { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted-ink); font-size: var(--text-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tips-merge-diagram__connector::before, .tips-merge-diagram__connector::after { width: 3rem; border-top: 1px solid var(--color-ink); content: ""; }
.tips-merge-diagram__connector b { color: var(--color-terracotta); font-size: 1.25rem; }
.tips-merge__caption { max-width: 28rem; margin: var(--space-5) auto 0; font-size: var(--text-caption); line-height: var(--leading-caption); }
.tips-merge__panel:hover .tips-merge-diagram__sources > :first-child, .tips-merge__panel:focus .tips-merge-diagram__sources > :first-child { transform: translateX(3px); }
.tips-merge__panel:hover .tips-merge-diagram__sources > :last-child, .tips-merge__panel:focus .tips-merge-diagram__sources > :last-child { transform: translateX(-3px); }
.tips-merge__panel:hover .tips-tile--sage, .tips-merge__panel:focus .tips-tile--sage { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-sage) 45%, transparent); }
.tips-tile { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }

.tips-tasks__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 18.75rem); gap: var(--space-7); align-items: start; }
.tips-tasks__layout > * { min-width: 0; }
.tips-tasks__reading { max-width: 45rem; display: flex; flex-direction: column; gap: var(--space-5); }
.tips-tasks__reading > * { min-width: 0; margin: 0; }
.tips-task-sheet { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.tips-task-sheet > * { min-width: 0; margin: 0; }
.tips-task-sheet h3 { font-size: 1.45rem; }
.tips-state-rail { width: 100%; max-width: 18.75rem; justify-self: end; }
.tips-state-rail__states { display: flex; flex-direction: column; gap: var(--space-3); margin-block: var(--space-4); }
.tips-state-rail__states span { display: block; padding: var(--space-3); border: var(--border-default); background: var(--color-paper); font-weight: 700; }
.tips-state-rail__states span:nth-child(2) { background: color-mix(in srgb, var(--color-sage) 45%, var(--color-paper-bright)); }
.tips-state-rail__states span:nth-child(3) { background: var(--color-sage); }
.tips-state-rail p { margin-block-end: 0; }
.tips-swatches { display: flex; gap: var(--space-2); }
.tips-swatches i { width: 1.75rem; height: 1.75rem; border: var(--border-default); background: var(--color-sage); }
.tips-swatches i:nth-child(2) { background: var(--color-dusty-pink); }
.tips-swatches i:nth-child(3) { background: var(--color-lavender); }

.tips-context { background: color-mix(in srgb, var(--color-dusty-pink) 11%, var(--color-paper)); }
.tips-context__intro { max-width: 40rem; }
.tips-context__board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.tips-context__board > * { min-width: 0; }
.tips-context-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.tips-context-card > * { min-width: 0; margin: 0; }
.tips-context-card h3 { font-size: 1.38rem; }
.tips-context-card--objects { grid-column: 1 / span 4; }
.tips-context-card--rewards { grid-column: 5 / span 3; }
.tips-context-card--currency { grid-column: 8 / span 5; }
.tips-context-card--unlocks { grid-column: 3 / span 6; }
.tips-object-mark { width: 3rem; height: 3rem; border: 1px solid var(--color-ink); border-radius: 48% 52% 44% 56%; background: color-mix(in srgb, var(--color-lavender) 65%, var(--color-paper-bright)); }
.tips-context-card__dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--color-terracotta); }
.tips-currency-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tips-currency-notes > * { min-width: 0; }
.tips-currency-notes > :first-child { border-right: var(--border-default); padding-right: var(--space-3); }
.tips-currency-notes h4 { margin-block-end: var(--space-2); font-size: 1.2rem; }
.tips-currency-notes p { margin-block-end: 0; font-size: var(--text-caption); line-height: var(--leading-caption); }
.tips-doorway { width: 3.25rem; height: 4rem; border: 2px solid var(--color-ink); border-bottom: 0; background: linear-gradient(90deg, transparent 48%, var(--color-ink) 49%, var(--color-ink) 51%, transparent 52%); }

.tips-reset__layout { display: grid; grid-template-columns: minmax(0, 1.86fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.tips-reset__layout > * { min-width: 0; }
.tips-reset__checklist { max-width: 42rem; }
.tips-reset__lead { max-width: 42rem; }
.tips-reset__steps { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; list-style: none; }
.tips-reset-step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border: var(--border-default); background: var(--color-paper-bright); }
.tips-reset-step > * { min-width: 0; }
.tips-reset-step > span { display: grid; width: 2rem; height: 2rem; place-items: center; background: var(--color-lavender); font-weight: 800; }
.tips-reset-step--success { background: var(--color-success-tint); }
.tips-reset-step--success > span { background: var(--color-sage); }
.tips-reset-step h3 { margin-block-end: var(--space-2); font-size: 1.3rem; }
.tips-reset-step p { margin-block-end: 0; }
.tips-reset__why { width: 100%; max-width: 18.75rem; justify-self: end; }
.tips-reset__why p { max-width: 18rem; margin-block-end: 0; }

.tips-rhythm { background: color-mix(in srgb, var(--color-lavender) 10%, var(--color-paper)); }
.tips-rhythm__intro { max-width: 38rem; }
.tips-rhythm__phases { display: grid; grid-template-columns: minmax(15.3125rem, .9fr) minmax(15.3125rem, 1.15fr) minmax(15.3125rem, .95fr); gap: var(--space-5); position: relative; }
.tips-rhythm__phases > * { min-width: 0; }
.tips-phase { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); min-height: 100%; }
.tips-phase > * { min-width: 0; margin: 0; }
.tips-phase h3 { font-size: 1.4rem; }
.tips-rhythm__phases::before { position: absolute; z-index: 0; top: 3.25rem; right: 12%; left: 12%; border-top: 1px dashed color-mix(in srgb, var(--color-ink) 40%, transparent); content: ""; }
.tips-phase { z-index: 1; }

.tips-scope__module { width: min(100%, 53.75rem); margin-inline: auto; }
.tips-scope__notes { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--space-5); }
.tips-scope__notes > * { min-width: 0; }
.tips-scope-note { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--border-default); background: var(--color-paper-bright); }
.tips-scope-note > * { min-width: 0; margin: 0; }
.tips-scope-note--context { border-left: 4px solid var(--color-sage); }
.tips-scope-note h3 { font-size: 1.35rem; }
.tips-scope__link { align-self: flex-start; font-weight: 800; }

.tips-close { padding-block-start: var(--space-9); }
.tips-close__panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: min(100%, 45rem); margin-inline: auto; padding: var(--space-7); border-color: var(--color-terracotta); text-align: center; }
.tips-close__panel > * { min-width: 0; margin: 0; }
.tips-close__panel p { max-width: 34rem; }
.tips-close__actions { display: flex; justify-content: center; gap: var(--space-3); min-width: 0; }
.tips-close__actions > * { min-width: 0; }

@media (max-width: 999px) {
  .tips-habit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips-habit-grid > :first-child { grid-column: 1 / -1; }
  .tips-context__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips-context-card--objects, .tips-context-card--rewards, .tips-context-card--currency, .tips-context-card--unlocks { grid-column: auto; }
  .tips-context-card--currency { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .tips-hero__layout, .tips-start__layout, .tips-tasks__layout, .tips-reset__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .tips-hero__copy, .tips-start__reading, .tips-tasks__reading, .tips-reset__checklist { max-width: none; }
  .tips-hero__visual, .tips-blueprint-rail, .tips-state-rail, .tips-reset__why { max-width: none; justify-self: stretch; }
  .tips-blueprint-rail { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
  .tips-blueprint-rail > * { min-width: 0; margin: 0; }
  .tips-blueprint-rail__diagram { margin: 0; }
  .tips-tasks__layout { gap: var(--space-5); }
  .tips-state-rail { order: 2; }
  .tips-tasks__reading { order: 1; }
  .tips-merge__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .tips-merge__copy { max-width: none; }
  .tips-reset__why { margin-block-start: 0; }
}

@media (max-width: 819px) {
  .tips-rhythm__phases { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-left: var(--space-5); }
  .tips-rhythm__phases::before { top: 1rem; bottom: 1rem; left: .85rem; right: auto; border-top: 0; border-left: 1px dashed color-mix(in srgb, var(--color-ink) 40%, transparent); }
}

@media (max-width: 759px) {
  .tips-scope__notes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 719px) {
  .tips-hero { padding-block: var(--space-8) var(--space-7); }
  .tips-hero__layout { gap: var(--space-5); }
  .tips-hero__note { max-width: none; }
  .tips-hero__visual { max-width: none; }
  .tips-start__notes { gap: var(--space-3); }
  .tips-prep-note { padding: var(--space-4); }
  .tips-blueprint-rail { grid-template-columns: minmax(0, 1fr); }
  .tips-blueprint-rail__diagram { display: none; }
  .tips-habit-grid, .tips-context__board { grid-template-columns: minmax(0, 1fr); }
  .tips-habit-grid > :first-child, .tips-context-card--currency { grid-column: auto; }
  .tips-habit { padding: var(--space-4); }
  .tips-merge__panel { padding: var(--space-4); }
  .tips-merge-diagram__sources { gap: var(--space-2); }
  .tips-tile { width: 7rem; min-width: 0; min-height: 5.25rem; }
  .tips-merge-diagram__connector::before, .tips-merge-diagram__connector::after { width: 2rem; }
  .tips-task-sheet, .tips-context-card, .tips-scope-note { padding: var(--space-4); }
  .tips-state-rail__states { flex-direction: row; }
  .tips-state-rail__states > * { min-width: 0; flex: 1 1 0; font-size: var(--text-caption); text-align: center; }
  .tips-currency-notes { grid-template-columns: minmax(0, 1fr); }
  .tips-currency-notes > :first-child { padding-right: 0; padding-bottom: var(--space-3); border-right: 0; border-bottom: var(--border-default); }
  .tips-reset__steps { gap: var(--space-2); }
  .tips-reset-step { padding: var(--space-3); }
  .tips-close__panel { width: 100%; padding: var(--space-5); }
}

@media (max-width: 519px) {
  .tips-close__actions { flex-direction: column; width: 100%; }
  .tips-close__actions > * { width: 100%; }
  .tips-merge-diagram__connector { font-size: .65rem; }
  .tips-merge-diagram__connector::before, .tips-merge-diagram__connector::after { width: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tips-merge__panel:hover .tips-merge-diagram__sources > :first-child,
  .tips-merge__panel:focus .tips-merge-diagram__sources > :first-child,
  .tips-merge__panel:hover .tips-merge-diagram__sources > :last-child,
  .tips-merge__panel:focus .tips-merge-diagram__sources > :last-child { transform: none; }
}