:root {
  --navy: #001c3c;
  --yellow: #ffd20b;
  --cream: #fffef5;
  --green: #0aa79e;
  --mint: #ecfcf9;
}

/* Scroll reveal */
.reveal-on-scroll {
  opacity: 0;
  translate: 0 2.2vw;
  transition: opacity .55s ease var(--reveal-delay, 0ms), translate .55s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms);
}
.reveal-on-scroll.is-revealed {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  font-weight: 700;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  gap: 1.6vw;
  height: 8.5vw;
  min-height: 65px;
  padding: 0 2.4vw;
  background: #fff;
  border-bottom: 0.15vw solid #eef0e8;
}
.brand {
  color: var(--navy);
  font-size: 4.15vw;
  font-weight: 1000;
  line-height: 0.78;
  letter-spacing: -0.25vw;
  text-decoration: none;
  transform: translateY(-0.5vw);
  white-space: nowrap;
}
.brand small {
  display: block;
  margin-top: 0.55vw;
  font-size: 1.05vw;
  letter-spacing: 0.12vw;
  text-align: center;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 1.45vw;
  margin-left: 5.6vw;
  white-space: nowrap;
}
.site-header nav a {
  color: var(--navy);
  font-size: 1.32vw;
  text-decoration: none;
}
.menu-toggle {
  display: none;
}
.header-actions {
  display: flex;
  gap: 0.8vw;
  margin-left: auto;
}
.mini-cta,
.line-cta {
  display: grid;
  min-height: 4.35vw;
  border-radius: 0.9vw;
  place-items: center;
  font-size: 1.08vw;
  text-decoration: none;
  white-space: nowrap;
}
.mini-cta {
  width: 13.2vw;
  background: var(--yellow);
  box-shadow: 0 0.25vw 0 #e8b900;
  color: var(--navy);
}
.line-cta {
  width: 13.5vw;
  border: 0.2vw solid #00c300;
  background: #00c300;
  color: #fff;
  display: flex;
  justify-content: center;
  padding-right: 2em;
}
.line-cta img {
  object-fit: contain;
}

/* First view */
.hero {
  display: grid;
  grid-template-columns: 61% 39%;
  gap: 0.8vw;
  max-width: 112vw;
  margin: auto;
  padding: 0.25vw 1vw 0.45vw;
  align-items: start;
}
.hero-copy.hero-eyecatch {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 1.6vw;
  background: transparent;
}
.hero-copy.hero-eyecatch > .sr-only {
  display: none;
}
.hero-copy.hero-eyecatch > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.quick-card {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  column-gap: 1vw;
  align-content: start;
  height: 39vw;
  padding: 2.55vw 2vw 2.2vw;
  border: 0.35vw solid var(--navy);
  border-radius: 1.7vw;
  background: #fffefb;
}
.quick-card h2,
.quick-card .estimate-result,
.quick-card .form-error,
.quick-card .quick-submit {
  grid-column: 1 / -1;
}
.quick-card h2 {
  margin: 0 0 2vw;
  font-size: 2.65vw;
  text-align: center;
}
.quick-card label {
  display: block;
  align-self: center;
  margin: 0.45vw 0;
  font-size: 1.45vw;
}
.input-row {
  display: flex;
  align-items: center;
  gap: 0.7vw;
  margin: 0.45vw 0;
}
.quick-card select {
  margin: 0.45vw 0;
}
.quick-card input,
.quick-card select {
  width: 100%;
  height: 3.7vw;
  padding: 0 1vw;
  border: 0.15vw solid #d8ddd6;
  border-radius: 0.8vw;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 1.35vw;
}
.estimate-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6vw;
  padding: 0.8vw 0;
  border-bottom: 0.2vw solid var(--green);
  font-size: 1.45vw;
}
.estimate-result b {
  color: #0c8786;
  font-size: 3.1vw;
}
.estimate-result small {
  color: var(--navy);
  font-size: 1.4vw;
}
.form-error {
  min-height: 1vw;
  margin: 0;
  color: #b92b1c;
  font-size: 1vw;
}
button {
  border: 0;
  cursor: pointer;
}
.quick-card .quick-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.15vw;
  width: 100%;
  margin-top: 0.55vw;
  border-radius: 1.2vw;
  background: var(--yellow);
  box-shadow: 0 0.35vw 0 #eba800;
  color: var(--navy);
  font-size: 0;
}
.quick-card .quick-submit::before {
  content: "お申し込みはこちら";
  font-size: 1.8vw;
  font-weight: 1000;
}
.quick-card .quick-submit img {
  width: 2.3vw;
  height: 2.3vw;
  object-fit: contain;
}
.quick-use {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .45vw;
  align-items: center;
  margin-top: .55vw;
  font-size: 1.2vw;
}
.quick-use button {
  min-height: 2.5vw;
  padding: .3vw .5vw;
  border: .15vw solid #d8e4e2;
  border-radius: .55vw;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
}
.quick-use button.is-selected {
  border-color: var(--green);
  background: var(--mint);
  color: #087f7a;
}

/* Common section shell */
.trust-row,
.notice-section,
.simulation-section,
.services-section,
.flow-section,
.security-section,
.reviews-section,
.faq-section,
.final-cta,
.benefits {
  width: 85vw;
  margin: 0.85vw auto;
}
.section-number {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6.8vw;
  font-weight: 1000;
  line-height: 1;
}
.trust-row,
.notice-section,
.simulation-section,
.services-section,
.flow-section,
.security-section,
.reviews-section,
.faq-section,
.final-cta {
  display: grid;
  grid-template-columns: 13vw 1fr;
  gap: 0.8vw;
  padding: 1vw;
  border: 0.3vw solid var(--navy);
  border-radius: 1.5vw;
}

/* 01 */
.trust-row {
  min-height: 11.2vw;
  margin-top: -1.5vw;
  padding: 0.55vw;
  align-items: center;
  background: #fff;
  transform: rotate(-2deg);
}
.trust-row ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vw;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-1.1vw);
}
.trust-row .section-number {
  transform: translateY(-1.1vw);
}
.trust-row li {
  display: grid;
  grid-template-columns: 4.8vw 1fr;
  gap: 0.65vw;
  min-height: 7.5vw;
  padding: 0.6vw;
  border: 0.2vw solid var(--navy);
  border-radius: 1vw;
  align-items: center;
  text-align: left;
}
.trust-row li img {
  width: 4.8vw;
  height: 4.8vw;
  object-fit: contain;
}
.trust-row li b {
  display: block;
  font-size: 1.5vw;
}
.trust-row li small {
  display: block;
  font-size: 1.05vw;
}

/* 02 */
.notice-section {
  min-height: 15.5vw;
  padding: 0;
  border: 0;
  background: transparent;
  align-items: center;
  transform: rotate(-2deg);
}
.notice-section > .section-number {
  display: flex;
  align-items: center;
  height: 10vw;
  padding-left: 1.2vw;
  border-radius: 1.35vw;
  background: #ffecdf;
  font-size: 6.5vw;
}
.notice-banner {
  position: relative;
  min-height: 15.2vw;
  padding: 1.35vw 14vw 1.15vw 21.2vw;
  border-radius: 1.45vw;
  background: linear-gradient(110deg, #ff8a43, #f34e29);
  color: #fff;
  isolation: isolate;
}
.notice-banner > img {
  position: absolute;
  z-index: 1;
  bottom: -6.25vw;
  left: 0.15vw;
  width: 18.5vw;
  height: auto;
}
.notice-banner > div,
.notice-banner > a {
  position: relative;
  z-index: 2;
  margin-top: 2em;
}
.notice-banner h2 {
  margin: 0 0 0.6vw;
  font-size: 2.15vw;
  white-space: nowrap;
}
.notice-banner p {
  margin: 0.45vw 0;
  font-size: 1.17vw;
  line-height: 1.25;
  white-space: nowrap;
}
.notice-banner ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.notice-banner li {
  margin: 0.45vw 0;
  font-size: 1.17vw;
  line-height: 1.25;
}
.notice-banner::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1.15vw;
  right: 2.1vw;
  width: 14vw;
  height: 12vw;
  background: url("img/notice-megaphone.png") center / contain
    no-repeat;
  pointer-events: none;
}

/* 03 */
.simulation-section {
  position: relative;
  display: block;
  min-height: 20vw;
  padding: 1vw;
  gap: 0.8vw;
  border: 0;
  border-radius: 1.35vw;
  background: transparent;
  align-items: stretch;
  transform: rotate(-0.6deg);
}
.simulation-section > .section-number {
  position: absolute;
  z-index: 1;
  top: -5%;
  align-self: start;
  width: 12.7vw;
  height: 10.8vw;
  padding-left: 1vw;
  border: 0.22vw solid var(--green);
  border-radius: 1.3vw;
  background: #fff;
  color: #087f7a;
  font-size: 6.4vw;
  display: flex;
  align-items: center;
}
.simulation-content {
  position: relative;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 0.8vw;
  min-height: 20vw;
  padding: 1vw 1vw 1vw 14vw;
  border: 0.25vw solid var(--green);
  border-top-color: transparent;
  border-right: 0;
  border-bottom: 0;
  border-radius: 1.35vw;
  background: var(--mint);
}
.simulation-content::before {
  content: "";
  position: absolute;
  top: -0.25vw;
  left: 1.25vw;
  width: 72%;
  height: 0.25vw;
  background: linear-gradient(
    90deg,
    #0aa79e 0%,
    #0aa79e 55%,
    rgba(10, 167, 158, 0.38) 78%,
    rgba(10, 167, 158, 0) 100%
  );
  pointer-events: none;
}
.simulation-copy {
  position: relative;
  min-height: 18vw;
  padding: 0 1vw 14vw 0.2vw;
}
.simulation-copy h2 {
  margin: 0 0 0.65vw;
  font-size: 2.1vw;
  white-space: nowrap;
}
.simulation-copy p {
  max-width: 17vw;
  margin: 0;
  font-size: 1.12vw;
  line-height: 1.45;
}
.simulation-copy img {
  position: absolute;
  bottom: -1.6vw;
  left: -8vw;
  width: 15.5vw;
  height: 15.5vw;
  object-fit: contain;
  content: url("img/user-mascot-blue.png");
}
.simulation-panel {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: 1fr 1fr;
  column-gap: 1vw;
  align-self: center;
  min-height: 18vw;
  margin-top: 5em;
  padding: 1vw;
  border: 0.24vw solid var(--green);
  border-radius: 1.35vw;
  background: #fff;
  overflow: hidden;
}
.simulation-inputs {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 0.55vw;
  padding-right: 1.1vw;
  border-right: 0.15vw solid var(--green);
}
.simulation-inputs label,
.sim-use {
  display: grid;
  grid-template-columns: 6.5vw 1fr auto;
  gap: 0.45vw;
  align-items: center;
  font-size: 1vw;
  white-space: nowrap;
}
.simulation-inputs input,
.simulation-inputs select {
  min-width: 0;
  height: 2.4vw;
  padding: 0 0.55vw;
  border: 0.12vw solid #d8e4e2;
  border-radius: 0.5vw;
  background: #fff;
  color: var(--navy);
  font: inherit;
}
.sim-use {
  grid-template-columns: 6.5vw 1fr 1fr;
}
.sim-use button {
  width: auto;
  min-height: 2.1vw;
  margin: 0;
  padding: 0.2vw 0.35vw;
  border: 0.12vw solid var(--green);
  border-radius: 0.45vw;
  background: #fff;
  box-shadow: none;
  color: #087f7a;
  font-size: 0.75vw;
}
.sim-use button + button {
  border-color: #d8e4e2;
  color: var(--navy);
}
.sim-use button.is-selected {
  background: #e9fffa;
  border-color: var(--green);
  color: #087f7a;
}
.simulation-breakdown {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding-left: 1.1vw;
}
.simulation-breakdown h3 {
  margin: 0;
  font-size: 1.35vw;
}
.simulation-breakdown dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35vw;
  margin: 0.55vw 0;
  font-size: 0.95vw;
}
.simulation-breakdown dt,
.simulation-breakdown dd {
  margin: 0;
}
.simulation-breakdown dd {
  font-weight: 1000;
}
.simulation-total {
  margin: 0.3vw 0 0.75vw;
  padding-top: 0.45vw;
  border-top: 0.15vw solid var(--green);
  font-size: 1.18vw;
  font-weight: 1000;
}
.simulation-total strong {
  float: right;
  font-size: 1.8vw;
}
.simulation-breakdown a {
  display: block;
  padding: 0.55vw;
  border-radius: 0.6vw;
  background: var(--yellow);
  color: var(--navy);
  font-size: 1.05vw;
  text-align: center;
  text-decoration: none;
}

/* 04 */
.services-section {
  min-height: 22vw;
  padding: 0.7vw;
  border: 0;
  background: #fff;
  color: var(--navy);
}
.services-section > .section-number {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 0.4vw;
  border: 0.25vw solid var(--green);
  border-right: 0;
  border-radius: 1.35vw;
  color: #0d9f9e;
}
.services-section > .section-number span {
  display: block;
  width: 100%;
  margin-top: -80px;
  color: #303030;
  font-size: 40px;
  text-align: center;
}
.services-section > div {
  padding: 1vw;
  border-radius: 1.25vw;
  background: linear-gradient(120deg, #0b9e9d, #46c8c2);
  color: #fff;
}
.services-section h2 {
  margin: 0 0 0.55vw;
  font-size: 2.35vw;
}
.services-section ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.55vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
.services-section li {
  display: grid;
  grid-template-rows: 3.35vw 1.7vw 2.95vw;
  min-height: 9vw;
  padding: 0.5vw;
  border-radius: 0.9vw;
  background: #fff;
  color: var(--navy);
  text-align: center;
}
.services-section li img {
  display: block;
  width: 5.35vw;
  height: 3.15vw;
  margin: auto;
  object-fit: contain;
}
.services-section li b {
  font-size: 1vw;
  line-height: 1.05;
  white-space: nowrap;
}
.service-rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1vw;
  margin: 0;
  padding-top: 0.35vw;
  border-top: 0.08vw solid #d7e7e4;
  color: #49606c;
  font-size: 0.85vw;
  line-height: 1.05;
}
.service-rates span {
  display: grid;
  gap: 0.12vw;
  white-space: nowrap;
}
.service-rates span + span {
  padding-left: 0.35vw;
  border-left: 0.08vw solid #d7e7e4;
}
.service-rates strong {
  color: var(--navy);
  font-size: 1.35vw;
}

/* 05 */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75vw;
}
.benefits > .section-number,
.benefits-title {
  display: none;
}
.benefits article {
  position: relative;
  min-height: 14.4vw;
  padding: 1.55vw 11.8vw 1vw 1.25vw;
  overflow: hidden;
  border-radius: 1.5vw;
  background: #ffdc24;
  isolation: isolate;
}
.benefits article:nth-of-type(2) {
  background: #cbf4e5;
}
.benefits h3,
.benefits p,
.benefits small {
  position: relative;
  z-index: 1;
  margin: 0;
}
.benefits h3 {
  font-size: 2.1vw;
  white-space: nowrap;
}
.benefits p {
  margin: 0.7vw 0;
  font-size: 1.08vw;
  line-height: 1.28;
  white-space: nowrap;
}
.benefits .benefit-lead {
  font-size: 1.02vw;
  font-weight: 1000;
}
.benefits small {
  display: block;
  font-size: 0.62vw;
  line-height: 1.15;
}
.benefits small a {
  color: var(--navy);
  font-weight: 1000;
  text-underline-offset: 0.12em;
}
.benefits article img {
  position: absolute;
  z-index: 0;
  object-fit: contain;
}
.benefit-high img {
  right: -0.4vw;
  bottom: -0.6vw;
  width: 9.2vw;
  height: 9.2vw;
}
.benefit-web img {
  right: 0vw;
  bottom: -1.2vw;
  width: 10vw;
  height: 10vw;
}
.benefit-speed img {
  right: 0.2vw;
  bottom: -0.5vw;
  width: 10.6vw;
  height: 10.6vw;
}

/* 06–10 */
.flow-section {
  padding: 1vw;
  background: #10aaa4;
  color: #fff;
}
.flow-section > .section-number {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
.flow-section > .section-number span {
  display: block;
  width: 100%;
  margin-top: -0.15vw;
  color: #fff;
  font-size: 1.55vw;
  line-height: 1.1;
}
.flow-section h2 {
  margin: 0 0 0.6vw;
  font-size: 2vw;
}
.flow-section ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow-section li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.7vw;
  min-height: 9.3vw;
  padding: 0.8vw;
  border-radius: 1.2vw;
  background: #fff;
  color: var(--navy);
  font-size: 1vw;
}
.flow-section li b {
  font-size: 1.24vw;
  white-space: nowrap;
}
.flow-section li span {
  line-height: 1.35;
}
.flow-section li:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -1.2vw;
  width: 1.1vw;
  height: 1.1vw;
  background: url("img/cta-arrow.png") center / contain no-repeat;
  transform: translateY(-50%);
}
.security-section {
  padding: 1vw;
}
.security-section h2,
.reviews-section h2 {
  margin: 0 0 0.6vw;
  font-size: 1.5vw;
  text-align: center;
}
.faq-section h2 {
  margin: 0 0 0.6vw;
  font-size: 2.35vw;
  text-align: center;
}
.security-section ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.security-section li {
  display: grid;
  grid-template-columns: 5vw 1fr;
  column-gap: 0.55vw;
  align-items: center;
  padding: 0 0.8vw;
  border-left: 0.15vw solid #82909f;
  font-size: 0.98vw;
}
.security-section li > img {
  grid-row: 1 / span 2;
  width: 5.35vw;
  height: 5.35vw;
  object-fit: contain;
}
.security-section li b,
.security-section li span {
  grid-column: 2;
}
.security-section li b {
  align-self: end;
  font-size: 1.28vw;
  white-space: nowrap;
}
.security-section li span {
  align-self: start;
  line-height: 1.35;
}
.reviews-section {
  padding: 1vw;
}
.reviews-section > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vw;
}
.reviews-section h2 {
  grid-column: 1 / -1;
  text-align: center;
}
.reviews-section article {
  position: relative;
  min-height: 7vw;
  padding: 0.75vw 0.75vw 0.75vw 5vw;
  border: 0.1vw solid #d7dedc;
  border-radius: 1vw;
  font-size: 1vw;
}
.reviews-section article .reviewer-icon {
  position: absolute;
  top: 0.45vw;
  left: 0.55vw;
  width: 3.3vw;
  height: 3.3vw;
  object-fit: contain;
}
.reviews-section article b {
  font-size: 1.1vw;
}
.review-stars {
  margin: 0 0 0.22vw;
  color: #f8ac00;
  font-size: 1.25vw;
  letter-spacing: 0.08vw;
  line-height: 1;
}
.faq-section {
  padding: 1vw;
}
.faq-section > .section-number {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  color: var(--navy);
  text-align: center;
}
.faq-section > .section-number span {
  display: block;
  width: 100%;
  margin-top: -0.15vw;
  color: var(--navy);
  font-size: 1.55vw;
  line-height: 1.1;
}
.faq-section details {
  padding: 0.55vw 0;
  border-bottom: 0.12vw dashed #a2b4b8;
  font-size: 1.18vw;
}
.faq-section details p {
  font-size: 1vw;
}
.final-cta {
  position: relative;
  grid-template-columns: 13vw 1fr 30vw;
  align-items: center;
  padding: 1vw;
  gap: 3.8vw;
}
.final-cta h2 {
  margin: 0;
  font-size: 2.35vw;
  line-height: 1.25;
}
.final-cta > div:not(:last-of-type) p {
  font-size: 1.4vw;
}
.final-cta > div:last-of-type {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  gap: 0.7vw;
}
.final-cta .mini-cta,
.final-cta .line-cta {
  width: 100%;
  font-size: 1.35vw;
}
.cta-coins {
  position: absolute;
  bottom: 0.7vw;
  width: 10vw;
  height: auto;
}
.cta-coins.left {
  bottom: 1vw;
  left: 7vw;
}
.cta-coins.right {
  right: 1vw;
  bottom: 1vw;
  transform: scaleX(-1);
}
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5vw;
  padding: 2vw 5vw;
  background: var(--navy);
  color: #fff;
}
footer .brand {
  color: #fff;
  font-size: 3vw;
}
footer nav {
  display: flex;
  gap: 2vw;
}
footer nav a {
  color: #fff;
  font-size: 1.1vw;
  text-decoration: none;
}

@media (max-width: 700px) {
  .site-header {
    height: auto;
    padding: 2.6vw 3vw;
  }
  .brand {
    font-size: 6vw;
    transform: none;
  }
  .brand small {
    font-size: 1.8vw;
  }
  .site-header nav {
    display: none;
  }
  .header-actions {
    margin-left: auto;
  }
  .mini-cta,
  .line-cta {
    min-height: 8vw;
    width: auto;
    padding: 0 1.5vw;
    font-size: 2.8vw;
  }
  .line-cta {
    display: flex;
    align-items: center;
    gap: 0.7vw;
    padding: 0 1.5vw 0 1vw;
  }
  .line-cta img {
    width: 2.7vw;
    height: 2.7vw;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 2vw;
  }
  .hero-copy.hero-eyecatch {
    border-radius: 3vw;
  }
  .quick-card {
    grid-template-columns: 1fr;
    min-height: 74vw;
    height: auto;
    padding: 5vw 4vw;
    border-radius: 3vw;
  }
  .quick-card h2 {
    font-size: 5.5vw;
  }
  .quick-card label {
    margin: 3vw 0 1vw;
    font-size: 3.1vw;
  }
  .quick-card input,
  .quick-card select {
    height: 9vw;
    font-size: 2.8vw;
  }
  .input-row,
  .quick-card select {
    margin: 0;
  }
  .estimate-result {
    padding: 3vw 0;
    font-size: 3vw;
  }
  .estimate-result b {
    font-size: 6vw;
  }
  .estimate-result small {
    font-size: 2.6vw;
  }
  .form-error {
    min-height: 3vw;
    font-size: 2.3vw;
  }
  .quick-card .quick-submit {
    min-height: 12vw;
    margin-top: 2vw;
    border-radius: 2vw;
  }
  .quick-card .quick-submit::before {
    font-size: 3.7vw;
  }
  .quick-card .quick-submit img {
    width: 5vw;
    height: 5vw;
  }
  .quick-use {
    gap: 1.5vw;
    margin-top: 2vw;
    font-size: 3vw;
  }
  .quick-use button {
    min-height: 8vw;
    padding: 1vw;
    border-radius: 1.5vw;
  }
  .trust-row,
  .notice-section,
  .simulation-section,
  .services-section,
  .flow-section,
  .security-section,
  .reviews-section,
  .faq-section,
  .final-cta,
  .benefits {
    width: auto;
    margin: 2vw;
  }
  .trust-row {
    grid-template-columns: 20% 1fr;
    min-height: 0;
    padding: 2vw;
  }
  .trust-row .section-number {
    font-size: 12vw;
    transform: none;
  }
  .trust-row ul {
    grid-template-columns: 1fr;
    gap: 1.2vw;
    transform: none;
  }
  .trust-row li {
    grid-template-columns: 11vw 1fr;
    gap: 1.5vw;
    min-height: 12vw;
    padding: 1vw;
  }
  .trust-row li img {
    width: 11vw;
    height: 11vw;
  }
  .trust-row li b {
    font-size: 2.5vw;
  }
  .trust-row li small {
    font-size: 2vw;
  }
  .notice-section {
    grid-template-columns: 22vw 1fr;
    gap: 1.5vw;
    padding: 0;
    transform: none;
  }
  .notice-section > .section-number {
    min-height: 0;
    padding-left: 2vw;
    border-radius: 3vw;
    font-size: 12vw;
  }
  .notice-banner {
    min-height: 43vw;
    padding: 3vw 3vw 3vw 29vw;
    border-radius: 3vw;
  }
  .notice-banner > img {
    bottom: 0.5vw;
    left: 0.3vw;
    width: 27vw;
  }
  .notice-banner > div {
    margin-top: 0;
  }
  .notice-banner h2 {
    font-size: 4.55vw;
  }
  .notice-banner p {
    font-size: 2.2vw;
    line-height: 1.3;
    white-space: normal;
  }
  .notice-banner::after {
    top: 1vw;
    right: 1vw;
    width: 16vw;
    height: 16vw;
  }
  .simulation-section {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 2vw;
    border-width: 0.5vw;
    border-top-color: var(--green);
    border-radius: 3vw;
    transform: none;
  }
  .simulation-section::before {
    display: none;
  }
  .simulation-section > .section-number {
    display: none;
  }
  .simulation-copy {
    min-height: 31vw;
    padding-right: 31vw;
  }
  .simulation-copy h2 {
    font-size: 4.6vw;
  }
  .simulation-copy p {
    max-width: none;
    font-size: 2.5vw;
    line-height: 1.35;
  }
  .simulation-copy img {
    right: 0;
    bottom: 0;
    left: auto;
    width: 27vw;
    height: 27vw;
  }
  .simulation-panel {
    display: block;
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
    padding: 2vw;
    border-radius: 3vw;
  }
  .simulation-inputs {
    gap: 1vw;
    padding: 0;
    border: 0;
  }
  .simulation-inputs label,
  .sim-use {
    font-size: 2.7vw;
  }
  .simulation-breakdown {
    margin-top: 2vw;
    padding: 2vw 0 0;
    border-top: 0.2vw solid var(--green);
  }
  .simulation-breakdown h3 {
    font-size: 5vw !important;
  }
  .simulation-breakdown dl {
    font-size: 2.7vw;
  }
  .simulation-total {
    font-size: 3vw;
  }
  .simulation-breakdown a {
    padding: 2vw;
    border-radius: 1vw;
  }
  .services-section {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 2vw;
    transform: none;
  }
  .services-section > .section-number {
    display: none;
  }
  .services-section > div {
    padding: 2vw;
    border-radius: 3vw;
  }
  .services-section ul {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-section li {
    grid-template-rows: 13vw auto auto;
    min-height: 23vw;
    padding: 1vw;
  }
  .services-section li img {
    width: 18vw;
    height: 12vw;
  }
  .services-section li b {
    font-size: 3.5vw;
  }
  .service-rates {
    gap: 0.5vw;
    margin-top: 0.5vw;
    padding-top: 0.7vw;
    border-top-width: 0.2vw;
    font-size: 2.3vw;
  }
  .service-rates strong {
    font-size: 3.25vw;
  }
  .benefits {
    grid-template-columns: 1fr;
    gap: 2vw;
  }
  .benefits article {
    min-height: 38vw;
    padding: 5vw 27vw 3vw 4vw;
  }
  .benefits h3 {
    font-size: 5.25vw;
  }
  .benefits p {
    font-size: 2.55vw;
    line-height: 1.3;
    white-space: nowrap;
  }
  .benefits .benefit-lead {
    font-size: 2.8vw;
  }
  .benefits small {
    font-size: 1.65vw;
  }
  .benefit-high img {
    right: -0.5vw;
    bottom: -0.6vw;
    width: 29vw;
    height: 29vw;
  }
  .benefit-web img {
    right: 1vw;
    bottom: 0;
    width: 27vw;
    height: 27vw;
  }
  .benefit-speed img {
    right: -3vw;
    bottom: -1vw;
    width: 31vw;
    height: 31vw;
  }
  .flow-section,
  .security-section,
  .reviews-section,
  .faq-section,
  .final-cta {
    grid-template-columns: 1fr;
    padding: 2vw;
    transform: none;
  }
  .flow-section .section-number,
  .security-section .section-number,
  .reviews-section .section-number,
  .faq-section .section-number,
  .final-cta .section-number {
    display: none;
  }
  .flow-section ol,
  .reviews-section > div {
    grid-template-columns: 1fr;
  }
  .flow-section li {
    min-height: 20vw;
    font-size: 2.7vw;
  }
  .flow-section li b {
    font-size: 3.5vw;
  }
  .flow-section li:not(:last-child)::after {
    position: static;
    display: block;
    width: 7vw;
    height: 7vw;
    margin: 1vw auto -5vw;
    transform: rotate(90deg);
  }
  .security-section ul {
    grid-template-columns: 1fr 1fr;
  }
  .security-section li {
    grid-template-columns: 11vw 1fr;
    column-gap: 1.3vw;
    margin: 0.8vw 0;
    font-size: 2.5vw;
  }
  .security-section li > img {
    width: 9vw;
    height: 9vw;
  }
  .security-section li b {
    font-size: 3.5vw;
  }
  .reviews-section article {
    min-height: 25vw;
    padding: 2vw 2vw 2vw 16vw;
    font-size: 2.8vw;
  }
  .reviews-section article b {
    font-size: 3.3vw;
  }
  .reviews-section article .reviewer-icon {
    top: 2vw;
    left: 2vw;
    width: 13vw;
    height: 13vw;
  }
  .review-stars {
    margin-bottom: 1vw;
    font-size: 4vw;
    letter-spacing: 0.2vw;
  }
  .faq-section details {
    font-size: 3.1vw;
  }
  .faq-section p {
    font-size: 2.8vw;
  }
  .final-cta {
    text-align: center;
  }
  .final-cta > div:last-of-type {
    grid-column: auto;
    grid-row: auto;
  }
  .final-cta h2 {
    font-size: 6vw;
  }
  .final-cta p {
    font-size: 3vw;
  }
  .final-cta .mini-cta,
  .final-cta .line-cta {
    width: 100%;
    min-height: 12vw;
    font-size: 3.8vw;
  }
  .final-cta .line-cta {
    padding: 0 2vw;
  }
  .final-cta .line-cta img {
    width: 4vw;
    height: 4vw;
  }
  .cta-coins {
    bottom: 1vw;
    width: 21vw;
  }
  .cta-coins.left {
    left: 1vw;
  }
  .cta-coins.right {
    right: 1vw;
  }
  footer {
    display: block;
    padding: 5vw;
    text-align: center;
  }
  footer .brand {
    font-size: 7vw;
  }
  footer nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 3vw;
    margin-top: 4vw;
  }
  footer nav a {
    font-size: 2.4vw;
  }
}

@media (max-width: 700px) {
  .simulation-section {
    border: 0;
  }
  .simulation-content {
    display: block;
    min-height: 0;
    padding: 2vw;
    border: 0.5vw solid var(--green);
    border-radius: 3vw;
  }
  .simulation-content::before {
    display: none;
  }
}

/* Smartphone layout: prioritize readable controls and one-column content. */
@media (max-width: 700px) {
  .site-header {
    min-height: 0;
    padding: 3vw;
    flex-wrap: wrap;
    gap: 2.5vw;
  }
  .brand {
    font-size: 9vw;
  }
  .brand small {
    margin-top: 0.8vw;
    font-size: 2.5vw;
  }
  .header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 2vw;
    margin: 0;
  }
  .header-actions .mini-cta,
  .header-actions .line-cta {
    width: 100%;
    min-height: 11vw;
    padding: 0 1.5vw;
    font-size: 3.1vw;
  }
  .header-actions .line-cta {
    gap: 1vw;
  }
  .header-actions .line-cta img {
    width: 4vw;
    height: 4vw;
  }
  .hero {
    gap: 3vw;
    padding: 3vw 2vw;
  }
  .quick-card {
    min-height: 0;
    padding: 5vw 4vw;
  }
  .quick-card h2 {
    font-size: 6vw;
  }
  .quick-card label,
  .quick-card input,
  .quick-card select,
  .estimate-result,
  .simulation-inputs label,
  .sim-use,
  .simulation-breakdown dl {
    font-size: 3.5vw;
  }
  .trust-row li b,
  .notice-banner p,
  .simulation-copy p,
  .benefits p,
  .flow-section li,
  .security-section li,
  .reviews-section article,
  .faq-section details,
  .faq-section details p,
  footer nav a {
    font-size: 3.2vw;
  }
  .trust-row li small,
  .benefits small {
    font-size: 2.4vw;
  }
  .notice-banner h2,
  .simulation-copy h2,
  .services-section h2,
  .security-section h2,
  .reviews-section h2 {
    font-size: 5vw;
  }
  .simulation-breakdown h3,
  .services-section li b,
  .flow-section li b,
  .security-section li b,
  .reviews-section article b {
    font-size: 4vw;
  }
  .flow-section > .section-number,
  .faq-section > .section-number {
    display: flex;
    min-height: 16vw;
    font-size: 9vw;
  }
  .flow-section > .section-number span,
  .faq-section > .section-number span {
    font-size: 3.8vw;
  }
  .services-section li {
    min-height: 26vw;
  }
  .service-rates {
    font-size: 2.8vw;
  }
  .service-rates strong {
    font-size: 3.8vw;
  }
  .benefits p {
    white-space: normal;
  }
  .services-section li b .service-name-line {
    display: block;
  }
  .benefits h3 {
    font-size: 7.25vw;
  }
  .benefits p {
    font-size: 4vw;
  }
  .benefits .benefit-lead {
    font-size: 3.8vw;
  }
  .trust-row li small,
  .benefits small {
    font-size: 3.4vw;
  }
  .security-section ul {
    grid-template-columns: 1fr;
  }
  .security-section li {
    grid-template-columns: 13vw 1fr;
    padding: 2vw 0;
  }
  .security-section li > img {
    width: 11vw;
    height: 11vw;
  }
  .reviews-section article {
    min-height: 31vw;
    padding-left: 18vw;
  }
  .reviews-section article .reviewer-icon {
    width: 14vw;
    height: 14vw;
  }
  .faq-section details {
    padding: 2.5vw 0;
  }
  .final-cta {
    gap: 3vw;
    padding: 4vw 3vw;
  }
  .final-cta h2 {
    font-size: 6.5vw;
  }
  .final-cta p {
    font-size: 3.8vw;
  }
  .final-cta .mini-cta,
  .final-cta .line-cta {
    min-height: 13vw;
    font-size: 4vw;
  }
  footer {
    padding: 6vw 4vw;
  }
  footer .brand {
    font-size: 8vw;
  }

  .site-header {
    position: relative;
    min-height: 16vw;
    padding: 2.5vw 3vw;
    flex-wrap: nowrap;
  }
  .brand {
    font-size: 8vw;
  }
  .menu-toggle {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 12vw;
    height: 12vw;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .menu-toggle img {
    width: 10vw;
    height: 10vw;
    object-fit: contain;
  }
  .site-header .header-actions {
    display: none;
  }
  .site-header nav {
    position: absolute;
    z-index: 30;
    top: calc(100% - 1vw);
    right: 2vw;
    left: 2vw;
    display: none;
    gap: 0;
    margin: 0;
    padding: 2vw 3vw;
    border: 0.45vw solid var(--navy);
    border-radius: 3vw;
    background: #fffef5;
    box-shadow: 0 1.2vw 0 rgba(0, 28, 60, 0.16);
  }
  .site-header.is-menu-open nav {
    display: grid;
  }
  .site-header nav a {
    padding: 2.6vw 1vw;
    border-bottom: 0.2vw solid #d7e7e4;
    font-size: 4vw;
    text-align: center;
  }
  .site-header nav a:last-child {
    border-bottom: 0;
  }
}

/* Mobile consistency pass: section hierarchy, readable cards, and compact forms. */
@media (max-width: 700px) {
  .trust-row {
    position: relative;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 2vw;
  }
  .trust-row .section-number {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1vw 2vw;
    background: #fff;
    font-size: 12vw;
    transform: rotate(5deg);
  }
  .trust-row ul {
    grid-template-columns: 1fr;
    gap: 3.2vw;
    padding-right: 13vw;
    transform: none;
  }
  .trust-row li b {
    font-size: 7vw !important;
    line-height: 1.1;
  }
  .trust-row li small {
    font-size: 4vw !important;
    line-height: 1.35;
  }

  .trust-row,
  .notice-section,
  .simulation-section,
  .services-section,
  .benefits,
  .flow-section,
  .security-section,
  .reviews-section,
  .faq-section,
  .final-cta {
    margin: 3vw 2vw;
  }

  .simulation-section {
    display: block;
    padding: 0;
    border: 0;
  }
  .simulation-content {
    padding: 3vw;
  }
  .simulation-copy {
    min-height: 30vw;
    padding-right: 29vw;
  }
  .simulation-copy p {
    margin-top: 11px;
    font-size: clamp(12px, 4.2vw, 15px);
  }
  .simulation-panel {
    margin-top: 0;
    padding: 3vw;
  }
  .simulation-inputs {
    gap: 2.4vw;
    padding: 0 0 3vw;
    border-right: 0;
  }
  .simulation-inputs label,
  .sim-use {
    grid-template-columns: 27vw minmax(0, 1fr) auto;
    gap: 2vw;
    min-height: 9vw;
    font-size: clamp(13px, 4.5vw, 16px);
    line-height: 1.2;
  }
  .simulation-inputs input,
  .simulation-inputs select {
    height: 9vw;
    padding: 0 2vw;
    font-size: inherit;
  }
  .sim-use {
    grid-template-columns: 27vw minmax(0, 1fr) minmax(0, 1fr);
  }
  .sim-use button {
    min-height: 8vw;
    padding: 1vw;
    font-size: clamp(13px, 4vw, 16px);
    font-weight: 700;
    border-color: #d8e4e2;
    color: var(--navy);
  }
  .simulation-breakdown {
    margin-top: 0;
    padding: 3vw 0 0;
  }
  .simulation-breakdown dl {
    gap: 1.5vw;
    margin: 2vw 0;
    font-size: clamp(13px, 4.5vw, 16px);
  }
  .simulation-total {
    margin: 1vw 0 3vw;
    padding-top: 2vw;
    font-size: clamp(15px, 5vw, 19px);
  }
  .simulation-total strong {
    font-size: clamp(21px, 5.8vw, 27px);
  }
  .simulation-breakdown a {
    padding: 2.5vw;
    font-size: clamp(14px, 4.7vw, 17px);
  }

  .simulation-section > .section-number,
  .services-section > .section-number,
  .security-section > .section-number,
  .reviews-section > .section-number,
  .final-cta > .section-number {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 15vw;
    height: auto;
    margin: 0 0 2vw;
    padding: 1.5vw;
    border: 0.45vw solid var(--navy);
    border-radius: 3vw;
    background: #fff;
    color: var(--navy);
    font-size: 9vw;
    line-height: 1;
  }
  .simulation-section > .section-number {
    position: absolute;
    top: 0;
    right: 0;
    width: 16vw;
    height: 16vw;
    min-height: 0;
    border-color: var(--green);
    color: #087f7a;
    transform: rotate(5deg);
  }
  .services-section > .section-number,
  .flow-section > .section-number,
  .faq-section > .section-number {
    flex-wrap: wrap;
    align-content: center;
  }
  .services-section > .section-number span,
  .flow-section > .section-number span,
  .faq-section > .section-number span {
    width: 100%;
    margin-top: 0.5vw;
    color: var(--navy);
    font-size: 5.8vw;
    line-height: 1.15;
  }
  .flow-section > .section-number,
  .faq-section > .section-number {
    min-height: 18vw;
    margin-bottom: 3vw;
  }

  .notice-section {
    grid-template-columns: 1fr;
    position: relative;
  }
  .simulation-copy h2 {
    font-size: 7vw !important;
  }
  .notice-section > .section-number {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    height: auto;
    min-height: 0;
    padding: 5px;
    border-radius: 3vw;
    font-size: 12vw;
    transform: rotate(-5deg);
  }
  .notice-banner {
    min-height: 54vw;
    padding: 4vw 14vw 4vw 23vw;
  }
  .notice-banner > img {
    width: 21vw;
    left: 1vw;
  }
  .notice-banner::after {
    width: 13vw;
    height: 13vw;
    right: 1vw;
  }
  .notice-banner h2 {
    font-size: 8vw;
  }
  .notice-banner li {
    margin: 0 0 1em;
    font-size: 15px;
    line-height: 1.35;
  }

  .services-section > div {
    padding: 2vw;
  }
  .services-section ul {
    grid-template-columns: 1fr;
  }
  .services-section li {
    grid-template-columns: 40% 1fr;
    grid-template-rows: 1fr 1fr;
    min-height: 29vw;
    padding: 2vw;
  }
  .services-section li img {
    grid-column: 1;
    grid-row: 1;
    width: 23vw;
    height: 11vw;
  }
  .services-section li b {
    grid-column: 1;
    grid-row: 2;
    min-height: 8vw;
    font-size: clamp(13px, 3.7vw, 17px);
    line-height: 1.1;
    white-space: normal;
  }
  .service-rates {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    margin: 0;
    padding: 0 0 0 2vw;
    border-top: 0;
    font-size: clamp(16px, 4.5vw, 20px);
  }
  .service-rates span {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2vw;
    white-space: nowrap;
  }
  .service-rates span + span {
    padding: 1.5vw 0 0;
    border-top: 0.2vw solid #8f8f8f;
    border-left: 0;
  }
  .service-rates strong {
    font-size: clamp(21px, 6.5vw, 30px);
  }

  .flow-section li {
    min-height: 19vw;
    padding: 3vw;
    font-size: clamp(12px, 4.2vw, 15px);
  }
  .flow-section li b {
    font-size: clamp(15px, 6vw, 19px);
  }
  .flow-section li:not(:last-child)::after {
    margin: 1vw auto -3vw;
  }

  .security-section h2,
  .reviews-section h2 {
    margin-bottom: 3vw;
    font-size: clamp(20px, 5.2vw, 25px);
  }
  .security-section li {
    grid-template-columns: 13vw 1fr;
    gap: 1vw 5vw;
    padding: 2.5vw 0;
    font-size: clamp(12px, 4.2vw, 17px);
  }
  .security-section li b {
    font-size: clamp(15px, 7vw, 27px);
  }
  .security-section li > img {
    width: 16vw;
    height: 16vw;
  }

  .reviews-section article {
    min-height: 33vw;
    padding: 3vw 2vw 3vw 18vw;
    font-size: clamp(12px, 3.2vw, 15px);
  }
  .reviews-section article b {
    font-size: clamp(15px, 4vw, 19px);
  }
  .reviews-section article .reviewer-icon {
    top: 3vw;
    left: 2vw;
    width: 13vw;
    height: 13vw;
  }

  .faq-section details {
    padding: 3vw 0;
    font-size: clamp(13px, 3.5vw, 16px);
  }
  .faq-section details p {
    font-size: clamp(12px, 3.2vw, 15px);
  }

  .final-cta {
    gap: 3vw;
  }
  .final-cta h2 {
    font-size: clamp(23px, 6.2vw, 29px);
  }
  .final-cta p {
    font-size: clamp(14px, 3.8vw, 17px);
  }
  .final-cta .mini-cta,
  .final-cta .line-cta {
    min-height: 14vw;
    font-size: clamp(15px, 4.1vw, 19px);
  }

  footer .brand {
    font-size: 9vw;
  }
  footer nav a {
    font-size: clamp(12px, 3.3vw, 15px);
  }
}

/* Keep the hero estimate typography equal to the detailed simulator on phones. */
@media (max-width: 700px) {
  .quick-card label,
  .quick-card input,
  .quick-card select,
  .quick-use {
    font-size: clamp(13px, 4.5vw, 16px);
  }
  .quick-use button {
    min-height: 8vw;
    padding: 1vw;
    font-size: clamp(13px, 4vw, 16px);
  }
  .quick-card .estimate-result {
    font-size: clamp(15px, 5vw, 19px);
  }
  .quick-card .estimate-result b {
    font-size: clamp(21px, 5.8vw, 27px);
  }
  .quick-card .estimate-result small {
    font-size: clamp(13px, 4.5vw, 16px);
  }
}