/* LottoLuma: screenshot-guided About + homepage card alignment repair.
   Deliberately scoped to these named sections, in both colour themes. */

/* ABOUT / Our Approach: consistent inner gutter, heading rhythm and card geometry. */
html[data-theme] body.about-page.vp-site-info main#mainContent > section#our-approach.about-section {
  box-sizing:border-box;
  padding:clamp(23px,2.4vw,34px) clamp(20px,2.4vw,34px) clamp(28px,3vw,40px)!important;
  margin-block:clamp(20px,2.5vw,32px)!important;
}
html[data-theme] body.about-page #our-approach .about-section-head {
  display:flex!important;align-items:end!important;justify-content:space-between!important;
  gap:clamp(14px,2.5vw,34px)!important;margin:0 0 27px!important;
}
html[data-theme] body.about-page #our-approach .about-section-head h2 {
  margin:12px 0 0!important;line-height:1.13!important;
}
html[data-theme] body.about-page #our-approach .about-section-head > p {
  margin:0 0 3px!important;max-width:400px;line-height:1.65!important;
}
html[data-theme] body.about-page #our-approach .about-card-grid {
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(14px,1.4vw,20px)!important;
}
html[data-theme] body.about-page #our-approach .about-feature {
  box-sizing:border-box;display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  min-width:0;min-height:305px!important;padding:clamp(21px,2.1vw,28px)!important;
  gap:0!important;
}
html[data-theme] body.about-page #our-approach .about-feature .feature-icon {
  display:grid!important;place-items:center!important;flex:0 0 52px!important;
  width:52px!important;height:52px!important;border-radius:14px!important;
  margin:0 0 19px!important;font-size:0!important;
}
html[data-theme] body.about-page #our-approach .about-feature .feature-icon svg {
  display:block;width:26px;height:26px;stroke:currentColor;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
html[data-theme] body.about-page #our-approach .about-feature .feature-count {
  display:block;margin:0 0 12px!important;font-size:10px!important;line-height:1.45;
}
html[data-theme] body.about-page #our-approach .about-feature h3 {
  margin:0 0 12px!important;font-size:clamp(17px,1.4vw,20px)!important;line-height:1.34!important;
  overflow-wrap:break-word;
}
html[data-theme] body.about-page #our-approach .about-feature p {
  margin:0 0 23px!important;font-size:12px!important;line-height:1.72!important;
}
html[data-theme] body.about-page #our-approach .about-feature > span {
  width:100%;margin-top:auto!important;align-items:center!important;
  line-height:1.5!important;
}

/* ABOUT / What We Believe: heading should not touch the first principle. */
html[data-theme] body.about-page .about-principles h2#principles-title {
  margin:13px 0 26px!important;line-height:1.17!important;
}
html[data-theme] body.about-page .about-principles .principle-item {
  display:flex!important;align-items:flex-start!important;gap:14px!important;
  margin:0 0 11px!important;padding:17px 16px!important;
  min-width:0;border-radius:14px!important;
}
html[data-theme] body.about-page .about-principles .principle-mark {
  flex:0 0 32px!important;width:32px!important;height:32px!important;
  border-radius:50%!important;margin:0!important;
}
html[data-theme] body.about-page .about-principles .principle-item > div {min-width:0;}
html[data-theme] body.about-page .about-principles .principle-item strong {
  display:block;line-height:1.45!important;
}
html[data-theme] body.about-page .about-principles .principle-item p {
  margin:6px 0 0!important;line-height:1.7!important;
}

/* HOME / Three steps: intentional icon-left, step-number-right composition. */
html[data-theme] body.visual-perfection-home #how-it-works .atlas-steps-grid {
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch;gap:clamp(14px,1.45vw,21px)!important;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-steps-grid .atlas-step-card {
  box-sizing:border-box;display:flex!important;flex-direction:column!important;
  min-width:0;min-height:298px!important;
  padding:clamp(22px,2.1vw,30px)!important;gap:0!important;
  border-radius:20px!important;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card .atlas-step-header {
  box-sizing:border-box;display:flex!important;align-items:flex-start!important;
  justify-content:space-between!important;flex-direction:row!important;
  width:100%!important;min-height:58px!important;
  gap:14px!important;margin:0 0 22px!important;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card .atlas-step-icon {
  order:-1!important;display:grid!important;place-items:center!important;
  flex:0 0 55px!important;width:55px!important;height:55px!important;
  border-radius:15px!important;margin:0!important;font-size:0!important;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card .atlas-step-icon svg {
  display:block!important;width:26px!important;height:26px!important;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card .atlas-step-number {
  box-sizing:border-box;flex:0 0 auto!important;min-width:38px!important;min-height:30px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  margin:1px 0 0!important;padding:5px 10px!important;
  border-radius:9px!important;font-size:12px!important;font-weight:850!important;
  letter-spacing:.035em!important;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card h3 {
  margin:0 0 11px!important;font-size:clamp(18px,1.35vw,20px)!important;
  line-height:1.35!important;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card p {
  margin:0 0 25px!important;font-size:13px!important;
  line-height:1.7!important;min-height:0!important;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card > a {
  box-sizing:border-box;display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:12px!important;
  margin:auto 0 0!important;min-height:44px!important;
  padding:13px 0 0!important;border-top:1px solid var(--lo-rule,#dce7ee)!important;
  font-size:12px!important;line-height:1.4!important;text-decoration:none;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card > a span {
  flex:0 0 27px;display:grid;place-items:center;width:27px;height:27px;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card:focus-within {
  outline:2px solid var(--mf-blue,#2473b5);outline-offset:3px;
}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card:nth-child(2) .atlas-step-number {color:var(--mf-green,#14865a)!important;}
html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card:nth-child(3) .atlas-step-number {color:var(--mf-gold,#ba883b)!important;}

@media(max-width:960px) {
  html[data-theme] body.about-page #our-approach .about-section-head {align-items:flex-start!important;}
  html[data-theme] body.about-page #our-approach .about-section-head > p {max-width:300px;}
  html[data-theme] body.about-page #our-approach .about-feature {min-height:320px!important;padding:21px!important;}
}
@media(max-width:760px) {
  html[data-theme] body.about-page #our-approach .about-section-head {
    flex-direction:column!important;align-items:flex-start!important;gap:11px!important;
    margin-bottom:20px!important;
  }
  html[data-theme] body.about-page #our-approach .about-section-head > p {max-width:60ch;}
  html[data-theme] body.about-page #our-approach .about-card-grid {grid-template-columns:1fr!important;gap:13px!important;}
  html[data-theme] body.about-page #our-approach .about-feature {min-height:0!important;padding:23px!important;}
  html[data-theme] body.about-page #our-approach .about-feature p {margin-bottom:18px!important;}
  html[data-theme] body.about-page .about-principles h2#principles-title {margin-bottom:22px!important;}
  html[data-theme] body.visual-perfection-home #how-it-works .atlas-steps-grid {grid-template-columns:1fr!important;}
  html[data-theme] body.visual-perfection-home #how-it-works .atlas-steps-grid .atlas-step-card {min-height:0!important;padding:24px!important;}
}
@media(min-width:761px) and (max-width:1020px) {
  html[data-theme] body.visual-perfection-home #how-it-works .atlas-steps-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:400px) {
  html[data-theme] body.about-page.vp-site-info main#mainContent > section#our-approach.about-section {padding:20px 15px 24px!important;}
  html[data-theme] body.about-page .about-principles .principle-item {padding:14px 12px!important;gap:10px!important;}
  html[data-theme] body.visual-perfection-home #how-it-works .atlas-steps-grid .atlas-step-card {padding:21px!important;}
}
@media(prefers-reduced-motion:reduce){
  html[data-theme] body.visual-perfection-home #how-it-works .atlas-step-card {transition:none!important;transform:none!important;}
}