/* Page-specific comparison guide */
body[data-helper-page] {
  --guide-ink: #101719;
  --guide-muted: #536267;
  --guide-blue: #16a9e8;
  --guide-lime: #d7f35c;
  --guide-line: #dce5e5;
  background: #f8fbf9;
  color: var(--guide-ink);
  font-family: Onest, Arial, sans-serif;
}
body[data-helper-page] .hero-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  background-color: #fff;
  color: #111;
  box-shadow: 0 1px 0 rgb(16 23 25 / 8%);
}
body[data-helper-page] .hero-navigation span { color: #12191b; }
body[data-helper-page] .hero-contact { color: #12191b; }
body[data-helper-page] main {
  display: grid;
  gap: 0;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 32px clamp(22px, 6vw, 88px) 110px;
  color: #101719;
  background: #f8fbf9;
}
body[data-helper-page] main section { min-width: 0; scroll-margin-top: 28px; }
.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr);
  align-items: center;
  gap: clamp(34px, 6vw, 90px);
  padding: clamp(52px, 8vw, 112px) 0 clamp(72px, 9vw, 130px);
}
.guide-hero__copy { max-width: 610px; }
.eyebrow {
  margin: 0 0 16px;
  color: #0078a9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.guide-hero h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(44px, 6vw, 82px);
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: .99;
}
.lead {
  max-width: 570px;
  margin: 26px 0 30px;
  color: var(--guide-muted);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6;
}
.action-link, .text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 999px;
  color: #071c21;
  background-color: var(--guide-lime);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
}
.action-link { padding: 16px 21px; }
.action-link:hover, .text-link:hover { background-color: #c8eb39; }
.guide-hero__media, .section-media, .variety-panel__image { margin: 0; }
.guide-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1.28 / 1;
  border-radius: 26px;
  object-fit: cover;
  box-shadow: 0 28px 60px rgb(17 33 37 / 13%);
}
figcaption { margin-top: 12px; color: #657478; font-size: 13px; line-height: 1.5; }
.guide-section { padding: clamp(62px, 8vw, 112px) 0; border-top: 1px solid var(--guide-line); }
.guide-section--tint {
  margin-inline: calc(clamp(22px, 6vw, 88px) * -1);
  padding-inline: clamp(22px, 6vw, 88px);
  background: #edf5f2;
}
.section-heading { max-width: 770px; margin: 0 auto 45px; text-align: center; }
.section-heading h2, .section-copy h2, .dark-intro h2, .inquiry-copy h2 {
  margin: 0 0 19px;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 720;
  letter-spacing: -.04em;
  line-height: 1.08;
}
.section-heading > p:last-child, .section-copy p:not(.eyebrow), .dark-intro > p:last-child, .inquiry-copy > p:last-child {
  color: var(--guide-muted);
  font-size: 17px;
  line-height: 1.75;
}
.principle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.principle-card {
  min-height: 226px;
  padding: 28px;
  border: 1px solid #dbe7e2;
  border-radius: 19px;
  background: #fff;
}
.card-index { color: #118db8; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.principle-card h3, .note-card h3, .variety-panel__copy h3 {
  margin: 27px 0 10px;
  font-size: 22px;
  letter-spacing: -.025em;
}
.principle-card p, .note-card p, .variety-panel__copy p { margin: 0; color: var(--guide-muted); font-size: 15px; line-height: 1.65; }
.guide-section--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr);
  align-items: center;
  gap: clamp(42px, 8vw, 112px);
}
.guide-section--reverse .section-copy { order: 2; }
.guide-section--reverse .section-media { order: 1; }
.section-copy { max-width: 590px; }
.section-copy h2 { max-width: 590px; }
.section-media img {
  display: block;
  width: 100%;
  max-height: 440px;
  aspect-ratio: 1.22 / 1;
  border-radius: 23px;
  background: #e6efed;
  object-fit: cover;
}
.variety-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
  align-items: center;
  gap: clamp(25px, 5vw, 70px);
  padding: clamp(20px, 4vw, 42px);
  border: 1px solid #dbe7e2;
  border-radius: 26px;
  background: #fff;
}
.variety-panel__image img { display: block; width: 100%; max-height: 390px; aspect-ratio: 1.18 / 1; border-radius: 17px; object-fit: cover; }
.variety-panel__copy { padding: 8px; }
.variety-panel__copy h3 { margin-top: 0; font-size: clamp(25px, 3vw, 34px); }
.variety-panel__copy p { margin-bottom: 24px; }
.text-link { padding: 13px 17px; font-size: 14px; }
.guide-section--dark {
  margin-inline: calc(clamp(22px, 6vw, 88px) * -1);
  padding: clamp(58px, 7vw, 96px) clamp(22px, 6vw, 88px);
  color: #fff;
  background: #102126;
}
.dark-intro { max-width: 760px; margin-bottom: 38px; }
.dark-intro .eyebrow { color: #9ddcff; }
.dark-intro h2 { max-width: 650px; }
.dark-intro > p:last-child { max-width: 710px; color: #c4d2d4; }
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.note-card { padding: 27px; border: 1px solid #405357; border-radius: 17px; background: #172c32; }
.note-card h3 { margin-top: 0; color: #fff; }
.note-card p { color: #c4d2d4; }
.guide-section--closing { padding-bottom: 72px; }
.next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.next-steps a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border: 1px solid #cddbd8;
  border-radius: 14px;
  color: #132126;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.next-steps a:hover { border-color: #16a9e8; background: #e8f7fc; }
.inquiry-section {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(340px, 1fr);
  align-items: start;
  gap: clamp(35px, 7vw, 95px);
  padding: clamp(38px, 6vw, 70px);
  border: 1px solid #d7e4e0;
  border-radius: 25px;
  background: #edf5f2;
}
.inquiry-copy h2 { font-size: clamp(30px, 3.5vw, 44px); }
.inquiry-copy > p:last-child { font-size: 16px; }
.inquiry-form { display: grid; gap: 17px; }
.form-field { display: grid; gap: 8px; }
.form-field label { font-size: 14px; font-weight: 750; }
.form-field label span { color: #657478; font-weight: 500; }
.form-field input, .form-field textarea {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  border: 1px solid #aebfbb;
  border-radius: 9px;
  padding: 13px 14px;
  color: #101719;
  background: #fff;
  font: inherit;
  font-size: 16px;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: 3px solid rgb(22 169 232 / 28%); border-color: #0784b7; }
.form-field .is-invalid { border-color: #b82934; }
.field-error { min-height: 1em; color: #9c1725; font-size: 13px; line-height: 1.35; }
.form-status { min-height: 1.4em; margin: 0; color: #334448; font-size: 14px; }
.submit-button {
  justify-self: start;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  color: #fff;
  background-color: #08769f;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
}
.submit-button:hover { background-color: #075d7d; }
main a:focus-visible, main button:focus-visible { outline: 3px solid #0078a9; outline-offset: 4px; }
.reveal-target { transition: opacity 560ms ease, transform 560ms cubic-bezier(.2,.7,.25,1); }
.reveal-target.reveal-pending:not(.is-visible) { opacity: 0; transform: translateY(18px); }
.reveal-target.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-target, .reveal-target.reveal-pending:not(.is-visible) { opacity: 1; transform: none; transition: none; }
  html:focus-within { scroll-behavior: auto; }
}
@media (max-width: 1600px) {
  body[data-helper-page] main { margin-top: calc(167px - clamp(24px, 7.292vw, 140px)); }
}
@media (max-width: 900px) {
  body[data-helper-page] main { padding-inline: 30px; }
  .guide-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr); gap: 30px; }
  .guide-section--split { gap: 36px; }
  .guide-section--tint, .guide-section--dark { margin-inline: -30px; padding-inline: 30px; }
  .inquiry-section { grid-template-columns: 1fr 1fr; padding: 30px; }
}
@media (max-width: 650px) {
  body[data-helper-page] main { margin-top: calc(236px - clamp(24px, 7.292vw, 140px)); padding: 8px 20px 70px; }
  .guide-hero { grid-template-columns: 1fr; gap: 30px; padding: 54px 0 64px; }
  .guide-hero h1 { font-size: clamp(44px, 13vw, 64px); }
  .lead { margin: 20px 0 24px; font-size: 17px; }
  .guide-hero__media img { max-height: 360px; aspect-ratio: 1.25 / 1; }
  .guide-section { padding-block: 58px; }
  .guide-section--tint, .guide-section--dark { margin-inline: -20px; padding-inline: 20px; }
  .section-heading { margin-bottom: 30px; text-align: left; }
  .section-heading h2, .section-copy h2, .dark-intro h2, .inquiry-copy h2 { font-size: clamp(31px, 9vw, 42px); }
  .section-heading > p:last-child, .section-copy p:not(.eyebrow), .dark-intro > p:last-child, .inquiry-copy > p:last-child { font-size: 16px; }
  .principle-grid, .guide-section--split, .variety-panel, .note-grid, .next-steps, .inquiry-section { grid-template-columns: 1fr; }
  .principle-card { min-height: 0; padding: 23px; }
  .principle-card h3 { margin-top: 18px; }
  .guide-section--reverse .section-copy, .guide-section--reverse .section-media { order: initial; }
  .section-media img { max-height: 340px; }
  .variety-panel { gap: 20px; padding: 16px; }
  .variety-panel__copy { padding: 4px; }
  .next-steps a { min-height: 24px; }
  .inquiry-section { gap: 24px; padding: 24px 19px; border-radius: 18px; }
  .submit-button { width: 100%; }
}
@media (max-width: 370px) {
  .guide-hero h1 { font-size: 42px; }
  .action-link { padding: 14px 17px; }
  .principle-card, .note-card { padding: 20px; }
}