:root {
  --red: #e50038;
  --red-dark: #c60031;
  --black: #111111;
  --text: #222222;
  --muted: #666666;
  --line: #ececec;
  --bg: #f7f7f7;
  --soft-red: #fff2f5;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.07);
  --font-jp: "Noto Sans JP", system-ui, sans-serif;
  --font-en: "Josefin Sans", "Noto Sans JP", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: var(--font-jp);
  letter-spacing: 0.03em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.pc-only {
  display: inline;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 40px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(14px);
}

.brand,
.footer-brand {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0;
}

.brand {
  font-size: 30px;
  margin-right: auto;
}

.brand-dot {
  font-size: 20px;
  margin-left: 2px;
}

.global-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 14px;
  font-weight: 700;
}

.global-nav a {
  transition: color 0.2s ease;
}

.global-nav a:hover {
  color: var(--red);
}

.header-cta,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 900;
  box-shadow: 0 14px 24px rgba(229, 0, 56, 0.24);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.header-cta {
  height: 42px;
  padding: 0 24px;
  font-size: 14px;
}

.primary-button {
  min-width: 300px;
  min-height: 62px;
  padding: 0 34px;
  font-size: 17px;
}

.primary-button.full {
  width: 100%;
  min-width: auto;
}

.header-cta:hover,
.primary-button:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(229, 0, 56, 0.3);
}

.menu-button {
  display: none;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  background:
    radial-gradient(circle at 75% 50%, rgba(229, 0, 56, 0.08), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
}

.hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 90px 54px 70px;
  display: grid;
  grid-template-columns: 0.9fr 1.35fr;
  align-items: center;
  gap: 44px;
}

.pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 20px;
  border: 1px solid var(--red);
  border-radius: 999px;
  color: var(--red);
  font-weight: 900;
  font-size: 14px;
  margin: 0 0 28px;
}

.hero h1 {
  margin: 0;
  color: var(--black);
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1.22;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.hero h1 span {
  color: var(--red);
}

.lead {
  margin: 30px 0 0;
  font-size: 18px;
  line-height: 2;
  font-weight: 700;
}

.sub-lead {
  margin: 8px 0 30px;
  line-height: 2;
  color: #333;
}

.note {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.hero-visual {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animal-group {
  width: min(850px, 100%);
  object-fit: contain;
}

/* Common */
.section {
  padding: 70px 54px;
}

.section-heading {
  text-align: center;
  margin: 0 auto 34px;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.5;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.section-heading span {
  color: var(--red);
}

.align-left {
  text-align: left;
  margin-left: 0;
}

.small-heading h2 {
  font-size: 28px;
}

/* Problems */
.problems {
  background: #fff;
}

.problem-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.problem-card,
.benefit-card,
.channel-card,
.plan-card,
.form-panel-inner,
details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04);
}

.problem-card {
  min-height: 142px;
  padding: 22px 14px;
  text-align: center;
  display: grid;
  place-items: center;
  gap: 12px;
}

.problem-card .icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--soft-red);
  color: var(--red);
  font-weight: 900;
}

.problem-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

/* Diagnosis layout */
.diagnosis-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  gap: 46px;
  align-items: start;
  background:
    linear-gradient(180deg, #f7f7f7 0%, #fff 36%, #f7f7f7 100%);
}

.left-content {
  min-width: 0;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 54px;
}

.channel-card {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  padding: 26px;
}

.channel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--red);
}

.channel-title span {
  font-size: 24px;
}

.channel-title h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.channel-title small {
  font-size: 16px;
  margin-right: 8px;
}

.channel-card p {
  margin: 18px 0 0;
  line-height: 1.8;
  font-weight: 700;
}

.card-animal {
  position: absolute;
  right: 10px;
  bottom: -4px;
  width: 145px;
  opacity: 0.45;
  pointer-events: none;
}

/* Benefits */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 54px;
}

.benefit-card {
  padding: 26px 18px;
  text-align: center;
}

.benefit-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--red);
  font-size: 34px;
  line-height: 1;
  margin-bottom: 14px;
}

.benefit-card h3 {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 18px;
}

.benefit-card p {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.8;
}

/* Flow */
.flow {
  margin-bottom: 54px;
}

.flow h2,
.plans h2,
.faq h2 {
  text-align: center;
  font-size: 28px;
  margin: 0 0 26px;
  letter-spacing: 0.12em;
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.flow-steps article {
  position: relative;
  padding: 24px 12px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
}

.flow-steps b {
  display: block;
  color: var(--red);
  font-size: 12px;
  margin-bottom: 8px;
}

.flow-steps span {
  font-weight: 900;
}

/* Plans */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.plan-card {
  position: relative;
  min-height: 150px;
  padding: 26px;
  text-align: center;
}

.plan-card h3 {
  margin: 0;
  font-family: var(--font-en);
  font-size: 26px;
}

.plan-card .price {
  margin: 10px 0 8px;
  font-weight: 900;
}

.plan-card .price strong {
  font-size: 36px;
}

.plan-card p:last-child {
  margin: 0;
  font-size: 13px;
  color: #444;
}

.recommended {
  border-color: var(--red);
  box-shadow: 0 18px 40px rgba(229, 0, 56, 0.12);
}

.recommend-label {
  position: absolute;
  top: -14px;
  left: 22px;
  margin: 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--red);
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900;
}

/* Form */
.form-panel {
  position: sticky;
  top: 94px;
}

.form-panel-inner {
  border: 2px solid var(--red);
  border-radius: 26px;
  padding: 38px;
  box-shadow: var(--shadow);
}

.form-panel h2 {
  margin: 0 0 12px;
  text-align: center;
  color: var(--red);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.form-panel h2::after {
  content: "";
  display: block;
  width: 92px;
  height: 3px;
  background: var(--red);
  margin: 14px auto 0;
}

.form-panel p {
  margin: 0 0 24px;
  color: #555;
  line-height: 1.8;
  text-align: center;
}

.mock-form {
  display: grid;
  gap: 12px;
}

.mock-form label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}

.mock-form input,
.mock-form select,
.mock-form textarea {
  width: 95%;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 12px 14px;
  font: inherit;
  background: #fff;
  outline: none;
}

.mock-form textarea {
  min-height: 70px;
  resize: vertical;
}

.mock-form input:focus,
.mock-form select:focus,
.mock-form textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(229, 0, 56, 0.08);
}

.privacy-check {
  display: flex !important;
  grid-template-columns: auto 1fr !important;
  align-items: center;
  gap: 10px !important;
  color: var(--red);
}

.privacy-check input {
  width: 18px;
  height: 18px;
}

/* Google form area */
.google-form-wrap iframe {
  width: 100%;
  border: 0;
  display: block;
  border-radius: 14px;
}

/* Notice */
.notice {
  margin: 0 auto;
  padding: 22px 54px;
  background: var(--soft-red);
  color: #333;
  text-align: center;
  line-height: 2;
  font-weight: 700;
}

/* FAQ */
.faq {
  padding: 70px 54px;
  background: #fff;
}

.faq-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

details {
  padding: 0;
  overflow: hidden;
}

summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  color: var(--red);
  font-size: 22px;
}

details[open] summary::after {
  content: "−";
}

details p {
  margin: 0;
  padding: 0 24px 22px;
  line-height: 1.8;
  color: #555;
}

/* Footer */
.site-footer {
  background: #050505;
  color: #fff;
  min-height: 120px;
  padding: 38px 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.footer-brand {
  display: inline-block;
  font-size: 36px;
  margin-bottom: 8px;
}

.footer-brand span {
  font-size: 22px;
}

.site-footer p,
.site-footer small {
  margin: 0;
  color: rgba(255,255,255,0.72);
}

  .header-cta--pdf {
    font-weight: 500;
  }

    .primary-button--pdf {
    font-weight: 500;
  }

/* Responsive */
@media (max-width: 1180px) {
  .global-nav {
    display: none;
  }

  .menu-button {
    display: inline-grid;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 8px;
  }

  .menu-button span {
    width: 24px;
    height: 2px;
    background: #111;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: auto;
  }

  .diagnosis-layout {
    grid-template-columns: 1fr;
  }

  .form-panel {
    position: static;
  }

  .problem-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .pc-only {
    display: none;
  }

  .site-header {
    height: 64px;
    padding: 0 18px;
  }

  .brand {
    font-size: 26px;
  }

  .header-cta {
    display: none;
  }

  .hero-inner {
    padding: 58px 22px 44px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .primary-button {
    min-width: 100%;
  }

  .section,
  .diagnosis-layout,
  .faq {
    padding: 38px 22px;
  }

  .problem-grid,
  .channel-grid,
  .benefit-grid,
  .flow-steps,
  .plan-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .form-panel-inner {
    padding: 26px 18px;
  }

  .site-footer {
    display: block;
    padding: 34px 22px;
  }

  .site-footer small {
    display: block;
    margin-top: 18px;
  }
}

/* PDF reference layout: original palette, typography and controls retained. */
html { scroll-padding-top: 90px; }
body { background: var(--bg); }
main {
  background:
    radial-gradient(ellipse 370px 390px at 0% 15%, rgba(229,0,56,.16), transparent 75%),
    radial-gradient(ellipse 360px 470px at 100% 32%, rgba(229,0,56,.14), transparent 75%),
    radial-gradient(ellipse 380px 450px at 0% 57%, rgba(229,0,56,.14), transparent 75%),
    radial-gradient(ellipse 320px 390px at 85% 81%, rgba(229,0,56,.13), transparent 75%);
}
.hero {
  background: radial-gradient(ellipse 300px 310px at 76% 31%, rgba(229,0,56,.18), transparent 80%);
}
.hero-copy, .hero-visual, .channel-card, .benefit-card, .form-panel { min-width: 0; }
.problems { position: relative; background: transparent; }
.problem-animal {
  position: absolute;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
}
.problem-elephant {
  width: 311px;
  height: 175px;
  left: calc(50% - 517px);
  top: 124px;
  transform: rotate(-8deg);
}
.problem-giraffe {
  width: 630px;
  height: 382px;
  right: calc(50% - 670px);
  top: 74px;
}
.problem-card { border-color: var(--red); box-shadow: 0 2px 9px rgba(229,0,56,.22); }
.problem-card .icon { background: transparent; color: var(--black); border-radius: 0; font-size: 32px; }
.diagnosis-layout { display: block; background: transparent; }
.form-panel { position: static; margin: 90px auto 0; max-width: 720px; }
.form-panel-inner { position: relative; padding: 50px 48px; }
.form-panel h2 { color: var(--black); letter-spacing: .06em; }
.form-panel h2 span, .flow h2 span { color: var(--red); }
.form-panel h2::after { display: none; }
.form-panel p { font-size: 13px; }
.mock-form { width: 100%; max-width: 360px; margin: 34px auto 0; gap: 19px; }
.mock-form input, .mock-form select, .mock-form textarea { min-width: 0; background: #eff4f7; }
.privacy-check input { flex: 0 0 18px; }
.form-animal { position: absolute; width: 70px; height: 85px; object-fit: cover; right: 28px; top: 175px; pointer-events: none; }
.flow-steps { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; gap: 65px; }
.flow-steps article { border: 0; background: transparent; padding: 0 12px; }
.flow-steps article::before {
  content: counter(flow-step, decimal-leading-zero);
  counter-increment: flow-step;
  display: grid; place-items: center; width: 80px; height: 80px;
  margin: 0 auto 16px; border-radius: 50%; color: var(--red); background: #fff;
  box-shadow: 0 4px 12px rgba(229,0,56,.25); font: 28px var(--font-en);
}
.flow-steps { counter-reset: flow-step; }
.flow-steps article:not(:last-child)::after {
  content: ''; position: absolute; left: calc(50% - 4px); bottom: -32px;
  width: 8px; height: 8px; border-right: 1px solid var(--red); border-bottom: 1px solid var(--red);
  transform: rotate(45deg);
}
.flow-steps b { width: 100px; margin: 0 auto 10px; border: 1px solid var(--red); border-radius: 999px; padding: 2px 8px; }
.flow-steps span { font-size: 18px; }
.notice { background: transparent; font-size: 13px; font-weight: 500; }
.faq { background: transparent; }
.contact { padding: 78px 24px; background: linear-gradient(180deg, var(--red), var(--red-dark)); color: #fff; }
.contact-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.contact h2 { margin: 0; font: 700 48px var(--font-en); }
.contact .primary-button { border: 1px solid #fff; box-shadow: none; }
.site-footer { background: #050505; color: #fff; }
.site-footer p, .site-footer small { color: rgba(255,255,255,.72); }
@media (min-width: 761px) {
  .site-header { position: relative; max-width: 1440px; margin: 0 auto; height: 100px; background: transparent; border: 0; backdrop-filter: none; }
  .hero-inner { max-width: 1280px; padding: 80px 54px 100px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: 40px; min-height: 640px; }
  .hero h1 { font-size: clamp(34px, 3.4vw, 46px); line-height: 1.45; letter-spacing: .02em; }
  .hero-visual { min-height: 0; }
  .lead { font-size: 15px; margin-top: 24px; }
  .sub-lead { font-size: 13px; }
  .pill { margin-bottom: 20px; }
  .note { font-size: 11px; line-height: 1.8; }
  .section-heading h2 { font-size: 28px; letter-spacing: .06em; }
  .problems { max-width: 1180px; margin: 0 auto; padding: 90px 21px 25px; }
  .problems .section-heading { max-width: 480px; border-bottom: 1px solid var(--red); padding-bottom: 12px; margin-bottom: 26px; }
  .problem-grid { max-width: 480px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .problem-card { min-height: 130px; padding: 16px 10px; gap: 6px; }
  .problem-card h3 { font-size: 13px; }
  .diagnosis-layout { max-width: 1000px; margin: 0 auto; padding: 50px 40px 65px; }
  .left-content { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px 38px; max-width: 780px; margin: 0 auto; }
  .small-heading { grid-row: 1; grid-column: 1 / -1; border-bottom: 1px solid var(--red); padding-bottom: 16px; width: 100%; margin-bottom: 0; }
  .align-left { grid-column: 2; grid-row: 2; margin: 0; align-self: center; }
  .align-left h2 { font-size: 23px; }
  .benefit-grid { grid-column: 1; grid-row: 2 / 4; grid-template-columns: 1fr; gap: 24px; margin: 0; counter-reset: benefit; }
  .benefit-card { position: relative; padding: 25px 16px 20px; box-shadow: 0 3px 10px rgba(229,0,56,.23); }
  .benefit-card::before { counter-increment: benefit; content: counter(benefit, decimal-leading-zero); position: absolute; top: -15px; left: 0; color: rgba(229,0,56,.12); font: 700 52px var(--font-en); }
  .benefit-card h3 { color: var(--text); font-size: 17px; }
  .benefit-card p { font-size: 12px; }
  .channel-grid { grid-column: 2; grid-row: 3; grid-template-columns: 1fr; gap: 20px; margin: 0; }
  .channel-card { min-height: 180px; padding: 24px 120px 24px 22px; }
  .channel-title { gap: 6px; }
  .channel-title h3 { font-size: 19px; }
  .channel-title small { font-size: 13px; margin-right: 3px; }
  .channel-card p { font-size: 13px; font-weight: 500; }
  .card-animal { width: 105px; height: 125px; max-height: 155px; object-fit: cover; bottom: 12px; opacity: 1; }
  .flow { grid-column: 1 / -1; margin: 85px 0 35px; }
  .flow h2 { width: fit-content; margin: 0 auto 40px; padding-bottom: 12px; border-bottom: 1px solid var(--red); }
  .plans { grid-column: 1 / -1; margin-top: 25px; }
  .plans h2 { font-size: 20px; }
  .plan-card { padding: 24px 12px; }
  .plan-card .price strong { font-size: 29px; }
  .faq-grid { max-width: 900px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .hero-inner { padding: 60px 32px 75px; gap: 24px; }
  .hero h1 { font-size: 34px; }
  .problem-elephant {
    left: 8px;
    width: 144px;
    height: 124px;
  }
  .problem-giraffe {
    right: 6px;
    width: 132px;
    height: 288px;
  }
}
@media (max-width: 1180px) {
  .global-nav.is-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: 24px; background: #fff; box-shadow: var(--shadow); gap: 22px; }
}
@media (max-width: 760px) {
  .problem-animal { display: none; }
  .form-animal { position: static; width: 55px; margin: 0 auto 18px; }
  .form-panel { margin-top: 52px; }
  .form-panel-inner { padding: 26px 18px; }
  .form-panel h2 { font-size: clamp(23px, 6vw, 32px); }
  .hero h1 { font-size: clamp(32px, 9vw, 42px); }
  .mock-form { max-width: 100%; }
  .contact-inner { flex-direction: column; align-items: stretch; }
  .contact h2 { font-size: 38px; text-align: center; }
  .contact { padding: 0px 22px; }
  .notice { padding: 22px; }
  .flow-steps { gap: 65px; }
}

/* PDF application and CONTACT forms. */
.form-panel { max-width: 720px; }
.form-panel-inner { padding: 50px 42px 36px; border-width: 1px; }
.form-panel h2 { font-size: 36px; }
.diagnosis-form { max-width: 520px; gap: 17px; margin-top: 32px; }
.diagnosis-form .diagnosis-field { gap: 5px; font-size: 10px; font-weight: 500; }
.diagnosis-form .diagnosis-field input, .diagnosis-form select { height: 40px; padding: 8px 14px; font-size: 12px; line-height: 1.4; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.field-badge { display: inline-block; vertical-align: middle; padding: 0 5px; border-radius: 999px; color: #fff; background: var(--red); font-size: 8px; line-height: 1.5; }
.field-badge.optional { background: var(--muted); }
.field-hint { font-size: 9px; }
.diagnosis-options { min-width: 0; padding: 0; border: 0; margin: 4px 0 0; }
.diagnosis-options legend { padding: 0; margin-bottom: 7px; font-size: 10px; }
.option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.diagnosis-form .option-grid label { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.55; font-weight: 400; min-height: 30px; white-space: nowrap; }
.diagnosis-form .option-grid label span { display: block; }
.diagnosis-form .option-grid input { appearance: none; flex: 0 0 15px; width: 15px; height: 15px; margin: 2px 0 0; padding: 0; border-radius: 2px; background: #eff4f7; border: 1px solid #ccc; }
.diagnosis-form .option-grid input:checked { background: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 3px #fff; }
.diagnosis-form .option-grid input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.diagnosis-options.stacked .option-grid { grid-template-columns: 1fr; }
.diagnosis-form .privacy-check { font-size: 10px; margin-top: 4px; margin-bottom: 10px; }
.diagnosis-form .privacy-check input { appearance: none; flex: 0 0 15px; width: 15px; height: 15px; margin: 2px 0 0; padding: 0; border-radius: 2px; background: #eff4f7; border: 1px solid #ccc; }
.diagnosis-form .privacy-check input:checked { background: var(--red); border-color: var(--red); box-shadow: inset 0 0 0 3px #fff; }
.diagnosis-form .privacy-check input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.diagnosis-submit-area { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 4px; }
.diagnosis-submit-animal { display: block; width: 54px; height: auto; margin: 0 auto 8px; object-fit: contain; }
.diagnosis-form .diagnosis-submit-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 295px; max-width: 100%; min-height: 40px; margin: 0 auto; padding: 8px 18px; border: 0; border-radius: 8px; background: var(--red); color: #fff; box-shadow: none; font-size: 13px; font-weight: 700; line-height: 1.4; text-align: center; }
.diagnosis-form .diagnosis-submit-button:disabled { cursor: default; transform: none; opacity: 1; }
.diagnosis-submit-spinner { flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: diagnosis-submit-spin 0.75s linear infinite; }
.diagnosis-submit-label { min-width: 0; }
.diagnosis-form .diagnosis-submit-arrow { margin-left: 4px; }
@keyframes diagnosis-submit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .diagnosis-submit-spinner { animation-duration: 1.5s; } }
.diagnosis-form .form-use-note { margin: 8px 0 0; font-size: 11px; line-height: 1.5; text-align: center; color: #222; }
.diagnosis-form .form-status { font-size: 12px; margin: 0; text-align: center; }
.form-status:empty { display: none; }
.contact { padding: 88px 24px 68px; }
.contact-inner { display: block; max-width: 1125px; }
.contact-heading { display: flex; align-items: center; gap: 30px; margin-bottom: 38px; }
.contact-heading h2 { font-size: 56px; line-height: 1.15; }
.contact-heading p { margin: 0; font-weight: 700; font-size: 20px; }
.contact-columns { display: grid; grid-template-columns: 500px 574px; gap: 51px; }
.contact-personal { display: grid; gap: 16px; }
.contact-personal > label { display: grid; grid-template-columns: 118px 370px; align-items: center; gap: 12px; }
.contact-personal > label > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.contact-form label { font-size: 16px; font-weight: 600; }
.contact-required { display: inline-block; padding: 1px 6px; border-radius: 999px; background: #9f001f; color: #fff; font-size: 11px; font-weight: 400; white-space: nowrap; }
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea { display: block; width: 100%; min-width: 0; border: 1px solid #ddd; border-radius: 7px; background: #eff4f7; color: var(--text); font: inherit; font-weight: 500; padding: 8px 14px; height: 45px; }
.contact-message { display: flex; flex-direction: column; gap: 12px; }
.contact-message > label { display: grid; gap: 7px; }
.contact-message > label:last-child { flex: 1; grid-template-rows: auto 1fr; }
.contact-form textarea { height: 100%; min-height: 176px; resize: vertical; }
.contact-form select { font-size: 16px; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.contact-consent { width: fit-content; max-width: 100%; margin: 48px auto 30px; }
.contact-consent label { display: flex; align-items: flex-start; gap: 9px; font-weight: 700; }
.contact-consent input { flex: 0 0 15px; width: 15px; height: 15px; margin: 3px 0 0; accent-color: var(--red-dark); }
.contact-consent p { margin: 4px 0 0 24px; font-size: 13px; line-height: 1.7; font-weight: 600; }
.contact-submit { display: block; width: 212px; min-height: 46px; margin: 0 auto; border: 1px solid #ccc; border-radius: 4px; background: #eff4f7; color: var(--text); font: 600 14px var(--font-jp); cursor: pointer; }
.contact-status { display: none; }
@media (max-width: 760px) {
  .form-panel-inner { padding: 28px 18px; }
  .form-panel h2 { font-size: clamp(22px, 6vw, 32px); }
  .diagnosis-form { max-width: 100%; }
  .diagnosis-form .diagnosis-field { font-size: 12px; }
  .diagnosis-form .diagnosis-field input, .diagnosis-form select { height: 42px; font-size: 12px; }
  .diagnosis-options legend { font-size: 12px; }
  .diagnosis-form .option-grid label { font-size: 12px; line-height: 1.55; padding: 4px 0; min-height: 0; white-space: normal; }
  .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { padding: 48px 22px 36px; }
  .contact-heading { flex-wrap: wrap; gap: 12px; }
  .contact-heading h2 { font-size: 38px; }
  .contact-heading p { font-size: 14px; }
  .contact-columns { grid-template-columns: 1fr; gap: 24px; }
  .contact-personal > label { grid-template-columns: 92px minmax(0, 1fr); }
  .contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea { font-size: 16px; min-height: 40px; }
  .contact-form textarea { min-height: 150px; }
}

/* Footer: company information and policy labels. */
.site-footer { display: block; padding: 30px 24px 22px; }
.footer-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px; align-items: center; column-gap: 36px; row-gap: 20px; }
.site-footer .footer-brand { margin: 0; font-size: 36px; }
.footer-company { font-size: 12px; line-height: 1.65; }
.site-footer .footer-company-name { color: #fff; font-size: 14px; margin: 0 0 8px; }
.site-footer .footer-info-label { margin: 0 0 2px; }
.footer-company address { font-style: normal; color: rgba(255,255,255,.72); }
.footer-links { list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 1.9; color: rgba(255,255,255,.72); }
.site-footer .footer-copyright { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 10px; }
@media (max-width: 760px) {
  .site-footer { padding: 30px 22px 22px; }
  .footer-inner { grid-template-columns: 1fr; row-gap: 22px; }
  .site-footer .footer-copyright { text-align: left; }
}


/* ===== PDF footer faithful override ===== */
.site-footer {
  display: block;
  background: #fff !important;
  color: #8a8a8f !important;
  padding: 28px 24px 30px !important;
  border: 0 !important;
}

.site-footer .footer-inner-pdf {
  width: min(900px, 100%);
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 115px minmax(220px, 1fr) 150px minmax(280px, 1.15fr);
  align-items: center;
  column-gap: 34px;
  row-gap: 18px;
}

.site-footer .footer-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer .footer-logo {
  display: block;
  width: 82px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.site-footer .footer-company {
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .035em;
  color: #8a8a8f;
}

.site-footer .footer-company-name {
  margin: 0 0 5px !important;
  color: #8a8a8f !important;
  font-size: 13px !important;
  font-weight: 500;
}

.site-footer .footer-company address {
  margin: 0;
  color: #8a8a8f !important;
  font-style: normal;
}

.site-footer .footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #8a8a8f !important;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .02em;
}

.site-footer .footer-links li {
  margin: 0;
}

.site-footer .footer-links a:hover {
  color: #e50038 !important;
  text-decoration: underline;
}

.site-footer .footer-contact-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 4px;
  background: #8d8d92;
  color: #fff !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}

.site-footer .footer-mail-icon {
  font-size: 18px;
  line-height: 1;
}

.site-footer p,
.site-footer small {
  color: #8a8a8f !important;
}

@media (max-width: 900px) {
  .site-footer .footer-inner-pdf {
    grid-template-columns: 100px minmax(210px, 1fr) minmax(150px, .7fr);
  }
  .site-footer .footer-contact-cta {
    grid-column: 1 / -1;
    width: min(360px, 100%);
    justify-self: center;
  }
}

@media (max-width: 620px) {
  .site-footer {
    padding: 28px 22px 32px !important;
  }
  .site-footer .footer-inner-pdf {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: left;
  }
  .site-footer .footer-logo-wrap {
    justify-content: flex-start;
  }
  .site-footer .footer-logo {
    width: 74px;
  }
  .site-footer .footer-contact-cta {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
    white-space: normal;
    text-align: center;
  }
}

/* ===== PDF-faithful header + first view ===== */
.site-header--pdf {
  position: relative;
  top: auto;
  z-index: 20;
  max-width: 1380px;
  height: 112px;
  margin: 0 auto;
  padding: 22px 48px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}
.header-brand-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.brand-image-link {
  flex: 0 0 auto;
  display: block;
  width: 175px;
}
.header-logo-image {
  display: block;
  width: 100%;
  height: auto;
}
.header-system-name {
  margin-top: 14px;
  color: #2a2a2a;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.header-cta--pdf {
  position: relative;
  align-self: flex-start;
  width: 335px;
  height: 46px;
  margin-top: 16px;
  padding: 0 30px;
  border-radius: 999px;
  box-shadow: none;
  font-size: 15px;
  letter-spacing: .06em;
}
.header-cta--pdf span {
  --arrow-size: 12px; /* 大きさ */
  --arrow-thickness: 2px; /* 線の太さ */
  --arrow-color: currentColor; /* 色 */
  --arrow-angle: 0deg; /* 0degで右上、45degで右向き */
  --arrow-right: 18px; /* 右端からの距離 */
  --arrow-offset-y: 0px; /* 上下位置 */
  position: absolute;
  right: var(--arrow-right);
  top: calc(50% + var(--arrow-offset-y));
  width: var(--arrow-size);
  height: var(--arrow-size);
  transform: translateY(-50%) rotate(var(--arrow-angle));
  pointer-events: none;
}
.header-cta--pdf span::before,
.header-cta--pdf span::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.header-cta--pdf span::before {
  inset: 0;
  border-top: var(--arrow-thickness) solid var(--arrow-color);
  border-right: var(--arrow-thickness) solid var(--arrow-color);
}
.header-cta--pdf span::after {
  top: 50%;
  left: 50%;
  width: 141.421%;
  border-top: var(--arrow-thickness) solid var(--arrow-color);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.primary-button--pdf span {
  --arrow-size: 12px; /* 大きさ */
  --arrow-thickness: 2px; /* 線の太さ */
  --arrow-color: currentColor; /* 色 */
  --arrow-angle: 0deg; /* 0degで右上、45degで右向き */
  --arrow-right: 18px; /* 右端からの距離 */
  --arrow-offset-y: 0px; /* 上下位置 */
  position: absolute;
  right: var(--arrow-right);
  top: calc(50% + var(--arrow-offset-y));
  width: var(--arrow-size);
  height: var(--arrow-size);
  transform: translateY(-50%) rotate(var(--arrow-angle));
  pointer-events: none;
}
.primary-button--pdf span::before,
.primary-button--pdf span::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.primary-button--pdf span::before {
  inset: 0;
  border-top: var(--arrow-thickness) solid var(--arrow-color);
  border-right: var(--arrow-thickness) solid var(--arrow-color);
}
.primary-button--pdf span::after {
  top: 50%;
  left: 50%;
  width: 141.421%;
  border-top: var(--arrow-thickness) solid var(--arrow-color);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* One shared bold up-right arrow for every CTA. The icon stays inside the
   existing arrow box, so it cannot alter button or page layout. */
.header-cta--pdf span::before,
.primary-button--pdf span::before,
.diagnosis-submit-button .diagnosis-submit-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20L20 4M8 4h12v12' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20L20 4M8 4h12v12' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header-cta--pdf span::after,
.primary-button--pdf span::after {
  content: none;
  display: none;
}

.diagnosis-submit-button .diagnosis-submit-arrow {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  font-size: 0;
  vertical-align: -1px;
}

.hero--pdf {
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 360px 470px at 80% 40%, rgba(229,0,56,.17), transparent 72%),
    radial-gradient(ellipse 260px 260px at 8% 76%, rgba(229,0,56,.10), transparent 75%),
    #edf3f7;
}
.hero-inner--pdf {
  max-width: 1380px;
  min-height: 720px;
  margin: 0 auto;
  padding: 78px 48px 68px;
  display: grid;
  grid-template-columns: minmax(460px, .85fr) minmax(620px, 1.15fr);
  align-items: center;
  gap: 36px;
}
.hero-copy--pdf {
  align-self: center;
  padding-left: 8px;
}
.hero-product-mark {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}
.hero-symbol-image {
  width: 63px;
  height: auto;
  flex: 0 0 auto;
}
.hero-product-name {
  display: grid;
  gap: 2px;
  line-height: 1.18;
}
.hero-product-name strong {
  display: block;
  color: #222;
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .035em;
}
.hero-product-name strong span {
  color: var(--red);
}
.hero-product-name small {
  margin-top: 3px;
  color: #555;
  font-size: 13px;
  letter-spacing: .02em;
}
.hero-kicker {
  margin: 0 0 8px;
  color: #8a8a8a;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
}
.hero-copy--pdf h1 {
  margin: 0;
  color: #222;
  font-size: clamp(40px, 4vw, 66px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.02em;
}
.hero-copy--pdf h1 .hero-ai {
  color: #222;
}
.hero-copy--pdf h1 .hero-red {
  color: var(--red);
}
.hero-lead--pdf {
  margin: 24px 0 0;
  color: #797979;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: .025em;
}
.hero-meta {
  display: flex;
  gap: 10px;
  margin: 18px 0 26px;
  flex-wrap: wrap;
}
.hero-meta span {
  min-width: 126px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #333;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(0,0,0,.03);
}
.primary-button--pdf {
  position: relative;
  justify-content: center;
  text-align: center;
  width: 525px;
  max-width: 100%;
  min-height: 68px;
  padding: 0 48px;
  border-radius: 999px;
  box-shadow: none;
  font-size: 19px;
  letter-spacing: .08em;
}
.hero-visual--pdf {
  position: relative;
  min-height: 590px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-visual--pdf::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: 70px;
  top: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229,0,56,.17) 0%, rgba(229,0,56,.10) 38%, rgba(229,0,56,0) 72%);
  filter: blur(8px);
  pointer-events: none;
}
.animal-group--pdf {
  position: relative;
  z-index: 1;
  width: 780px;
  max-width: 110%;
  transform: translate(18px, 12px);
  object-fit: contain;
}

@media (max-width: 1180px) {
  .site-header--pdf {
    height: auto;
    padding: 18px 28px;
  }
  .header-system-name {
    display: none;
  }
  .header-cta--pdf {
    width: auto;
    min-width: 250px;
  }
  .hero-inner--pdf {
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
    padding: 56px 32px 60px;
    gap: 20px;
  }
  .hero-symbol-image {
    width: 51px;
  }
  .hero-product-name strong {
    font-size: 20px;
  }
  .hero-copy--pdf h1 {
    font-size: clamp(36px, 4.6vw, 54px);
  }
  .hero-visual--pdf {
    min-height: 500px;
  }
}

@media (max-width: 820px) {
  .site-header--pdf {
    align-items: center;
    padding: 14px 20px;
  }
  .brand-image-link {
    width: 140px;
  }
  .header-cta--pdf {
    min-width: 0;
    width: auto;
    height: 40px;
    margin-top: 0;
    padding: 0 18px;
    font-size: 12px;
  }
  .hero--pdf {
    min-height: auto;
  }
  .hero-inner--pdf {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 44px 22px 52px;
    gap: 34px;
  }
  .hero-copy--pdf {
    padding-left: 0;
  }
  .hero-product-mark {
    margin-bottom: 20px;
  }
  .hero-symbol-image {
    width: 48px;
  }
  .hero-product-name strong {
    font-size: 19px;
  }
  .hero-kicker {
    font-size: 13px;
  }
  .hero-copy--pdf h1 {
    font-size: clamp(34px, 10vw, 48px);
    line-height: 1.18;
  }
  .hero-lead--pdf {
    font-size: 13px;
  }
  .hero-meta {
    gap: 8px;
  }
  .hero-meta span {
    flex: 1 1 30%;
    min-width: 95px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .primary-button--pdf {
    width: 100%;
    min-height: 58px;
    padding: 0 26px;
    font-size: 16px;
  }
  .hero-visual--pdf {
    min-height: auto;
  }
  .hero-visual--pdf::before {
    width: 330px;
    height: 330px;
    right: 8%;
    top: -10px;
  }
  .animal-group--pdf {
    width: min(720px, 100%);
    max-width: 100%;
    transform: none;
  }
}

@media (max-width: 520px) {
  .header-cta--pdf {
    display: none;
  }
  .site-header--pdf {
    justify-content: flex-start;
  }
  .brand-image-link {
    width: 132px;
  }
  .hero-product-mark {
    gap: 12px;
  }
  .hero-symbol-image {
    width: 43px;
  }
  .hero-product-name strong {
    font-size: 17px;
  }
  .hero-product-name small {
    font-size: 11px;
  }
  .hero-copy--pdf h1 {
    font-size: 36px;
  }
}
/* Fine tune the first view against the supplied PDF/screenshot. */
.site-header--pdf { background: #edf3f7; }
.hero-copy--pdf h1 .hero-ai { position: relative; display: inline-block; }
.hero-copy--pdf h1 .hero-ai::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 0;
  bottom: -5px;
  height: 5px;
  border-top: 3px solid var(--red);
  border-radius: 50%;
  transform: rotate(-1deg);
}

/* Keep the first PDF hero headline phrase on one line on desktop. */
.hero-title-firstline { white-space: nowrap; }
@media (max-width: 767px) {
  .hero-title-firstline { white-space: normal; }
}

/* ===== Desktop first-view match: 2026-09-10 reference screenshot ===== */
@media (min-width: 1181px) {
  .site-header--pdf {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 136px;
    margin: 0;
    padding: 44px 80px 18px;
    align-items: flex-start;
    background: #edf3f7;
  }

  .header-brand-wrap {
    gap: 22px;
  }

  .brand-image-link {
    width: 182px;
  }

  .header-system-name {
    margin-top: 18px;
    font-size: 17px;
    letter-spacing: .025em;
  }

  .header-cta--pdf {
    width: 344px;
    height: 48px;
    margin-top: 20px;
    padding: 0 42px;
    font-size: 16px;
    font-weight: 500;
  }

  .hero--pdf {
    min-height: calc(100vh - 136px);
    background:
      radial-gradient(ellipse 430px 500px at 78% 44%, rgba(229,0,56,.18), transparent 73%),
      radial-gradient(ellipse 360px 330px at 8% 84%, rgba(229,0,56,.11), transparent 76%),
      #edf3f7;
  }

  .hero-inner--pdf {
    box-sizing: border-box;
    width: 100%;
    /* Keep the desktop hero wide, but do not let the grid expand without limit.
       Centering the bounded container prevents the whole hero from sticking left. */
    max-width: 1680px;
    min-height: calc(100vh - 136px);
    margin: 0 auto;
    padding: 10px 76px 56px;
    grid-template-columns: minmax(590px, 38%) minmax(0, 62%);
    gap: 24px;
    align-items: center;
  }

  .hero-copy--pdf {
    align-self: center;
    padding-left: 0;
  }

  .hero-product-mark {
    gap: 22px;
    margin-bottom: 34px;
  }

  .hero-symbol-image {
    width: 67px;
  }

  .hero-product-name {
    gap: 4px;
  }

  .hero-product-name strong {
    font-size: 26px;
    line-height: 1.16;
  }

  .hero-product-name small {
    margin-top: 4px;
    font-size: 13px;
  }

  .hero-kicker {
    margin-bottom: 10px;
    font-size: 18px;
    letter-spacing: .075em;
  }

  .hero-copy--pdf h1 {
    font-size: clamp(52px, 3.35vw, 62px);
    line-height: 1.12;
    letter-spacing: -.025em;
  }

  .hero-title-firstline {
    white-space: nowrap;
  }

  .hero-copy--pdf h1 .hero-ai::after {
    left: 1px;
    right: -2px;
    bottom: -5px;
    height: 6px;
    border-top-width: 4px;
  }

  .hero-lead--pdf {
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.82;
    letter-spacing: .02em;
  }

  .hero-meta {
    gap: 12px;
    margin: 20px 0 28px;
  }

  .hero-meta span {
    min-width: 128px;
    padding: 10px 19px;
    font-size: 14px;
  }

  .primary-button--pdf {
    width: 540px;
    min-height: 70px;
    padding: 0 50px;
    font-size: 20px;
  }

  .hero-visual--pdf {
    min-height: 620px;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .hero-visual--pdf::before {
    width: 650px;
    height: 590px;
    right: 90px;
    top: -12px;
    background: radial-gradient(circle, rgba(229,0,56,.19) 0%, rgba(229,0,56,.11) 40%, rgba(229,0,56,0) 73%);
    filter: blur(10px);
  }

  .animal-group--pdf {
    width: min(930px, 100%);
    max-width: none;
    transform: translate(0, 18px);
  }
}

/* Keep the hero copy inside its grid track. This avoids max-content overflow
   at intermediate widths while preserving the existing tablet/mobile rules. */
@media (min-width: 821px) {
  .hero-inner--pdf > .hero-copy--pdf {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
}

/* ===== Hero alignment refinement: shared header/content guides ===== */
/* Keep the heading color split explicit so the older .hero h1 span rule cannot turn it red. */
.hero-copy--pdf h1 .hero-title-firstline,
.hero-copy--pdf h1 .hero-ai {
  color: #222;
}
.hero-copy--pdf h1 .hero-red {
  color: var(--red);
}

/* Short hand-drawn style underline contained directly beneath “AI”. */
.hero-copy--pdf h1 .hero-ai::after {
  left: 7%;
  right: 4%;
  bottom: -4px;
  height: 7px;
  border-top: 3px solid var(--red);
  border-radius: 50% 55% 45% 50%;
  transform: rotate(-2deg);
  transform-origin: center;
}

@media (min-width: 1181px) {
  /* Header and hero now use the same 1680px container and 76px inner gutter.
     This aligns the brand to the copy and the header CTA to the visual's right guide
     without individual margin/translate nudges. */
  .site-header--pdf {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding-left: 76px;
    padding-right: 76px;
  }

  .hero-inner--pdf {
    width: 100%;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 76px;
    padding-right: 76px;
  }

  /* The illustration already fills the visual track; keep its right edge on
     the same content guide used by the header CTA. */
  .hero-visual--pdf {
    justify-content: flex-end;
  }
  .animal-group--pdf {
    max-width: 100%;
  }
}

/* Keep the same left/right guide through tablet widths. */
@media (min-width: 821px) and (max-width: 1180px) {
  .site-header--pdf {
    padding-left: 32px;
    padding-right: 32px;
  }
  .hero-inner--pdf {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Mobile keeps the existing stacked layout, with one shared gutter. */
@media (max-width: 820px) {
  .site-header--pdf {
    padding-left: 22px;
    padding-right: 22px;
  }
  .hero-inner--pdf {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* ===== Background continuity fix =====
   Keep the header background full-bleed while preserving the exact same
   1680px content guide used by the centered hero below. */
@media (min-width: 1181px) {
  .site-header--pdf {
    max-width: none;
    margin: 0;
    padding-left: max(76px, calc((100vw - 1680px) / 2 + 76px));
    padding-right: max(76px, calc((100vw - 1680px) / 2 + 76px));
    background: #edf3f7;
  }
}


/* Reference-only additions for the Problems section.
   Existing Problems layout rules above are intentionally untouched. */
.problems-scroll-cue {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 18px;
  height: 58px;
  transform: translateX(-50%);
  color: var(--red);
  pointer-events: none;
}
.problems-scroll-cue span {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .04em;
  writing-mode: vertical-rl;
  transform: translateX(-50%);
}
.problems-scroll-cue i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 28px;
  background: var(--red);
  transform: translateX(-50%);
}
.problems-scroll-cue i::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--red);
  border-bottom: 1px solid var(--red);
  transform: rotate(45deg);
}

.problems-down-arrows {
  position: absolute;
  left: 50%;
  bottom: 105px;
  width: 18px;
  height: 32px;
  transform: translateX(-50%);
  pointer-events: none;
}
.problems-down-arrows span {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--red);
  border-bottom: 1px solid var(--red);
  transform: translateX(-50%) rotate(45deg);
}
.problems-down-arrows span:nth-child(1) { top: 0; }
.problems-down-arrows span:nth-child(2) { top: 9px; }
.problems-down-arrows span:nth-child(3) { top: 18px; }

.problems-summary {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 560px;
  height: 74px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}
.problems-summary-crocodile {
  width: 66px;
  height: 66px;
  object-fit: contain;
  flex: 0 0 auto;
}
.problems-summary p {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.problems-summary p span { color: var(--red); }

@media (max-width: 760px) {
  .problems-scroll-cue,
  .problems-down-arrows,
  .problems-summary { display: none; }
}

/* Added-element size tuning only: SCROLL / chevrons / crocodile.
   Existing Problems section layout remains untouched. */
@media (min-width: 761px) {
  .problems-scroll-cue {
    top: 4px;
    width: 24px;
    height: 82px;
  }

  .problems-scroll-cue span {
    font-size: 11px;
    letter-spacing: .055em;
  }

  .problems-scroll-cue i {
    height: 40px;
    width: 1.5px;
  }

  .problems-scroll-cue i::after {
    left: -4px;
    width: 8px;
    height: 8px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
  }

  .problems-down-arrows {
    bottom: 112px;
    width: 24px;
    height: 52px;
  }

  .problems-down-arrows span {
    width: 11px;
    height: 11px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
  }

  .problems-down-arrows span:nth-child(1) { top: 0; }
  .problems-down-arrows span:nth-child(2) { top: 16px; }
  .problems-down-arrows span:nth-child(3) { top: 32px; }

  .problems-summary {
    height: 92px;
    gap: 16px;
  }

  .problems-summary-crocodile {
    width: 92px;
    height: 92px;
  }
}

/* PDF recheck: added Problems decorations only.
   Existing heading/cards/animals/background/layout are intentionally untouched. */
@media (min-width: 761px) {
  .problems-scroll-cue {
    position: absolute;
    top: -90px;
    left: 50%;
    width: 30px;
    height: 112px;
    transform: translateX(-50%);
    z-index: 4;
  }

  .problems-scroll-cue span {
    top: 0;
    left: 85%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
  }

  .problems-scroll-cue i {
    left: 50%;
    bottom: -30px;
    width: 2px;
    height: 116px;
    transform: translateX(-50%);
  }

  .problems-scroll-cue i::after {
    left: -5px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  .problems-down-arrows {
    position: absolute;
    left: 50%;
    bottom: 116px;
    width: 24px;
    height: auto;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 4;
  }

  .problems-down-arrows span,
  .problems-down-arrows span:nth-child(1),
  .problems-down-arrows span:nth-child(2),
  .problems-down-arrows span:nth-child(3) {
    position: relative;
    top: auto;
    left: auto;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
  }

  .problems-summary {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 650px;
    height: 108px;
    transform: translateX(-50%);
    gap: 18px;
    z-index: 3;
  }

  .problems-summary-crocodile {
    width: 118px;
    height: 108px;
    object-fit: contain;
    flex: 0 0 118px;
  }
}

/* Flow-based placement adjustment requested for Problems additions only. */
@media (min-width: 761px) {
  .problems-scroll-cue span {
    top: 56px;
  }

  .problems-down-arrows {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: 24px;
    height: auto;
    margin: 60px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
  }

  .problems-summary {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: 650px;
    height: auto;
    margin: 0 auto;
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    pointer-events: none;
  }
}

/* PDF-matched free diagnosis benefits/report section. Scoped to this section only. */
.diagnosis-benefits-pdf {
  background:
    radial-gradient(circle at 94% 4%, rgba(229,0,56,.10), transparent 28%),
    #edf3f7;
  overflow: hidden;
}
.diagnosis-benefits-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 30px 0;
}
.diagnosis-benefits-heading {
  position: relative;
  min-height: 108px;
  border-bottom: 1px solid var(--red);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.diagnosis-benefits-deco {
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 210px;
  height: auto;
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
}
.diagnosis-benefits-heading h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 18px 214px;
  color: #303030;
  font-size: clamp(28px, 3.05vw, 38px);
  line-height: 1.15;
  letter-spacing: .01em;
  font-weight: 800;
  white-space: nowrap;
}
.diagnosis-benefits-heading h2 span { color: var(--red); }
.diagnosis-benefits-heading h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -17px;
  width: 162px;
  height: 18px;
  background: url('../images/line01.png') left center / contain no-repeat;
}
.diagnosis-benefits-layout {
  display: grid;
  grid-template-columns: 368px minmax(0, 1fr);
  gap: 66px;
  align-items: start;
  padding-top: 43px;
  padding-bottom: 25px;
}
.diagnosis-benefits-list {
  display: grid;
  gap: 46px;
}
.diagnosis-benefit-card {
  position: relative;
  min-height: 216px;
  padding: 34px 28px 26px;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 10px 17px rgba(229,0,56,.27);
  text-align: center;
  overflow: visible;
}
.diagnosis-benefit-number {
  position: absolute;
  left: 0;
  top: -33px;
  color: rgba(229,0,56,.10);
  font: 700 88px/1 var(--font-en);
  letter-spacing: -.06em;
}
.diagnosis-benefit-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  color: #df3648;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 61px;
  line-height: 1;
  font-weight: 700;
}
.icon-chart { align-items: flex-end; gap: 5px; padding-bottom: 11px; border-bottom: 4px solid #df3648; }
.icon-chart i { display:block; width: 12px; background:#df3648; }
.icon-chart i:nth-child(1){height:38px}.icon-chart i:nth-child(2){height:24px}.icon-chart i:nth-child(3){height:51px}
.icon-list { position: relative; flex-direction: column; gap: 8px; align-items: flex-start; padding-left: 10px; }
.icon-list i { display:block; width: 45px; height: 5px; background:#df3648; border-radius:3px; margin-left:16px; position:relative; }
.icon-list i::before { content:''; position:absolute; left:-17px; top:-3px; width:9px; height:9px; border:4px solid #df3648; }
.icon-bulb,
.icon-flag {
  font-size: 0;
  transform: none;
}
.icon-bulb img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
}
.icon-flag img {
  display: block;
  width: 66px;
  height: 66px;
  object-fit: contain;
}
.diagnosis-benefit-card h3 {
  margin: 3px 0 8px;
  color: #333;
  font-size: 29px;
  line-height: 1.2;
  font-weight: 800;
}
.diagnosis-benefit-card p {
  margin: 0;
  color: #7e7e7e;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
}
.diagnosis-report-area { padding-top: 15px; }
.diagnosis-report-label {
  width: 484px;
  max-width: 100%;
  margin: 0 auto 15px;
  padding: 10px 28px;
  border: 1.5px solid var(--red);
  border-radius: 999px;
  color: var(--red);
  text-align: center;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}
.diagnosis-report-lead {
  margin: 0 0 14px;
  color: #858585;
  text-align: center;
  font-size: 27px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .03em;
}
.diagnosis-report-frame {
  width: 100%;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 18px rgba(229,0,56,.23);
}
.diagnosis-report-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.legacy-diagnosis-block { display: none !important; }

@media (max-width: 1000px) {
  .diagnosis-benefits-inner { padding: 28px 24px 0; }
  .diagnosis-benefits-heading { min-height: 96px; }
  .diagnosis-benefits-deco { width: 205px; height: 124px; left: -4px; }
  .diagnosis-benefits-heading h2 { margin-left: 186px; font-size: 34px; }
  .diagnosis-benefits-layout { grid-template-columns: 300px minmax(0,1fr); gap: 34px; }
  .diagnosis-benefit-card { min-height: 188px; border-radius: 26px; }
  .diagnosis-benefit-card h3 { font-size: 24px; }
  .diagnosis-benefit-card p { font-size: 15px; }
  .diagnosis-report-label { font-size: 21px; }
  .diagnosis-report-lead { font-size: 20px; }
}
@media (max-width: 760px) {
  .diagnosis-benefits-inner { padding: 28px 20px 0px; }
  .diagnosis-benefits-heading { min-height: 88px; justify-content: flex-end; }
  .diagnosis-benefits-deco { left: -10px; width: 150px; height: auto; }
  .diagnosis-benefits-heading h2 { margin: 0 0 13px 100px; font-size: clamp(24px, 7vw, 32px); white-space: normal; text-align: right; }
  .diagnosis-benefits-heading h2::after { width: 120px; height: 14px; bottom: -11px; }
  .diagnosis-benefits-layout { grid-template-columns: 1fr; gap: 42px; padding-top: 32px; }
  .diagnosis-benefits-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 16px; }
  .diagnosis-benefit-card { min-height: 160px; padding: 28px 12px 18px; border-radius: 22px; }
  .diagnosis-benefit-number { top: -22px; font-size: 58px; }
  .diagnosis-benefit-icon { width: 52px; height: 52px; margin-bottom: 5px; font-size: 46px; }
  .icon-chart { gap:4px; padding-bottom:8px; border-bottom-width:3px; }
  .icon-chart i { width:9px; }.icon-chart i:nth-child(1){height:28px}.icon-chart i:nth-child(2){height:18px}.icon-chart i:nth-child(3){height:38px}
  .diagnosis-benefit-card h3 { font-size: 20px; }
  .diagnosis-benefit-card p { font-size: 12px; }
  .diagnosis-report-area { padding-top: 0; }
  .diagnosis-report-label { width: 100%; font-size: 18px; padding: 9px 14px; white-space: normal; }
  .diagnosis-report-lead { font-size: 16px; line-height: 1.5; }
  .diagnosis-report-frame { padding: 9px; }
}

/* Reference styling for the Problems summary only. */
@media (min-width: 761px) {
  .problems-summary {
    position: relative;
    isolation: isolate;
    width: min(950px, calc(100vw - 48px));
    min-height: 240px;
    padding: 38px 30px 112px 140px;
    gap: 0;
  }

  .problems-summary::before { content: none; }

  .problems-summary-crocodile {
    position: absolute;
    left: 36px;
    top: -20px;
    width: 122px;
    height: 168px;
    object-fit: cover;
    object-position: center;
    transform: scaleX(-1);
  }

  .problems-summary p {
    font-size: clamp(27px, 3.79vw, 36px);
    line-height: 1.35;
    text-align: center;
  }

  .problems-summary::after {
    content: "";
    position: absolute;
    left: calc(50% + 38px);
    bottom: 32px;
    width: 16px;
    height: 68px;
    transform: translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17'%3E%3Cpath d='M1 2l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center top / 16px 17px repeat-y;
  }
}
/* PDF background, Problems icons and chevrons. */
body {
  background:
    radial-gradient(ellipse 370px 430px at 76% 3%, rgba(229, 0, 56, .20), transparent 75%),
    radial-gradient(ellipse 440px 460px at 2% 14%, rgba(229, 0, 56, .22), transparent 75%),
    radial-gradient(ellipse 440px 480px at 96% 24%, rgba(229, 0, 56, .22), transparent 75%),
    radial-gradient(ellipse 330px 430px at 103% 39%, rgba(229, 0, 56, .16), transparent 75%),
    radial-gradient(ellipse 460px 480px at 2% 55%, rgba(229, 0, 56, .22), transparent 75%),
    radial-gradient(ellipse 370px 420px at 80% 84%, rgba(229, 0, 56, .18), transparent 75%),
    #edf3f7;
}
.hero--pdf,
.diagnosis-benefits-pdf { background: transparent; }
.hero-visual--pdf::before { background: none; }
.problem-card { background: #edf3f7; }
.problem-card img.icon {
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

@media (min-width: 761px) {
  .problems-down-arrows,
  .problems-summary::after {
    width: 16px;
    height: 68px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    z-index: 4;
  }
  .problems-down-arrows {
    position: relative;
    display: block;
  }
  .problems-down-arrows span { display: none; }
  .problems-summary::after {
    content: "";
    left: 50%;
    top: 180px;
  }
}
/* Share the page background across the header and main content. */
main,
.site-header--pdf { background: transparent; }

/* Hero headline: match the September 14 reference. */
.hero-copy--pdf {
  container-type: inline-size;
  min-width: 0;
}
.hero-copy--pdf .hero-kicker {
  margin-bottom: 8px;
  font-size: min(22px, 3.8cqi);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  white-space: nowrap;
}
.hero-copy--pdf h1 {
  color: #303030;
  font-size: min(52px, 9.2cqi);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.hero-copy--pdf h1 .hero-title-firstline {
  color: inherit;
  white-space: nowrap;
}
.hero-copy--pdf h1 .hero-title-secondline {
  display: inline-block;
  margin-top: 2px;
  color: inherit;
  font-size: min(80px, 14.2cqi);
  line-height: 1.1;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.hero-copy--pdf h1 .hero-ai-group {
  position: relative;
  display: inline-block;
  color: inherit;
}
.hero-copy--pdf h1 .hero-ai {
  color: inherit;
  font-size: 1.05em;
}
.hero-copy--pdf h1 .hero-particle {
  color: inherit;
  font-size: .8em;
}
.hero-copy--pdf h1 .hero-ai::after {
  content: none;
}
.hero-copy--pdf h1 .hero-ai-group::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.07em;
  width: 100%;
  height: .17em;
  background: url('../images/line01.png') center / 100% 100% no-repeat;
  pointer-events: none;
}
/* Reference styling for the hero description and information labels only. */
.hero-copy--pdf .hero-lead--pdf {
  color: #858585;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
  padding-left: 24px;
}
.hero-copy--pdf .hero-meta {
  width: min(560px, 100%);
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  margin-bottom: 28px;
}
.hero-copy--pdf .hero-meta > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 135px;
  height: 45px;
  padding: 0 24px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, .9);
  color: #222;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .hero-copy--pdf .hero-lead--pdf {
    padding-left: 0;
    font-size: 13px;
  }
  .hero-copy--pdf .hero-meta {
    gap: 8px;
  }
  .hero-copy--pdf .hero-meta > span {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    padding: 0 8px;
    font-size: 13px;
  }
}
/* Problems section: September 14 reference layout. */
@media (min-width: 1001px) {
  #features.problems {
    max-width: 1200px;
    margin: 0 auto;
    padding: 310px 24px 25px;
    background: transparent;
  }
  #features .section-heading {
    max-width: 608px;
    margin: 0 auto 36px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--red);
    text-align: left;
  }
  #features .section-heading h2 {
    margin: 0;
    color: #333;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  #features .problem-grid {
    max-width: 608px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 20px;
  }
  #features .problem-card {
    height: 162px;
    min-height: 162px;
    padding: 28px 10px 16px;
    grid-template-rows: 66px 40px;
    gap: 10px;
    border: 1px solid #ff315b;
    border-radius: 24px;
    background: #edf3f7;
    box-shadow: 0 0 11px rgba(229, 0, 56, .32);
  }
  #features .problem-card img.icon {
    width: 66px;
    height: 66px;
    object-fit: contain;
  }
  #features .problem-card h3 {
    color: #111;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: .06em;
  }
  #features .problem-elephant {
    top: 333px;
    left: calc(50% - 536px);
    width: 250px;
    height: 210px;
    object-fit: cover;
    transform: rotate(-15deg) scaleX(-1);
  }
  #features .problem-giraffe {
    top: 250px;
    right: calc(50% - 556px);
    width: 226px;
    height: 502px;
    object-fit: cover;
  }
  #features .problems-scroll-cue {
    top: 126px;
    left: calc(50% + 18px);
    width: 30px;
    height: 158px;
    transform: none;
  }
  #features .problems-scroll-cue span {
    top: 40px;
    left: 5px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .06em;
    transform: none;
  }
  #features .problems-scroll-cue i {
    top: 0;
    bottom: auto;
    left: 0;
    width: 1px;
    height: 156px;
    transform: none;
  }
  #features .problems-scroll-cue i::after {
    left: -5px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-right-width: 1px;
    border-bottom-width: 1px;
  }
}
@media (min-width: 1001px) and (max-width: 1179px) {
  #features .problem-elephant {
    left: 4px;
    width: 285px;
    height: 180px;
    object-fit: contain;
  }
  #features .problem-giraffe {
    right: 12px;
    width: 180px;
    height: 400px;
  }
}
/* Benefits and sample report: September 14 reference. */
.diagnosis-benefits-pdf .icon-chart,
.diagnosis-benefits-pdf .icon-list {
  padding: 0;
  border: 0;
  align-items: center;
}
.diagnosis-benefits-pdf .diagnosis-benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.diagnosis-benefits-pdf .diagnosis-report-crop {
  position: relative;
  width: 100%;
  aspect-ratio: 561 / 685;
  overflow: hidden;
  border: 1px solid #333;
}
.diagnosis-benefits-pdf .diagnosis-report-crop img {
  position: absolute;
  top: 0;
  left: 0;
  width: 108.913%;
  max-width: none;
  height: auto;
  transform: translate(-4.0917%, -3.3921%);
}
@media (min-width: 1001px) {
  .diagnosis-benefits-pdf .diagnosis-benefits-inner {
    max-width: 996px;
    padding: 30px 40px 0;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-heading {
    width: 834px;
    max-width: 100%;
    min-height: 110px;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-heading h2 {
    margin: 0 0 10px 226px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .05em;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-heading h2::after {
    bottom: -11px;
    width: 162px;
    height: 16px;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-deco {
    left: -6px;
    width: 210px;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-layout {
    grid-template-columns: 298px minmax(0, 1fr);
    gap: 54px;
    padding-top: 35px;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-list {
    gap: 38px;
  }
  .diagnosis-benefits-pdf .diagnosis-benefit-card {
    min-height: 176px;
    padding: 30px 20px 24px;
    border-radius: 28px;
    box-shadow: 0 5px 12px rgba(229, 0, 56, .4);
  }
  .diagnosis-benefits-pdf .diagnosis-benefit-number {
    top: -26px;
    font-size: 72px;
  }
  .diagnosis-benefits-pdf .diagnosis-benefit-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 13px;
  }
  .diagnosis-benefits-pdf .diagnosis-benefit-card h3 {
    margin: 0 0 7px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
  }
  .diagnosis-benefits-pdf .diagnosis-benefit-card p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .04em;
  }
  .diagnosis-benefits-pdf .diagnosis-report-area {
    padding-top: 14px;
  }
  .diagnosis-benefits-pdf .diagnosis-report-label {
    width: 392px;
    margin-bottom: 12px;
    padding: 6px 20px;
    border-width: 1px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
  }
  .diagnosis-benefits-pdf .diagnosis-report-lead {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .03em;
  }
  .diagnosis-benefits-pdf .diagnosis-report-frame {
    padding: 16px 18px;
    box-shadow: 0 0 13px rgba(229, 0, 56, .3);
  }
}
/* Application button below the benefits and sample report. */
.diagnosis-benefits-pdf .diagnosis-benefits-cta {
  display: flex;
  width: 560px;
  max-width: 100%;
  min-width: 0;
  min-height: 72px;
  margin: 8px auto 34px;
  padding: 0 74px;
  border-radius: 999px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
}
.diagnosis-benefits-pdf .diagnosis-benefits-cta span {
  --arrow-size: 18px;
  --arrow-thickness: 3px;
  --arrow-right: 94px;
}
@media (max-width: 760px) {
  .diagnosis-benefits-pdf .diagnosis-benefits-cta {
    min-height: 60px;
    padding: 0 40px;
    font-size: 18px;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-cta span {
    --arrow-size: 15px;
    --arrow-right: 22px;
  }
}
/* Free diagnosis flow: reference heading, icons, copy and spacing. */
#flow {
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
#flow .flow-heading {
  position: relative;
  min-height: 120px;
  margin: 0 auto 42px;
  border-bottom: 1px solid var(--red);
  display: flex;
  align-items: flex-end;
}
#flow .flow-heading h2 {
  width: auto;
  margin: 0 56px 12px 150px;
  padding: 0;
  border: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .03em;
  white-space: nowrap;
}
#flow .flow-heading-deco {
  position: absolute;
  left: 0;
  bottom: -40px;
  width: 130px;
  height: 162px;
  background: url('../images/snake.png') center / contain no-repeat;
  pointer-events: none;
}
#flow .flow-steps {
  max-width: 100%;
  grid-template-columns: 1fr;
  gap: 110px;
}
#flow .flow-steps article {
  padding: 0;
}
#flow .flow-steps article::before {
  content: none;
}
#flow .flow-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 9px 17px rgba(229, 0, 56, .38);
}
#flow .flow-step-icon img {
  width: 50px;
  height: 55px;
  object-fit: contain;
}
#flow .flow-steps b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 32px;
  margin: 0 auto 8px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
#flow .flow-steps article > span {
  display: block;
  color: #000;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .05em;
}
#flow .flow-steps p {
  margin: 8px 0 0;
  color: #858585;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .06em;
}
#flow .flow-steps article:not(:last-child)::after {
  left: calc(50% - 8px);
  top: calc(100% + 20px);
  bottom: auto;
  width: 16px;
  height: 68px;
  border: 0;
  transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17'%3E%3Cpath d='M1 2l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center top / 16px 17px repeat-y;
}
@media (max-width: 600px) {
  #flow .flow-heading h2 {
    margin-right: 0;
    margin-left: 100px;
    font-size: clamp(23px, 5.8vw, 34px);
  }
  #flow .flow-heading-deco {
    transform: scale(.75);
    transform-origin: left bottom;
    bottom: -30px;
  }
  #flow .flow-steps article > span { font-size: 24px; }
  #flow .flow-steps p { font-size: 16px; }
}

/* Smartphone-only refinements. Desktop/tablet styles remain unchanged. */
.mobile-only-br,
.report-lead-mobile {
  display: none;
}

@media (max-width: 760px) {
  /* Problems heading: force the requested two-line break only on smartphones. */
  #features .section-heading h2 {
    line-height: 1.35;
  }
  .mobile-only-br {
    display: block;
  }

  /* Restore the problems summary on smartphones. */
  #features .problems-summary {
    display: flex;
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    margin: 28px auto 0;
    padding: 0 10px;
    transform: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  #features .problems-summary-crocodile {
    width: 48px;
    height: 48px;
  }
  #features .problems-summary p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 700;
    white-space: normal;
    text-align: left;
  }

  /* Keep the benefits heading stable and readable on smartphone widths. */
  .diagnosis-benefits-pdf .diagnosis-benefits-heading {
    min-height: 92px;
    justify-content: center;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-heading h2 {
    width: 100%;
    margin: 0 0 16px;
    padding: 0 4px;
    font-size: clamp(20px, 5.6vw, 26px);
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-heading h2::after {
    left: 20%;
    width: 120px;
    transform: translateX(-50%);
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-deco {
    left: -8px;
    width: 105px;
  }

  /* Smartphone-only report lead copy. */
  .report-lead-pc {
    display: none;
  }
  .report-lead-mobile {
    display: inline;
  }
  .diagnosis-benefits-pdf .diagnosis-report-lead {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* Smartphone-only layout adjustments requested 2026-09-14. */
@media (max-width: 760px) {
  /* Keep the two animals flanking the Problems heading, behind all other content. */
  #features .section-heading {
    position: relative;
    z-index: 1;
  }
  #features .problem-elephant,
  #features .problem-giraffe {
    z-index: 0;
    pointer-events: none;
  }
  #features .problem-elephant {
    top: 18px;
    left: 4px;
    width: 82px;
    height: 96px;
    object-fit: contain;
    object-position: center bottom;
    transform: rotate(-8deg) scaleX(-1);
  }
  #features .problem-giraffe {
    top: 10px;
    right: 2px;
    width: 72px;
    height: 118px;
    object-fit: contain;
    object-position: center bottom;
  }

  /* Move the benefits title upward through normal layout spacing, not absolute offsets. */
  .diagnosis-benefits-pdf .diagnosis-benefits-heading {
    min-height: 132px;
    align-items: flex-end;
    padding-bottom: 52px;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-heading h2 {
    margin: 0;
    padding: 0 4px;
  }

  /* Anchor the bird from the top so its position is stable across heading-height changes. */
  .diagnosis-benefits-pdf .diagnosis-benefits-deco {
    top: -20px;
    bottom: auto;
  }
}

/* Smartphone-only final positioning adjustment. Desktop styles are untouched. */
@media (max-width: 760px) {
  /* Keep the heading animals above the section background but behind the problem cards/icons. */
  #features.problems {
    isolation: isolate;
  }
  #features .problem-elephant,
  #features .problem-giraffe {
    z-index: 1;
  }
  #features .section-heading,
  #features .problem-grid,
  #features .problems-summary {
    position: relative;
    z-index: 2;
  }
  #features .problem-elephant {
    top: 40px;
    left: 0;
    width: 92px;
    height: 105px;
    object-fit: contain;
    object-position: center;
  }
  #features .problem-giraffe {
    top: 31px;
    right: 0;
    width: 78px;
    height: 125px;
    object-fit: contain;
    object-position: center;
  }

  /* Match the reference: keep the bird top-anchored while removing the excess space below the title. */
  .diagnosis-benefits-pdf .diagnosis-benefits-heading {
    min-height: 0;
    padding: 13% 0 10px;
    align-items: initial;
    justify-content: initial;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-heading h2 {
    margin: 0;
    padding: 0 4px;
  }
  .diagnosis-benefits-pdf .diagnosis-benefits-deco {
    top: -20px;
    bottom: auto;
  }
}

/* Smartphone-only: make the Problems heading animals visible without affecting desktop. */
@media (max-width: 760px) {
  #features .problem-elephant,
  #features .problem-giraffe {
    display: block;
  }
}


/* Smartphone-only Problems refinements. Desktop remains unchanged. */
.problems-summary-mobile { display: none; }

@media (max-width: 760px) {
  /* Remove only the smartphone top padding from the Problems section. */
  #features.problems {
    padding-top: 0;
  }

  /* Match the reference proportions around the Problems heading. */
  #features .section-heading {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    margin-bottom: 20px;
  }
  #features .problem-elephant,
  #features .problem-giraffe {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }
  #features .problem-elephant {
    top: 70px;
    left: -18px;
    width: 132px;
    height: 122px;
    object-fit: contain;
    transform: none;
  }
  #features .problem-giraffe {
    top: 26px;
    right: 8px;
    width: 92px;
    height: 154px;
    object-fit: contain;
  }

  /* Smartphone summary: remove crocodile and use exactly two lines. */
  #features .problems-summary-crocodile {
    display: none;
  }
  #features .problems-summary {
    gap: 0;
  }
  #features .problems-summary-pc {
    display: none;
  }
  #features .problems-summary-mobile {
    display: inline;
  }
  #features .problems-summary p {
    text-align: center;
  }
}

/* Smartphone-only: final Problems heading match. Desktop is intentionally untouched. */
@media (max-width: 760px) {
  #features .section-heading {
    margin-top: 37px;
    margin-bottom: 33px;
  }

  #features .problem-elephant {
    top: 45px;
    left: -30px;
    width: 180px;
    height: auto;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  #features .problem-giraffe {
    top: -5px;
    right: -128px;
    width: 360px;
    height: auto;
    object-fit: contain;
    object-position: center;
    transform: none;
  }
}

/* Smartphone-only Problems summary typography match. Desktop is untouched. */
@media (max-width: 760px) {
  #features .problems-summary {
    width: 100%;
    padding: 0;
  }
  #features .problems-summary p {
    width: 100%;
    margin: 0;
    color: var(--text);
    font-size: clamp(18px, 4.8vw, 24px);
    line-height: 1.45;
    font-weight: 800;
    letter-spacing: .01em;
    text-align: center;
    white-space: nowrap;
  }
  #features .problems-summary-mobile {
    color: var(--text);
  }
  #features .problems-summary-mobile .mobile-summary-emphasis {
    color: var(--red);
  }
}

/* Final fixes: restore smartphone chevrons and keep desktop summary colors correct. */
@media (min-width: 761px) {
  #features .problems-summary-pc {
    color: var(--text);
  }
  #features .problems-summary-pc > span {
    color: var(--red);
  }
}

@media (max-width: 760px) {
  #features .problems-down-arrows {
    display: flex;
    position: relative;
    left: auto;
    bottom: auto;
    width: 16px;
    height: 52px;
    margin: 36px auto 10px;
    transform: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    visibility: visible;
    opacity: 1;
    background: none;
    z-index: 3;
  }
  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-right: 1.5px solid var(--red);
    border-bottom: 1.5px solid var(--red);
    transform: rotate(45deg);
  }
}

/* Smartphone only: keep the three red arrows visible above and below the Problems summary. */
@media (max-width: 760px) {
  #features .problems-down-arrows {
    display: flex;
  }

  #features .problems-summary::after {
    content: "";
    display: block;
    position: static;
    width: 16px;
    height: 52px;
    margin: 10px auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='52' viewBox='0 0 16 52'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    transform: none;
    z-index: 3;
  }
}

/* Smartphone only: place the lower chevrons directly beneath the Problems summary. */
@media (max-width: 760px) {
  #features .problems-summary {
    position: relative;
    overflow: visible;
    margin-bottom: 58px;
  }

  #features .problems-summary::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    width: 16px;
    height: 52px;
    margin-top: 20px;
    transform: translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='52' viewBox='0 0 16 52'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    z-index: 3;
  }
}

/* ===== Tablet-only layout containment (761px-1180px) =====
   Keeps the completed mobile (<=760px) and desktop (>1180px) layouts untouched. */
@media (min-width: 761px) and (max-width: 1180px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  main,
  .hero--pdf,
  #features.problems,
  .diagnosis-benefits-pdf,
  .diagnosis-layout,
  .contact,
  .site-footer {
    width: 100%;
    max-width: 100%;
  }

  /* The desktop CONTACT columns total 1125px and were widening the page on tablets. */
  .contact-inner {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 32px;
  }

  .contact-personal > label {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 10px;
  }

  .contact-personal,
  .contact-message,
  .contact-form,
  .contact-form input:not([type="checkbox"]),
  .contact-form select,
  .contact-form textarea {
    min-width: 0;
    max-width: 100%;
  }
}

/* ===== Smartphone-only viewport/background containment =====
   Prevent decorative elements from widening the canvas on <=760px.
   Tablet and desktop rules are intentionally untouched. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  main,
  .hero--pdf,
  #features.problems,
  .diagnosis-benefits-pdf,
  .diagnosis-layout,
  .contact,
  .site-footer {
    width: 100%;
    max-width: 100%;
  }
}


/* Smartphone only: horizontally flip the Problems elephant. Tablet and desktop remain untouched. */
@media (max-width: 760px) {
  #features .problem-elephant {
    transform: scaleX(-1);
  }
}

/* ===== iPad / tablet Problems layout fix (761px-1000px only) =====
   Keeps smartphone (<=760px) and desktop (>=1001px) unchanged. */
@media (min-width: 761px) and (max-width: 1000px) {
  #features.problems {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 88px 28px 34px;
    overflow: hidden;
  }

  #features .section-heading {
    position: relative;
    z-index: 3;
    width: min(100%, 520px);
    margin: 0 auto 26px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--red);
    text-align: center;
  }

  #features .section-heading h2 {
    margin: 0;
    font-size: clamp(28px, 4.2vw, 34px);
    line-height: 1.35;
    white-space: nowrap;
  }

  #features .problem-grid {
    position: relative;
    z-index: 3;
    width: min(100%, 520px);
    max-width: 520px;
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 14px;
  }

  #features .problem-card {
    min-width: 0;
    height: 144px;
    min-height: 144px;
    padding: 20px 8px 14px;
    border-radius: 20px;
  }

  #features .problem-card img.icon {
    width: 56px;
    height: 56px;
  }

  #features .problem-card h3 {
    font-size: 13px;
    line-height: 1.3;
  }

  /* Decorative animals stay behind the heading/cards and inside the viewport. */
  #features .problem-elephant,
  #features .problem-giraffe {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
  }

  #features .problem-elephant {
    top: 118px;
    left: max(10px, calc(50% - 365px));
    width: 120px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 92px;
    right: max(8px, calc(50% - 370px));
    width: 105px;
    height: auto;
  }

  #features .problems-down-arrows {
    position: static;
    width: 16px;
    height: auto;
    margin: 36px auto 0;
    gap: 5px;
    transform: none;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
  }

  #features .problems-summary {
    position: relative;
    z-index: 3;
    width: min(100%, 620px);
    height: auto;
    margin: 0 auto;
    padding-top: 22px;
    gap: 10px;
  }

  #features .problems-summary-crocodile {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    object-fit: contain;
  }

  #features .problems-summary p {
    margin: 0;
    font-size: clamp(20px, 2.65vw, 24px);
    line-height: 1.45;
    text-align: center;
    white-space: nowrap;
  }
}

/* iPad Air landscape only: match the approved Problems reference without touching phone, other tablet widths, or desktop. */
@media screen and (min-width: 1170px) and (max-width: 1189px) and (min-height: 810px) and (max-height: 829px) and (orientation: landscape) {
  #features.problems {
    position: relative;
    padding: 54px 34px 34px;
    overflow: hidden;
  }

  #features .section-heading {
    position: relative;
    z-index: 3;
    width: 610px;
    max-width: calc(100% - 420px);
    margin: 0 auto 36px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--red);
    text-align: center;
  }

  #features .section-heading h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  #features .problem-grid {
    position: relative;
    z-index: 3;
    width: 610px;
    max-width: 610px;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 26px;
  }

  #features .problem-card {
    height: 164px;
    min-height: 164px;
    padding: 22px 12px 16px;
    border-radius: 22px;
  }

  #features .problem-card img.icon {
    width: 64px;
    height: 64px;
  }

  #features .problem-card h3 {
    font-size: 16px;
    line-height: 1.35;
  }

  #features .problem-elephant,
  #features .problem-giraffe {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
  }

  #features .problem-elephant {
    top: 70px;
    left: 42px;
    width: 250px;
    height: auto;
    transform: rotate(-8deg);
  }

  #features .problem-giraffe {
    top: 4px;
    right: 34px;
    width: 215px;
    height: 470px;
    object-fit: contain;
  }

  #features .problems-down-arrows {
    position: static;
    width: 24px;
    height: auto;
    margin: 48px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: none;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    position: relative;
    top: auto;
    left: auto;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
  }

  #features .problems-summary {
    position: relative;
    z-index: 3;
    width: 900px;
    max-width: calc(100% - 150px);
    height: auto;
    margin: 0 auto;
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
  }

  #features .problems-summary-crocodile {
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
    object-fit: contain;
  }

  #features .problems-summary p {
    margin: 0;
    font-size: 30px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }
}

/* iPad Air landscape final override only. Phone and desktop are outside this range. */
@media screen and (min-width: 1170px) and (max-width: 1189px) and (min-height: 810px) and (max-height: 829px) and (orientation: landscape) {
  #features.problems {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 54px 34px 34px;
    overflow: hidden;
  }

  #features .section-heading {
    position: relative;
    z-index: 3;
    width: 610px;
    max-width: calc(100% - 210px);
    margin: 0 auto 36px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--red);
    text-align: center;
  }

  #features .section-heading h2 {
    margin: 0;
    font-size: clamp(30px, 3vw, 34px);
    line-height: 1.3;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  #features .problem-grid {
    position: relative;
    z-index: 3;
    width: 610px;
    max-width: calc(100% - 210px);
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 26px;
  }

  #features .problem-card {
    min-width: 0;
    height: 164px;
    min-height: 164px;
    padding: 22px 12px 16px;
    border-radius: 22px;
  }

  #features .problem-card img.icon {
    width: 64px;
    height: 64px;
  }

  #features .problem-card h3 {
    font-size: 16px;
    line-height: 1.35;
  }

  #features .problem-elephant,
  #features .problem-giraffe {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
  }

  #features .problem-elephant {
    top: 70px;
    left: max(18px, calc(50% - 560px));
    width: 250px;
    height: auto;
    transform: rotate(-8deg);
  }

  #features .problem-giraffe {
    top: 4px;
    right: max(18px, calc(50% - 560px));
    width: 215px;
    height: 470px;
    object-fit: contain;
  }

  #features .problems-down-arrows {
    position: static;
    display: flex;
    width: 24px;
    height: auto;
    margin: 48px auto 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: none;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    position: relative;
    top: auto;
    left: auto;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
  }

  #features .problems-summary {
    position: relative;
    z-index: 3;
    width: 900px;
    max-width: calc(100% - 90px);
    height: auto;
    margin: 0 auto;
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
  }

  #features .problems-summary-crocodile {
    display: block;
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
    object-fit: contain;
  }

  #features .problems-summary p {
    margin: 0;
    font-size: clamp(24px, 2.55vw, 30px);
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }
}

/* ===== iPad Air landscape animal sizing override only =====
   Narrow viewport + height range keeps iPad Pro, desktop and smartphone untouched. */
@media screen and (min-width: 1170px) and (max-width: 1189px) and (min-height: 810px) and (max-height: 829px) and (orientation: landscape) {
  #features .problem-elephant {
    width: 300px;
    height: auto;
    left: 28px;
    top: 62px;
  }

  #features .problem-giraffe {
    width: 235px;
    height: 500px;
    right: 24px;
    top: 0;
  }
}

/* ===== iPad Air portrait only: Problems decorations / animals =====
   Targets the 820x1180 CSS viewport only. iPad Pro, phone and desktop remain untouched. */
@media screen
  and (min-width: 810px)
  and (max-width: 830px)
  and (min-height: 1170px)
  and (max-height: 1190px)
  and (orientation: portrait) {

  #features.problems {
    overflow: visible;
  }

  /* User-specified iPad Air animal sizing/placement. */
  #features .problem-giraffe {
    display: block;
    position: absolute;
    top: 177px;
    right: max(-512px, calc(50% - 600px));
    width: 525px;
    height: auto;
    z-index: 1;
    object-fit: contain;
    pointer-events: none;
  }

  #features .problem-elephant {
    display: block;
    position: absolute;
    top: 97px;
    left: max(-41px, calc(50% - 442px));
    width: 260px;
    height: auto;
    z-index: 1;
    object-fit: contain;
    transform: rotate(-8deg) scaleX(-1);
    pointer-events: none;
  }

  /* Restore SCROLL cue for iPad Air. */
  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: -70px;
    left: 50%;
    width: 30px;
    height: 112px;
    transform: translateX(-50%);
    z-index: 4;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
  }

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
  }

  /* Restore the three downward chevrons for iPad Air. */
  #features .problems-down-arrows {
    display: flex;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 24px;
    height: auto;
    margin: 42px auto 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: none;
    background: none;
    z-index: 4;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
  }

  /* Restore/correct the crocodile in the summary area for iPad Air. */
  #features .problems-summary {
    display: flex;
    position: relative;
    z-index: 3;
    width: min(100%, 700px);
    height: auto;
    margin: 0 auto;
    padding-top: 26px;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: -105px;
    top: 2px;
    width: 250px;
    height: 142px;
    flex: none;
    object-fit: contain;
  }
}


/* iPad Air portrait only: unify Problems chevron size/style. */
@media screen
  and (min-width: 810px)
  and (max-width: 830px)
  and (min-height: 1170px)
  and (max-height: 1190px)
  and (orientation: portrait) {

  #features .problems-down-arrows {
    display: block;
    position: static;
    width: 16px;
    height: 68px;
    margin: 42px auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    z-index: 4;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: none;
  }

  #features .problems-summary::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    width: 16px;
    height: 68px;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    z-index: 4;
    transform: translateX(-50%);
    pointer-events: none;
  }
}


/* ===== iPad Air portrait only: final Problems summary reference match =====
   Matches the approved screenshot while keeping iPad Pro, phone and desktop untouched. */
@media screen
  and (min-width: 810px)
  and (max-width: 830px)
  and (min-height: 1170px)
  and (max-height: 1190px)
  and (orientation: portrait) {

  #features .problems-summary {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 700px);
    min-height: 150px;
    margin: 0 auto;
    padding: 0px 15px 0 111px;
    gap: 0;
    overflow: visible;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: -35px;
    top: 8px;
    width: 250px;
    height: 142px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }

  #features .problems-summary p {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 24px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }

  #features .problems-summary::after {
    left: 50%;
    top: auto;
    bottom: -92px;
    transform: translateX(-50%);
  }

  .diagnosis-benefits-inner {
    padding: 45px 24px 0;
  }
}

/* ===== Surface Pro portrait only: Problems section PC-like layout =====
   Targets the common 912x1368 CSS viewport range only.
   iPad Air / iPad Pro / phone / desktop remain untouched. */
@media screen
  and (min-width: 900px)
  and (max-width: 925px)
  and (min-height: 1350px)
  and (max-height: 1385px)
  and (orientation: portrait) {

  #features.problems {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 76px 28px 42px;
    overflow: hidden;
  }

  #features .section-heading {
    position: relative;
    z-index: 3;
    width: 610px;
    max-width: calc(100% - 170px);
    margin: 0 auto 34px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--red);
    text-align: center;
  }

  #features .section-heading h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: .06em;
    white-space: nowrap;
  }

  #features .problem-grid {
    position: relative;
    z-index: 3;
    width: 610px;
    max-width: calc(100% - 170px);
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 26px;
  }

  #features .problem-card {
    min-width: 0;
    height: 164px;
    min-height: 164px;
    padding: 22px 12px 16px;
    border-radius: 22px;
  }

  #features .problem-card img.icon {
    width: 64px;
    height: 64px;
  }

  #features .problem-card h3 {
    font-size: 16px;
    line-height: 1.35;
  }

  #features .problem-elephant,
  #features .problem-giraffe {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
  }

  #features .problem-elephant {
    top: 92px;
    left: -8px;
    width: 225px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 34px;
    right: -18px;
    width: 190px;
    height: 420px;
    object-fit: contain;
  }

  #features .problems-down-arrows {
    display: flex;
    position: static;
    width: 24px;
    height: auto;
    margin: 46px auto 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: none;
    visibility: visible;
    opacity: 1;
    z-index: 4;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
  }

  #features .problems-summary {
    position: relative;
    z-index: 3;
    width: 820px;
    max-width: calc(100% - 46px);
    height: auto;
    margin: 0 auto;
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: static;
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
    object-fit: contain;
  }

  #features .problems-summary p {
    margin: 0;
    font-size: 26px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }
}


/* ===== Surface Pro portrait only: final Problems reference match =====
   Restores the SCROLL text and centers the crocodile + summary copy to match the approved reference.
   This applies only to Surface Pro portrait and does not affect iPad Air / iPad Pro / phone / desktop. */
@media screen
  and (min-width: 900px)
  and (max-width: 925px)
  and (min-height: 1350px)
  and (max-height: 1385px)
  and (orientation: portrait) {

  #features.problems {
    overflow: visible;
  }

  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: -90px;
    left: 50%;
    width: 30px;
    height: 112px;
    transform: translateX(-50%);
    color: var(--red);
    pointer-events: none;
    z-index: 4;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    bottom: -30px;
    width: 2px;
    height: 40px;
    background: var(--red);
    transform: translateX(-50%);
  }

  #features .problems-scroll-cue i::after {
    content: '';
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
  }

  #features .problems-summary {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 760px);
    min-height: 154px;
    margin: 0 auto;
    padding: 8px 18px 0 126px;
    gap: 0;
    overflow: visible;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: -26px;
    top: 6px;
    width: 240px;
    height: 136px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }

  #features .problems-summary p {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    font-size: 23px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }
}


/* ===== iPad mini portrait only: Problems section PC-like reference match =====
   Targets the iPad mini portrait CSS viewport only so phone, desktop, iPad Air,
   iPad Pro, and Surface Pro remain untouched. */
@media screen
  and (min-width: 734px)
  and (max-width: 754px)
  and (min-height: 1120px)
  and (max-height: 1145px)
  and (orientation: portrait) {

  #features.problems {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 112px 18px 44px;
    overflow: hidden;
  }

  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 12px;
    left: 50%;
    width: 30px;
    height: 112px;
    transform: translateX(-50%);
    color: var(--red);
    pointer-events: none;
    z-index: 4;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    bottom: -30px;
    width: 2px;
    height: 40px;
    background: var(--red);
    transform: translateX(-50%);
  }

  #features .problems-scroll-cue i::after {
    content: '';
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
  }

  #features .section-heading {
    position: relative;
    z-index: 3;
    width: 552px;
    max-width: calc(100% - 120px);
    margin: 0 auto 28px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--red);
    text-align: center;
  }

  #features .section-heading h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: .06em;
    white-space: nowrap;
  }

  #features .problem-elephant,
  #features .problem-giraffe {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
  }

  #features .problem-elephant {
    top: 138px;
    left: -6px;
    width: 178px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 132px;
    right: -12px;
    width: 154px;
    height: 330px;
  }

  #features .problem-grid {
    position: relative;
    z-index: 3;
    width: 552px;
    max-width: calc(100% - 120px);
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 18px;
  }

  #features .problem-card {
    min-width: 0;
    height: 150px;
    min-height: 150px;
    padding: 18px 10px 14px;
    border-radius: 18px;
  }

  #features .problem-card img.icon {
    width: 58px;
    height: 58px;
  }

  #features .problem-card h3 {
    font-size: 15px;
    line-height: 1.35;
  }

  #features .problems-down-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 16px;
    height: 68px;
    margin: 40px auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 4;
    transform: none;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: none;
  }

  #features .problems-summary {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 680px);
    min-height: 150px;
    margin: 0 auto;
    padding: 8px 18px 0 112px;
    gap: 0;
    overflow: visible;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: -8px;
    top: 10px;
    width: 220px;
    height: 125px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }

  #features .problems-summary p {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    font-size: 22px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }

  #features .problems-summary-pc {
    display: inline;
  }

  #features .problems-summary-mobile {
    display: none;
  }

  #features .problems-summary::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -56px;
    width: 16px;
    height: 68px;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    z-index: 4;
    transform: translateX(-50%);
    pointer-events: none;
  }
}


/* ===== iPad mini portrait only: final approved reference scale =====
   Applies only to the iPad mini portrait viewport; all other devices remain untouched. */
@media screen
  and (min-width: 734px)
  and (max-width: 754px)
  and (min-height: 1120px)
  and (max-height: 1145px)
  and (orientation: portrait) {

  #features.problems {
    padding: 76px 14px 56px;
    overflow: hidden;
  }

  #features .problems-scroll-cue {
    top: -18px;
    width: 30px;
    height: 112px;
  }

  #features .section-heading {
    width: 610px;
    max-width: calc(100% - 128px);
    margin: 0 auto 36px;
    padding-bottom: 7px;
  }

  #features .section-heading h2 {
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: .06em;
  }

  #features .problem-grid {
    width: 610px;
    max-width: calc(100% - 128px);
    gap: 18px 26px;
  }

  #features .problem-card {
    height: 164px;
    min-height: 164px;
    padding: 22px 12px 16px;
    border-radius: 22px;
  }

  #features .problem-card img.icon {
    width: 64px;
    height: 64px;
  }

  #features .problem-card h3 {
    font-size: 16px;
    line-height: 1.35;
  }

  #features .problem-elephant {
    top: 82px;
    left: -16px;
    width: 245px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 18px;
    right: -28px;
    width: 220px;
    height: 470px;
  }

  #features .problems-down-arrows {
    width: 16px;
    height: 68px;
    margin: 54px auto 6px;
  }

  #features .problems-summary {
    width: min(100%, 710px);
    min-height: 176px;
    margin: 0 auto;
    padding: 10px 22px 0 150px;
  }

  #features .problems-summary-crocodile {
    left: -12px;
    top: 14px;
    width: 245px;
    height: 145px;
  }

  #features .problems-summary p {
    font-size: 29px;
    line-height: 1.4;
  }

  #features .problems-summary::after {
    bottom: -92px;
    width: 16px;
    height: 68px;
  }
}


/* ===== Surface Pro portrait only: approved iPad Pro-style Problems layout =====
   Dedicated Surface Pro query so iPad Air / iPad Pro / iPad mini / phone / desktop stay untouched. */
@media screen
  and (min-width: 900px)
  and (max-width: 925px)
  and (min-height: 1350px)
  and (max-height: 1385px)
  and (orientation: portrait) {

  #features.problems {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 108px 28px 76px;
    overflow: hidden;
  }

  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 20px;
    left: 50%;
    width: 30px;
    height: 112px;
    transform: translateX(-50%);
    color: var(--red);
    pointer-events: none;
    z-index: 4;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    bottom: -30px;
    width: 2px;
    height: 40px;
    background: var(--red);
    transform: translateX(-50%);
  }

  #features .problems-scroll-cue i::after {
    content: '';
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
  }

  #features .section-heading {
    position: relative;
    z-index: 3;
    width: min(100%, 720px);
    margin: 0 auto 34px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--red);
    text-align: center;
  }

  #features .section-heading h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.25;
    letter-spacing: .06em;
    white-space: nowrap;
  }

  #features .problem-elephant,
  #features .problem-giraffe {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
  }

  #features .problem-elephant {
    top: 74px;
    left: 6px;
    width: 215px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 14px;
    right: 8px;
    width: 155px;
    height: auto;
  }

  #features .problem-grid {
    position: relative;
    z-index: 3;
    width: min(100%, 700px);
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
  }

  #features .problem-card {
    min-width: 0;
    height: 154px;
    min-height: 154px;
    padding: 20px 12px 16px;
    border-radius: 20px;
  }

  #features .problem-card img.icon {
    width: 60px;
    height: 60px;
  }

  #features .problem-card h3 {
    font-size: 16px;
    line-height: 1.35;
  }

  #features .problems-down-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 16px;
    height: 68px;
    margin: 46px auto 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 4;
    transform: none;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: none;
  }

  #features .problems-summary {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 760px);
    min-height: 160px;
    margin: 0 auto;
    padding: 10px 18px 0 136px;
    gap: 0;
    overflow: visible;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: -8px;
    top: 6px;
    width: 245px;
    height: 140px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }

  #features .problems-summary p {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    font-size: 24px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }

  #features .problems-summary-pc { display: inline; }
  #features .problems-summary-mobile { display: none; }

  #features .problems-summary::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -88px;
    width: 16px;
    height: 68px;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    z-index: 4;
    transform: translateX(-50%);
    pointer-events: none;
  }
}

/* ===== iPad mini portrait only: approved iPad Pro-style Problems layout =====
   Dedicated iPad mini query so iPad Air / iPad Pro / Surface Pro / phone / desktop stay untouched. */
@media screen
  and (min-width: 734px)
  and (max-width: 754px)
  and (min-height: 1120px)
  and (max-height: 1145px)
  and (orientation: portrait) {

  #features.problems {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 118px 18px 62px;
    overflow: hidden;
  }

  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 22px;
    left: 50%;
    width: 30px;
    height: 112px;
    transform: translateX(-50%);
    color: var(--red);
    pointer-events: none;
    z-index: 4;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    bottom: -30px;
    width: 2px;
    height: 40px;
    background: var(--red);
    transform: translateX(-50%);
  }

  #features .problems-scroll-cue i::after {
    content: '';
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
  }

  #features .section-heading {
    position: relative;
    z-index: 3;
    width: min(100%, 600px);
    margin: 0 auto 30px;
    padding: 0 0 7px;
    border-bottom: 1px solid var(--red);
    text-align: center;
  }

  #features .section-heading h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: .06em;
    white-space: nowrap;
  }

  #features .problem-elephant,
  #features .problem-giraffe {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
  }

  #features .problem-elephant {
    top: 144px;
    left: -6px;
    width: 145px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 134px;
    right: -6px;
    width: 118px;
    height: auto;
  }

  #features .problem-grid {
    position: relative;
    z-index: 3;
    width: min(100%, 600px);
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 12px;
  }

  #features .problem-card {
    min-width: 0;
    height: 126px;
    min-height: 126px;
    padding: 14px 8px 12px;
    border-radius: 16px;
  }

  #features .problem-card img.icon {
    width: 48px;
    height: 48px;
  }

  #features .problem-card h3 {
    font-size: 13px;
    line-height: 1.28;
  }

  #features .problems-down-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 16px;
    height: 68px;
    margin: 34px auto 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 4;
    transform: none;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: none;
  }

  #features .problems-summary {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 630px);
    min-height: 136px;
    margin: 0 auto;
    padding: 8px 10px 0 98px;
    gap: 0;
    overflow: visible;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: -6px;
    top: 8px;
    width: 160px;
    height: 100px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }

  #features .problems-summary p {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }

  #features .problems-summary-pc { display: inline; }
  #features .problems-summary-mobile { display: none; }

  #features .problems-summary::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -80px;
    width: 16px;
    height: 68px;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    z-index: 4;
    transform: translateX(-50%);
    pointer-events: none;
  }
}


/* ===== iPad mini portrait only: requested animal sizing override =====
   Applies only to the iPad mini portrait viewport. */
@media screen
  and (min-width: 734px)
  and (max-width: 754px)
  and (min-height: 1120px)
  and (max-height: 1145px)
  and (orientation: portrait) {

  #features .problem-elephant {
    top: 95px;
    left: max(-44px, calc(50% - 416px));
    width: 245px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 241px;
    right: max(-146px, calc(50% - 530px));
    width: 412px;
    height: auto;
  }

  #features .problems-summary-crocodile {
    width: 372px;
    height: 142px;
  }
}


/* ===== iPad mini portrait only: final screenshot-matched layout =====
   Applies only to the iPad mini portrait viewport and is intended to match the approved screenshot exactly.
   iPad Air / iPad Pro / Surface Pro / phone / desktop remain untouched. */
@media screen
  and (min-width: 734px)
  and (max-width: 754px)
  and (min-height: 1120px)
  and (max-height: 1145px)
  and (orientation: portrait) {

  #features.problems {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 122px 16px 54px;
    overflow: hidden;
  }

  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 22px;
    left: 50%;
    width: 30px;
    height: 112px;
    transform: translateX(-50%);
    color: var(--red);
    pointer-events: none;
    z-index: 4;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    bottom: -30px;
    width: 2px;
    height: 40px;
    background: var(--red);
    transform: translateX(-50%);
  }

  #features .problems-scroll-cue i::after {
    content: '';
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    transform: rotate(45deg);
  }

  #features .section-heading {
    position: relative;
    z-index: 3;
    width: 420px;
    max-width: calc(100% - 112px);
    margin: 0 auto 18px;
    padding: 0 0 7px;
    border-bottom: 1px solid var(--red);
    text-align: center;
  }

  #features .section-heading h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: .06em;
    white-space: nowrap;
  }

  #features .problem-elephant,
  #features .problem-giraffe {
    display: block;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
  }

  #features .problem-elephant {
    top: 168px;
    left: 18px;
    width: 92px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 166px;
    right: 16px;
    width: 84px;
    height: auto;
  }

  #features .problem-grid {
    position: relative;
    z-index: 3;
    width: 420px;
    max-width: calc(100% - 112px);
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  #features .problem-card {
    min-width: 0;
    height: 112px;
    min-height: 112px;
    padding: 12px 8px 10px;
    border-radius: 16px;
  }

  #features .problem-card img.icon {
    width: 42px;
    height: 42px;
  }

  #features .problem-card h3 {
    font-size: 12px;
    line-height: 1.26;
  }

  #features .problems-down-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 16px;
    height: 68px;
    margin: 28px auto 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 4;
    transform: none;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: none;
  }

  #features .problems-summary {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 470px;
    max-width: calc(100% - 50px);
    min-height: 118px;
    margin: 0 auto;
    padding: 4px 8px 0 86px;
    gap: 0;
    overflow: visible;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: 6px;
    top: 10px;
    width: 132px;
    height: 80px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }

  #features .problems-summary p {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    font-size: 15px;
    line-height: 1.42;
    font-weight: 800;
    text-align: center;
  }

  #features .problems-summary-pc { display: inline; }
  #features .problems-summary-mobile { display: none; }

  #features .problems-summary::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -76px;
    width: 16px;
    height: 68px;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    z-index: 4;
    transform: translateX(-50%);
    pointer-events: none;
  }
}


/* ===== iPad mini portrait only: requested final tuning =====
   Applies only to the iPad mini portrait viewport. Other devices remain untouched. */
@media screen
  and (min-width: 734px)
  and (max-width: 754px)
  and (min-height: 1120px)
  and (max-height: 1145px)
  and (orientation: portrait) {

  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 22px;
    left: 50%;
    width: 30px;
    height: 160px;
    transform: translateX(-50%);
    color: var(--red);
    pointer-events: none;
    z-index: 4;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 34px;
    left: 50%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 142px;
    background: var(--red);
    transform: translateX(-50%);
  }

  #features .problems-scroll-cue i::after {
    content: '';
    position: absolute;
    left: -4px;
    bottom: 0;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
    transform: rotate(45deg);
  }

  #features .problem-elephant {
    top: 94px;
    left: max(-50px, calc(50% - 416px));
    width: 241px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 211px;
    right: max(-170px, calc(50% - 675px));
    width: 462px;
    height: auto;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: -150px;
    top: 8px;
    width: 474px;
    height: 154px;
    flex: 0 0 72px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }
}

/* ===== iPad mini 768x1024 portrait ONLY: final override =====
   Based on the actual DevTools viewport shown by the user (768 x 1024).
   This intentionally excludes iPad Air, iPad Pro, Surface Pro, phones and desktop. */
@media screen
  and (min-width: 760px)
  and (max-width: 775px)
  and (min-height: 1015px)
  and (max-height: 1035px)
  and (orientation: portrait) {

  #features.problems {
    padding-top: 184px;
    overflow: visible;
  }

  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 10px;
    left: 50%;
    width: 30px;
    height: 160px;
    transform: translateX(-50%);
    color: var(--red);
    pointer-events: none;
    z-index: 4;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 34px;
    left: 50%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 142px;
    background: var(--red);
    transform: translateX(-50%);
  }

  #features .problems-scroll-cue i::after {
    content: '';
    position: absolute;
    left: -4px;
    bottom: 0;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
    transform: rotate(45deg);
  }

  #features .problem-elephant {
    top: 94px;
    left: max(-50px, calc(50% - 416px));
    width: 241px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 211px;
    right: max(-170px, calc(50% - 675px));
    width: 462px;
    height: auto;
  }

  #features .problems-summary {
    width: min(100%, 700px);
    max-width: calc(100% - 24px);
    min-height: 178px;
    padding: 0 12px 0 124px;
    overflow: visible;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: -170px;
    top: 8px;
    width: 474px;
    height: 154px;
    flex: 0 0 72px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }

  #features .problems-summary p {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 800;
    text-align: center;
  }
}

/* iPad mini 768x1024 portrait ONLY: restore chevrons above the summary/crocodile. */
@media screen
  and (min-width: 760px)
  and (max-width: 775px)
  and (min-height: 1015px)
  and (max-height: 1035px)
  and (orientation: portrait) {

  #features .problems-down-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 16px;
    height: 68px;
    margin: 28px auto 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 4;
    transform: none;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: none;
  }
}


/* iPad mini 768x1024 portrait ONLY: final overflow and chevron normalization. */
@media screen
  and (min-width: 760px)
  and (max-width: 775px)
  and (min-height: 1015px)
  and (max-height: 1035px)
  and (orientation: portrait) {

  html,
  body {
    overflow-x: clip;
  }

  #features .problems-down-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 16px;
    height: 68px;
    margin: 14px auto -6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
    z-index: 4;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: none;
  }

  #features .problems-summary::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -84px;
    width: 16px;
    height: 68px;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 4;
  }
}

/* ===== iPad mini 768x1024 portrait ONLY: user-specified final positioning =====
   Applies only to the actual iPad mini DevTools viewport. Other devices remain untouched. */
@media screen
  and (min-width: 760px)
  and (max-width: 775px)
  and (min-height: 1015px)
  and (max-height: 1035px)
  and (orientation: portrait) {

  html,
  body {
    overflow-x: clip;
  }

  #features.problems {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 88px 28px 0;
    overflow: visible;
  }

  #features .problems-down-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: relative;
    width: 16px;
    height: 68px;
    margin: 28px auto 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 4;
    transform: none;
    top: 16px;
  }

  #features .problems-down-arrows span,
  #features .problems-down-arrows span:nth-child(1),
  #features .problems-down-arrows span:nth-child(2),
  #features .problems-down-arrows span:nth-child(3) {
    display: none;
  }

  #features .problems-summary::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 142px;
    bottom: auto;
    width: 16px;
    height: 68px;
    margin: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: visible;
    opacity: 1;
    z-index: 4;
    transform: translateX(-50%);
    pointer-events: none;
  }

  #features .problems-summary {
    margin-top: -18px;
  }

  .diagnosis-benefits-pdf {
    overflow: visible;
  }

  .diagnosis-benefits-inner {
    padding: 0 24px 0;
    overflow: visible;
  }

  .diagnosis-benefits-heading {
    overflow: visible;
  }
}


/* ===== iPad mini portrait only: flow-based arrows layout =====
   Makes both arrow groups part of the normal flow so the layout is more stable.
   This block affects only the iPad mini portrait viewport. */
@media screen
  and (min-width: 760px)
  and (max-width: 775px)
  and (min-height: 1015px)
  and (max-height: 1035px)
  and (orientation: portrait) {

  #features.problems {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 88px 28px 0;
    overflow: visible;
  }

  html,
  body {
    overflow-x: clip;
  }

  #features .problems-scroll-cue {
    top: 8px;
  }

  #features .problems-down-arrows,
  #features .problems-bottom-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 16px;
    height: 68px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 4;
    transform: none;
  }

  #features .problems-down-arrows {
    margin: 22px auto 0;
  }

  #features .problems-bottom-arrows {
    margin: 6px auto 0;
  }

  #features .problems-down-arrows span,
  #features .problems-bottom-arrows span {
    display: none;
  }

  #features .problems-summary {
    width: min(100%, 700px);
    max-width: calc(100% - 24px);
    min-height: 178px;
    margin: -18px auto 0;
    padding: 0 12px 0 124px;
    overflow: visible;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: -170px;
    top: 8px;
    width: 474px;
    height: 154px;
    flex: 0 0 72px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
  }

  #features .problems-summary p {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 800;
    text-align: center;
  }

  #features .problems-summary::after {
    content: none;
    display: none;
  }

  .diagnosis-benefits-inner {
    padding: 0 24px 0;
  }

  .diagnosis-benefits-pdf,
  .diagnosis-benefits-inner,
  .diagnosis-benefits-heading {
    overflow: visible;
  }
}


/* ===== iPad mini portrait only: compact summary text height + vertically centered crocodile ===== */
@media screen
  and (min-width: 760px)
  and (max-width: 775px)
  and (min-height: 1015px)
  and (max-height: 1035px)
  and (orientation: portrait) {

  #features .problems-summary {
    min-height: 0;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }

  #features .problems-summary-crocodile {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ===== iPad mini 768x1024 portrait ONLY: requested spacing values ===== */
@media screen
  and (min-width: 760px)
  and (max-width: 775px)
  and (min-height: 1015px)
  and (max-height: 1035px)
  and (orientation: portrait) {

  #features .problems-down-arrows {
    margin: 35px auto 35px;
  }

  #features .problems-bottom-arrows {
    margin: 35px auto 35px;
  }

  .diagnosis-benefits-inner {
    padding: 30px 24px 0;
  }
}

/* ===== iPad mini 768x1024 portrait ONLY: requested SCROLL cue position ===== */
@media screen
  and (min-width: 760px)
  and (max-width: 775px)
  and (min-height: 1015px)
  and (max-height: 1035px)
  and (orientation: portrait) {

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 55px;
    left: 90%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problems-scroll-cue {
    top: -90px;
  }
}

/* ===== iPad Air portrait ONLY: requested SCROLL cue positioning =====
   Applies only to the 820x1180-class iPad Air viewport. */
@media screen
  and (min-width: 810px)
  and (max-width: 830px)
  and (min-height: 1170px)
  and (max-height: 1190px)
  and (orientation: portrait) {

  #features .problems-scroll-cue {
    top: -90px;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 55px;
    left: 90%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }
}


/* ===== iPad Air portrait ONLY: match iPad mini SCROLL cue geometry exactly =====
   Applies only to the 820x1180-class iPad Air viewport. */
@media screen
  and (min-width: 810px)
  and (max-width: 830px)
  and (min-height: 1170px)
  and (max-height: 1190px)
  and (orientation: portrait) {

  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: -90px;
    left: 50%;
    width: 30px;
    height: 160px;
    transform: translateX(-50%);
    color: var(--red);
    pointer-events: none;
    z-index: 4;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 55px;
    left: 90%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 142px;
    background: var(--red);
    transform: translateX(-50%);
  }

  #features .problems-scroll-cue i::after {
    content: '';
    position: absolute;
    left: -4px;
    bottom: 0;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
    transform: rotate(45deg);
  }
}

/* ===== iPad Air portrait ONLY: compact summary + flow-based arrows =====
   Removes extra vertical space around the summary text and keeps both chevron groups
   in normal document flow. Other devices are untouched. */
@media screen
  and (min-width: 810px)
  and (max-width: 830px)
  and (min-height: 1170px)
  and (max-height: 1190px)
  and (orientation: portrait) {

  #features .problems-summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 700px);
    min-height: 0;
    height: auto;
    margin: 0 auto;
    padding: 0 15px 0 111px;
    gap: 0;
    overflow: visible;
  }

  #features .problems-summary-crocodile {
    display: block;
    position: absolute;
    left: -35px;
    top: 50%;
    width: 250px;
    height: 142px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
    transform: translateY(-50%);
  }

  #features .problems-down-arrows,
  #features .problems-bottom-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 16px;
    height: 68px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
    z-index: 4;
  }

  #features .problems-down-arrows {
    margin: 35px auto 35px;
  }

  #features .problems-bottom-arrows {
    margin: 35px auto 35px;
  }

  #features .problems-down-arrows span,
  #features .problems-bottom-arrows span {
    display: none;
  }

  #features .problems-summary::after {
    content: none;
    display: none;
  }
}

/* ===== Surface Pro 7 912x1368 portrait ONLY: iPad-mini-style stable Problems layout =====
   Narrow viewport guard so this does not affect iPad mini / iPad Pro / other Surface sizes / phones / desktop. */
@media screen
  and (min-width: 908px)
  and (max-width: 916px)
  and (min-height: 1364px)
  and (max-height: 1372px)
  and (orientation: portrait) {

  #features.problems {
    overflow: visible;
  }

  /* Keep the elephant beside the heading without changing its image size. */
  #features .problem-elephant {
    top: 74px;
    left: -12px;
  }

  /* Both chevron groups stay in normal document flow. */
  #features .problems-down-arrows,
  #features .problems-bottom-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 16px;
    height: 68px;
    margin: 35px auto 35px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
    z-index: 4;
  }

  #features .problems-down-arrows span,
  #features .problems-bottom-arrows span {
    display: none;
  }

  /* Remove the extra vertical space around the summary text. */
  #features .problems-summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 760px);
    min-height: 0;
    height: auto;
    margin: 0 auto;
    padding: 0 18px 0 136px;
    gap: 0;
    overflow: visible;
  }

  /* Keep the existing crocodile size and vertically center it to the text block. */
  #features .problems-summary-crocodile {
    left: -8px;
    top: 50%;
    width: 245px;
    height: 140px;
    transform: translateY(-50%);
  }

  #features .problems-summary::after {
    content: none;
    display: none;
  }
}

/* ===== Smartphone ONLY: restore the SCROLL label and arrow =====
   No other smartphone Problems styling is changed here. */
@media screen and (max-width: 760px) {
  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: -100px;
    left: 50%;
    width: 30px;
    height: 82px;
    transform: translateX(-50%);
    color: var(--red);
    pointer-events: none;
    z-index: 4;
  }

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 18px;
    left: 81%;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 72px;
    background: var(--red);
    transform: translateX(-50%);
  }

  #features .problems-scroll-cue i::after {
    content: '';
    position: absolute;
    left: -4px;
    bottom: 0;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
    transform: rotate(45deg);
  }
}

/* ===== Galaxy Z Fold 5 portrait (344x882) ONLY: diagnosis form width stabilization =====
   Narrow viewport-specific fix. Does not affect other smartphone/tablet/desktop sizes. */
@media screen
  and (min-width: 340px)
  and (max-width: 348px)
  and (min-height: 876px)
  and (max-height: 888px)
  and (orientation: portrait) {

  #diagnosis-form,
  #diagnosis-form .form-panel-inner,
  #diagnosis-form .google-form-wrap,
  #diagnosis-form .diagnosis-form,
  #diagnosis-form .diagnosis-field,
  #diagnosis-form .diagnosis-options,
  #diagnosis-form .option-grid {
    min-width: 0;
    max-width: 100%;
  }

  #diagnosis-form {
    width: 100%;
  }

  #diagnosis-form .form-panel-inner {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  #diagnosis-form .diagnosis-form {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #diagnosis-form .diagnosis-field {
    width: 100%;
  }

  #diagnosis-form .diagnosis-field input,
  #diagnosis-form .diagnosis-field select,
  #diagnosis-form .diagnosis-form input,
  #diagnosis-form .diagnosis-form select,
  #diagnosis-form .diagnosis-form textarea {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #diagnosis-form .option-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #diagnosis-form .option-grid label {
    min-width: 0;
  }
}

/* ===== Galaxy Z Fold 5 portrait (344x882) ONLY: final diagnosis form containment =====
   Keeps all form controls inside the red bordered panel at this exact narrow viewport. */
@media screen
  and (min-width: 340px)
  and (max-width: 348px)
  and (min-height: 876px)
  and (max-height: 888px)
  and (orientation: portrait) {

  #diagnosis-form {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
  }

  #diagnosis-form .form-panel-inner {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    overflow: visible;
  }

  #diagnosis-form .diagnosis-form,
  #diagnosis-form .diagnosis-field,
  #diagnosis-form .diagnosis-options,
  #diagnosis-form .option-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #diagnosis-form .diagnosis-field input,
  #diagnosis-form .diagnosis-field select,
  #diagnosis-form .diagnosis-form input:not([type="checkbox"]):not([type="radio"]),
  #diagnosis-form .diagnosis-form select,
  #diagnosis-form .diagnosis-form textarea {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
  }

  #diagnosis-form .option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #diagnosis-form .option-grid label {
    min-width: 0;
    max-width: 100%;
  }
}


/* ===== Galaxy Z Fold 5 portrait (344x882) ONLY: compact form containment v3 =====
   Exact narrow viewport only. Fixes content-box overflow by forcing border-box on the form hierarchy. */
@media screen
  and (min-width: 340px)
  and (max-width: 348px)
  and (min-height: 876px)
  and (max-height: 888px)
  and (orientation: portrait) {

  #diagnosis-form {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  #diagnosis-form .form-panel-inner,
  #diagnosis-form .google-form-wrap,
  #diagnosis-form .diagnosis-form,
  #diagnosis-form .diagnosis-field,
  #diagnosis-form .diagnosis-options,
  #diagnosis-form .option-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #diagnosis-form .form-panel-inner {
    padding-left: 14px;
    padding-right: 14px;
    overflow: hidden;
  }

  #diagnosis-form .diagnosis-form {
    gap: 15px;
  }

  #diagnosis-form .diagnosis-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  #diagnosis-form .diagnosis-field input,
  #diagnosis-form .diagnosis-field select,
  #diagnosis-form .diagnosis-form input:not([type="checkbox"]):not([type="radio"]),
  #diagnosis-form .diagnosis-form select,
  #diagnosis-form .diagnosis-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  #diagnosis-form .option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  #diagnosis-form .option-grid label {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }
}

/* ===== Galaxy Z Fold 5 portrait (344x882) ONLY: wider panel + 80% fields + wrapped options =====
   Narrow viewport only. Other phone/tablet/desktop sizes are untouched. */
@media screen
  and (min-width: 340px)
  and (max-width: 348px)
  and (min-height: 876px)
  and (max-height: 888px)
  and (orientation: portrait) {

  #diagnosis-form .form-panel-inner {
    width: calc(100% + 20px);
    max-width: none;
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    overflow: visible;
  }

  #diagnosis-form .diagnosis-form,
  #diagnosis-form .diagnosis-field,
  #diagnosis-form .diagnosis-options,
  #diagnosis-form .option-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #diagnosis-form .diagnosis-field input,
  #diagnosis-form .diagnosis-field select,
  #diagnosis-form .diagnosis-form input:not([type="checkbox"]):not([type="radio"]),
  #diagnosis-form .diagnosis-form select,
  #diagnosis-form .diagnosis-form textarea {
    display: block;
    width: 80%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  #diagnosis-form .option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  #diagnosis-form .option-grid label {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    align-items: flex-start;
  }

  #diagnosis-form .option-grid label span {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* ===== Galaxy Z Fold 5 portrait (344x882) ONLY: current-concern options in one column =====
   Matches the requested reference layout. Other devices remain untouched. */
@media screen
  and (min-width: 340px)
  and (max-width: 348px)
  and (min-height: 876px)
  and (max-height: 888px)
  and (orientation: portrait) {

  #diagnosis-form .diagnosis-options.stacked .option-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 0;
    width: 100%;
    max-width: 100%;
  }

  #diagnosis-form .diagnosis-options.stacked .option-grid label {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
  }

  #diagnosis-form .diagnosis-options.stacked .option-grid label span {
    display: block;
    min-width: 0;
    max-width: calc(100% - 26px);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.45;
  }
}


/* ===== Galaxy Z Fold 5 portrait (344x882) ONLY: keep growth options inside panel =====
   Allows long option labels to wrap cleanly without changing other devices. */
@media screen
  and (min-width: 340px)
  and (max-width: 348px)
  and (min-height: 876px)
  and (max-height: 888px)
  and (orientation: portrait) {

  #diagnosis-form .growth-options .option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
    width: 100%;
    max-width: 100%;
  }

  #diagnosis-form .growth-options .option-grid label {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    column-gap: 6px;
    align-items: start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }

  #diagnosis-form .growth-options .option-grid label input {
    width: 14px;
    height: 14px;
    margin: 1px 0 0;
  }

  #diagnosis-form .growth-options .option-grid label span {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
  }
}

/* ===== Galaxy Z Fold 5 portrait (344x882) ONLY: typography sizing =====
   Applies only to the Galaxy Z Fold 5 DevTools viewport. */
@media screen
  and (min-width: 340px)
  and (max-width: 348px)
  and (min-height: 876px)
  and (max-height: 888px)
  and (orientation: portrait) {

  #diagnosis-form .diagnosis-form .option-grid label {
    font-size: 10px;
    line-height: 1.55;
    padding: 4px 0;
    min-height: 0;
    white-space: normal;
  }

  #diagnosis-form .diagnosis-form .diagnosis-field {
    font-size: 11px;
  }

  #diagnosis-form form select {
    height: 42px;
    font-size: 9px;
  }
}

/* ===== Galaxy Z Fold 5 portrait (344x882) ONLY: submit button sizing =====
   Applies only to the Galaxy Z Fold 5 DevTools viewport. */
@media screen
  and (min-width: 340px)
  and (max-width: 348px)
  and (min-height: 876px)
  and (max-height: 888px)
  and (orientation: portrait) {

  #diagnosis-form .diagnosis-submit-button {
    width: 295px;
    max-width: 100%;
    min-height: 40px;
    margin: 0 auto;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }

  #diagnosis-form .diagnosis-submit-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 88%;
    margin-top: 4px;
  }
}

/* ===== Surface Pro 7 912x1368 portrait ONLY: final requested tuning =====
   Narrow guard so Galaxy Z Fold 5, iPad mini, iPad Pro, other Surface sizes,
   smartphones and desktop are not affected. */
@media screen
  and (min-width: 908px)
  and (max-width: 916px)
  and (min-height: 1364px)
  and (max-height: 1372px)
  and (orientation: portrait) {

  #features .problems-scroll-cue span {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 56px;
    left: 81%;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    color: var(--red);
  }

  #features .problem-elephant {
    top: 88px;
    left: -35px;
    width: 280px;
    height: auto;
    transform: rotate(-8deg) scaleX(-1);
  }

  #features .problem-giraffe {
    top: 255px;
    right: -145px;
    width: 398px;
    height: 309px;
  }

  #features .problems-summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 820px);
    min-height: 0;
    height: auto;
    margin: 0 auto;
    padding: 0 18px 0 158px;
    gap: 0;
    overflow: visible;
  }

  #features .problems-summary p {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    font-size: 32px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
  }

  #features .problems-summary-crocodile {
    position: absolute;
    left: -68px;
    top: 50%;
    width: 248px;
    height: 140px;
    object-fit: contain;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
  }
}


/* ===== Surface Pro 7 912x1368 portrait ONLY: scroll line and section spacing =====
   Narrow viewport targeting to avoid affecting other Surface/iPad/mobile/desktop layouts. */
@media screen
  and (min-width: 908px)
  and (max-width: 916px)
  and (min-height: 1364px)
  and (max-height: 1372px)
  and (orientation: portrait) {

  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    bottom: -30px;
    width: 2px;
    height: 108px;
    background: var(--red);
    transform: translateX(-50%);
  }

  #features.problems {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 108px 28px 20px;
    overflow: hidden;
  }
}

/* ===== Surface Pro 7 912x1368 portrait ONLY: move SCROLL cue upward without clipping =====
   Exact-size override so Galaxy Z Fold 5, iPad mini, iPad Pro, other Surface sizes,
   smartphones and desktop remain unchanged. */
@media screen
  and (min-width: 908px)
  and (max-width: 916px)
  and (min-height: 1364px)
  and (max-height: 1372px)
  and (orientation: portrait) {

  #features.problems {
    overflow: visible;
  }

  #features .problems-scroll-cue {
    top: -60px;
  }
}

/* ===== Generic smartphone diagnosis input/select size ONLY =====
   Applies to smartphone widths up to 760px. Exact Galaxy S8+ and Galaxy Z Fold 5
   overrides below remain in place, so those device-specific layouts are unchanged. */
@media (max-width: 760px) {
  .diagnosis-form .diagnosis-field input,
  .diagnosis-form select {
    height: 42px;
    font-size: 12px;
  }
}

/* ===== Samsung Galaxy S8+ DevTools 360x740 portrait ONLY =====
   Narrow guard so Galaxy Z Fold 5, iPad mini, iPad Pro, Surface Pro,
   other smartphone sizes and desktop remain unchanged. */
@media screen
  and (min-width: 356px)
  and (max-width: 364px)
  and (min-height: 736px)
  and (max-height: 744px)
  and (orientation: portrait) {

  .mock-form input,
  .mock-form select,
  .mock-form textarea {
    width: 98%;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 12px 14px;
    font: inherit;
    background: #EFF4F7;
    outline: none;
  }

  .diagnosis-form .diagnosis-submit-button {
    width: 272px;
    max-width: 71%;
    min-height: 40px;
    margin: 0 auto;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }
}


/* Samsung Galaxy S8+ 360x740 portrait ONLY */
@media screen
  and (min-width: 356px)
  and (max-width: 364px)
  and (min-height: 736px)
  and (max-height: 744px)
  and (orientation: portrait) {

  #diagnosis-form .diagnosis-form .diagnosis-field input,
  #diagnosis-form .diagnosis-form select {
    height: 42px;
    font-size: 12px;
  }
}

/* ===== Galaxy Z Fold 5 DevTools viewport 344x882 ONLY: diagnosis inputs/select font size =====
   Exact narrow viewport guard. Does not affect Galaxy S8+, iPad mini, iPad Pro,
   Surface Pro, desktop, or other smartphone sizes. */
@media screen
  and (min-width: 340px)
  and (max-width: 348px)
  and (min-height: 876px)
  and (max-height: 888px)
  and (orientation: portrait) {

  #diagnosis-form .diagnosis-form .diagnosis-field input,
  #diagnosis-form .diagnosis-form select {
    height: 42px;
    font-size: 9px;
  }
}


/* ===== iPhone 12 Pro 390x844 portrait ONLY: URL fields fit without clipping =====
   Narrow viewport guard so other phones/tablets/desktop remain unchanged. */
@media screen
  and (min-width: 386px)
  and (max-width: 394px)
  and (min-height: 840px)
  and (max-height: 848px)
  and (orientation: portrait) {

  #diagnosis-form .diagnosis-form input[type="url"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 11px;
  }
}

/* ===== First-view vertical whitespace trim =====
   Removes the viewport-height-driven empty space around the desktop/tablet hero.
   The hero now follows its actual content height so the diagnosis CTA stays inside
   the first view more reliably without forcing the content to vertical-center. */
@media screen and (min-width: 821px) {
  .hero--pdf {
    min-height: 0;
    height: auto;
  }

  .hero-inner--pdf {
    min-height: 0;
    height: auto;
    padding-top: 0;
    padding-bottom: 24px;
    align-items: start;
  }

  .hero-copy--pdf {
    align-self: start;
  }

  .hero-visual--pdf {
    min-height: 0;
    align-self: start;
  }
}

/* ===== Desktop/tablet first-view height fit =====
   Keep the hero flush to the top, but compress only when viewport height is limited
   so the primary CTA remains visible in the first screen. */
@media screen and (min-width: 821px) and (max-height: 900px) {
  .hero--pdf {
    min-height: calc(100svh - 112px);
    height: calc(100svh - 112px);
    overflow: hidden;
  }

  .hero-inner--pdf {
    min-height: 0;
    height: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    align-items: center;
  }

  .hero-copy--pdf {
    align-self: center;
  }

  .hero-product-mark {
    margin-bottom: 14px;
  }

  .hero-symbol-image {
    width: 55px;
  }

  .hero-product-name strong {
    font-size: 21px;
  }

  .hero-kicker {
    margin-bottom: 4px;
    font-size: 14px;
  }

  .hero-copy--pdf h1 {
    font-size: clamp(38px, 3.6vw, 56px);
    line-height: 1.06;
  }

  .hero-lead--pdf {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
  }

  .hero-meta {
    margin: 12px 0 14px;
  }

  .hero-meta span {
    padding: 7px 16px;
    font-size: 13px;
  }

  .primary-button--pdf {
    min-height: 54px;
    font-size: 17px;
  }

  .hero-visual--pdf {
    min-height: 0;
    height: 100%;
    align-self: center;
    align-items: center;
  }

  .animal-group--pdf {
    width: min(720px, 100%);
    max-height: calc(100svh - 150px);
    transform: translate(12px, 0);
  }
}

@media screen and (min-width: 821px) and (max-height: 760px) {
  .hero-inner--pdf {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .hero-product-mark {
    margin-bottom: 8px;
  }

  .hero-symbol-image {
    width: 47px;
  }

  .hero-product-name strong {
    font-size: 18px;
  }

  .hero-kicker {
    font-size: 12px;
  }

  .hero-copy--pdf h1 {
    font-size: clamp(34px, 3.2vw, 48px);
  }

  .hero-lead--pdf {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
  }

  .hero-meta {
    margin: 8px 0 10px;
    gap: 8px;
  }

  .hero-meta span {
    min-width: 110px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .primary-button--pdf {
    min-height: 48px;
    font-size: 15px;
  }

  .animal-group--pdf {
    width: min(640px, 100%);
    max-height: calc(100svh - 138px);
  }
}

/* ===== Side-by-side hero bottom alignment =====
   When the hero uses two columns, align the bottom of the CTA side and the
   illustration side without changing the illustration's width/aspect ratio. */
@media screen and (min-width: 821px) {
  .hero-inner--pdf {
    align-items: end;
  }

  .hero-copy--pdf {
    align-self: end;
  }

  .hero-visual--pdf {
    align-self: end;
    align-items: flex-end;
    height: auto;
  }

  .animal-group--pdf {
    height: auto;
    object-fit: contain;
  }
}

/* ===== Final hero baseline alignment =====
   On side-by-side layouts, keep the primary CTA and the bottom edge of the animal
   illustration on one shared baseline without changing the illustration size/aspect ratio. */
@media screen and (min-width: 821px) {
  .hero-inner--pdf {
    align-items: end;
  }

  .hero-copy--pdf,
  .hero-visual--pdf {
    align-self: end;
  }

  .hero-visual--pdf {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
    height: auto;
  }

  .animal-group--pdf {
    height: auto;
    object-fit: contain;
    transform: translate(18px, 0);
  }
}

/* When viewport height is limited, keep the entire left column through the CTA
   inside the first view while preserving the same shared bottom baseline. */
@media screen and (min-width: 821px) and (max-height: 900px) {
  .hero-inner--pdf {
    height: 100%;
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: end;
  }

  .hero-copy--pdf,
  .hero-visual--pdf {
    align-self: end;
  }

  .hero-visual--pdf {
    height: auto;
  }
}

/* ===== FINAL: first-view CTA + illustration visible baseline =====
   Side-by-side layouts only. Keep header + hero within one viewport and align
   the visible bottom of the animal artwork with the CTA baseline. */
@media screen and (min-width: 821px) {
  .hero--pdf {
    height: calc(100svh - 112px);
    min-height: 0;
    overflow: hidden;
  }

  .hero-inner--pdf {
    height: 100%;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 12px;
    align-items: end;
  }

  .hero-copy--pdf,
  .hero-visual--pdf {
    align-self: end;
  }

  .hero-visual--pdf {
    min-height: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
  }

  .animal-group--pdf {
    height: auto;
    object-fit: contain;
    /* animal_group.png has transparent pixels under the drawing.
       Move the image box down by that transparent ratio so the visible artwork,
       not the PNG canvas, meets the same baseline as the CTA. */
    transform: translate(18px, 7.2%);
  }
}

/* Compress only when the viewport is short, so the CTA remains inside the first view. */
@media screen and (min-width: 821px) and (max-height: 900px) {
  .hero-inner--pdf {
    padding-top: 6px;
    padding-bottom: 8px;
  }

  .hero-product-mark { margin-bottom: 10px; }
  .hero-kicker { margin-bottom: 3px; }
  .hero-copy--pdf h1 {
    font-size: clamp(34px, 3.35vw, 52px);
    line-height: 1.04;
  }
  .hero-lead--pdf {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
  }
  .hero-meta { margin: 8px 0 10px; }
  .primary-button--pdf { min-height: 50px; }

  .animal-group--pdf {
    max-height: calc(100svh - 150px);
    width: auto;
    max-width: 110%;
  }
}

/* ===== FINAL FIX: desktop first view must include the CTA =====
   The desktop header is 136px tall, so subtract the actual header height
   (not 112px) from the viewport. This prevents the bottom CTA from being clipped. */
@media screen and (min-width: 1181px) {
  .hero--pdf {
    height: calc(100svh - 136px);
    min-height: 0;
    overflow: hidden;
    padding-top: 200px;
  }

  .hero-inner--pdf {
    box-sizing: border-box;
    height: 85%;
    min-height: 0;
    padding-bottom: 14px;
  }
}

/* ===== Large desktop ONLY: move the completed hero upward to the requested guide line =====
   Keep ordinary PC/laptop layouts unchanged. This targets only very wide/high desktop viewports. */
@media screen
  and (min-width: 2000px)
  and (min-height: 1000px) {

  .hero-copy--pdf,
  .hero-visual--pdf {
    transform: translateY(-180px);
  }
}

/* Smartphone only: use the requested content width and title wrapping. */
.benefit-title-mobile-break {
  display: none;
}

.benefit-copy-mobile-break {
  display: none;
}

@media screen and (max-width: 767px) {
  .site-header--pdf {
    justify-content: space-between;
    gap: 12px;
  }

  .header-cta--pdf {
    display: inline-flex;
    width: auto;
    min-width: 0;
    padding-right: 32px;
    padding-left: 14px;
    white-space: nowrap;
  }

  .header-cta--pdf span {
    --arrow-size: 9px;
    --arrow-right: 12px;
  }

  main {
    width: 375px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .benefit-title-mobile-break {
    display: block;
  }

  .benefit-copy-mobile-break {
    display: block;
  }

  .diagnosis-benefit-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.4em;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  #features .problems-summary p {
    font-size: clamp(15px, 4.53vw, 17px);
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .diagnosis-benefits-pdf .diagnosis-benefits-heading h2 {
    font-size: 21px;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* Reduce the empty space above the hero at the two tall viewport ranges. */
@media screen
  and (min-width: 1181px)
  and (max-width: 1999px)
  and (min-height: 901px) {

  .hero-inner--pdf {
    transform: translateY(-140px);
  }
}

@media screen
  and (min-width: 821px)
  and (max-width: 1180px)
  and (min-height: 901px) {

  .hero-inner--pdf {
    transform: translateY(-280px);
  }
}

/* iPad Pro 13 (1032x1376) portrait only:
   pull the next section into the hero's unused space without moving or clipping
   the hero copy, CTA, or animal artwork. */
@media screen
  and (min-width: 1028px)
  and (max-width: 1036px)
  and (min-height: 1372px)
  and (max-height: 1380px)
  and (orientation: portrait) {

  #features.problems {
    margin-top: -710px;
  }

  .hero-inner--pdf {
    transform: translateY(-620px);
  }

  #features .problem-elephant {
    top: 329px;
    left: calc(50% - 537px);
  }

  #features .problem-giraffe {
    top: 370px;
  }

  #features .problems-summary-crocodile {
    left: 21px;
  }
}

/* Surface Pro 10 (960x1440) portrait only. */
@media screen
  and (min-width: 956px)
  and (max-width: 964px)
  and (min-height: 1436px)
  and (max-height: 1444px)
  and (orientation: portrait) {

  #features.problems {
    margin-top: -520px;
    overflow: visible;
  }

  .hero-inner--pdf {
    transform: translateY(-600px);
  }

  #features .problems-scroll-cue,
  #features .problems-scroll-cue span,
  #features .problems-scroll-cue i {
    display: block;
    visibility: visible;
    opacity: 1;
  }

  #features .problems-down-arrows,
  #features .problems-bottom-arrows {
    display: block;
    visibility: visible;
    opacity: 1;
    position: static;
    width: 16px;
    height: 68px;
    margin: 35px auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='68' viewBox='0 0 16 68'%3E%3Cpath d='M1 2l7 7 7-7M1 19l7 7 7-7M1 36l7 7 7-7M1 53l7 7 7-7' fill='none' stroke='%23e50038' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
    z-index: 4;
  }

  #features .problems-down-arrows span,
  #features .problems-bottom-arrows span {
    display: none;
  }

  #features .problem-elephant {
    top: 92px;
    left: -13px;
    width: 296px;
    height: auto;
  }

  #features .problem-giraffe {
    top: 52px;
    right: 8px;
    width: 190px;
    height: 420px;
    object-fit: cover;
  }

  #features .problems-summary-crocodile {
    position: absolute;
    top: 50%;
    left: -27px;
    width: 122px;
    height: 168px;
    object-fit: cover;
    object-position: center;
    transform: translateY(-50%) scaleX(-1);
  }

  #features .problems-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 620px);
    min-height: 100px;
    height: auto;
    margin: 0 auto;
    padding: 0 18px 0 136px;
    gap: 0;
    overflow: visible;
  }

  #features .problems-summary::after {
    content: none;
    display: none;
  }
}

/* Nest Hub Max (1280x800) landscape only:
   move the Problems section and everything after it upward as one flow block. */
@media screen
  and (min-width: 1276px)
  and (max-width: 1284px)
  and (min-height: 796px)
  and (max-height: 804px)
  and (orientation: landscape) {

  #features.problems {
    margin-top: -207px;
  }
}

/* 1920px notebook at 125% Windows scaling (about 1536 CSS px) only:
   move the two hero columns by the blue-guide distance without reflowing them. */
@media screen
  and (min-width: 1450px)
  and (max-width: 1600px)
  and (min-height: 650px)
  and (max-height: 800px) {

  .hero--pdf {
    overflow: visible;
  }

  .hero-copy--pdf,
  .hero-visual--pdf {
    position: relative;
    top: 100px;
  }
}

/* 1207x668-class responsive preview only: add top breathing room without reflow. */
@media screen
  and (min-width: 1200px)
  and (max-width: 1215px)
  and (min-height: 660px)
  and (max-height: 675px)
  and (orientation: landscape) {

  .hero-inner--pdf {
    margin-top: 56px;
  }
}

/* Hide the header in the first view and reveal it after scrolling. */
.site-header--pdf {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  background: rgba(237, 243, 247, 0.96);
  backdrop-filter: blur(12px);
}

/* Compact header at every viewport width without changing horizontal layout. */
.site-header--pdf {
  height: auto;
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}

.site-header--pdf .header-system-name,
.site-header--pdf .header-cta--pdf {
  margin-top: 0;
}

.site-header--pdf .header-cta--pdf {
  align-self: center;
}

.site-header--pdf.is-scroll-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-header--pdf {
    transition: none;
  }
}

/* ===== Large desktop ONLY: include the SCROLL cue in the first viewport =====
   Ordinary PC/laptop/tablet/mobile layouts remain unchanged. */
@media screen
  and (min-width: 2000px)
  and (min-height: 1000px) {

  .hero--pdf {
    height: calc(100svh - 136px - 90px);
  }

  #features.problems {
    position: relative;
    overflow: visible;
  }

  #features .problems-scroll-cue {
    display: block;
    visibility: visible;
    opacity: 1;
    z-index: 5;
  }
}

/* ===== LARGE DESKTOP ONLY: adjustable animal position =====
   Keeps the approved animal/CTA positions. SCROLL uses the previous absolute-positioned layout.
   Ordinary PC/laptop/tablet/mobile layouts are untouched. */
@media screen
  and (min-width: 2000px)
  and (min-height: 1000px) {

  /* Change only these two values when you want to move the animal artwork. */
  .hero--pdf {
    --desktop-animal-x: 18px;   /* + = right / - = left */
    --desktop-animal-y: -140px; /* + = down  / - = up   */
  }

  /* Keep the left copy/CTA at the already-approved desktop height. */
  .hero-copy--pdf {
    transform: translateY(-140px);
  }

  /* Move only the artwork; keep its current size and ratio. */
  .hero-visual--pdf {
    transform: none;
  }

  .animal-group--pdf {
    transform:
      translate(var(--desktop-animal-x), var(--desktop-animal-y))
      translateY(7.2%);
  }
}


/* ===== LARGE DESKTOP ONLY: requested SCROLL cue position =====
   Applies only to the approved large-desktop layout; ordinary PC/laptop/tablet/mobile remain untouched. */
@media screen
  and (min-width: 2000px)
  and (min-height: 1000px) {

  #features .problems-scroll-cue {
    top: -136px;
    left: calc(50% + 18px);
    width: 30px;
    height: 158px;
    transform: none;
  }
}

/* ===== Notebook CTA click reliability fix =====
   The hero artwork is decorative. At notebook-class widths it can extend over
   the left grid track and intercept pointer input even though the CTA remains
   visually visible. Keep the approved layout exactly as-is and make only the
   decorative visual click-through, while keeping the CTA above it. */
@media screen and (min-width: 821px) and (max-width: 1600px) {
  .hero-copy--pdf {
    position: relative;
    z-index: 2;
  }

  .hero-visual--pdf,
  .hero-visual--pdf::before,
  .animal-group--pdf {
    pointer-events: none;
  }

  .primary-button--pdf,
  .header-cta--pdf {
    position: relative;
    z-index: 3;
    pointer-events: auto;
  }
}

/* ===== Server/local CTA parity =====
   Decorative hero artwork must never intercept clicks at any desktop width.
   This changes only pointer hit-testing; visual layout is unchanged. */
.hero-visual--pdf,
.hero-visual--pdf::before,
.animal-group--pdf {
  pointer-events: none;
}

.hero-copy--pdf,
.primary-button--pdf,
.header-cta--pdf,
.diagnosis-benefits-cta {
  position: relative;
}

.primary-button--pdf,
.header-cta--pdf,
.diagnosis-benefits-cta {
  z-index: 10;
  pointer-events: auto;
}

/* iOS mobile: prevent auto-zoom on input focus (requires font-size >= 16px) */
@supports (-webkit-touch-callout: none) {
  body input,
  body select,
  body textarea {
    font-size: 16px !important;
  }
}