/* ============================================================
   BRIGHT YELLOW THEME (non-hero) + animated vertical panels
   + rising arrow/plus particles + pricing decorations
   Loaded LAST so it overrides base/sections where needed.
   NOTE: HERO and BOARD sections are intentionally untouched.
   ============================================================ */

:root{
  /* brighter yellow than before (#FFD600) */
  --accent:#FFE000;
  --accent-dim:#FFD400;
  --accent-bright:#FFEC4D;
  /* warm-light base so the whole page reads bright & sunny */
  --bg:#FFFDF2;
  --bg-alt:#FFF7D6;
  /* vivid yellow used for former-dark sections & panels */
  --y-vivid:#FFE01A;
  --y-vivid-2:#FFD400;
  --ink:#0A0A0A;
  --ink-soft:#3A3320;
  --ink-mute:#6B6347;
}

/* ============================================================
   RISING PARTICLES  (↑ arrows & + marks rising bottom→top)
   ============================================================ */
.rise-fx{
  position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;
}
.rise-mark{
  position:absolute;top:-56px;opacity:0;
  will-change:transform,opacity;
  filter:drop-shadow(0 1px 2px rgba(120,90,0,.22));
  animation-name:fallDown;animation-timing-function:linear;animation-iteration-count:infinite;
}
.rise-mark svg{display:block;width:100%;height:100%}
@keyframes fallDown{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  8%{opacity:var(--m-op,.6)}
  50%{transform:translate3d(var(--m-x,0px),52vh,0) rotate(calc(var(--m-r,0deg) * .5));opacity:var(--m-op,.6)}
  92%{opacity:var(--m-op,.6)}
  100%{transform:translate3d(0,112vh,0) rotate(var(--m-r,0deg));opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .rise-fx{display:none}
}

/* ============================================================
   GLOBAL: former DARK sections → bright yellow + black text
   (revolution / testimonials / flow / final-cta)
   ============================================================ */
.revolution,
.testimonials,
.flow,
.final-cta{
  background:linear-gradient(160deg,#FFE21A 0%,#FFD400 55%,#FFC400 100%) !important;
  color:var(--ink) !important;
}
/* turn the dark photo overlays into a warm-yellow wash (keeps faint texture) */
.revolution::before,
.testimonials::before,
.flow::before{
  background:linear-gradient(160deg,rgba(255,226,26,.92) 0%,rgba(255,212,0,.9) 55%,rgba(255,196,0,.94) 100%) !important;
}
.revolution::after,
.final-cta::before,
.final-cta::after{
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(255,255,255,.35),transparent 60%) !important;
}

/* flip light/white text to black inside the converted sections */
.revolution :is(h1,h2,h3,h4,h5,p,li,span,div,a),
.testimonials :is(h1,h2,h3,h4,h5,p,li,span,div),
.flow :is(h1,h2,h3,h4,h5,p,li,span,div),
.final-cta :is(h1,h2,h3,h4,h5,p,li,span,div){
  color:var(--ink);
}
/* keep the section eyebrow tags / accents readable on yellow */
.revolution .accent,.testimonials .accent,.flow .accent,.final-cta .accent{color:#7A5A00}
.revolution .tag,.testimonials .tag,.flow .tag,.final-cta .tag{
  background:rgba(10,10,10,.9);color:var(--accent);
}

/* testimonial cards → clean white on yellow */
.testimonials .testi-card{
  background:#fff !important;border:1px solid rgba(10,10,10,.06) !important;
  box-shadow:0 18px 50px rgba(140,110,0,.18) !important;
}
.testimonials .testi-card :is(p,div,span){color:var(--ink)}
.testimonials .testi-quote{color:#2A2616 !important}
.testimonials .testi-role{color:var(--ink-mute) !important}
.testimonials .testi-stars{color:#E8A400 !important}

/* flow: white step cards on yellow */
.flow .flow-step,
.flow .step-content{background:transparent}
.flow .step-dot{
  background:var(--ink) !important;color:var(--accent) !important;border-color:var(--ink) !important;
}
.flow .step-tag{color:#7A5A00 !important}
.flow .flow-steps::before,
.flow .flow-steps::after{background:rgba(10,10,10,.18) !important}

/* final CTA button stays dark for contrast on yellow */
.final-cta .btn-accent,
.final-cta .price-cta,
.final-cta .cta{
  background:var(--ink) !important;color:var(--accent) !important;
  box-shadow:0 16px 40px rgba(10,10,10,.28) !important;
}

/* ============================================================
   VERTICAL PANELS — shared look for
   NUMBERS / PRO-QUALITY / TRACK-RECORD
   bright-yellow seamless panels, black text, dark icon tile
   with a bright animated icon, BIG readable type.
   ============================================================ */

/* --- make pro-quality & track-record full-bleed seamless bands --- */
.pq-grid,
.str-grid{
  grid-template-columns:repeat(3,1fr) !important;
  gap:0 !important;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:56px !important;
}

/* panel base (applies to all three panel families) */
.num-card,
.pq-card,
.str-card{
  position:relative;overflow:hidden;
  min-height:clamp(340px,30vw,420px);
  padding:clamp(40px,4vw,56px) clamp(22px,2.4vw,34px) !important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center !important;
  border:none !important;border-right:1px solid rgba(10,10,10,.10) !important;
  border-radius:0 !important;
  color:var(--ink) !important;
  transition:transform .5s var(--ease) !important;
}
.numbers-grid .num-card:last-child,
.pq-grid .pq-card:nth-child(3n),
.str-grid .str-card:nth-child(3n){border-right:none !important}
/* tidy 2-row divider for track-record */
.str-grid .str-card{border-bottom:1px solid rgba(10,10,10,.10) !important}
.str-grid .str-card:nth-last-child(-n+3){border-bottom:none !important}

/* bright yellow tints per panel (varied like the reference) */
.num-card.np-1,.pq-card:nth-child(1),.str-card:nth-child(1){--pg:linear-gradient(180deg,#FFE869,#FFDE2E)}
.num-card.np-2,.pq-card:nth-child(2),.str-card:nth-child(2){--pg:linear-gradient(180deg,#FFE03A,#FFD400)}
.num-card.np-3,.pq-card:nth-child(3),.str-card:nth-child(3){--pg:linear-gradient(180deg,#FFE869,#FFD91A)}
.num-card.np-4,.str-card:nth-child(4){--pg:linear-gradient(180deg,#FFDE2E,#FFCE00)}
.str-card:nth-child(5){--pg:linear-gradient(180deg,#FFE869,#FFD400)}
.str-card:nth-child(6){--pg:linear-gradient(180deg,#FFE23A,#FFD91A)}
.num-card,.pq-card,.str-card{background:var(--pg,linear-gradient(180deg,#FFE23A,#FFD400)) !important}
/* soft top sheen */
.num-card::after,
.pq-card::after,
.str-card::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 55% at 50% 0%,rgba(255,255,255,.5),transparent 60%);
}
.num-card>*,.pq-card>*,.str-card>*{position:relative;z-index:1}
.num-card:hover,.pq-card:hover,.str-card:hover{transform:translateY(-6px) !important;box-shadow:none !important}

/* --- icon tile: dark, with bright animated icon + glow --- */
.num-card .ni,
.pq-card .pq-ico,
.str-card .str-ico{
  width:clamp(78px,7vw,98px) !important;height:clamp(78px,7vw,98px) !important;
  border-radius:26px !important;margin:0 auto clamp(20px,2vw,26px) !important;
  display:flex;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(circle at 50% 35%,#23200f,#0A0A0A) !important;
  border:1px solid rgba(0,0,0,.25) !important;
  box-shadow:0 10px 26px rgba(120,90,0,.28),inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.num-card .ni-ico svg,
.pq-card .pq-ico svg,
.str-card .str-ico svg{
  width:clamp(40px,3.6vw,50px) !important;height:clamp(40px,3.6vw,50px) !important;
  color:var(--accent) !important;stroke:var(--accent) !important;position:relative;z-index:1;
}
/* glow behind icon */
.num-card .ni::before,
.pq-card .pq-ico::before,
.str-card .str-ico::before{
  content:'';position:absolute;width:62%;height:62%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,224,0,.85),transparent 65%);
  filter:blur(12px);animation:niGlow 3s ease-in-out infinite;z-index:0;
}
/* hover should not wash out the new look */
.pq-card:hover .pq-ico,
.str-card:hover .str-ico{transform:none !important;background:radial-gradient(circle at 50% 35%,#23200f,#0A0A0A) !important;border-color:rgba(0,0,0,.25) !important}
.str-card:hover .str-ico svg{color:var(--accent) !important}

/* --- animate the icons (continuous, distinct per column) --- */
.pq-ico svg,.str-ico svg{will-change:transform}
.pq-card:nth-child(1) .pq-ico svg,
.str-card:nth-child(1) .str-ico svg,
.str-card:nth-child(4) .str-ico svg{animation:niFloat 3.2s ease-in-out infinite}
.pq-card:nth-child(2) .pq-ico svg,
.str-card:nth-child(2) .str-ico svg,
.str-card:nth-child(5) .str-ico svg{animation:niPulse 2.6s ease-in-out infinite}
.pq-card:nth-child(3) .pq-ico svg,
.str-card:nth-child(3) .str-ico svg,
.str-card:nth-child(6) .str-ico svg{animation:niBob 2.8s ease-in-out infinite}

/* --- panel TEXT: bigger & black --- */
/* kicker badge (numbers already has .np-badge; add one to pq/str via ::before) */
.np-badge{
  background:var(--ink) !important;color:var(--accent) !important;
  font-size:.82rem !important;font-weight:800 !important;padding:7px 18px !important;
  margin-bottom:16px !important;letter-spacing:.04em;
}
.num-card .nv{color:var(--ink) !important;font-size:clamp(2.7rem,4vw,3.5rem) !important}
.num-card .nv .suf{color:#9A7400 !important}
.num-card .nl{color:#2A2616 !important;font-size:clamp(.95rem,1.1vw,1.08rem) !important;font-weight:700 !important;margin-top:14px !important}

/* pro-quality panel text */
.pq-card{counter-increment:pqc}
.pq-card .pq-ico{order:0}
.pq-card h3{
  color:var(--ink) !important;font-size:clamp(1.25rem,1.7vw,1.55rem) !important;
  font-weight:900 !important;line-height:1.5 !important;margin-bottom:14px !important;
}
.pq-card>p{color:#2A2616 !important;font-size:clamp(.9rem,1.05vw,1.02rem) !important;line-height:1.95 !important;font-weight:500}
.pq-card h3::before{
  content:counter(pqc,decimal-leading-zero);
  display:block;font-family:'DM Sans',sans-serif;font-weight:900;
  font-size:clamp(1.5rem,2vw,2rem);color:#9A7400;letter-spacing:.04em;margin-bottom:8px;opacity:.9;
}

/* track-record panel text */
/* top-align so the 01/02/03… numbers line up across cards regardless of text length */
.str-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start !important}
.str-card .str-num{
  position:static !important;opacity:1 !important;
  -webkit-text-fill-color:initial !important;background:none !important;color:#9A7400 !important;
  font-family:'DM Sans',sans-serif;font-weight:900;font-size:clamp(1.6rem,2.1vw,2.1rem) !important;
  line-height:1;margin-bottom:6px;order:-1;
}
.str-card h3{
  color:var(--ink) !important;font-size:clamp(1.12rem,1.5vw,1.4rem) !important;
  font-weight:900 !important;line-height:1.5 !important;margin-bottom:12px !important;
}
.str-card p{color:#2A2616 !important;font-size:clamp(.88rem,1.02vw,1rem) !important;line-height:1.9 !important;font-weight:500}
.str-card .crown-badges{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.str-card .crown-badge{
  background:var(--ink) !important;color:var(--accent) !important;
  font-size:.66rem;font-weight:800;padding:4px 10px;border-radius:999px;
}

/* numbers icons a touch bigger too (already animated via .ni-ico classes) */
.num-card .ni-ico svg{width:clamp(42px,3.8vw,52px) !important;height:clamp(42px,3.8vw,52px) !important}

@media(max-width:1024px){
  .pq-grid,.str-grid{grid-template-columns:repeat(2,1fr) !important}
  .pq-grid .pq-card:nth-child(3n),
  .str-grid .str-card:nth-child(3n){border-right:1px solid rgba(10,10,10,.10) !important}
  .pq-grid .pq-card:nth-child(2n),
  .str-grid .str-card:nth-child(2n){border-right:none !important}
  .str-grid .str-card{border-bottom:1px solid rgba(10,10,10,.10) !important}
  .str-grid .str-card:nth-last-child(-n+2){border-bottom:none !important}
  .num-card,.pq-card,.str-card{min-height:300px}
  /* pro-quality has 3 cards: make the orphaned 3rd one span the full row */
  .pq-grid .pq-card:nth-child(3){grid-column:1 / -1 !important;border-right:none !important}
}
@media(max-width:560px){
  .pq-grid,.str-grid{grid-template-columns:repeat(2,1fr) !important}
  .num-card,.pq-card,.str-card{min-height:248px;padding:32px 14px !important}
  .pq-grid .pq-card:nth-child(3){grid-column:1 / -1 !important;border-right:none !important}
}

/* ============================================================
   PRICING — reference-style decoration (ribbon / strike / badge / sparkles)
   ============================================================ */
.pricing{background:linear-gradient(180deg,#FFFDF2,#FFF3C4) !important;position:relative;overflow:hidden}
.price-card{
  position:relative;overflow:visible !important;
  border:2px solid var(--accent) !important;
  box-shadow:0 30px 70px rgba(150,115,0,.18) !important;
}
/* corner limited tag */
.price-ribbon{
  position:absolute;top:-1px;right:28px;z-index:5;
  background:linear-gradient(135deg,#FF5A5A,#E11D48);color:#fff;
  font-weight:800;font-size:.74rem;letter-spacing:.06em;
  padding:9px 18px;border-radius:0 0 12px 12px;
  box-shadow:0 8px 20px rgba(225,29,72,.35);
  animation:priceTagPulse 2.4s ease-in-out infinite;
}
@keyframes priceTagPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
/* SPECIAL PRICE banner above the amount */
.price-banner{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  margin:4px auto 14px;color:#9A7400;font-weight:800;letter-spacing:.16em;font-size:.78rem;
}
.price-banner::before,.price-banner::after{content:'◆';color:var(--accent-dim);font-size:.7em}
/* initial-cost comparison strike */
.price-compare{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:2px auto 16px;flex-wrap:wrap;
}
.price-compare .pc-was{
  position:relative;color:var(--ink-mute);font-weight:700;font-size:.95rem;
}
.price-compare .pc-was::after{
  content:'';position:absolute;left:-4px;right:-4px;top:50%;height:2px;
  background:#E11D48;transform:rotate(-8deg);
}
.price-compare .pc-arrow{color:#9A7400;font-weight:900}
.price-compare .pc-now{
  color:#0A0A0A;font-weight:900;font-size:1.15rem;
  background:var(--accent);padding:4px 14px;border-radius:999px;
}
/* discount badge near amount */
.price-discount{
  display:inline-flex;align-items:baseline;gap:2px;vertical-align:middle;
  background:linear-gradient(135deg,#FF5A5A,#E11D48);color:#fff;
  border-radius:999px;padding:8px 14px;margin-left:10px;font-weight:800;
  box-shadow:0 8px 20px rgba(225,29,72,.3);animation:priceTagPulse 2.4s ease-in-out infinite;
}
.price-discount .pd-pre{font-size:.62rem;letter-spacing:.08em}
.price-discount .pd-num{font-family:'DM Sans',sans-serif;font-size:1.5rem;line-height:1}
.price-discount .pd-pct{font-size:.8rem}
/* sparkles floating around the card */
.price-spark{position:absolute;z-index:4;color:var(--accent-dim);pointer-events:none;
  animation:priceSparkle 2.6s ease-in-out infinite}
.price-spark.s1{top:18px;left:24px;font-size:18px}
.price-spark.s2{top:60px;right:30px;font-size:13px;animation-delay:.7s}
.price-spark.s3{bottom:90px;left:30px;font-size:15px;animation-delay:1.3s}
.price-spark.s4{bottom:40px;right:26px;font-size:12px;animation-delay:1.9s}
@keyframes priceSparkle{0%,100%{opacity:.3;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(20deg)}}
/* limited / urgency message */
.price-limited{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  margin:14px auto 0;color:#B91C1C;font-weight:800;font-size:.9rem;
}
.price-limited .star{color:var(--accent-dim)}

/* ============================================================
   PRICE CARD → light (no black bg), black text, gold/red accents
   ============================================================ */
.price-card{background:#fff !important;color:var(--ink) !important}
.price-card::before{background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(255,214,0,.18),transparent 60%) !important}
.price-label{background:rgba(255,214,0,.18) !important;border-color:rgba(255,214,0,.4) !important;color:#9A7400 !important}
.price-yen,.price-num{color:#0A0A0A !important}
.price-period{color:#3A3320 !important}
.price-note{color:#5A4F2E !important}
.price-divider{background:linear-gradient(90deg,transparent,var(--accent-dim),transparent) !important}
.price-includes li{color:#2A2616 !important;font-weight:500}
.chk{background:rgba(255,214,0,.22) !important}
.chk svg{color:#9A7400 !important}
.price-guarantee{color:#6B6347 !important}
.price-guarantee svg{color:#6B6347 !important}

/* ============================================================
   CRED NUMBERS strip (Track Record) → light card
   ============================================================ */
.cred-numbers{
  background:#fff !important;border:1px solid rgba(10,10,10,.06) !important;
  box-shadow:0 16px 44px rgba(150,115,0,.14) !important;
}
.cred-numbers::before{display:none !important}
.cred-val{color:#0A0A0A !important}
.cred-val small{color:#9A7400 !important}
.cred-crown{color:#0A0A0A !important}
.cred-label{color:#6B6347 !important}
.cred-divider{background:rgba(10,10,10,.12) !important}

/* ============================================================
   FOOTER & STICKY CTA → bright (no black bg)
   ============================================================ */
footer{
  background:linear-gradient(180deg,#FFF3C4,#FFE873) !important;
  border-top:1px solid rgba(10,10,10,.08) !important;
}
.footer-logo{color:#0A0A0A !important}
.footer-links a{color:#3A3320 !important}
.footer-links a:hover{color:#9A7400 !important}
.footer-bottom{color:#5A4F2E !important;border-top-color:rgba(10,10,10,.08) !important}
footer :is(p,span,div,small){color:#3A3320}

.sticky-cta{background:rgba(255,224,0,.97) !important;border-top:1px solid rgba(10,10,10,.12) !important;box-shadow:0 -8px 30px rgba(150,115,0,.18) !important}
.sticky-price{color:#0A0A0A !important}
.sticky-price small{color:#6B6347 !important}
.sticky-desc{color:#3A3320 !important}
.sticky-btn{background:#0A0A0A !important;color:var(--accent) !important}

/* ============================================================
   SEO MEDIA CARD → light (was dark)
   ============================================================ */
.seo-media-card{
  background:linear-gradient(135deg,#FFFFFF 0%,#FFF6CF 100%) !important;
  border:1px solid rgba(255,214,0,.5) !important;
  box-shadow:0 24px 60px rgba(150,115,0,.16) !important;
}
.seo-media-card::before{background:radial-gradient(ellipse 60% 50% at 80% 0%,rgba(255,214,0,.18),transparent 60%) !important}
.seo-media-title{color:#0A0A0A !important}
.seo-media-title .accent{color:#9A7400 !important}
.seo-media-body{color:#2A2616 !important}
.seo-media-body strong{color:#876400 !important}
.seo-media-body2{color:#3F3820 !important}
.seo-media-body2 strong{color:#0A0A0A !important}
.seo-stat-val{color:#876400 !important}
.seo-stat-val small{color:#7A6210 !important}
.seo-stat-label{color:#403A22 !important}
.seo-stat-divider{background:rgba(10,10,10,.12) !important}
/* mobile: stats as readable 2x2 tiles instead of a cramped wrapping row */
@media(max-width:768px){
  .seo-media-stats{
    display:grid !important;grid-template-columns:1fr 1fr !important;
    gap:10px !important;align-items:stretch !important;margin-top:6px;
  }
  .seo-stat{
    background:rgba(255,255,255,.62) !important;
    border:1px solid rgba(135,100,0,.22) !important;border-radius:14px !important;
    padding:16px 10px !important;min-height:88px !important;
    display:flex !important;flex-direction:column !important;justify-content:center !important;
    box-shadow:0 4px 14px rgba(150,115,0,.08) !important;
  }
  .seo-stat-val{font-size:1.4rem !important;line-height:1.25 !important;word-break:break-word}
  .seo-stat-label{font-size:.72rem !important;font-weight:700 !important;color:#3A3420 !important;margin-top:6px !important;line-height:1.4}
  .seo-stat-divider{display:none !important}
  /* title: lift the icon onto its own line so every text line starts at the same left edge */
  .seo-media-title{display:block !important;line-height:1.55 !important}
  .seo-media-title svg{display:block !important;margin:0 0 12px 0 !important}
  .seo-media-title .accent{display:block !important}
}

/* ============================================================
   FINAL CTA — make all content readable on yellow
   ============================================================ */
.final-cta::before{background:radial-gradient(ellipse 80% 70% at 50% 30%,rgba(255,255,255,.28),transparent 65%) !important}
.final-cta::after{background:none !important}
.final-cta .orb-cta-1,.final-cta .orb-cta-2{background:radial-gradient(circle,rgba(255,255,255,.25),transparent 65%) !important}
.final-heading{color:#0A0A0A !important}
.final-heading .accent{color:#9A5E00 !important;text-shadow:none !important}
.final-sub{color:#2A2616 !important}
.final-body{color:#4A4226 !important}
.final-cta .tag{background:rgba(10,10,10,.9) !important;color:var(--accent) !important}
.final-cta .btn-accent{background:#0A0A0A !important;color:var(--accent) !important;box-shadow:0 18px 44px rgba(10,10,10,.3) !important}
.final-trust-item{color:#3A3320 !important}
.final-trust-item svg{color:#9A7400 !important}

/* ============================================================
   FLOW — ensure body/step text is dark on yellow
   ============================================================ */
.flow .flow-body,.flow .flow-body2,
.flow .step-content h3,.flow .step-content p,
.flow .step-content .step-tag{color:#2A2616 !important}
.flow .step-content h3{color:#0A0A0A !important}
.flow .step-tag{color:#9A7400 !important}
.flow .sh{color:#0A0A0A !important}

/* revolution / testimonials headings explicitly dark */
.revolution .sh,.testimonials .sh,.revolution h2,.testimonials h2{color:#0A0A0A !important}
.revolution .lead,.revolution p,.testimonials .sub,.flow .lead{color:#2A2616 !important}

/* ============================================================
   PHOTO SECTIONS RENEWAL — light yellow overlay so the photo
   shows through; headings black w/ halo; content on white cards
   (overrides the earlier opaque-yellow rules; later = wins)
   ============================================================ */
.revolution{background:#1a1a1a url('../img/revolution-bg.jpg') center/cover no-repeat !important}
.testimonials{background:#1a1a1a url('../img/testimonials-bg.jpg') center/cover no-repeat !important}
.flow{background:#1a1a1a url('../img/flow-bg.jpg') center/cover no-repeat !important}
.final-cta{background:#1a1a1a url('../img/cta-bg.jpg') center/cover no-repeat !important}

.revolution::before,
.testimonials::before,
.flow::before,
.final-cta::before{
  background:linear-gradient(to bottom,
     rgba(255,222,20,.74) 0%,
     rgba(255,222,20,.40) 26%,
     rgba(255,210,0,.40) 72%,
     rgba(255,205,0,.74) 100%) !important;
}
.revolution::after,
.final-cta::after{background:none !important}

/* headings & intros: black + light halo for legibility on photo */
.revolution .rh,.revolution .rsub,.revolution .rbody,
.testimonials .sh,.testimonials .testi-sub,.testimonials .sub,
.flow .sh,.flow .flow-body,.flow .flow-body2,
.final-cta .final-heading,.final-cta .final-sub,.final-cta .final-body{
  color:#0A0A0A !important;
  text-shadow:0 2px 16px rgba(255,243,180,.95),0 1px 3px rgba(255,255,255,.7) !important;
}
.revolution .rh .accent,.final-cta .final-heading .accent{color:#9A5E00 !important;text-shadow:0 2px 16px rgba(255,243,180,.95) !important}
.revolution .tag,.testimonials .tag,.flow .tag,.final-cta .tag{
  background:rgba(10,10,10,.92) !important;color:var(--accent) !important;text-shadow:none !important;
}

/* revolution comparison → solid white cards, readable */
.revolution .compare-box{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(10,10,10,.06) !important;
  box-shadow:0 22px 60px rgba(120,90,0,.22) !important;
  backdrop-filter:blur(2px);
}
.revolution .compare-box *{text-shadow:none !important}
.revolution .compare-label{color:#0A0A0A !important;font-weight:800}
.revolution .compare-old .compare-label{color:#B91C1C !important}
.revolution .compare-new .compare-label{color:#0F7A3D !important}
.revolution .cl li{color:#2A2616 !important;font-weight:600}
.revolution .ci-bad{background:rgba(225,29,72,.12) !important;color:#E11D48 !important}
.revolution .ci-good{background:rgba(16,160,80,.14) !important;color:#0F9A4D !important}
.revolution .compare-arrow-wrap{color:#9A7400 !important;background:#fff !important;box-shadow:0 8px 22px rgba(120,90,0,.2)}
.revolution-glow{opacity:.4 !important}

/* testimonials cards already white; ensure black text + halo only on heading */
.testimonials .testi-card *{text-shadow:none !important}

/* flow: white step cards */
.flow .flow-step{margin-bottom:18px}
.flow .step-content{
  background:rgba(255,255,255,.96) !important;border:1px solid rgba(10,10,10,.06) !important;
  border-radius:18px !important;padding:22px 26px !important;
  box-shadow:0 16px 44px rgba(120,90,0,.18) !important;backdrop-filter:blur(2px);
}
.flow .step-content *{text-shadow:none !important}
.flow .step-content h3{color:#0A0A0A !important}
.flow .step-content p{color:#3A3320 !important}
.flow .step-tag{color:#9A7400 !important}
.flow .step-dot{background:#0A0A0A !important;color:var(--accent) !important;border-color:#0A0A0A !important;box-shadow:0 10px 24px rgba(10,10,10,.25)}

/* final CTA button & trust readable */
.final-cta .final-trust-item{color:#2A2616 !important}
.final-cta .final-trust-item span{text-shadow:0 1px 6px rgba(255,243,180,.9) !important}
.final-cta .final-trust-item svg{color:#9A7400 !important}
.final-cta .btn-accent{background:#0A0A0A !important;color:var(--accent) !important}

/* numbers panel-1 Japanese value sizing */
.num-card .nv.nv-text{font-size:clamp(2.1rem,3vw,2.8rem) !important;font-family:'Noto Sans JP',sans-serif !important;font-weight:900}

/* ============================================================
   SPACING TIGHTEN
   ============================================================ */
.seo-media{padding-bottom:clamp(28px,4vw,48px) !important}
.pain{padding-top:clamp(48px,7vw,84px) !important}
.strengths{padding-top:clamp(44px,6vw,76px) !important}
.board{padding-top:clamp(44px,6vw,76px) !important}
.showcase{padding-top:clamp(44px,6vw,76px) !important}

/* ============================================================
   PAIN & PRO-QUALITY → full-bleed TALL panels with ANIMATED
   ILLUSTRATIONS (flowerpact-style image, not line icons)
   ============================================================ */
.pain-grid{
  display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:0 !important;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:48px !important;
}
.pain-card{
  position:relative;overflow:hidden;
  min-height:clamp(400px,34vw,500px);
  padding:clamp(44px,4vw,60px) clamp(22px,2.4vw,32px) !important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center !important;
  border:none !important;border-right:1px solid rgba(10,10,10,.10) !important;border-radius:0 !important;
  color:var(--ink) !important;background:var(--pg) !important;transition:transform .5s var(--ease) !important;
}
.pain-card:nth-child(1){--pg:linear-gradient(180deg,#FFE869,#FFDE2E)}
.pain-card:nth-child(2){--pg:linear-gradient(180deg,#FFE03A,#FFD400)}
.pain-card:nth-child(3){--pg:linear-gradient(180deg,#FFE869,#FFD91A)}
.pain-card:nth-child(4){--pg:linear-gradient(180deg,#FFDE2E,#FFCE00)}
.pain-card:nth-child(4n){border-right:none !important}
.pain-card::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 55% at 50% 0%,rgba(255,255,255,.5),transparent 60%)}
.pain-card>*{position:relative;z-index:1}
.pain-card:hover{transform:translateY(-6px)}
.pain-card h3{color:#0A0A0A !important;font-size:clamp(1.25rem,1.7vw,1.55rem) !important;font-weight:900 !important;line-height:1.5 !important;margin-bottom:14px !important}
.pain-card p{color:#2A2616 !important;font-size:clamp(.9rem,1.05vw,1.02rem) !important;line-height:1.95 !important;font-weight:500}

/* illustration container (pain + pro-quality) */
.pain-ill,.pq-ill{
  width:clamp(124px,13vw,172px) !important;height:clamp(124px,13vw,172px) !important;
  position:relative;margin:0 auto clamp(18px,2vw,26px) !important;
  background:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;
  display:flex;align-items:center;justify-content:center;
}
.pain-ill .pi-glow,.pq-ill .pi-glow{
  position:absolute;inset:6%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,.2) 55%,transparent 72%);
  animation:illGlow 3.6s ease-in-out infinite;
}
.pain-ill .pi-svg,.pq-ill .pi-svg{position:relative;z-index:1;width:100% !important;height:100% !important;color:initial !important}
.pq-ico.pq-ill::before{display:none !important}

/* illustration animations */
.pi-main{animation:illFloat 3.4s ease-in-out infinite;transform-origin:center}
.pain-card:nth-child(2) .pi-main,.pq-card:nth-child(2) .pi-main{animation-duration:3.8s}
.pain-card:nth-child(4) .pi-main,.pq-card:nth-child(3) .pi-main{animation:illPulse 2.8s ease-in-out infinite}
.pi-acc{animation:illTwinkle 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.pi-spin{animation:illSpin 7s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes illFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes illPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes illTwinkle{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes illSpin{to{transform:rotate(360deg)}}
@keyframes illGlow{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}

/* pro-quality panels: taller + illustration (no dark tile) */
.pq-card{min-height:clamp(400px,34vw,500px) !important}
.pq-card .pq-ico.pq-ill{
  width:clamp(124px,13vw,172px) !important;height:clamp(124px,13vw,172px) !important;
  background:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;
}
.pq-card .pq-ico.pq-ill svg{width:100% !important;height:100% !important;color:initial !important;stroke:none}

@media(max-width:1024px){
  .pain-grid{grid-template-columns:repeat(2,1fr) !important}
  .pain-card:nth-child(4n){border-right:1px solid rgba(10,10,10,.10) !important}
  .pain-card:nth-child(2n){border-right:none !important}
  .pain-card{border-bottom:1px solid rgba(10,10,10,.10) !important;min-height:340px}
  .pain-card:nth-last-child(-n+2){border-bottom:none !important}
  .pq-card{min-height:340px !important}
}
@media(max-width:560px){
  .pain-grid{grid-template-columns:repeat(2,1fr) !important}
  .pain-card{min-height:280px;padding:30px 12px !important}
}

/* ============================================================
   PRICING v2 — bigger, two-column, stronger decoration
   ============================================================ */
.pricing{background:linear-gradient(180deg,#FFFDF2,#FFEFAE) !important}
.price-card-v2{
  max-width:1000px !important;margin:52px auto 0 !important;padding:0 !important;
  text-align:left !important;overflow:visible !important;
  background:#fff !important;border:2px solid var(--accent) !important;border-radius:28px !important;
  box-shadow:0 40px 90px rgba(150,115,0,.22) !important;
}
.price-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0}
.price-left{padding:clamp(36px,4vw,56px);display:flex;flex-direction:column;align-items:flex-start;border-right:2px dashed rgba(200,160,30,.4)}
.price-right{padding:clamp(36px,4vw,56px);background:linear-gradient(180deg,#FFFCEC,#FFF4C6);border-radius:0 26px 26px 0}
.price-card-v2 .price-banner{margin:0 0 14px}
.price-card-v2 .price-label{margin-bottom:18px;display:inline-block}
.price-card-v2 .price-compare{justify-content:flex-start;margin:0 0 10px}
.price-compare .pc-lab{color:#6B6347;font-size:.82rem;font-weight:700}
.price-card-v2 .price-amount{display:flex;align-items:baseline;gap:4px;margin:2px 0 14px}
.price-card-v2 .price-yen{font-family:'DM Sans',sans-serif;font-size:1.8rem;font-weight:800;color:#0A0A0A}
.price-card-v2 .price-num{font-family:'DM Sans',sans-serif;font-size:clamp(3.6rem,6vw,5.2rem);font-weight:900;color:#0A0A0A;line-height:.95;letter-spacing:-.02em}
.price-unit{font-size:1rem;font-weight:700;color:#5A4F2E;margin-left:4px}
.price-discount-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.price-card-v2 .price-discount{margin:0}
.price-term-badge{background:#0A0A0A;color:var(--accent);font-weight:800;font-size:.72rem;padding:6px 14px;border-radius:999px}
.price-card-v2 .price-limited{margin:0 0 14px}
.price-card-v2 .price-note{color:#5A4F2E !important;margin:0 0 22px;font-size:.84rem;line-height:1.8}
.price-card-v2 .price-cta{width:100%;font-size:1.05rem;padding:20px;border-radius:14px}
.price-card-v2 .price-guarantee{margin-top:16px;color:#6B6347 !important;justify-content:flex-start}
.price-card-v2 .price-guarantee svg{color:#9A7400 !important}

.price-includes-head{font-size:1.05rem;color:#0A0A0A;font-weight:700;line-height:1.6;margin-bottom:20px;display:flex;align-items:flex-start;gap:10px}
.price-includes-head .pi-check{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#0A0A0A;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;flex-shrink:0}
.price-includes-head strong{color:#9A5E00}
.price-card-v2 .price-includes{display:flex;flex-direction:column;gap:12px;margin:0}
.price-card-v2 .price-includes li{display:flex;align-items:center;gap:12px;color:#2A2616 !important;font-weight:600;font-size:.92rem}
.price-card-v2 .chk{width:24px;height:24px;border-radius:50%;background:var(--accent) !important;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.price-card-v2 .chk svg{width:13px;height:13px;color:#0A0A0A !important}

@media(max-width:820px){
  .price-grid{grid-template-columns:1fr}
  .price-left{border-right:none;border-bottom:2px dashed rgba(200,160,30,.4);align-items:center;text-align:center}
  .price-right{border-radius:0 0 26px 26px}
  .price-card-v2 .price-compare,.price-card-v2 .price-amount,.price-discount-row,.price-card-v2 .price-guarantee{justify-content:center}
  .price-card-v2 .price-includes{align-items:flex-start;max-width:340px;margin:0 auto}
}

/* ============================================================
   FAQ — flowerpact-style: centered heading + full-width accordion
   ============================================================ */
.faq-section{background:linear-gradient(180deg,#FFFDF2,#FFF6CF) !important}
.faq-section .sh{color:#0A0A0A !important}
.faq-intro{max-width:680px;margin:14px auto 0;color:#5A4F2E;text-align:center;line-height:2;font-size:.92rem}
.faq-list{max-width:880px;margin:44px auto 0 !important;display:flex !important;flex-direction:column;gap:14px}
.faq-item{
  background:#fff !important;border:1px solid rgba(200,160,30,.4) !important;border-radius:16px !important;
  box-shadow:0 10px 30px rgba(150,115,0,.08) !important;overflow:hidden;
  transition:box-shadow .3s,border-color .3s;
}
.faq-item:hover{border-color:var(--accent) !important;box-shadow:0 14px 38px rgba(150,115,0,.16) !important}
.faq-item.open{border-color:var(--accent) !important;box-shadow:0 16px 40px rgba(150,115,0,.18) !important}
.faq-q{padding:22px 24px !important;color:#0A0A0A !important;font-weight:700 !important;font-size:1.02rem}
.faq-q:hover{color:#0A0A0A !important}
.faq-ti{background:var(--accent) !important;border-radius:50% !important;width:30px !important;height:30px !important;transition:transform .35s var(--ease),background .3s}
.faq-ti svg{color:#0A0A0A !important}
.faq-item.open .faq-ti{background:#0A0A0A !important;transform:rotate(135deg)}
.faq-item.open .faq-ti svg{color:var(--accent) !important}
.faq-a-inner{color:#3A3320 !important;padding:0 24px 22px !important;line-height:2;font-size:.92rem}

/* ============================================================
   NUMBERS PANELS — animated illustrations (like pain / pro-quality)
   ============================================================ */
.num-card{min-height:clamp(400px,34vw,500px) !important}
.num-ill{
  width:clamp(124px,13vw,172px);height:clamp(124px,13vw,172px);
  position:relative;margin:0 auto clamp(18px,2vw,26px);
  display:flex;align-items:center;justify-content:center;
}
.num-ill .pi-glow{
  position:absolute;inset:6%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,.2) 55%,transparent 72%);
  animation:illGlow 3.6s ease-in-out infinite;
}
.num-ill .pi-svg{position:relative;z-index:1;width:100%;height:100%}
/* per-panel motion variety */
.num-card.np-2 .pi-main{animation-duration:3.8s}
.num-card.np-4 .pi-main{animation:illPulse 2.8s ease-in-out infinite}
/* rotating clock ring on panel 3 */
.spin-c3{transform-box:view-box;transform-origin:56px 58px;animation:illSpin 12s linear infinite}

/* ============================================================
   TRACK RECORD PANELS — animated illustrations + taller
   ============================================================ */
.str-card{min-height:clamp(400px,34vw,500px) !important}
.str-ill{
  width:clamp(118px,12vw,164px);height:clamp(118px,12vw,164px);
  position:relative;margin:4px auto clamp(16px,1.8vw,24px);
  display:flex;align-items:center;justify-content:center;
}
.str-ill .pi-glow{
  position:absolute;inset:6%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,.2) 55%,transparent 72%);
  animation:illGlow 3.6s ease-in-out infinite;
}
.str-ill .pi-svg{position:relative;z-index:1;width:100%;height:100%}
.str-card:nth-child(2) .pi-main,.str-card:nth-child(5) .pi-main{animation-duration:3.8s}
.str-card:nth-child(3) .pi-main,.str-card:nth-child(6) .pi-main{animation:illPulse 3s ease-in-out infinite}

/* ============================================================
   PHOTO SECTIONS — content on frosted plate (photo stays visible,
   text clearly readable). Overlay lightened so the photo shows.
   ============================================================ */
.revolution::before,.testimonials::before,.flow::before,.final-cta::before{
  background:linear-gradient(to bottom,
     rgba(255,221,20,.48) 0%,
     rgba(255,214,4,.40) 50%,
     rgba(255,205,0,.52) 100%) !important;
}
.ph-plate,
.flow .container.text-center,
.final-cta .text-center{
  background:rgba(255,252,238,.78) !important;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius:28px !important;
  box-shadow:0 26px 70px rgba(110,82,0,.30) !important;
}
.ph-plate{display:inline-block;max-width:760px;padding:clamp(30px,3.4vw,46px) clamp(30px,4vw,60px)}
.flow .container.text-center{max-width:840px;margin-left:auto;margin-right:auto;padding:clamp(30px,3.4vw,46px) clamp(30px,4vw,60px) !important}
.final-cta .text-center{max-width:900px;margin-left:auto;margin-right:auto;padding:clamp(34px,3.6vw,52px) clamp(30px,4vw,64px)}

/* text inside plates: dark, drop the halo (plate carries contrast) */
.ph-plate *,
.flow .container.text-center *,
.final-cta .text-center *{text-shadow:none !important}
.ph-plate .rh,.ph-plate .sh,
.flow .container.text-center .sh,
.final-cta .text-center .final-heading{color:#141008 !important}
.ph-plate .rsub,.ph-plate .rbody,.ph-plate .ss,
.flow .container.text-center .flow-body,.flow .container.text-center .flow-body2,
.final-cta .text-center .final-sub,.final-cta .text-center .final-body{color:#3A3320 !important}
.ph-plate .accent,.final-cta .text-center .accent{color:#B45309 !important}
.final-cta .text-center .final-trust-item{color:#3A3320 !important}
.final-cta .text-center .final-trust-item svg{color:#9A7400 !important}
.final-cta .text-center .btn-accent{background:#0A0A0A !important;color:var(--accent) !important}

@media(max-width:560px){
  .ph-plate,.flow .container.text-center,.final-cta .text-center{padding:24px 18px !important;border-radius:20px !important}
}

/* ============================================================
   REVOLUTION — plate width matches the two comparison cards,
   add spacing, and remove the black pill behind the tag
   ============================================================ */
.revolution .ph-plate{
  display:block !important;width:100% !important;max-width:860px !important;
  margin:0 auto 48px !important;
}
.revolution .compare-row{margin-top:0 !important}
.revolution .ph-plate .tag{
  background:transparent !important;box-shadow:none !important;
  color:#B45309 !important;padding:0 !important;
}
.revolution .ph-plate .tag .td{background:#B45309 !important}

/* ============================================================
   PHOTO SECTIONS — Voice plate width = 3 cards, remove tag pills,
   bold all body text inside the plates
   ============================================================ */
/* Voice plate spans the same width as the 3 testimonial cards */
.testimonials .ph-plate{
  display:block !important;width:100% !important;max-width:none !important;
  margin:0 auto 52px !important;
}
.testimonials .testi-grid{margin-top:0 !important}

/* remove black highlight pill behind all section tags (on plates) */
.revolution .ph-plate .tag,
.testimonials .ph-plate .tag,
.flow .container.text-center .tag,
.final-cta .text-center .tag{
  background:transparent !important;box-shadow:none !important;
  color:#B45309 !important;padding:0 !important;
}
.revolution .ph-plate .tag .td,
.testimonials .ph-plate .tag .td,
.flow .container.text-center .tag .td,
.final-cta .text-center .tag .td{background:#B45309 !important}

/* bold all normal (body) text inside the plates */
.revolution .ph-plate .rsub,.revolution .ph-plate .rbody,
.testimonials .ph-plate .ss,
.flow .container.text-center .flow-body,.flow .container.text-center .flow-body2,
.final-cta .text-center .final-sub,.final-cta .text-center .final-body,
.final-cta .text-center .final-trust-item{font-weight:700 !important}

/* ============================================================
   PRICING v3 — 3 plans (Bronze / Standard / Business)
   ============================================================ */
.pricing{background:linear-gradient(180deg,#FFFDF2,#FFEFAE) !important;overflow:hidden}
.plan-grid{
  display:grid !important;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1160px;margin:54px auto 0 !important;align-items:stretch;
}
.plan-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border-radius:26px;overflow:hidden;
  border:1px solid rgba(200,160,30,.3);
  box-shadow:0 24px 60px rgba(150,115,0,.12);
  transition:transform .4s var(--ease),box-shadow .4s;
}
.plan-card:hover{transform:translateY(-8px);box-shadow:0 36px 84px rgba(150,115,0,.22)}
.plan-featured{border:2px solid var(--accent);box-shadow:0 36px 84px rgba(150,115,0,.28);transform:scale(1.045);z-index:2}
.plan-featured:hover{transform:scale(1.045) translateY(-8px)}
.plan-badge{
  position:absolute;top:16px;right:16px;z-index:4;
  background:linear-gradient(135deg,#FF5A5A,#E11D48);color:#fff;
  font-weight:800;font-size:.74rem;letter-spacing:.04em;padding:7px 14px;border-radius:999px;
  box-shadow:0 8px 20px rgba(225,29,72,.32);
}

/* header (with soft organic blobs) */
.plan-head{position:relative;padding:34px 24px 26px;text-align:center;overflow:hidden}
.plan-head::before,.plan-head::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.18);pointer-events:none}
.plan-head::before{width:120px;height:120px;top:-50px;right:-30px}
.plan-head::after{width:70px;height:70px;bottom:-30px;left:-10px;background:rgba(255,255,255,.12)}
.plan-bronze .plan-head{background:linear-gradient(135deg,#EAC25C 0%,#C6881C 100%);color:#3A2A05}
.plan-standard .plan-head{background:linear-gradient(135deg,#FFE84D 0%,#FFC400 100%);color:#2A2200}
.plan-business .plan-head{background:linear-gradient(135deg,#2E2715 0%,#0E0B04 100%);color:#FFDE8A}
.plan-ico{position:relative;z-index:1;display:inline-flex;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.28);align-items:center;justify-content:center;margin-bottom:10px}
.plan-business .plan-ico{background:rgba(255,222,138,.14)}
.plan-ico svg{width:28px;height:28px}
.plan-name{position:relative;z-index:1;font-size:1.55rem;font-weight:900;letter-spacing:.02em}
.plan-tagline{position:relative;z-index:1;font-size:.82rem;font-weight:700;opacity:.85;margin-top:4px}

/* body */
.plan-body{padding:26px 24px 30px;display:flex;flex-direction:column;flex:1}
.plan-init{text-align:center;font-size:.82rem;color:#6B6347;font-weight:700;margin-bottom:10px}
.pi-was{position:relative;color:#9A8A5A}
.pi-was::after{content:'';position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:#E11D48;transform:rotate(-7deg)}
.pi-now{color:#E11D48;font-weight:900}
.plan-price{display:flex;align-items:baseline;justify-content:center;gap:1px;color:#0A0A0A;margin:2px 0 18px}
.pp-yen{font-family:'DM Sans',sans-serif;font-size:1.5rem;font-weight:800}
.pp-num{font-family:'DM Sans',sans-serif;font-size:clamp(2.8rem,4vw,3.4rem);font-weight:900;line-height:1;letter-spacing:-.02em}
.pp-unit{font-size:.84rem;color:#5A4F2E;font-weight:700;margin-left:5px}
.plan-cta{
  display:block;text-align:center;padding:15px;border-radius:13px;font-weight:800;font-size:.98rem;
  margin-bottom:22px;transition:transform .25s,box-shadow .25s;
}
.plan-bronze .plan-cta,.plan-business .plan-cta{background:#0A0A0A;color:var(--accent)}
.plan-standard .plan-cta{background:linear-gradient(135deg,#FFE21A,#FFC400);color:#0A0A0A;box-shadow:0 14px 30px rgba(255,200,0,.42)}
.plan-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(150,115,0,.28)}

/* features */
.plan-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.plan-feats li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:#2A2616;font-weight:600;line-height:1.5;text-align:left}
.plan-feats .pc{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.plan-feats .pc svg{width:12px;height:12px;color:#0A0A0A}
.plan-feats .feat-all{font-weight:800;color:#9A5E00;background:rgba(255,214,0,.16);border-radius:10px;padding:9px 11px;align-items:center}
.plan-feats .feat-all .pc{background:#9A5E00}
.plan-feats .feat-all .pc svg{color:#fff}
.plan-note{margin-top:14px;font-size:.76rem;color:#8B7F5A;line-height:1.6;text-align:left}

@media(max-width:900px){
  .plan-grid{grid-template-columns:1fr;max-width:440px;gap:32px}
  .plan-featured{transform:none}
  .plan-featured:hover{transform:translateY(-8px)}
}

/* ============================================================
   MOBILE / TABLET HERO — stacked: black text area on top,
   photo as a band below (copy never overlaps the person)
   ============================================================ */
@media(max-width:1024px){
  .hero{
    background:#0A0A0A !important;
    min-height:auto !important;
    display:flex !important;flex-direction:column !important;
    align-items:stretch !important;justify-content:flex-start !important;
    padding:108px 0 0 !important;overflow:hidden !important;
  }
  /* hide decorative layers so they don't sit over the photo */
  .hero .hero-grid-bg,.hero .hero-lines,.hero .hero-ambient{display:none !important}
  /* TEXT block on solid black */
  .hero .hero-inner{
    order:1 !important;width:100% !important;position:relative;z-index:2;
    padding:0 22px 36px !important;justify-content:flex-start !important;align-items:center !important;
  }
  .hero .hero-copy{max-width:600px;margin:0 auto !important;text-align:center !important;align-items:center !important}
  .hero .hero-actions{flex-direction:column !important;width:100% !important;max-width:400px;gap:12px;margin:0 auto}
  .hero .hero-actions .btn{width:100% !important;justify-content:center}
  .hero .btn-ghost{color:#fff !important;border-color:rgba(255,255,255,.4) !important;background:rgba(255,255,255,.04) !important}
  /* PHOTO as a block band — pulled UP so it tucks behind the text/buttons.
     z-index:0 keeps it under the buttons (z-index:2) so they stay visible & tappable;
     the extended top fade blends the dark ceiling into the black text area. */
  .hero::before{
    position:static !important;order:2 !important;display:block !important;
    width:100% !important;height:58vh !important;min-height:360px !important;
    inset:auto !important;transform:none !important;filter:none !important;border-radius:0 !important;
    margin-top:-110px !important;z-index:0 !important;
    background:#0A0A0A url('../img/hero-bg-sp.jpg') center 88% / cover no-repeat !important;
    box-shadow:inset 0 150px 96px -60px #0A0A0A !important;
  }
  .hero::after{content:none !important}
}
@media(max-width:480px){
  .hero{padding-top:94px !important}
  .hero::before{height:50vh !important;min-height:320px !important;margin-top:-110px !important;background-position:center 88% !important}
}