:root{--blue:#004c9a;--blue-2:#0868c8;--blue-dark:#002e69;--red:#e51322;--yellow:#ffe06a;--ink:#09295a;--muted:#526b8f;--line:#b9d1ec;--line-2:#dfeaf6;--paper:#f3f9ff;--white:#ffffff;--shadow:0 16px 34px rgba(0,76,154,0.15)}*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans JP",system-ui,sans-serif;line-height:1.75;overflow-x:hidden}body.nav-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 15px;background:rgba(255,255,255,0.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);max-width:calc(100vw - 72px);font-size:clamp(0.84rem,4.2vw,1.2rem);font-weight:900;line-height:1.15;white-space:nowrap}.brand span span{color:var(--red)}.brand-icon{display:grid;flex:0 0 auto;place-items:center;width:38px;height:38px;color:var(--blue)}.brand-icon svg{width:36px;height:36px}.menu-button{display:grid;gap:5px;place-content:center;flex:0 0 auto;width:42px;height:42px;padding:0;border:0;background:transparent}.menu-button span{display:block;width:28px;height:3px;border-radius:999px;background:var(--blue-dark)}.global-nav{position:fixed;inset:58px 12px auto;display:none;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--white);box-shadow:var(--shadow)}.global-nav.is-open{display:grid;gap:6px}.global-nav a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-radius:6px;font-weight:900}.global-nav a:hover{color:var(--white);background:var(--blue)}.hero{position:relative;min-height:506px;padding:25px 14px 22px;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,0.96),rgba(255,255,255,0.78)),radial-gradient(circle at 92% 10%,rgba(8,104,200,0.12),transparent 34%),var(--white)}.hero-copy{position:relative;z-index:2;width:58%;min-height:360px}.hero h1{margin:0 0 8px;color:var(--ink);width:7.2em;font-size:clamp(2rem,9.7vw,5.2rem);font-weight:900;line-height:1.07;letter-spacing:0}.hero h1 span{color:var(--red);font-size:1.38em}.price-note{width:18em;margin:0 0 18px;color:#333;font-size:clamp(0.7rem,2.9vw,0.95rem);font-weight:800;line-height:1.55}.hero-lead{width:min(18.5em,92vw);margin:0 0 24px;color:#172f52;font-size:clamp(0.83rem,3.45vw,1.05rem);font-weight:800;line-height:1.9}.hero-actions{position:relative;z-index:3;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:6px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 10px;border:2px solid transparent;border-radius:8px;font-size:clamp(0.86rem,4vw,1.08rem);font-weight:900;cursor:pointer}.button-primary{color:var(--white);background:linear-gradient(180deg,var(--blue-2),var(--blue));box-shadow:0 12px 26px rgba(0,76,154,0.24)}.button-outline{color:var(--blue);background:var(--white);border-color:var(--blue)}.button-red{width:min(100%,720px);color:var(--white);background:linear-gradient(180deg,#ff2737,var(--red));box-shadow:0 14px 26px rgba(229,19,34,0.25)}.button-yellow{min-height:46px;color:var(--ink);background:var(--yellow);border-color:#e7c63f}.button-icon{font-size:1.05rem}.device-stage{position:absolute;top:34px;right:10px;z-index:1;width:45%;height:348px;min-height:0;padding-top:0}.desktop-preview{overflow:hidden;width:164px;margin-left:auto;border:7px solid #111;border-bottom-width:18px;border-radius:12px 12px 16px 16px;background:var(--white);box-shadow:var(--shadow)}.desktop-preview::after{content:"";display:block;width:58px;height:10px;margin:9px auto -18px;border-radius:50% 50% 0 0;background:#dadde2}.preview-topbar{display:flex;align-items:center;gap:5px;min-height:23px;padding:0 5px;border-bottom:1px solid var(--line-2);font-size:0.34rem;font-weight:900}.preview-topbar span span{color:var(--red)}.preview-topbar small{width:15px;height:2px;margin-left:auto;background:var(--blue);box-shadow:0 6px 0 var(--blue),0 12px 0 var(--blue)}.mini-logo{display:inline-block;width:13px;height:12px;border:2px solid var(--blue);border-top:0;position:relative}.mini-logo::before{content:"";position:absolute;left:1px;top:-6px;width:8px;height:8px;border-left:2px solid var(--blue);border-top:2px solid var(--blue);transform:rotate(45deg);background:var(--white)}.preview-content{padding:10px}.preview-content p,.preview-content strong,.mobile-screen p{margin:0;color:var(--ink);font-size:0.68rem;font-weight:900;line-height:1.3}.preview-content strong{display:block}.preview-content strong span,.mobile-screen strong{color:var(--red);font-size:1.5em}.preview-content small{display:block;margin-top:4px;color:#333;font-size:0.34rem;font-weight:800}.preview-copy-lines{display:grid;gap:5px;width:68%;margin:8px 0}.preview-copy-lines i{height:4px;border-radius:999px;background:var(--line-2)}.preview-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.preview-buttons b{display:grid;place-items:center;min-height:22px;border-radius:5px;color:var(--white);background:var(--blue);font-size:0.45rem}.preview-buttons b:last-child{color:var(--blue);background:var(--white);border:1px solid var(--blue)}.preview-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:12px}.preview-menu em{display:grid;place-items:center;min-height:32px;border:1px solid var(--line-2);border-radius:6px;color:var(--blue);font-size:0.3rem;font-style:normal;font-weight:800;text-align:center}.mobile-preview{position:absolute;left:-18px;bottom:36px;width:78px;padding:5px;border:6px solid #111;border-radius:18px;background:var(--white);box-shadow:var(--shadow)}.mobile-notch{width:30px;height:4px;margin:0 auto 5px;border-radius:999px;background:#111}.mobile-screen{min-height:112px;padding:6px;border-radius:10px;background:var(--white)}.mobile-screen .mini-logo{width:11px;height:10px;margin-bottom:7px}.mobile-screen p{font-size:0.5rem}.mobile-screen small{display:block;margin:5px 0;color:var(--muted);font-size:0.35rem;font-weight:800}.mobile-screen b{display:grid;place-items:center;min-height:18px;border-radius:5px;color:var(--white);background:var(--blue);font-size:0.34rem}.mobile-screen i{display:block;margin-top:5px;color:var(--blue);font-size:0.34rem;font-style:normal;font-weight:900;text-align:center}.target-section,.preview-section,.plans-section,.flow-section,.faq-section{padding:28px 14px}.section-rule-heading{display:grid;grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr);align-items:center;gap:10px;max-width:980px;margin:0 auto 20px}.section-rule-heading span{height:1px;background:var(--blue);opacity:0.55}.section-rule-heading h2{margin:0;color:var(--blue);font-size:clamp(1.22rem,5vw,2.2rem);font-weight:900;letter-spacing:0;white-space:nowrap}.target-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:980px;margin:0 auto}.target-grid article{min-width:0;text-align:center}.target-icon{display:grid;place-items:center;width:clamp(50px,14.6vw,88px);height:clamp(50px,14.6vw,88px);margin:0 auto 8px;border-radius:999px;color:var(--blue);background:var(--white);border:1px solid var(--line-2);font-size:clamp(1.35rem,5vw,2.3rem);font-weight:900;box-shadow:0 8px 22px rgba(0,76,154,0.08)}.target-grid h3,.target-grid p{margin:0;font-size:clamp(0.58rem,2.45vw,0.9rem);line-height:1.45}.target-grid h3{color:var(--blue);font-weight:900}.target-grid p,.target-note{color:var(--muted);font-weight:800}.target-note{max-width:880px;margin:22px auto 0;text-align:center}.preview-card,.main-plan,.option-card,.faq-list details{border:2px solid var(--blue);border-radius:8px;background:var(--white);box-shadow:0 10px 26px rgba(0,76,154,0.08)}.preview-card{max-width:980px;margin:0 auto;padding:18px}.preview-head{display:flex;gap:16px;align-items:center}.preview-head>span{display:grid;flex:0 0 auto;place-items:center;width:66px;height:66px;border-radius:999px;color:var(--white);background:var(--blue);font-weight:900;line-height:1.25;text-align:center}.preview-head h2{margin:0;color:var(--ink);font-size:clamp(1.18rem,4.6vw,2rem);line-height:1.35}.preview-head strong,.main-plan strong,.option-card strong{display:block;color:var(--red);font-size:clamp(1.8rem,8vw,3.6rem);font-weight:900;line-height:1.1}.preview-head small,.main-plan small,.option-card small{font-size:0.36em}.preview-body{display:grid;gap:16px;margin:18px 0}.check-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.check-list li{position:relative;padding-left:28px;color:var(--ink);font-weight:800}.check-list li::before{content:"✓";position:absolute;left:0;top:0;display:grid;place-items:center;width:19px;height:19px;border-radius:999px;color:var(--white);background:var(--blue);font-size:0.75rem;line-height:1}.preview-mini{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.mini-device{min-height:104px;border:7px solid #222;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.92)),linear-gradient(90deg,var(--blue),var(--red))}.preview-mini span{display:grid;place-items:center;width:116px;height:116px;border-radius:999px;color:var(--white);background:var(--blue);font-size:1.05rem;font-weight:900;line-height:1.35;text-align:center}.preview-form{display:grid;gap:8px;margin-top:16px}.preview-form label{color:var(--blue);font-weight:900}.input-row,.final-form{display:grid;gap:8px}input{width:100%;min-height:52px;padding:0 14px;border:2px solid var(--line);border-radius:8px;color:var(--ink);background:var(--white);font-weight:800}.form-help{margin:0;color:var(--muted);font-size:0.86rem;font-weight:700}.preview-result{margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.preview-result p{margin:0 0 8px}.price-layout{display:grid;gap:14px;max-width:980px;margin:0 auto}.main-plan{position:relative;overflow:hidden;padding:22px}.plan-ribbon{position:absolute;top:0;right:0;min-width:138px;margin:0;padding:8px 14px;color:var(--ink);background:var(--yellow);font-weight:900;text-align:center;transform:translate(24px,14px) rotate(35deg)}.main-plan h3,.option-panel h3{margin:0 0 10px;color:var(--blue);font-size:clamp(1.5rem,6vw,2rem);line-height:1.35}.plan-note{margin:14px 0 0;color:var(--muted);font-size:0.88rem;font-weight:700}.option-panel{display:grid;gap:12px}.option-card{display:grid;grid-template-columns:86px 1fr;gap:14px;align-items:center;padding:18px}.option-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:8px;color:var(--blue);background:var(--paper);font-size:2.1rem;font-weight:900}.option-card h4{margin:0;font-size:1.25rem;line-height:1.35}.option-card strong{font-size:clamp(1.6rem,6vw,2.4rem)}.option-card p{margin:6px 0 0;color:var(--muted);font-weight:700}.flow-list{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:980px;margin:0 auto;padding:18px;border-radius:8px;background:var(--white);box-shadow:0 10px 26px rgba(0,76,154,0.08);list-style:none}.flow-list li{position:relative;display:grid;gap:8px;min-width:0;padding:0 8px;text-align:center}.flow-list li + li{border-left:1px solid var(--line-2)}.flow-list li + li::before{content:"›";position:absolute;left:-8px;top:44px;color:var(--blue);font-size:2rem;font-weight:900;line-height:1}.flow-list span{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 4px;border-radius:999px;color:var(--white);background:var(--blue);font-weight:900}.flow-list strong{color:var(--blue);font-size:clamp(0.74rem,2.5vw,0.96rem);line-height:1.35}.flow-list p{margin:0;color:var(--muted);font-size:clamp(0.64rem,2.1vw,0.82rem);font-weight:700;line-height:1.45}.faq-list{display:grid;gap:8px;max-width:980px;margin:0 auto}.faq-list details{padding:0}.faq-list summary{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 16px;color:var(--ink);cursor:pointer;font-weight:900}.faq-list summary::before{content:"Q";display:grid;flex:0 0 auto;place-items:center;width:28px;height:28px;border-radius:999px;color:var(--white);background:var(--blue)}.faq-list summary::after{content:"⌄";margin-left:auto;color:var(--blue)}.faq-list p{margin:0;padding:0 18px 18px 54px;color:var(--muted);font-weight:700}.final-cta{margin:34px 18px;padding:24px 16px;border-radius:8px;color:var(--white);background:linear-gradient(180deg,var(--blue-2),var(--blue-dark));text-align:center;box-shadow:var(--shadow)}.final-cta h2{margin:0 0 4px;font-size:clamp(1.7rem,6vw,2.7rem);line-height:1.35}.final-cta p{margin:0 0 12px;font-weight:800}.final-form{max-width:760px;margin:0 auto 12px}.site-footer{display:grid;gap:18px;padding:28px 18px;border-top:1px solid var(--line);background:var(--white)}.site-footer nav{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-weight:800}.site-footer p{margin:0;color:var(--muted)}@media (min-width:760px){.menu-button{display:none}.global-nav{position:static;display:flex;align-items:center;gap:4px;padding:0;border:0;background:transparent;box-shadow:none}.global-nav a{min-height:42px;padding:0 12px;font-size:.9rem}.hero{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(420px,1fr);align-items:center;min-height:calc(100svh - 70px);padding:52px max(26px,calc((100vw - 1180px)/2))}.hero-copy{width:auto;min-height:auto}.hero h1{font-size:clamp(3.8rem,6.8vw,6rem)}.hero-actions{grid-template-columns:minmax(210px,1fr) minmax(180px,.86fr);max-width:640px}.device-stage{position:relative;top:auto;right:auto;width:auto;height:520px;min-height:520px}.desktop-preview{width:min(100%,680px);border-width:14px;border-bottom-width:34px;border-radius:16px 16px 20px 20px}.desktop-preview::after{width:130px;height:18px;margin:18px auto -32px}.preview-topbar{gap:8px;min-height:38px;padding:0 12px;font-size:.72rem}.preview-topbar small{width:22px}.mini-logo{width:20px;height:18px}.mini-logo::before{left:2px;top:-8px;width:12px;height:12px}.preview-content{padding:24px}.preview-content p,.preview-content strong,.mobile-screen p{font-size:1.3rem}.preview-content small{font-size:.64rem}.preview-copy-lines{gap:7px;width:60%;margin:16px 0}.preview-copy-lines i{height:6px}.preview-buttons{gap:8px}.preview-buttons b{min-height:36px;font-size:.68rem}.preview-menu{gap:8px;margin-top:18px}.preview-menu em{min-height:52px;font-size:.58rem}.mobile-preview{left:0;bottom:40px;width:180px;padding:8px;border-width:8px;border-radius:24px}.mobile-notch{width:46px;height:5px;margin:0 auto 8px}.mobile-screen{min-height:210px;padding:9px;border-radius:14px}.mobile-screen .mini-logo{width:16px;height:14px;margin-bottom:12px}.mobile-screen p{font-size:.8rem}.mobile-screen small{margin:8px 0;font-size:.55rem}.mobile-screen b{min-height:28px;font-size:.58rem}.mobile-screen i{margin-top:8px;font-size:.56rem}.preview-body{grid-template-columns:1fr .9fr;align-items:center}.input-row,.final-form{grid-template-columns:1fr auto}.price-layout{grid-template-columns:1.08fr 1fr;align-items:start}.site-footer{grid-template-columns:1fr auto;align-items:center}.site-footer p{grid-column:1/-1}}@media (max-width:620px){.target-grid{grid-template-columns:repeat(5,minmax(54px,1fr))}.flow-list{overflow-x:auto;grid-template-columns:repeat(5,132px);scroll-snap-type:x mandatory}.flow-list li{scroll-snap-align:start}}@media (max-width:420px){.hero{padding-top:25px}.hero h1{font-size:clamp(2rem,9.7vw,2.45rem)}.desktop-preview{width:164px;border-width:7px;border-bottom-width:18px}.preview-content{padding:10px}.preview-head{align-items:flex-start}.preview-head>span{width:64px;height:64px;font-size:.9rem}.preview-mini{grid-template-columns:1fr}.preview-mini span{width:108px;height:108px;margin:-28px 0 0 auto}.option-card{grid-template-columns:64px 1fr}.option-icon{width:58px;height:58px}}

/* Top-view image implementation: width-specific rendered hero assets. */
.hero {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #fff;
}

.hero-picture {
  display: block;
  width: 100%;
  background: #fff;
}

.hero-picture img {
  display: block;
  width: 100%;
  height: auto;
}

.hero > .hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 14px 24px;
  background: #fff;
}

@media (min-width: 760px) {
  .hero {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .hero > .hero-actions {
    gap: 18px;
    padding: 0 28px 34px;
  }
}

/* Keep hero CTAs visible above the next section. */
.hero > .hero-actions {
  position: relative;
  z-index: 4;
  margin: -78px auto 0;
  padding: 0 14px 24px;
  background: transparent;
}

@media (min-width: 760px) {
  .hero > .hero-actions {
    margin-top: -84px;
    padding-bottom: 34px;
  }
}

@media (max-width: 679px) {
  .hero-picture img {
    width: 100vw;
    max-width: none;
    height: min(125vw, 520px);
    object-fit: cover;
    object-position: top center;
  }

  .hero > .hero-actions {
    margin-top: -84px;
  }
}

@media (max-width: 679px) {
  .hero > .hero-actions {
    margin-top: -164px;
  }
}

@media (max-width: 679px) {
  .hero > .hero-actions {
    width: 100vw;
    max-width: 100vw;
    left: 0;
  }

  .hero > .hero-actions .button {
    min-width: 0;
    gap: 6px;
    font-size: 0.92rem;
  }
}

@media (max-width: 679px) {
  .hero > .hero-actions {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: -168px;
  }

  .hero > .hero-actions .button {
    min-height: 52px;
  }
}

/* Final CTA placement: the mobile CTA lives outside the top-view image. */
.hero-cta-panel {
  position: relative;
  z-index: 5;
  padding: 0 14px 24px;
  background: transparent;
}

.hero-cta-panel .hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  max-width: 980px;
  margin: -78px auto 0;
}

@media (max-width: 720px) {
  .hero-picture img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }

  .hero-cta-panel {
    margin: 0;
    padding: 16px 14px 24px;
    background: #fff;
  }

  .hero-cta-panel .hero-actions {
    position: static;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .hero-cta-panel .button {
    width: 100%;
    min-height: 54px;
    font-size: 1rem;
  }
}

@media (max-width: 720px) {
  .hero-picture img {
    height: 520px;
    object-fit: cover;
    object-position: top center;
  }
}

@media (max-width: 480px) {
  .hero-picture img {
    height: 360px;
  }
}

.hero-cta-panel .hero-actions {
  margin: 0 auto;
}

@media (min-width: 721px) {
  .hero-cta-panel .hero-actions {
    margin: -78px auto 0;
  }
}

/* Preview plan demo image. */
.preview-demo-image {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.preview-mini {
  align-items: center;
}

@media (max-width: 520px) {
  .preview-mini {
    grid-template-columns: 1fr;
  }

  .preview-mini span {
    margin: -30px 0 0 auto;
  }
}

/* Preview CTA without inline number input. */
.preview-link-panel {
  display: grid;
  gap: 10px;
  max-width: 520px;
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  text-align: center;
}

.preview-link-panel .button {
  width: 100%;
}

.main-plan .check-list {
  gap: 12px;
  margin-top: 14px;
}

.main-plan .check-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding-left: 0;
  line-height: 1.35;
}

.main-plan .check-list li::before {
  position: static;
  width: 23px;
  height: 23px;
  font-size: 0.9rem;
}

.preview-entry-section {
  min-height: calc(100svh - 58px);
  padding: clamp(28px, 5vw, 62px) 14px;
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 224, 106, 0.24), transparent 32%),
    linear-gradient(180deg, var(--paper), #fff);
}

.preview-entry-layout {
  display: grid;
  gap: 16px;
  max-width: 1060px;
  margin: 0 auto;
}

.preview-entry-card {
  padding: clamp(22px, 5vw, 38px);
  border: 2px solid var(--blue);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.preview-entry-label {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 900;
}

.preview-entry-card h1 {
  margin: 0 0 12px;
  color: var(--ink);
  max-width: 11em;
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1.18;
}

.preview-hero-image {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 0 18px;
  border-radius: 8px;
}

.preview-entry-card > p:not(.preview-entry-label) {
  max-width: 45em;
  margin: 0 0 22px;
  color: var(--muted);
  font-weight: 800;
}

.preview-entry-form {
  margin-top: 0;
}

.preview-entry-back {
  display: inline-flex;
  margin-top: 18px;
  color: var(--blue);
  font-weight: 900;
}

.preview-request-button {
  width: 100%;
  margin-top: 12px;
  min-height: 54px;
  text-align: center;
}

/* Requested refinements. */
.flow-list {
  min-height: 184px;
  padding: 24px;
}

.flow-list li {
  gap: 12px;
  padding: 8px 12px;
}

.flow-list li + li::before {
  top: 58px;
  font-size: 2.35rem;
}

.flow-list span {
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  font-size: 1.08rem;
}

.flow-list strong {
  font-size: clamp(0.9rem, 2.8vw, 1.08rem);
}

.flow-list p {
  font-size: clamp(0.76rem, 2.4vw, 0.92rem);
  line-height: 1.55;
}

.button-light-blue {
  color: #003c67;
  background: linear-gradient(180deg, #aee9ff, #76d4ff);
  border-color: #53bfee;
  box-shadow: 0 14px 28px rgba(87, 196, 238, 0.28);
}

@media (max-width: 620px) {
  .flow-list {
    grid-template-columns: repeat(5, 160px);
    padding: 22px;
  }
}

@media (max-width: 720px) {
  .hero-picture img {
    height: auto;
    object-fit: contain;
  }
}

.preview-summary-card {
  align-self: stretch;
  padding: clamp(20px, 4vw, 28px);
  border: 2px solid var(--blue);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 224, 106, 0.24), rgba(255,255,255,0.78)),
    var(--white);
  box-shadow: 0 10px 26px rgba(0, 76, 154, 0.08);
}

.preview-summary-card p {
  margin: 0 0 4px;
  color: var(--blue);
  font-weight: 900;
}

.preview-summary-card strong {
  display: block;
  margin: 0 0 18px;
  color: var(--red);
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.preview-summary-card small {
  font-size: 0.36em;
}

.preview-summary-card .tax-total {
  font-size: clamp(0.88rem, 3.4vw, 1.28rem);
}

.preview-explain-section,
.preview-ok-section,
.preview-bottom-cta {
  padding: clamp(38px, 6vw, 72px) 14px;
}

.preview-explain-section {
  background: var(--white);
}

.preview-page-heading {
  max-width: 980px;
  margin: 0 auto 22px;
}

.preview-page-heading p,
.preview-bottom-cta > div:first-child > p {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 0.86rem;
  font-weight: 900;
}

.preview-page-heading h2,
.preview-bottom-cta h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 5.4vw, 2.8rem);
  line-height: 1.3;
}

.preview-check-grid {
  display: grid;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}

.preview-check-grid article {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--paper);
}

.preview-check-grid span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 999px;
  color: var(--white);
  background: var(--blue);
  font-weight: 900;
}

.preview-check-grid h3 {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 1.18rem;
  line-height: 1.35;
}

.preview-check-grid p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.preview-ok-section {
  display: grid;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}

.preview-ok-image {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--blue);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.preview-bottom-cta {
  display: grid;
  gap: 18px;
  max-width: 980px;
  margin: 0 auto clamp(28px, 5vw, 48px);
  padding: 12px;
  border: 2px solid var(--blue);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.preview-bottom-actions {
  display: grid;
  gap: 10px;
}

.preview-bottom-actions .button {
  width: 100%;
}

.preview-footer {
  display: flex;
  justify-content: center;
  padding: 0 14px clamp(28px, 5vw, 48px);
  background: #eaf6ff;
}

.preview-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  color: var(--blue);
  font-weight: 900;
}

@media (min-width: 760px) {
  .preview-entry-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: stretch;
  }

  .preview-check-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .preview-bottom-cta {
    grid-template-columns: minmax(0, 1fr) 430px;
    align-items: center;
    padding: 24px;
  }
}

@media (max-width: 520px) {
  .preview-entry-card h1 {
    font-size: 2rem;
  }

  .preview-entry-card .input-row {
    grid-template-columns: 1fr;
  }
}

/* Visual refinements requested after mobile review. */
.final-cta .button-outline.final-preview-button {
  width: min(100%, 720px);
  min-height: 62px;
  color: var(--blue);
  background: var(--white);
  border-color: var(--blue);
  box-shadow: none;
}

@media (max-width: 520px) {
  .final-cta h2 {
    font-size: 1.65rem;
  }

  .final-cta p {
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

.more-options {
  display: grid;
  justify-items: center;
  max-width: 980px;
  margin: 22px auto 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.more-options summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  padding: 0;
  color: var(--blue);
  cursor: pointer;
  font-size: clamp(0.98rem, 4vw, 1.18rem);
  font-weight: 900;
  line-height: 1.45;
  list-style: none;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.more-options summary::-webkit-details-marker {
  display: none;
}

.more-options summary::marker {
  content: "";
}

.more-options summary::after {
  content: "▼";
  margin-left: 0.45em;
  font-size: 0.8em;
  text-decoration: none;
}

.more-options[open] summary {
  border-bottom: 0;
}

.more-options[open] summary::after {
  content: "▲";
}

.more-options-list {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

.more-options-list .option-card {
  width: 100%;
}

.more-options-list .option-card strong {
  font-size: clamp(1.35rem, 5vw, 2rem);
}

.more-options-list .option-icon {
  font-size: 1.75rem;
}

@media (min-width: 760px) {
  .more-options-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .site-footer {
    gap: 8px;
    padding: 16px 14px;
  }

  .site-footer .brand {
    gap: 6px;
    max-width: 100%;
    font-size: 0.76rem;
  }

  .site-footer .brand-icon {
    width: 28px;
    height: 28px;
  }

  .site-footer .brand-icon svg {
    width: 27px;
    height: 27px;
  }

  .site-footer nav {
    gap: 6px 10px;
    font-size: 0.74rem;
    line-height: 1.4;
  }

  .site-footer p {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .more-options-list .option-card {
    grid-template-columns: 56px 1fr;
    gap: 10px;
    padding: 14px;
  }

  .more-options-list .option-card h4 {
    font-size: 1.05rem;
  }

  .more-options-list .option-card strong {
    font-size: clamp(1.14rem, 5.2vw, 1.35rem);
    line-height: 1.18;
  }

  .more-options-list .option-icon {
    width: 50px;
    height: 50px;
    font-size: 1.45rem;
  }
}

.preview-payment-flow-section {
  padding: clamp(38px, 6vw, 72px) 14px;
  background: var(--paper);
}

.payment-flow-grid {
  display: grid;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}

.payment-flow-grid article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--white);
}

.payment-flow-grid span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 999px;
  color: var(--white);
  background: var(--blue);
  font-weight: 900;
}

.payment-flow-grid h3 {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 1.14rem;
  line-height: 1.35;
}

.payment-flow-grid .payment-price-heading {
  display: grid;
  gap: 2px;
}

.payment-flow-grid .payment-price-heading .tax-suffix {
  color: var(--red);
  font-size: 0.72em;
}

.payment-flow-grid .payment-price-heading .tax-text {
  display: block;
  font-size: 0.86rem;
  line-height: 1.35;
}

.payment-flow-grid p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.thanks-section {
  min-height: calc(100svh - 58px);
  display: grid;
  place-items: center;
  padding: clamp(32px, 7vw, 72px) 14px;
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 224, 106, 0.24), transparent 32%),
    linear-gradient(180deg, var(--paper), #fff);
}

.thanks-card {
  display: grid;
  gap: 16px;
  width: min(100%, 760px);
  padding: clamp(24px, 5vw, 42px);
  border: 2px solid var(--blue);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.thanks-card h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.18;
}

.thanks-illustration {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: 0 auto 4px;
  border-radius: 8px;
  background: var(--paper);
}

.thanks-lead {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.08rem, 4vw, 1.35rem);
  font-weight: 900;
  line-height: 1.75;
}

.thanks-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: clamp(0.96rem, 3.4vw, 1.08rem);
  font-weight: 800;
  line-height: 1.65;
}

.thanks-contact {
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 14px;
  border-radius: 8px;
  background: var(--paper);
}

.thanks-contact p {
  margin: 0;
  color: var(--blue);
  font-size: 0.92rem;
  font-weight: 900;
}

.thanks-contact a {
  color: var(--ink);
  font-size: clamp(1rem, 3.8vw, 1.18rem);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.thanks-card .button {
  width: 100%;
}

.price-display {
  display: grid;
  gap: 4px;
}

.price-display .price-main {
  display: block;
}

.price-display .tax-suffix {
  display: inline;
  margin: 0;
  color: var(--red);
  font-size: 0.42em;
  font-weight: 900;
  line-height: 1;
  vertical-align: baseline;
}

.price-display .tax-total {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: clamp(0.88rem, 3.4vw, 1.28rem);
  font-weight: 900;
  line-height: 1.25;
}

.preview-head .price-display .tax-total {
  font-size: clamp(0.82rem, 3.2vw, 1.16rem);
}

.preview-tax-total {
  margin-top: 4px;
  color: var(--ink);
  font-size: clamp(0.9rem, 3.4vw, 1.2rem);
  font-weight: 900;
  line-height: 1.25;
}

.tax-text {
  color: var(--ink);
}

.section {
  padding: clamp(34px, 7vw, 72px) 14px;
}

.section-heading {
  width: min(100%, 980px);
  min-width: 0;
  max-width: 980px;
  margin: 0 auto 22px;
}

.section-heading p {
  margin: 0 0 8px;
  color: var(--red);
  font-size: 0.86rem;
  font-weight: 900;
}

.section-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 7vw, 3.4rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.policy-list {
  display: grid;
  gap: 10px;
  width: min(100%, 980px);
  max-width: 980px;
  margin: 0 auto;
}

.policy-item {
  min-width: 0;
  padding: 18px;
  border: 2px solid var(--blue);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(0, 76, 154, 0.08);
}

.policy-item h2 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: clamp(1.02rem, 3.8vw, 1.24rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.policy-item p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.policy-item a {
  color: var(--blue);
  font-weight: 900;
  overflow-wrap: anywhere;
}

@media (min-width: 760px) {
  .payment-flow-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}