.tips-page { padding-top: 28px; }

.tips-hero {
  padding: 30px 32px;
  border-radius: 16px;
  background: linear-gradient(125deg, #24272c 0%, #393d44 100%);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 330px;
  align-items: center;
  gap: 38px;
}

.tips-hero > div:first-child > span { color: #ff8d82; font-size: 10px; font-weight: 850; }
.tips-hero h2 { margin: 12px 0 0; font-size: 24px; line-height: 1.45; letter-spacing: -.045em; }
.tips-odds { padding: 21px 23px; border-radius: 12px; background: rgba(255,255,255,.1); }
.tips-odds > span { color: #d3d6da; font-size: 9px; }
.tips-odds strong { display: block; margin: 8px 0 7px; color: #ff8d82; font-size: 25px; letter-spacing: -.035em; }
.tips-odds p { margin: 0; color: #c9cdd2; font-size: 9px; line-height: 1.65; }

.tips-section { margin-top: 40px; }
.tips-section > header { margin-bottom: 17px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.tips-section > header > span { display: block; flex: 0 0 auto; color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.tips-section > header h2 { margin: 7px 0 0; font-size: 21px; letter-spacing: -.04em; }
.tips-section > header p { max-width: 390px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: right; }

.tips-balance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.tips-balance-grid article { min-height: 235px; padding: 23px; border: 1px solid #e1e4e8; border-radius: 13px; display: flex; flex-direction: column; }
.tips-balance-grid article > span { color: var(--green); font-size: 10px; font-weight: 900; }
.tips-balance-grid h3 { margin: 14px 0 9px; font-size: 14px; letter-spacing: -.025em; }
.tips-balance-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.tips-number-chips { margin-top: auto; padding-top: 17px; display: flex; gap: 6px; }
.tips-number-chips span { width: 29px; height: 29px; border-radius: 50%; background: #f0f2f4; color: #525860; display: grid; place-items: center; font-size: 9px; font-weight: 850; }
.tips-number-chips span:nth-child(3n) { background: var(--green-soft); color: var(--green-dark); }

.tips-choice-list { border-top: 2px solid var(--ink); }
.tips-choice-list article { min-height: 92px; padding: 18px 14px; border-bottom: 1px solid #e1e4e8; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 14px; }
.tips-choice-list article > span { width: 36px; height: 36px; border-radius: 50%; background: #f1f3f5; color: #747a82; display: grid; place-items: center; font-size: 9px; font-weight: 900; }
.tips-choice-list h3 { margin: 0; font-size: 13px; }
.tips-choice-list p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }

.tips-safety-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.tips-safety-grid article { min-height: 175px; padding: 23px; border-radius: 13px; background: #f3f4f6; }
.tips-safety-grid article.is-budget { background: #fff2e7; border: 1px solid #f2cba8; }
.tips-safety-grid article > span { color: var(--green-dark); font-size: 9px; font-weight: 900; }
.tips-safety-grid h3 { margin: 15px 0 9px; font-size: 13px; line-height: 1.45; }
.tips-safety-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }

.tips-budget-banner { margin-top: 22px; padding: 23px 25px; border-radius: 13px; background: var(--green-soft); display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.tips-budget-banner span { color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.tips-budget-banner strong { display: block; margin-top: 7px; font-size: 13px; }
.tips-budget-banner p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.tips-budget-banner a { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border-radius: 8px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }

@media (max-width: 1220px) {
  .tips-hero { grid-template-columns: 1fr 290px; gap: 25px; }
  .tips-section > header p { max-width: 320px; }
}

/* Readability refresh */
.tips-page {
  padding-top: 38px;
}

.tips-hero {
  min-height: 250px;
  padding: 42px 44px;
  border-radius: 22px;
  grid-template-columns: 1fr 360px;
  gap: 44px;
}

.tips-hero > div:first-child > span {
  font-size: 12px;
  font-weight: 900;
}

.tips-hero h2 {
  margin-top: 15px;
  font-size: 32px;
  line-height: 1.45;
}

.tips-odds {
  padding: 27px 28px;
  border-radius: 16px;
}

.tips-odds > span {
  font-size: 12px;
}

.tips-odds strong {
  margin: 10px 0 9px;
  font-size: 34px;
}

.tips-odds p {
  font-size: 13px;
  line-height: 1.75;
}

.tips-section {
  margin-top: 58px;
}

.tips-section > header {
  margin-bottom: 23px;
  align-items: flex-start;
  gap: 36px;
}

.tips-section > header > span {
  font-size: 10px;
}

.tips-section > header h2 {
  margin-top: 9px;
  font-size: 28px;
  line-height: 1.35;
}

.tips-section > header p {
  max-width: 440px;
  padding-top: 20px;
  font-size: 14px;
  line-height: 1.75;
}

.tips-balance-grid {
  gap: 12px;
}

.tips-balance-grid article {
  min-height: 290px;
  padding: 29px;
  border-color: #e3e6ea;
  border-radius: 17px;
}

.tips-balance-grid article > span {
  font-size: 12px;
}

.tips-balance-grid h3 {
  margin: 17px 0 11px;
  font-size: 20px;
  line-height: 1.45;
}

.tips-balance-grid p {
  font-size: 14px;
  line-height: 1.75;
}

.tips-number-chips {
  padding-top: 22px;
  gap: 8px;
}

.tips-number-chips span {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.tips-choice-list {
  border-top: 0;
  display: grid;
  gap: 10px;
}

.tips-choice-list article {
  min-height: 116px;
  padding: 23px 24px;
  border: 1px solid #e3e6ea;
  border-radius: 15px;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 17px;
}

.tips-choice-list article > span {
  width: 44px;
  height: 44px;
  font-size: 11px;
}

.tips-choice-list h3 {
  font-size: 17px;
}

.tips-choice-list p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
}

.tips-safety-grid {
  gap: 12px;
}

.tips-safety-grid article {
  min-height: 220px;
  padding: 29px;
  border-radius: 17px;
}

.tips-safety-grid article > span {
  font-size: 11px;
}

.tips-safety-grid h3 {
  margin: 18px 0 11px;
  font-size: 19px;
  line-height: 1.5;
}

.tips-safety-grid p {
  font-size: 14px;
  line-height: 1.75;
}

.tips-budget-banner {
  margin-top: 26px;
  padding: 29px 30px;
  border-radius: 17px;
}

.tips-budget-banner span {
  font-size: 10px;
}

.tips-budget-banner strong {
  margin-top: 9px;
  font-size: 18px;
}

.tips-budget-banner p {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.65;
}

.tips-budget-banner a {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 11px;
  font-size: 13px;
}

@media (max-width: 1220px) {
  .tips-hero {
    grid-template-columns: 1fr 300px;
    gap: 28px;
    padding: 38px;
  }

  .tips-section > header p {
    max-width: 360px;
  }
}