/* ============================================================
   BabuuFit overrides — rich Japanese-LP layer  (2026-06-14)
   ============================================================ */

:root{
  /* recolour existing accents toward the BabuuFit logo orange */
  --terra:#e85d22;
  --terra-dark:#c64c16;
  --orange:#f1834a;
  /* new tokens */
  --bf-orange:#e85d22;
  --bf-orange-d:#c64c16;
  --bf-orange-l:#f6a062;
  --bf-tint:#fbe7da;
  --bf-tint2:#fff7f1;
  --bf-cream:#fdf2e9;
  --bf-mark:#ffdd93;
  --bf-ink:#34281f;
  --bf-zen:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  --bf-gthc:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
}

/* ---------- brand logo ---------- */
.logo-img{ height:50px; width:auto; display:block; }
.footer .logo-img{ height:60px; margin:0 auto; }
.footer .logo{ display:flex; justify-content:center; }
@media(max-width:640px){ .logo-img{ height:40px; } .footer .logo-img{ height:52px; } }

/* ---------- shared helpers ---------- */
.mk{ background:linear-gradient(transparent 56%, var(--bf-mark) 56%); padding:0 .08em; font-weight:900; }
.line-mini, .line-btn, .fixed-cta{ font-family:var(--bf-zen); letter-spacing:.02em; white-space:nowrap !important; }
.line-btn:hover, .line-mini:hover, .fixed-cta:hover{ transform:translateY(-2px); filter:saturate(1.05); transition:.2s; }

/* a bit more air between sections */
.flyer-section{ padding-top:clamp(58px,8vw,96px); padding-bottom:clamp(58px,8vw,96px); }

/* ============================================================
   SECTION TITLES — English eyebrow + underline accent
   ============================================================ */
.section-title{
  position:relative; text-align:center;
  font-family:var(--bf-zen) !important; font-weight:900 !important;
  color:var(--bf-ink) !important; letter-spacing:.06em;
  margin-bottom:clamp(30px,4vw,48px) !important;
}
.section-title::before{
  content:attr(data-en); display:block;
  font-family:var(--bf-zen); font-weight:700; color:var(--bf-orange);
  font-size:clamp(12px,1.25vw,14px); letter-spacing:.3em; margin-bottom:12px;
}
.section-title::after{
  content:""; display:block; width:56px; height:5px; border-radius:99px;
  background:linear-gradient(90deg,var(--bf-orange),var(--bf-orange-l));
  margin:18px auto 0;
}

/* ============================================================
   HERO
   ============================================================ */
.hero-head{ display:inline-block; }
.service-tag{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 14px;
  padding:8px 18px 8px 10px; border-radius:99px;
  background:#fff; border:1.5px solid var(--bf-tint);
  box-shadow:0 8px 20px rgba(200,76,22,.10);
}
.service-tag b{
  font-family:var(--bf-zen); font-weight:900; font-size:15px; letter-spacing:.02em;
  color:#fff; background:linear-gradient(135deg,var(--bf-orange),var(--bf-orange-l));
  padding:5px 13px; border-radius:99px;
}
.service-tag span{
  font-family:var(--bf-zen); font-weight:700; font-size:clamp(13px,1.4vw,15px); color:var(--bf-ink);
}
@media(max-width:640px){
  .service-tag{ flex-wrap:wrap; justify-content:center; gap:7px; padding:8px 16px; }
  .service-tag span{ font-size:12.5px; white-space:normal; }
}
.hero-eyebrow{
  display:block; text-align:center; width:100%;
  font-family:var(--bf-zen); font-weight:700; color:var(--bf-orange-d);
  font-size:clamp(13px,1.5vw,17px); letter-spacing:.02em; margin-bottom:16px;
}
.hero h1{
  font-family:"Zen Kaku Gothic New",var(--bf-zen) !important; font-weight:900 !important;
  font-size:clamp(44px,5.6vw,82px) !important; line-height:1.24 !important; letter-spacing:.01em !important;
  color:var(--bf-ink) !important; white-space:normal !important; margin-bottom:22px !important;
  text-shadow:0 2px 16px rgba(255,250,244,.7);
}
.hero h1 .pop{
  color:var(--bf-orange) !important; white-space:nowrap;
  background:linear-gradient(transparent 60%, var(--bf-mark) 60%); padding:0 .06em;
}
.hero h1 .nw{ white-space:nowrap; }
.sub{ font-family:var(--bf-zen); font-weight:700; line-break:strict; word-break:auto-phrase; overflow-wrap:normal; text-wrap:pretty; }

/* badge chips → soft cards with orange check */
.badges span{
  background:#fff !important; border:1.5px solid var(--bf-tint) !important; border-top:3px solid var(--bf-orange) !important;
  border-radius:14px !important; box-shadow:0 8px 22px rgba(200,76,22,.10) !important;
  font-family:var(--bf-zen); font-weight:700 !important; color:var(--bf-ink) !important;
  display:flex !important; align-items:center; justify-content:center;
  padding:14px 10px !important; text-align:center !important;
  line-height:1.4 !important; white-space:normal !important;
  transition:transform .2s, box-shadow .2s;
}
.badges span:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(200,76,22,.18) !important; }
.badges span::before{ display:none !important; }
.badges span:nth-child(1)::before{ background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M10.5 8 15 12l-4.5 4z' fill='%23fff'/></svg>") center/20px no-repeat, linear-gradient(140deg,#e85d22,#f6a062); }
.badges span:nth-child(2)::before{ background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='13' rx='2.5'/><circle cx='9' cy='12.5' r='2.6'/><path d='M14.5 11h3.5M14.5 14h3.5'/></svg>") center/20px no-repeat, linear-gradient(140deg,#e85d22,#f6a062); }
.badges span:nth-child(3)::before{ background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 9.5h18M8 5v14'/></svg>") center/20px no-repeat, linear-gradient(140deg,#e85d22,#f6a062); }
.badges span:nth-child(4)::before{ background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='3'/><path d='M3.5 19c.5-3 2.7-4.8 5.5-4.8s5 1.8 5.5 4.8'/><circle cx='17' cy='8' r='2.3'/><path d='M15.5 13.4c2.2.2 3.8 1.8 4.2 4.3'/></svg>") center/20px no-repeat, linear-gradient(140deg,#e85d22,#f6a062); }

/* price block → dashed ticket card */
.price-block{
  background:#fff; border:2px dashed var(--bf-orange-l); border-radius:18px;
  padding:38px 24px 14px !important; box-shadow:0 12px 30px rgba(200,76,22,.10);
  display:flex !important; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; gap:8px 12px !important;
  position:relative; margin-top:20px;
}
.price-amt{ display:inline-flex; align-items:baseline; gap:4px; font-size:26px; }
.price-amt .label{ font-size:25px !important; }
.price-amt strong{ font-size:clamp(70px,9vw,98px) !important; line-height:.9; }
.was-price{
  font-family:var(--bf-zen); font-weight:700; color:#a89a8f; text-decoration:line-height;
  text-decoration:line-through; text-decoration-color:var(--bf-orange); text-decoration-thickness:2.5px;
  font-size:24px; align-self:center; margin-right:2px;
}
.big-price .was-price{ font-size:26px; }
.price-block .label{ font-family:var(--bf-zen); font-weight:700; }
.price-block strong{ color:var(--bf-orange) !important; }
.price-block em{ flex-basis:100%; margin:0 !important; text-align:center; font-family:var(--bf-zen); font-weight:700; font-size:16px; color:var(--bf-orange-d); font-style:normal; }
.price-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.limited-lead{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:7px; margin:0;
  font-family:var(--bf-zen); font-weight:700; font-size:14px; color:#fff;
  background:linear-gradient(135deg,var(--bf-orange),var(--bf-orange-l));
  padding:7px 18px; border-radius:99px; box-shadow:0 8px 18px rgba(232,93,34,.30); letter-spacing:.02em; white-space:nowrap;
}

/* week-4 circle → vivid badge with dashed ring */
.circle{
  background:radial-gradient(120% 120% at 30% 20%, var(--bf-orange-l), var(--bf-orange)) !important;
  border:3px solid #fff !important; box-shadow:0 18px 44px rgba(232,93,34,.42) !important;
  font-family:var(--bf-zen); font-weight:700;
}
.circle::after{
  content:""; position:absolute; inset:-9px; border:2px dashed rgba(255,255,255,.85);
  border-radius:50%; pointer-events:none;
}

/* ============================================================
   WORRIES — speech-bubble checklist
   ============================================================ */
.worries{ background:var(--bf-tint2); position:relative; overflow:hidden; display:block !important; }
.worries .worry-img{ display:none !important; }
.worries-copy{ max-width:920px !important; margin:0 auto !important; min-width:0; }
.worries::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(232,93,34,.10) 2px, transparent 2px);
  background-size:24px 24px; opacity:.6;
}
.worries > *{ position:relative; z-index:1; }
.worries-copy h2{
  text-align:center; position:relative; font-family:var(--bf-zen) !important; font-weight:900 !important;
  color:var(--bf-ink) !important; margin-bottom:30px !important; padding-top:6px;
}
.worries-copy h2::before{
  content:attr(data-en); display:block; font-family:var(--bf-zen); font-weight:700;
  color:var(--bf-orange); font-size:13px; letter-spacing:.3em; margin-bottom:20px; line-height:1;
}
.checks{
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px !important;
  max-width:760px; margin:0 auto 30px !important;
  background:transparent !important; box-shadow:none !important; padding:0 !important;
}
.checks p{
  background:#fff !important; border-radius:16px !important; border:1px solid var(--bf-tint);
  box-shadow:0 8px 22px rgba(200,76,22,.08) !important;
  padding:16px 18px 16px 50px !important; position:relative; font-weight:700 !important;
  font-family:var(--bf-gthc); margin:0 !important; line-height:1.55;
}
.checks p:last-child:nth-child(odd){ grid-column:1 / -1; max-width:50%; justify-self:center; }
.checks p::before{
  content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; background:var(--bf-orange);
}
.checks p::after{
  content:""; position:absolute; left:22px; top:50%; margin-top:-6px;
  width:7px; height:12px; border:solid #fff; border-width:0 2.6px 2.6px 0; transform:rotate(42deg);
}
.worries .lead{
  text-align:center; font-family:var(--bf-zen) !important; font-weight:900 !important;
  font-size:clamp(19px,2.3vw,27px) !important; line-height:1.7 !important;
}
.worries .lead span{
  background:linear-gradient(transparent 56%, var(--bf-mark) 56%);
  color:var(--bf-orange-d) !important; padding:0 .12em; font-weight:900;
}
/* downward connector arrow */
.worries::after{
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  border-left:22px solid transparent; border-right:22px solid transparent;
  border-top:20px solid var(--bf-tint2); z-index:2;
}

/* ============================================================
   FEATURES — numbered ribbon cards
   ============================================================ */
.features{ background:#fff; }
.feature-grid{ counter-reset:feat; }
.feature-grid article{
  position:relative; background:#fff; border:1px solid var(--bf-tint);
  border-radius:20px !important; overflow:hidden;
  box-shadow:0 14px 36px rgba(200,76,22,.10) !important; transition:.25s; padding-bottom:8px;
}
.feature-grid article:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(200,76,22,.18) !important; }
.feature-grid article::after{
  counter-increment:feat; content:"0" counter(feat);
  position:absolute; top:12px; left:18px; z-index:3;
  font-family:var(--bf-zen); font-weight:900; font-size:30px;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45); line-height:1;
}
.feature-grid article span{
  position:absolute !important; top:16px; right:0 !important; left:auto !important; bottom:auto !important;
  width:auto !important; max-width:60% !important; z-index:3;
  background:var(--bf-orange) !important; color:#fff !important;
  font-family:var(--bf-zen); font-weight:700; font-size:12px !important;
  padding:6px 14px 6px 16px !important; border-radius:99px 0 0 99px !important;
  box-shadow:0 6px 14px rgba(232,93,34,.32); text-align:center !important;
}
.feature-grid img{ border-radius:0 !important; }
.feature-grid h3{ color:var(--bf-orange-d) !important; font-family:var(--bf-zen) !important; }
.feature-grid p{ font-family:var(--bf-gthc); }

/* ============================================================
   MIDDLE CTA — inset gradient band
   ============================================================ */
.middle-cta{
  background:linear-gradient(120deg,var(--bf-orange),var(--bf-orange-l)) !important;
  color:#fff; border-radius:30px; position:relative; overflow:hidden;
  width:min(1120px, calc(100% - 44px)) !important; max-width:none !important;
  grid-template-columns:auto auto auto !important; justify-content:center !important; gap:30px !important;
  margin:8px auto !important; padding:clamp(34px,4.5vw,52px) clamp(26px,4vw,56px) !important;
  box-shadow:0 26px 60px rgba(232,93,34,.30);
}
.middle-cta > div:not(.badge-round){ text-align:center; }
.middle-cta::before{ content:""; position:absolute; right:-50px; top:-50px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.14); }
.middle-cta::after{ content:""; position:absolute; left:-40px; bottom:-60px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.10); }
.middle-cta > *{ position:relative; z-index:1; }
.middle-cta h2{ color:#fff !important; font-family:var(--bf-zen) !important; font-weight:900 !important; }
.middle-cta p{ color:rgba(255,255,255,.94) !important; }
.middle-cta .badge-round{
  background:#fff !important; color:var(--bf-orange) !important;
  font-family:var(--bf-zen); font-weight:900; box-shadow:0 10px 24px rgba(0,0,0,.18);
  position:relative;
}
.middle-cta .badge-round::after{
  content:""; position:absolute; inset:-7px; border:2px dashed rgba(255,255,255,.85); border-radius:50%;
}
.middle-cta .line-btn{ background:#fff !important; color:var(--bf-orange-d) !important; box-shadow:0 12px 26px rgba(0,0,0,.18); }
.middle-cta .line-btn b{ background:var(--bf-orange) !important; color:#fff !important; }

/* ============================================================
   PLANS
   ============================================================ */
.plans{ background:var(--bf-tint2); position:relative; overflow:hidden; }
.plans::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(232,93,34,.08) 2px, transparent 2px); background-size:26px 26px; opacity:.6;
}
.plans > *{ position:relative; z-index:1; }
.main-plan{
  position:relative; background:#fff !important; border:2.5px solid var(--bf-orange) !important;
  border-radius:24px !important; box-shadow:0 22px 54px rgba(232,93,34,.16) !important; overflow:hidden;
}
.main-plan::before{
  content:"おすすめ"; position:absolute; top:20px; right:-42px; transform:rotate(45deg);
  background:var(--bf-orange); color:#fff; font-family:var(--bf-zen); font-weight:700; font-size:13px;
  padding:7px 52px; box-shadow:0 6px 14px rgba(232,93,34,.3);
}
.main-plan .plan-kicker{
  display:inline-block; background:var(--bf-orange) !important; color:#fff !important;
  font-family:var(--bf-zen); font-weight:700; padding:7px 18px !important; border-radius:99px !important;
}
.main-plan h3{ font-family:var(--bf-zen) !important; }
.main-plan .big-price strong{ color:var(--bf-orange) !important; }
.main-plan .limited-note{ margin-top:10px; font-family:var(--bf-zen); font-weight:700; font-size:15px; color:var(--bf-orange-d); }
.main-plan ul li{ position:relative; padding-left:32px !important; list-style:none !important; }
.main-plan ul{ list-style:none !important; padding-left:0 !important; }
.main-plan ul li::before{
  content:""; position:absolute; left:6px; top:50%; margin-top:-9px;
  width:18px; height:18px; border-radius:50%; background:var(--bf-tint);
}
.main-plan ul li::after{
  content:""; position:absolute; left:12px; top:50%; margin-top:-5px;
  width:5px; height:9px; border:solid var(--bf-orange); border-width:0 2.4px 2.4px 0; transform:rotate(42deg);
}
.nutrition-card{ background:#fff !important; border:1px solid var(--bf-tint); border-radius:24px !important; box-shadow:0 14px 36px rgba(200,76,22,.10); }
.nutrition-card h3 span{ background:var(--bf-orange) !important; color:#fff !important; font-family:var(--bf-zen); border-radius:99px; padding:2px 12px; font-size:13px; }
.nutrition-card strong{ color:var(--bf-orange-d) !important; }

/* ============================================================
   FLOW — big STEP numbers + dashed connector
   ============================================================ */
.flow{ background:#fff; }
.flow-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
@media(max-width:1100px){ .flow-grid{ grid-template-columns:repeat(2,1fr) !important; } }
.flow-grid > div{ position:relative; }
.flow-grid b{
  display:flex !important; align-items:center; justify-content:center;
  width:66px !important; height:66px !important; margin:0 auto 16px !important; border-radius:50% !important;
  background:linear-gradient(140deg,var(--bf-orange),var(--bf-orange-l)) !important; color:#fff !important;
  font-family:var(--bf-zen) !important; font-weight:900 !important; font-size:30px !important;
  box-shadow:0 12px 26px rgba(232,93,34,.32) !important; position:relative; z-index:2;
}
.flow-grid b::before{
  content:"STEP"; position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  font-family:var(--bf-zen); font-weight:700; font-size:10px; letter-spacing:.18em; color:var(--bf-orange);
}
.flow-grid > div:not(:last-child)::after{
  content:""; position:absolute; top:33px; left:62%; width:76%; height:3px; z-index:1;
  background:repeating-linear-gradient(90deg,var(--bf-orange-l) 0 7px, transparent 7px 14px);
}
.flow-grid h3{ font-family:var(--bf-zen) !important; color:var(--bf-orange-d) !important; }

/* ============================================================
   TRAINERS — accent cards
   ============================================================ */
.trainers{ background:var(--bf-tint2); position:relative; overflow:hidden; }
.trainers::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(232,93,34,.07) 2px, transparent 2px); background-size:26px 26px; opacity:.6;
}
.trainers > *{ position:relative; z-index:1; }
.trainer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px !important; }
@media(max-width:760px){ .trainer-grid{ grid-template-columns:1fr !important; } }
.trainer-grid article{
  background:#fff !important; border:1px solid var(--bf-tint) !important; border-top:4px solid var(--bf-orange) !important;
  border-radius:18px !important; box-shadow:0 14px 36px rgba(200,76,22,.10) !important;
  padding:22px !important;
}
.trainer-grid img{ border-radius:16px !important; box-shadow:0 8px 20px rgba(52,40,31,.16) !important; grid-row:1 / span 3 !important; align-self:start; }
.trainer-grid h3{ font-family:var(--bf-zen) !important; color:var(--bf-ink) !important; }
.trainer-grid p{ color:var(--bf-orange-d) !important; font-family:var(--bf-zen); font-weight:700; }
.trainer-grid small{ position:relative; padding-top:6px; display:block; }
.trainer-grid small::before{
  content:"\201C"; position:absolute; left:-4px; top:-14px; font-family:Georgia,serif;
  font-size:42px; line-height:1; color:var(--bf-orange-l); opacity:.5;
}
.ig{ color:var(--bf-orange) !important; font-weight:800; }
.ig:hover{ text-decoration:underline; }

/* ============================================================
   APP SCREENS showcase — phone frames
   ============================================================ */
.app-screens{ background:#fff; }
.screens-lead{
  text-align:center; margin:-18px auto 40px; max-width:680px;
  font-family:var(--bf-gthc); font-weight:600; font-size:clamp(15px,1.8vw,18px); color:#5a514a;
}
.screens-lead b{ color:var(--bf-orange-d); font-weight:800; }
.phone-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.8vw,24px);
  max-width:1140px; margin:0 auto;
}
.phone{ margin:0; display:flex; flex-direction:column; align-items:center; }
.phone-screen{
  width:100%; aspect-ratio:760/1648; border-radius:30px; padding:7px;
  background:linear-gradient(150deg,#2c2722,#4a4039);
  box-shadow:0 22px 46px rgba(52,40,31,.26); position:relative; overflow:hidden;
}
.phone-screen::before{
  content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%); z-index:2;
  width:34%; height:13px; background:#2c2722; border-radius:0 0 12px 12px;
}
.phone-screen img{ width:100%; height:100%; object-fit:cover; border-radius:24px; display:block; }
.phone figcaption{
  margin-top:16px; text-align:center; font-family:var(--bf-gthc); font-weight:600; font-size:13px; color:#7a6f66; line-height:1.5;
}
.phone figcaption b{
  display:block; font-family:var(--bf-zen); font-weight:700; font-size:15px; color:var(--bf-ink); margin-bottom:3px;
}
@media(max-width:760px){
  .phone-row{
    display:grid !important; grid-template-columns:repeat(2,1fr); grid-auto-flow:row;
    gap:20px 14px; overflow:visible; padding:0; margin:0 auto; max-width:430px;
  }
  .phone:last-child:nth-child(odd){ grid-column:1 / -1; width:48%; justify-self:center; }
  .phone figcaption{ margin-top:10px; font-size:11.5px; }
  .phone figcaption b{ font-size:13px; margin-bottom:2px; }
}

/* ============================================================
   VOICES — results-driven testimonial cards + trust bar
   ============================================================ */
.voices{ background:var(--bf-tint2); position:relative; overflow:hidden; }
.voices::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(232,93,34,.06) 2px, transparent 2px); background-size:26px 26px; opacity:.6;
}
.voices > *{ position:relative; z-index:1; }

.trust-bar{
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(10px,3vw,40px);
  max-width:780px; margin:-12px auto 40px; padding:22px 24px;
  background:#fff; border:1px solid var(--bf-tint); border-radius:20px;
  box-shadow:0 14px 36px rgba(200,76,22,.10);
}
.trust-item{ text-align:center; flex:1; min-width:96px; }
.trust-item strong{
  display:block; font-family:var(--bf-zen); font-weight:900; line-height:1;
  font-size:clamp(34px,4.4vw,46px); color:var(--bf-orange);
}
.trust-item strong span{ font-size:.42em; color:var(--bf-orange-d); margin-left:2px; }
.trust-item small{ display:block; margin-top:8px; font-family:var(--bf-zen); font-weight:700; font-size:13px; color:var(--bf-ink); }

.voice-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:920px; margin:0 auto; }
@media(max-width:680px){ .voice-grid{ grid-template-columns:minmax(0,1fr); } }
.voice-grid article{
  min-width:0;
  display:block !important; align-items:initial !important; background:#fff !important; border:1px solid var(--bf-tint);
  border-radius:20px !important; padding:26px 26px 22px !important; position:relative; overflow:visible !important;
  box-shadow:0 12px 30px rgba(200,76,22,.09) !important;
}
.voice-grid article::before,.voice-grid article::after{ content:none !important; }
.v-rate{ color:#ffb23e; letter-spacing:3px; font-size:16px; margin-bottom:12px; }
.v-result{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px dashed var(--bf-orange-l);
}
.v-tag{
  font-family:var(--bf-zen); font-weight:700; font-size:12px; color:var(--bf-orange-d);
  background:var(--bf-tint); padding:5px 12px; border-radius:99px; white-space:nowrap;
}
.v-result b{ font-family:var(--bf-zen); font-weight:900; font-size:clamp(24px,3vw,32px); color:var(--bf-ink); line-height:1; }
.v-result b i{ font-style:normal; font-size:.6em; color:var(--bf-orange); margin-left:2px; }
.voice-grid article p{
  order:initial !important; width:auto !important; font-family:var(--bf-gthc) !important; font-weight:500; color:#4a423b !important;
  line-height:1.95 !important; margin:0 0 18px !important; font-size:15px; text-align:left;
}
.v-person{ display:flex; align-items:center; gap:12px; min-width:0; }
.v-person > div{ min-width:0; }
.v-person img{
  width:48px !important; height:48px !important; border-radius:50% !important; object-fit:cover;
  border:2px solid #fff; box-shadow:0 4px 12px rgba(52,40,31,.16); margin:0 !important; order:0 !important;
}
.v-person b{ display:block; font-family:var(--bf-zen); font-weight:700; font-size:15px; color:var(--bf-ink); }
.v-person small{ display:block; width:auto !important; margin-top:2px !important; color:#8a7f76 !important; font-family:var(--bf-gthc); font-weight:600; font-size:12.5px; overflow-wrap:normal; word-break:auto-phrase; }
.voices-note{ text-align:center; margin:30px auto 0; font-size:12px; color:#9a8f86; font-family:var(--bf-gthc); }

/* ============================================================
   REASONS — 選ばれる3つの理由
   ============================================================ */
.reasons{ background:var(--bf-tint2); position:relative; overflow:hidden; }
.reasons::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(232,93,34,.06) 2px, transparent 2px); background-size:26px 26px; opacity:.6;
}
.reasons > *{ position:relative; z-index:1; }
.reason-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1040px; margin:0 auto; }
@media(max-width:820px){ .reason-grid{ grid-template-columns:1fr; max-width:520px; } }
.reason-grid article{
  background:#fff; border:1px solid var(--bf-tint); border-radius:22px;
  padding:46px 28px 30px; position:relative; text-align:center;
  box-shadow:0 14px 36px rgba(200,76,22,.10);
}
.reason-no{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--bf-orange),var(--bf-orange-l)); color:#fff;
  font-family:var(--bf-zen); font-weight:900; font-size:26px;
  box-shadow:0 12px 26px rgba(232,93,34,.34); border:3px solid #fff;
}
.reason-illust{
  width:108px; height:108px; margin:14px auto 16px; border-radius:50%;
  background:var(--bf-tint2); border:2px solid var(--bf-tint);
  display:flex; align-items:center; justify-content:center;
}
.reason-illust img{ width:80px; height:80px; display:block; }
.reason-grid h3{ font-family:var(--bf-zen); font-weight:900; font-size:clamp(18px,2.1vw,21px); color:var(--bf-ink); margin:6px 0 12px; line-height:1.5; }
.reason-grid p{ font-family:var(--bf-gthc); font-weight:500; color:#5a514a; line-height:1.9; font-size:14.5px; text-align:left; }

/* ============================================================
   EASY STEPS — 撮って送るだけ 3ステップ
   ============================================================ */
.easy-steps{ background:#fff; }
.step3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,3vw,46px); max-width:920px; margin:0 auto; }
.step3-item{ text-align:center; position:relative; }
.step3-item:not(:last-child)::after{
  content:""; position:absolute; top:58px; right:-9%; width:18%; height:0;
  border-top:3px dashed var(--bf-orange-l);
}
@media(max-width:680px){
  .step3{ grid-template-columns:1fr; max-width:360px; gap:30px; }
  .step3-item:not(:last-child)::after{
    top:auto; bottom:-22px; right:50%; transform:translateX(50%); width:0; height:18px;
    border-top:none; border-left:3px dashed var(--bf-orange-l);
  }
}
.s3-visual{
  position:relative; width:116px; height:116px; margin:0 auto 18px; border-radius:50%;
  background:var(--bf-tint2); border:2px solid var(--bf-tint); z-index:1;
  display:flex; align-items:center; justify-content:center;
}
.s3-visual img{ width:82px; height:82px; display:block; }
.s3-no{
  position:absolute; bottom:-2px; right:2px; z-index:2;
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:50%; background:linear-gradient(140deg,var(--bf-orange),var(--bf-orange-l)); color:#fff;
  font-family:var(--bf-zen); font-weight:900; font-size:20px; box-shadow:0 8px 18px rgba(232,93,34,.34);
  border:3px solid #fff;
}
.step3-item h3{ font-family:var(--bf-zen); font-weight:900; font-size:clamp(17px,2vw,20px); color:var(--bf-orange-d); margin:0 0 8px; }
.step3-item p{ font-family:var(--bf-gthc); font-weight:600; color:#5a514a; line-height:1.8; font-size:14px; }

/* ============================================================
   COMPARE TABLE — 比較表
   ============================================================ */
.compare{ background:var(--bf-tint2); position:relative; overflow:hidden; }
.compare::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(232,93,34,.06) 2px, transparent 2px); background-size:26px 26px; opacity:.6;
}
.compare > *{ position:relative; z-index:1; }
.compare-wrap{ max-width:880px; margin:0 auto; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.compare-table{ width:100%; min-width:560px; border-collapse:separate; border-spacing:0; }
.compare-table th, .compare-table td{ padding:16px 12px; text-align:center; vertical-align:middle; }
.compare-table thead th{
  font-family:var(--bf-zen); font-weight:700; font-size:15px; color:#7a6f66;
  background:#fff; border-bottom:2px solid var(--bf-tint);
}
.compare-table thead th:first-child{ background:transparent; border:none; }
.compare-table th.ct-row{
  text-align:left; font-family:var(--bf-zen); font-weight:700; font-size:14px; color:var(--bf-ink);
  background:#fff; white-space:nowrap; border-bottom:1px solid var(--bf-tint);
}
.compare-table tbody td{
  background:#fff; border-bottom:1px solid var(--bf-tint); font-family:var(--bf-gthc);
}
.compare-table td i{ display:block; font-style:normal; font-weight:800; font-size:22px; color:#b9ada3; line-height:1; }
.compare-table td span{ display:block; margin-top:5px; font-size:11.5px; color:#9a8f86; font-weight:600; }
/* highlighted BabuuFit column */
.compare-table .ct-us{ position:relative; }
.compare-table thead th.ct-us{
  color:#fff; background:linear-gradient(140deg,var(--bf-orange),var(--bf-orange-l));
  font-weight:900; font-size:17px; border:none;
  border-radius:16px 16px 0 0; box-shadow:0 -2px 0 var(--bf-orange);
}
.compare-table tbody td.ct-us{
  background:#fff7f1; border-bottom:1px solid var(--bf-tint);
  border-left:2px solid var(--bf-orange); border-right:2px solid var(--bf-orange);
}
.compare-table tbody tr:last-child td.ct-us{ border-radius:0 0 16px 16px; border-bottom:2px solid var(--bf-orange); }
.compare-table td.ct-us b{ display:block; font-family:var(--bf-zen); font-weight:900; font-size:22px; color:var(--bf-orange); line-height:1; }
.compare-table td.ct-us span{ color:var(--bf-orange-d); font-weight:700; }
.compare-note{
  text-align:center; margin:32px auto 0; max-width:680px;
  font-family:var(--bf-zen); font-weight:700; font-size:clamp(15px,1.9vw,19px); color:var(--bf-ink); line-height:1.8;
}
.compare-note b{ color:var(--bf-orange-d); font-weight:900; }

/* compare table — fit mobile width, no horizontal scroll */
@media(max-width:560px){
  .compare-wrap{ overflow-x:visible !important; }
  .compare-table{ min-width:0 !important; }
  .compare-table th, .compare-table td{ padding:11px 5px !important; }
  .compare-table thead th{ font-size:11.5px !important; }
  .compare-table thead th.ct-us{ font-size:13px !important; }
  .compare-table th.ct-row{ font-size:11.5px !important; white-space:normal !important; line-height:1.35; }
  .compare-table td span{ display:none !important; }
  .compare-table td i{ font-size:17px !important; }
  .compare-table td.ct-us b{ font-size:15px !important; }
}

/* ============================================================
   MOBILE compactness — tighter sections, stacked middle CTA (2026-06-18)
   ============================================================ */
@media(max-width:640px){
  .flyer-section{ padding-top:42px !important; padding-bottom:42px !important; }
  .section-title{ margin-bottom:26px !important; }
  /* middle CTA: stack, smaller, breathable */
  .middle-cta{
    grid-template-columns:1fr !important; justify-items:center !important; gap:14px !important;
    padding:26px 20px !important; border-radius:22px !important;
  }
  .middle-cta .badge-round{ width:64px !important; height:64px !important; font-size:13px; }
  .middle-cta h2{ font-size:22px !important; line-height:1.5 !important; }
  .middle-cta p{ font-size:13px !important; }
  .middle-cta .line-btn{ width:auto !important; padding:14px 26px !important; font-size:16px !important; }
}

/* ============================================================
   FAQ — Q/A badges
   ============================================================ */
.faq{ background:var(--bf-tint2); position:relative; overflow:hidden; }
.faq::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(232,93,34,.06) 2px, transparent 2px); background-size:26px 26px; opacity:.6;
}
.faq > *{ position:relative; z-index:1; }
.faq-grid details{
  background:#fff !important; border:1px solid var(--bf-tint) !important; border-radius:16px !important;
  box-shadow:0 8px 22px rgba(200,76,22,.07) !important; overflow:hidden;
}
.faq-grid summary{
  position:relative; list-style:none; cursor:pointer; font-family:var(--bf-zen) !important; font-weight:700 !important;
  padding:20px 56px 20px 58px !important; color:var(--bf-ink) !important;
}
.faq-grid summary::-webkit-details-marker{ display:none; }
.faq-grid summary::before{
  content:"Q"; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%; background:var(--bf-orange); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--bf-zen); font-weight:900;
}
.faq-grid summary::after{
  content:""; position:absolute; right:22px; top:50%; width:12px; height:12px; margin-top:-8px;
  border-right:2.6px solid var(--bf-orange); border-bottom:2.6px solid var(--bf-orange);
  transform:rotate(45deg); transition:transform .22s;
}
.faq-grid details[open] summary::after{ transform:rotate(-135deg); }
.faq-grid details p{
  position:relative; padding:0 22px 22px 58px !important; color:var(--muted) !important; font-family:var(--bf-gthc);
}
.faq-grid details p::before{
  content:"A"; position:absolute; left:16px; top:-2px;
  width:32px; height:32px; border-radius:50%; background:var(--bf-tint); color:var(--bf-orange-d);
  display:flex; align-items:center; justify-content:center; font-family:var(--bf-zen); font-weight:900;
}

/* ============================================================
   FINAL CTA — full-width gradient band, arched top
   ============================================================ */
.final-cta{
  background:linear-gradient(125deg,var(--bf-orange),var(--bf-orange-l)) !important;
  position:relative; overflow:hidden; border-radius:60px 60px 0 0 / 50px 50px 0 0;
  padding:clamp(44px,6vw,76px) clamp(22px,5vw,70px) !important;
}
.final-cta::before{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.13); }
.final-cta::after{ content:""; position:absolute; left:-50px; bottom:-70px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.10); }
.final-cta > *{ position:relative; z-index:1; }
.final-cta h2{ color:#fff !important; font-family:var(--bf-zen) !important; font-weight:900 !important; }
.final-cta p{ color:rgba(255,255,255,.94) !important; }
.final-cta img{ border-radius:20px !important; box-shadow:0 18px 44px rgba(0,0,0,.22) !important; }
.final-cta .line-btn{ background:#fff !important; color:var(--bf-orange-d) !important; box-shadow:0 14px 30px rgba(0,0,0,.2); }
.final-cta .line-btn b{ background:var(--bf-orange) !important; color:#fff !important; }

/* ============================================================
   FIXED CTA — gentle pulse
   ============================================================ */
.fixed-cta{ animation:bf-pulse 2.4s ease-in-out infinite; }
.final-cta h2{ white-space:normal !important; text-wrap:balance; }
@keyframes bf-pulse{ 0%,100%{ box-shadow:0 10px 24px rgba(6,199,85,.30); } 50%{ box-shadow:0 10px 30px rgba(6,199,85,.55); } }

/* ============================================================
   Real trainer portrait framing
   ============================================================ */
.trainer-grid img{ object-fit:cover; }
.trainer-grid img.t-hotta{ object-position:63% 26%; }
.trainer-grid img.t-kobayashi{ object-position:42% 30%; }
.trainer-grid img.t-kawakami{ object-position:50% 24%; }
.trainer-grid img.t-morimoto{ object-position:50% 20%; }

/* ===== HERO — week-4 badge: tighten text inside the circle ===== */
.circle{
  width:150px !important; height:150px !important; padding:0 !important;
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font-size:12.5px !important; line-height:1.4 !important;
}
.circle strong{ font-size:30px !important; line-height:1 !important; display:block; margin:2px 0; }

/* ===== HERO — PC split layout: person on the right, text on clean cream ===== */
@media(min-width:1101px){
  .hero{ background:var(--bf-cream) !important; }
  .hero-bg{ background:var(--bf-cream) !important; }
  .hero-inner{ align-items:stretch !important; }
  .hero-side{
    position:relative !important; min-height:520px !important; align-self:stretch !important;
    background:url('assets/hero-bg.webp') 54% 28% / cover no-repeat !important;
    border-radius:30px !important; box-shadow:0 26px 60px rgba(52,40,31,.18) !important;
    overflow:visible !important;
  }
  .circle{ right:18px !important; top:18px !important; }
  .hero-copy .line-btn.big{ display:flex !important; width:fit-content; margin-left:auto !important; margin-right:auto !important; }
}

/* ============================================================
   Mobile tidy
   ============================================================ */
@media(max-width:640px){
  .checks{ grid-template-columns:1fr !important; }
  .checks p:last-child:nth-child(odd){ grid-column:auto; max-width:none; }
  .middle-cta{ margin:8px auto !important; border-radius:24px; }
  .flow-grid > div:not(:last-child)::after{ display:none; }
  .final-cta{ border-radius:40px 40px 0 0 / 30px 30px 0 0; }
  .line-mini:after{ content:"はじめる" !important; }
}

/* ============================================================
   Sticky header with hamburger menu  (2026-06-18)
   ============================================================ */
.header{ display:none !important; }

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(10px,1.6vw,16px) clamp(16px,4vw,40px);
  background:rgba(255,255,255,.86); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(232,93,34,.10);
}
.sh-logo{ line-height:0; display:flex; align-items:center; gap:12px; text-decoration:none; }
.sh-logo img{ height:clamp(34px,3.4vw,46px); width:auto; display:block; }
.sh-tag{
  font-family:var(--bf-zen); font-weight:700; font-size:13px; line-height:1.3; color:var(--bf-ink);
  padding-left:12px; border-left:1.5px solid rgba(232,93,34,.22);
}
@media(max-width:680px) and (min-width:641px){ .sh-tag{ display:none; } }

.sh-burger{
  width:48px; height:48px; border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border-radius:14px; transition:background .2s; padding:0;
}
.sh-burger:hover{ background:rgba(232,93,34,.08); }
.sh-burger span{
  display:block; width:26px; height:3px; border-radius:99px; background:var(--bf-ink);
  transition:transform .28s ease, opacity .2s ease;
}
.sh-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.sh-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.sh-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* push hero below the fixed header — DESKTOP ONLY (mobile keeps its 315px image band) */
.hero{ position:relative; }
@media(min-width:641px){
  .hero{ padding-top:clamp(78px,9vw,104px) !important; }
}

.sh-menu{
  position:fixed; inset:0; z-index:70; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(150deg,var(--bf-orange),var(--bf-orange-l));
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.sh-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.sh-close{
  position:absolute; top:18px; right:22px; width:48px; height:48px;
  border:none; background:rgba(255,255,255,.18); color:#fff; font-size:30px; line-height:1;
  border-radius:50%; cursor:pointer; transition:background .2s;
}
.sh-close:hover{ background:rgba(255,255,255,.3); }
.sh-menu ul{ list-style:none; margin:0; padding:0; text-align:center; }
.sh-menu li{ margin:6px 0; }
.sh-menu li a{
  font-family:var(--bf-zen); font-weight:700; font-size:clamp(22px,4vw,30px); color:#fff;
  text-decoration:none; display:inline-block; padding:8px 18px; position:relative;
}
.sh-menu li a::after{
  content:""; position:absolute; left:50%; bottom:2px; width:0; height:3px; border-radius:99px;
  background:#fff; transform:translateX(-50%); transition:width .25s;
}
.sh-menu li a:hover::after{ width:60%; }
.sh-menu-cta{
  margin-top:24px; display:inline-flex; align-items:center; gap:9px;
  background:#fff; color:var(--bf-orange-d); font-family:var(--bf-zen); font-weight:900;
  font-size:18px; padding:15px 34px; border-radius:99px; text-decoration:none;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.sh-menu-cta b{
  background:var(--bf-orange); color:#fff; font-size:13px; padding:4px 11px; border-radius:99px;
}
body.menu-open{ overflow:hidden; }

/* ============================================================
   English eyebrows — more breathing room, no overlap  (2026-06-18)
   ============================================================ */
.section-title{ padding-top:14px; word-break:auto-phrase; text-wrap:balance; }
.section-title::before{ margin-bottom:18px !important; line-height:1 !important; }
.worries-copy h2{ padding-top:14px !important; }
.worries-copy h2::before{ margin-bottom:22px !important; }

/* ============================================================
   MOBILE hero — start image BELOW the fixed header so the
   subject's face isn't hidden; show compact service tag (2026-06-18)
   ============================================================ */
@media(max-width:640px){
  /* solid header so the strip above the photo reads clean */
  .site-header{
    background:#fff !important; box-shadow:0 2px 14px rgba(52,40,31,.07) !important;
    border-bottom:1px solid rgba(232,93,34,.10) !important;
    padding:8px 16px !important;
  }
  /* stack logo + compact tagline */
  .sh-logo{ flex-direction:row !important; align-items:center !important; gap:10px !important; }
  .sh-logo img{ height:34px !important; flex:none; }
  .sh-tag{
    display:block !important; font-size:10.5px !important; line-height:1.3 !important;
    padding-left:10px !important; border-left:1.5px solid rgba(232,93,34,.25) !important; color:var(--bf-ink) !important;
    letter-spacing:0;
  }

  /* push the photo band below the ~62px header, frame the subject big */
  .hero{ padding-top:434px !important; background:#fff !important; }
  .hero-bg{
    top:62px !important; left:0 !important; right:0 !important; bottom:auto !important;
    height:372px !important; opacity:1 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0) 74%, rgba(255,255,255,.90) 100%),
      url('assets/hero-bg.webp') 55% 16% / cover no-repeat !important;
  }
  .hero-inner{
    padding:8px 20px 36px !important; position:relative; z-index:2; background:#fff !important;
  }
  .hero-copy{ padding:0 !important; max-width:100% !important; text-align:center !important; }
  .hero-head{ display:block !important; }
  .hero .service-tag{ margin-left:auto !important; margin-right:auto !important; }
  .hero h1{ font-size:clamp(34px,8.8vw,44px) !important; line-height:1.3 !important; }
  .sub{ font-size:15px !important; line-height:1.7 !important; }
  /* keep section headings on a single line, auto-scaled to fit */
  .section-title, .worries-copy h2{ white-space:nowrap !important; font-size:min(23px,6.1vw) !important; }
  /* break the emphasised phrase onto its own line on mobile */
  .app-screens .screens-lead b, .compare-note b{ display:block; margin-top:2px; }
}

/* ============================================================
   FREE TRIAL emphasis + repeated CTA bands  (2026-06-23)
   ============================================================ */
/* hero price block — 3-day free trial as the headline */
.trial-line{
  flex-basis:100%; order:-1; margin:0 auto 2px;
  font-family:var(--bf-zen); font-weight:900; font-size:clamp(19px,2.5vw,25px);
  color:var(--bf-ink); line-height:1.35;
}
.trial-line strong{
  font-size:1.55em; color:var(--bf-orange);
  background:linear-gradient(transparent 58%, var(--bf-mark) 58%); padding:0 .05em; margin:0 .04em;
}
.price-block .price-amt .label{ font-size:15px !important; color:#6f655c; }
.price-block .price-amt .was-price{ font-size:22px; }

/* microcopy under any CTA button */
.cta-microcopy{
  flex-basis:100%; margin:11px auto 0; text-align:center;
  font-size:12.5px; color:#8a7f76; font-family:var(--bf-gthc); line-height:1.6;
}

/* plan card — free-trial banner + full-width button */
.trial-banner{
  display:inline-flex; align-items:center; gap:8px; margin:2px auto 6px;
  font-family:var(--bf-zen); font-weight:900; font-size:clamp(17px,2.1vw,21px); color:#fff;
  background:linear-gradient(135deg,var(--bf-orange),var(--bf-orange-l));
  padding:9px 22px; border-radius:99px; box-shadow:0 10px 22px rgba(232,93,34,.30);
}
.trial-banner b{ font-size:1.4em; }
.main-plan .big-price > span:first-child{ font-size:16px !important; }
.main-plan .line-btn{ margin:20px auto 0; width:100%; max-width:360px; }

/* repeated inline CTA bands */
.cta-inline{
  text-align:center; background:var(--bf-tint2);
  padding-top:clamp(38px,5vw,58px) !important; padding-bottom:clamp(38px,5vw,58px) !important;
}
.cta-inline.cta-inline-alt{ background:#fff; }
.cta-inline-lead{
  font-family:var(--bf-zen); font-weight:900; font-size:clamp(19px,2.6vw,27px); color:var(--bf-ink);
  margin:0 0 22px; line-height:1.55; text-wrap:balance;
}
.cta-inline-lead b{ color:var(--bf-orange-d); }
.cta-inline .line-btn{ margin:0 auto; }
.cta-inline .cta-microcopy{ margin-top:14px; }

@media(max-width:640px){
  .fixed-cta{ font-size:14px !important; padding:13px 16px !important; }
  .fixed-cta b{ width:34px !important; height:34px !important; margin-right:7px !important; }
  .trial-line{ font-size:19px !important; }
  .cta-inline{ padding-top:38px !important; padding-bottom:38px !important; }
}

/* ============================================================
   BEFORE / AFTER results showcase  (2026-06-23)
   ============================================================ */
.beforeafter{ background:#fff; }
.ba-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1040px; margin:8px auto 0;
}
@media(max-width:860px){ .ba-grid{ grid-template-columns:1fr; max-width:460px; } }
.ba-card{
  background:#fff; border:1px solid var(--bf-tint); border-radius:20px; overflow:hidden;
  box-shadow:0 14px 36px rgba(200,76,22,.10);
}
.ba-photos{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0; }
.ba-slot{ position:relative; }
.ba-img{
  aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:repeating-linear-gradient(135deg,#fbeee4 0 14px,#fdf5ee 14px 28px); color:var(--bf-orange-l);
}
.ba-img svg{ width:34px; height:34px; }
.ba-img span{ font-family:var(--bf-zen); font-weight:700; font-size:12px; color:#b89478; }
.ba-badge{
  position:absolute; top:10px; left:10px; z-index:2; font-family:var(--bf-zen); font-weight:700;
  font-size:11px; color:#fff; padding:4px 11px; border-radius:99px; letter-spacing:.04em;
}
.ba-before{ background:#9a8f86; }
.ba-after{ background:linear-gradient(135deg,var(--bf-orange),var(--bf-orange-l)); }
.ba-arrow{
  width:34px; height:34px; position:relative; z-index:3; margin:0 -12px; align-self:center; justify-self:center;
  background:#fff; border-radius:50%; box-shadow:0 4px 12px rgba(52,40,31,.18);
}
.ba-arrow::after{
  content:""; position:absolute; top:50%; left:46%; width:8px; height:8px;
  border-right:2.6px solid var(--bf-orange); border-top:2.6px solid var(--bf-orange);
  transform:translate(-50%,-50%) rotate(45deg);
}
.ba-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:16px 18px 0;
}
.ba-tag{
  font-family:var(--bf-zen); font-weight:700; font-size:12px; color:var(--bf-orange-d);
  background:var(--bf-tint); padding:5px 12px; border-radius:99px;
}
.ba-meta b{ font-family:var(--bf-zen); font-weight:900; font-size:clamp(22px,2.7vw,28px); color:var(--bf-ink); line-height:1; }
.ba-meta b i{ font-style:normal; font-size:.6em; color:var(--bf-orange); margin-left:1px; }
.ba-card > p{
  margin:12px 18px 20px; font-family:var(--bf-gthc); font-weight:500; color:#5a514a; line-height:1.85; font-size:14px; text-align:center;
}
.ba-card > p small{ display:block; margin-top:8px; color:#8a7f76; font-family:var(--bf-zen); font-weight:700; font-size:12.5px; }

/* ============================================================
   DEVICES — anytime / anywhere  (2026-06-23)
   ============================================================ */
.devices{ background:var(--bf-tint2); position:relative; overflow:hidden; }
.devices::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(232,93,34,.06) 2px, transparent 2px); background-size:26px 26px; opacity:.6;
}
.devices > *{ position:relative; z-index:1; }
.device-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:840px; margin:8px auto 0;
}
@media(max-width:620px){ .device-row{ grid-template-columns:1fr; max-width:360px; } }
.device{
  background:#fff; border:1px solid var(--bf-tint); border-radius:20px; padding:30px 20px;
  text-align:center; box-shadow:0 12px 30px rgba(200,76,22,.09);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.device svg{ width:52px; height:52px; color:var(--bf-orange); }
.device b{ font-family:var(--bf-zen); font-weight:900; font-size:18px; color:var(--bf-ink); }
.device span{ font-family:var(--bf-gthc); font-weight:600; font-size:13px; color:#7a6f66; }
.devices-note{ text-align:center; margin:26px auto 0; max-width:680px; font-size:13px; color:#8a7f76; font-family:var(--bf-gthc); line-height:1.7; }