/* BUZZENT Select LP - sales sections v3
   Existing affiliate.css / affiliate_landing*.css should remain loaded first.
   This file styles only the newly added sales sections and can be adjusted to the existing brand tokens.
*/

:root {
  --bs-ink: var(--ink, #17231e);
  --bs-muted: var(--muted, #5f6b65);
  --bs-brand: var(--primary, #173f33);
  --bs-accent: var(--accent, #ef7d3b);
  --bs-soft: var(--bg, #f5f6f2);
  --bs-line: var(--line, #dfe4df);
  --bs-white: #fff;
}

.lp-lead-sub {
  max-width: 46rem;
  margin: .75rem 0 0;
  color: var(--bs-muted);
  line-height: 1.8;
}

.lp-why,
.lp-before-after,
.lp-score-explain,
.lp-link-management,
.lp-audience,
.lp-faq {
  position: relative;
}

.lp-why-copy,
.lp-score-explain-grid,
.lp-link-management-grid,
.lp-before-after-grid {
  margin-top: 2rem;
}

.lp-why-copy {
  max-width: 56rem;
}

.lp-why-copy p,
.lp-score-explain p,
.lp-link-management p {
  line-height: 1.9;
  color: var(--bs-muted);
}

.lp-section-heading em {
  color: var(--bs-brand);
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--bs-accent) 55%, transparent);
  text-underline-offset: .2em;
  text-decoration-thickness: .16em;
}

.lp-check-list,
.lp-benefit-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: .8rem;
}

.lp-check-list li,
.lp-benefit-list li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.65;
}

.lp-check-list li::before,
.lp-benefit-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--bs-brand);
  font-weight: 800;
}

.lp-before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.lp-before,
.lp-after {
  border: 1px solid var(--bs-line);
  border-radius: 16px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--bs-white);
}

.lp-after {
  border-color: color-mix(in srgb, var(--bs-brand) 38%, var(--bs-line));
  background: color-mix(in srgb, var(--bs-brand) 4%, var(--bs-white));
}

.lp-comparison-label {
  margin: 0 0 1rem;
  color: var(--bs-brand);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.lp-before-after ol {
  margin: 0;
  padding-left: 1.35rem;
}

.lp-before-after li {
  padding: .42rem 0;
  line-height: 1.55;
}

.lp-score-explain-grid {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.lp-score-example {
  min-height: 220px;
  border: 1px solid var(--bs-line);
  border-radius: 20px;
  background: var(--bs-white);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1.5rem;
}

.lp-score-example small,
.lp-score-example span {
  color: var(--bs-muted);
}

.lp-score-example strong {
  display: block;
  margin: .35rem 0;
  color: var(--bs-brand);
  font-size: clamp(3.2rem, 7vw, 5.4rem);
  line-height: 1;
}

.lp-disclaimer {
  font-size: .9rem;
}

.lp-link-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 1.5rem;
  align-items: start;
}

.lp-safety-note {
  border: 1px solid color-mix(in srgb, var(--bs-accent) 32%, var(--bs-line));
  border-radius: 14px;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--bs-accent) 6%, var(--bs-white));
}

.lp-safety-note strong,
.lp-safety-note span {
  display: block;
}

.lp-safety-note span {
  margin-top: .45rem;
  color: var(--bs-muted);
  line-height: 1.7;
}

.lp-free-account {
  align-items: start;
}

.lp-benefit-list {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-audience-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
}

.lp-faq-list {
  display: grid;
  gap: .75rem;
  margin-top: 2rem;
}

.lp-faq-list details {
  border: 1px solid var(--bs-line);
  border-radius: 12px;
  background: var(--bs-white);
  overflow: clip;
}

.lp-faq-list summary {
  cursor: pointer;
  padding: 1rem 1.15rem;
  font-weight: 700;
  list-style: none;
}

.lp-faq-list summary::-webkit-details-marker {
  display: none;
}

.lp-faq-list summary::after {
  content: "+";
  float: right;
  color: var(--bs-brand);
  font-size: 1.25rem;
}

.lp-faq-list details[open] summary::after {
  content: "−";
}

.lp-faq-list details p {
  margin: 0;
  padding: 0 1.15rem 1.15rem;
  color: var(--bs-muted);
  line-height: 1.8;
}

.select-footer-note {
  margin: .75rem 0;
  font-size: .82rem;
  opacity: .78;
}

@media (max-width: 760px) {
  .lp-before-after-grid,
  .lp-score-explain-grid,
  .lp-link-management-grid {
    grid-template-columns: 1fr;
  }

  .lp-benefit-list,
  .lp-audience-list {
    grid-template-columns: 1fr;
  }

  .lp-score-example {
    min-height: 180px;
  }
}

.select-footer-note{grid-column:1/-1}.select-footer>a[href="https://developers.rakuten.com/"]{grid-column:1/-1}


/* Flow section refinement v4 */
.lp-flow-section{padding:clamp(32px,5vw,58px);background:#132638;border:1px solid #294257;border-radius:24px;box-shadow:0 24px 55px rgba(18,38,56,.16)}
.lp-flow-heading{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(24px,5vw,64px);align-items:end;margin-bottom:34px}
.lp-flow-heading h2{max-width:700px;margin:8px 0 14px;font-size:clamp(30px,4vw,46px);line-height:1.35;letter-spacing:-.025em}
.lp-flow-heading>div>p:last-child{max-width:670px;margin:0;color:#c7d4df;line-height:1.9}
.lp-flow-setup{display:grid;gap:6px;padding:20px 22px;background:#fff;color:var(--ink);border-radius:15px;border-top:4px solid var(--accent);box-shadow:0 14px 32px rgba(0,0,0,.18)}
.lp-flow-setup small{color:var(--accent);font-weight:850;letter-spacing:.08em}
.lp-flow-setup strong{font-size:19px;color:var(--primary-dark)}
.lp-flow-setup span{color:var(--muted);font-size:13px;line-height:1.7}
.lp-flow-section .lp-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0}
.lp-flow-section .lp-flow-card{display:flex;flex-direction:column;min-width:0;min-height:285px;padding:22px 20px;background:#1c3347;border:1px solid #365168;border-radius:15px;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.lp-flow-section .lp-flow-card:hover{transform:translateY(-4px);background:#213a50;border-color:#65839b}
.lp-flow-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.lp-flow-card-top small{color:#8fa9bd;font-size:10px;font-weight:850;letter-spacing:.14em}
.lp-flow-section .lp-flow-number{display:block;width:auto;height:auto;margin:0;padding:0;background:none;border-radius:0;color:#f3a45c;font-size:26px;line-height:1;font-weight:900}
.lp-flow-section .lp-flow-card h3{margin:0 0 11px;font-size:19px;color:#fff}
.lp-flow-section .lp-flow-card p{margin:0;color:#bdccd8;font-size:13px;line-height:1.8}
.lp-flow-result{display:block;margin-top:auto;padding-top:16px;border-top:1px solid #365168;color:#fff;font-size:13px}
.lp-flow-result::before{content:"得られること";display:block;margin-bottom:4px;color:#f3a45c;font-size:10px;letter-spacing:.08em}
.lp-flow-actions{display:flex;align-items:center;gap:22px;margin-top:28px}
.lp-flow-actions .lp-flow-primary{background:#d98b35;color:#fff;padding:13px 24px}
.lp-flow-actions .lp-flow-primary:hover{background:#be7425}
.lp-flow-actions>a:not(.button){color:#fff;font-weight:800;text-decoration:none}
.lp-flow-actions>a:not(.button):hover{text-decoration:underline}
@media(max-width:1040px){.lp-flow-section .lp-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-flow-section .lp-flow-card{min-height:255px}}
@media(max-width:760px){.lp-flow-heading{grid-template-columns:1fr}.lp-flow-section .lp-flow{grid-template-columns:1fr}.lp-flow-section .lp-flow-card{min-height:auto}.lp-flow-result{margin-top:20px}.lp-flow-actions{align-items:stretch;flex-direction:column}.lp-flow-actions>a{text-align:center}}


/* Japanese heading wrapping v5 */
.lp-hero h1,.lp-section h2,.lp-cta h2{max-width:none;line-break:strict;word-break:auto-phrase;overflow-wrap:normal;text-wrap:balance}
.lp-section p,.lp-lead,.lp-lead-sub,.lp-note{line-break:strict;word-break:auto-phrase;overflow-wrap:normal;text-wrap:pretty}
.lp-why .lp-section-heading{max-width:1080px}
.lp-before-after .lp-section-heading,.lp-link-management .lp-section-heading,.lp-audience .lp-section-heading{max-width:980px}
@supports not (word-break:auto-phrase){.lp-hero h1,.lp-section h2,.lp-cta h2,.lp-section p,.lp-lead,.lp-lead-sub,.lp-note{word-break:normal;overflow-wrap:anywhere}}
@media(max-width:680px){.lp-hero h1,.lp-section h2,.lp-cta h2{text-wrap:pretty}}


/* Mid-width wrapping refinement v5.1 */
.brand-inline{white-space:nowrap}
@media(max-width:1100px){.lp-free-account,.lp-api{grid-template-columns:1fr;gap:24px}.lp-free-account h2{max-width:900px}}