.tips-page {
  position: relative;
}

.tips-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 11% 9%, rgb(76 137 97 / 4%) 0 1px, transparent 1.2px), radial-gradient(circle at 87% 33%, rgb(217 91 67 / 4%) 0 1px, transparent 1.2px);
  background-size: 31px 31px, 37px 37px;
  content: "";
}

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

.tips-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(330px, 5fr);
  gap: var(--space-6);
  align-items: center;
}

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

.tips-hero__copy > * {
  margin: 0;
}

.tips-hero__copy h1 {
  max-width: 640px;
  font-size: clamp(2.75rem, 5vw, 3.5rem);
}

.tips-hero__intro {
  max-width: 640px;
}

.tips-hero__lead {
  max-width: 640px;
  color: var(--color-ink-muted);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.tips-hero__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.tips-hero__actions > * {
  min-width: 0;
}

.tips-hero__actions small {
  color: var(--color-ink-muted);
}

.tips-hero__source {
  max-width: 610px;
  border-left: 3px solid var(--color-sky-500);
  background: var(--color-paper-100);
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.tips-hero__source span {
  color: var(--color-coral-600);
}

.tips-hero__media {
  width: 100%;
  min-width: 0;
  margin: var(--space-5) 0 0;
  transform: rotate(1deg);
}

.tips-hero__media img,
.tips-reading__media img {
  aspect-ratio: 4 / 3;
}

.tips-section-heading,
.tips-route__heading,
.tips-habits__heading,
.tips-fit__heading {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.tips-section-heading > div,
.tips-route__heading,
.tips-habits__heading,
.tips-fit__heading {
  min-width: 0;
}

.tips-section-heading h2,
.tips-route__heading h2,
.tips-habits__heading h2,
.tips-fit__heading h2,
.tips-compass__heading h2,
.tips-reference__heading h2 {
  margin-bottom: var(--space-3);
}

.tips-section-heading p {
  max-width: 620px;
}

.tips-marker {
  display: inline-flex;
  width: 40px;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-forest-900);
  border-radius: 50%;
  background: var(--color-orange-400);
  color: var(--color-forest-900);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1;
}

.tips-pack__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-paper-100);
  padding: var(--space-5);
}

.tips-pack__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}

.tips-pack__item > div {
  min-width: 0;
}

.tips-pack__item h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-h4);
}

.tips-pack__item p {
  margin: 0;
}

.tips-pack__dot {
  width: 16px;
  height: 16px;
  margin-top: 0.45rem;
  border: 2px solid var(--color-forest-900);
  border-radius: 50%;
}

.tips-pack__dot--forest { background: var(--color-forest-500); }
.tips-pack__dot--sky { background: var(--color-sky-500); }
.tips-pack__dot--coral { background: var(--color-coral-600); }

.tips-pack__item .label {
  margin-bottom: var(--space-2);
}

.tips-route__heading {
  width: min(100%, 670px);
  grid-template-columns: 48px minmax(0, 1fr);
  margin-left: auto;
  margin-right: auto;
}

.tips-route__heading .tips-marker,
.tips-habits__heading .tips-marker,
.tips-fit__heading .tips-marker {
  grid-row: span 3;
}

.tips-route__heading .eyebrow,
.tips-habits__heading .eyebrow,
.tips-fit__heading .eyebrow {
  grid-column: 2;
  margin: 0;
}

.tips-route__heading h2,
.tips-route__heading p,
.tips-habits__heading h2,
.tips-habits__heading p,
.tips-fit__heading h2,
.tips-fit__heading p {
  grid-column: 2;
}

.tips-route__heading p {
  max-width: 670px;
}

.tips-route__list {
  position: relative;
  display: flex;
  width: min(100%, 900px);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
  margin: var(--space-6) auto var(--space-4);
  padding: 0;
  list-style: none;
}

.tips-route__list::before {
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 35px;
  border-left: 2px dotted var(--color-forest-700);
  content: "";
}

.tips-route__stop {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 580px);
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}

.tips-route__number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-forest-900);
  border-radius: 50%;
  background: var(--color-coral-600);
  color: var(--color-paper-50);
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
}

.tips-route__number--sky { background: var(--color-sky-500); color: var(--color-forest-900); }
.tips-route__number--forest { background: var(--color-forest-700); }

.tips-route__content {
  min-width: 0;
}

.tips-route__content h3 {
  margin-bottom: var(--space-3);
}

.tips-route__content p:last-child,
.tips-route__content blockquote:last-child {
  margin-bottom: 0;
}

.tips-route__content--paper,
.tips-route__content--outlined {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.tips-route__content--paper {
  border: var(--border-subtle);
  background: var(--color-paper-100);
}

.tips-route__content--outlined {
  border: var(--border-brand);
  background: var(--color-paper-50);
  box-shadow: var(--shadow-ink);
}

.tips-route__content blockquote {
  max-width: 260px;
  margin-bottom: var(--space-4);
  border-color: var(--color-sky-500);
  font-size: var(--text-base);
}

.tips-route__caution {
  width: min(100%, 580px);
  margin-left: calc(50% - 378px);
  border-left: 3px solid var(--color-orange-400);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
}

.tips-reading__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem;
  align-items: center;
}

.tips-reading__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  order: 2;
}

.tips-reading__text > * { margin: 0; }
.tips-reading__text h2,
.tips-reading__text > .lead { max-width: 620px; }

.tips-reading__principles {
  display: flex;
  width: min(100%, 620px);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.tips-reading__principles article {
  min-width: 0;
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-paper-100);
  padding: var(--space-4);
}

.tips-reading__principles article:nth-child(2) {
  border-left: 4px solid var(--color-sky-500);
}

.tips-reading__principles article:nth-child(3) {
  border-left: 4px solid var(--color-coral-600);
}

.tips-reading__principles h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-h4);
}

.tips-reading__principles p { margin: 0; }

.tips-reading__media {
  width: 100%;
  min-width: 0;
  margin: 0;
  transform: rotate(-1deg);
}

.tips-habits__heading {
  width: min(100%, 700px);
}

.tips-habits__heading p { max-width: 600px; }

.tips-habits__notes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-6);
}

.tips-habit {
  position: relative;
  min-width: 0;
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-paper-100);
  padding: var(--space-5);
}

.tips-habit h3 { margin-bottom: var(--space-3); }
.tips-habit p:last-child { margin-bottom: 0; }
.tips-habit--one { grid-column: 1 / span 4; }
.tips-habit--two { grid-column: 5 / span 4; margin-top: var(--space-6); }
.tips-habit--three { grid-column: 9 / span 4; margin-top: var(--space-2); border: var(--border-brand); background: var(--color-paper-50); }

.tips-habit__tab {
  display: inline-flex;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-coral-600);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 0.25rem 0.5rem;
}

.tips-habit__tab--sky { background: var(--color-sky-500); color: var(--color-forest-900); }
.tips-habit__tab--forest { background: var(--color-forest-700); color: var(--color-paper-50); }

.tips-habit__takeaway {
  margin-top: var(--space-4);
  border-top: 2px solid var(--color-sky-500);
  padding-top: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.tips-compass__heading {
  width: min(100%, 660px);
}

.tips-compass__heading > *:last-child { margin-bottom: 0; }

.tips-compass__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.tips-compass__panel {
  min-width: 0;
  border: var(--border-ink);
  border-radius: var(--radius-lg);
  background: var(--color-paper-50);
  padding: var(--space-5);
}

.tips-compass__panel h3 { margin-bottom: var(--space-3); }
.tips-compass__panel p { margin: 0; }
.tips-compass__panel--verify { border-color: var(--color-coral-600); background: var(--color-paper-100); }
.tips-compass__panel--verify h3 { color: var(--color-coral-600); }

.tips-compass__closing {
  width: min(100%, 640px);
  margin-top: var(--space-5);
  border-left: 4px solid var(--color-sky-500);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  color: var(--color-ink-muted);
}

.tips-reset {
  background: var(--color-forest-900);
}

.tips-reset::before {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: radial-gradient(circle at 12% 20%, var(--color-orange-400) 0 1px, transparent 1.5px), radial-gradient(circle at 85% 68%, var(--color-paper-200) 0 1px, transparent 1.5px);
  background-size: 30px 30px, 42px 42px;
  content: "";
}

.tips-reset > .container { position: relative; }
.tips-reset :is(h2, h3, p, a, .eyebrow) { color: var(--color-paper-50); }
.tips-reset a { text-decoration-color: var(--color-orange-400); }

.tips-reset__heading {
  width: min(100%, 630px);
}

.tips-reset__heading > *:last-child { margin-bottom: 0; }

.tips-reset__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.tips-reset__steps li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}

.tips-reset__steps li + li {
  border-left: 1px dotted var(--color-paper-200);
  padding-left: var(--space-5);
}

.tips-reset__steps div { min-width: 0; }
.tips-reset__steps h3 { margin-bottom: var(--space-3); font-size: var(--text-h4); }
.tips-reset__steps p { margin: 0; }

.tips-reset__number {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-orange-400);
  color: var(--color-forest-900);
  font-family: var(--font-heading);
  font-weight: 800;
}

.tips-reset__note {
  margin-bottom: 0;
  color: var(--color-paper-200) !important;
  font-size: var(--text-sm);
}

.tips-fit__lane {
  display: flex;
  width: min(100%, 885px);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
  margin-left: calc((100% - min(100%, 885px)) / 2);
}

.tips-fit__heading { width: min(100%, 700px); }
.tips-fit__heading p { max-width: 640px; }

.tips-fit__prompt {
  width: min(100%, 690px);
  min-width: 0;
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-paper-100);
  padding: var(--space-5);
}

.tips-fit__prompt h3 { margin-bottom: var(--space-3); }
.tips-fit__prompt p { max-width: 540px; margin-bottom: 0; }
.tips-fit__prompt--two { align-self: flex-end; border-left: 4px solid var(--color-sky-500); }
.tips-fit__prompt--three { border-color: var(--color-coral-600); }

.tips-reference__heading { width: min(100%, 620px); }
.tips-reference__heading > *:last-child { margin-bottom: 0; }

.tips-reference__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.tips-reference__list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  border-bottom: 2px dotted var(--color-paper-200);
  padding-bottom: var(--space-4);
}

.tips-reference__list li > span {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-sky-500);
  color: var(--color-forest-900);
  font-family: var(--font-heading);
  font-weight: 800;
}

.tips-reference__list .tips-reference__final > span { background: var(--color-coral-600); color: var(--color-paper-50); }
.tips-reference__list div { min-width: 0; }
.tips-reference__list h3 { margin-bottom: var(--space-2); font-size: var(--text-h4); }
.tips-reference__list p { margin: 0; }

.tips-verdict__panel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 2fr);
  gap: var(--space-5);
  width: min(100%, 885px);
  min-width: 0;
  margin-inline: auto;
  border: var(--border-ink);
  border-radius: var(--radius-xl);
  background: var(--color-paper-100);
  box-shadow: var(--shadow-ink-strong);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

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

.tips-verdict__copy > * { margin: 0; }
.tips-verdict__copy h2 { max-width: 650px; }
.tips-verdict__copy > p { max-width: 650px; }
.tips-verdict__copy h3 { font-size: var(--text-h4); }

.tips-verdict__list {
  display: flex;
  width: min(100%, 520px);
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.25rem;
}

.tips-verdict__list li::marker { color: var(--color-coral-600); }

.tips-verdict__actions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.tips-verdict__actions > * { margin: 0; }
.tips-verdict__actions p { color: var(--color-ink-muted); font-size: var(--text-sm); }

.tips-verdict__mark {
  align-self: center;
  color: var(--color-coral-600);
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 0.85;
  text-align: center;
  transform: rotate(10deg);
}

.tips-verdict__mark span { color: var(--color-forest-500); font-size: 3rem; }

@media (max-width: 940px) {
  .tips-habits__notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tips-habit--one,
  .tips-habit--two,
  .tips-habit--three {
    grid-column: auto;
    margin-top: 0;
  }

  .tips-habit--three { grid-column: 1 / -1; width: min(100%, 520px); }
}

@media (max-width: 899px) {
  .tips-hero__grid {
    grid-template-columns: minmax(0, 55fr) minmax(330px, 45fr);
    gap: var(--space-5);
  }

  .tips-route__caution { margin-left: 72px; }
}

@media (max-width: 860px) {
  .tips-reading__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .tips-reading__text { order: 1; }
  .tips-reading__media { order: 2; width: min(100%, 420px); }

  .tips-route__stop {
    grid-template-columns: 56px minmax(0, 580px);
  }

  .tips-route__list::before { left: 27px; }
}

@media (max-width: 820px) {
  .tips-reset__steps {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .tips-reset__steps li + li {
    border-top: 1px dotted var(--color-paper-200);
    border-left: 0;
    padding-top: var(--space-4);
    padding-left: 0;
  }

  .tips-verdict__panel { grid-template-columns: 1fr; }
  .tips-verdict__mark { display: none; }
}

@media (max-width: 780px) {
  .tips-pack__strip,
  .tips-compass__panels,
  .tips-reference__list {
    grid-template-columns: 1fr;
  }

  .tips-pack__strip { gap: var(--space-4); }
}

@media (max-width: 700px) {
  .tips-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .tips-hero__copy h1 { font-size: 2.375rem; line-height: 1.105; }
  .tips-hero__actions { width: 100%; align-items: stretch; }
  .tips-hero__actions .button { width: 100%; }
  .tips-hero__media { margin: 0; transform: rotate(0.4deg); }

  .tips-section-heading,
  .tips-route__heading,
  .tips-habits__heading,
  .tips-fit__heading {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .tips-marker { width: 36px; min-width: 36px; height: 36px; }

  .tips-pack__strip { margin-top: var(--space-5); padding: var(--space-4); }

  .tips-route__heading { width: 100%; margin: 0; }
  .tips-route__list { width: 100%; gap: var(--space-4); margin-top: var(--space-5); }
  .tips-route__list::before { left: 19px; }
  .tips-route__stop { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); }
  .tips-route__number { width: 40px; height: 40px; font-size: 1rem; }
  .tips-route__content--paper,
  .tips-route__content--outlined { padding: var(--space-4); }
  .tips-route__caution { width: auto; margin-left: 40px; }

  .tips-reading__media { width: 100%; transform: rotate(-0.4deg); }
  .tips-reading__principles { width: 100%; }

  .tips-habits__notes { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); }
  .tips-habit--three { grid-column: auto; width: 100%; }

  .tips-compass__panels { margin-top: var(--space-5); }
  .tips-compass__panel { padding: var(--space-4); }

  .tips-reset__steps li { grid-template-columns: 40px minmax(0, 1fr); }

  .tips-fit__lane { width: 100%; margin-left: 0; }
  .tips-fit__prompt,
  .tips-fit__prompt--two { width: 100%; align-self: auto; padding: var(--space-4); }

  .tips-reference__list { margin-top: var(--space-5); }
  .tips-reference__list li { grid-template-columns: 40px minmax(0, 1fr); }

  .tips-verdict__panel { width: 100%; padding: var(--space-5); }
  .tips-verdict__actions { width: 100%; }
  .tips-verdict__actions .button { width: 100%; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .tips-hero__media,
  .tips-reading__media,
  .tips-verdict__mark { transform: none; }
}