:root{
  --gold: #C8A64B;
  --gold-600: #B89232;
  --ink: #111;
  --ink-60:#666;
  --bg:#fff;
  --bg-soft:#faf7ef;
  --card:#fff;
  --border:#e9e5d9;
  --shadow: 0 6px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
  line-height:1.6;
}

a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-mark{width:24px;height:24px;border-radius:6px;background:var(--gold)}
.nav{display:flex;gap:18px;align-items:center}
.btn{display:inline-block;padding:.65rem 1rem;border-radius:10px;font-weight:700;border:1px solid transparent;transition:.2s}
.btn-primary{background:var(--gold);color:#fff}
.btn-gold{background:var(--gold);color:#fff}

/* Hero */
.hero{background:var(--bg-soft);padding:56px 0;border-bottom:1px solid var(--border)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero-copy h1{font-size:40px;margin:0 0 8px}
.hero-copy .sub{color:var(--ink-60);margin:0 0 20px}
.hero-cta{display:flex;gap:12px}
.hero-art{height:220px;border-radius:16px;background:linear-gradient(135deg,#f2e8c8,#e7d7a0);box-shadow:var(--shadow)}

/* Cards */
.card, .plan{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:24px;text-align:center;position:relative;display:flex;flex-direction:column;overflow: visible;}
.card-strong{border-color:#222}
.card h3{margin:0 0 8px;font-size:16px}
.price{font-size:28px;font-weight:800;margin:8px 0 14px}

/* thin separator inside plan cards (bottom-aligned for equal height) */
.plan-sep{
  height:1px;
  background:linear-gradient(90deg,transparent 0,#eee 15%,#eee 85%,transparent 100%);
  margin-top:auto;   /* push separator to the same bottom line */
  margin-bottom:16px;
}

.features{list-style:none;margin:0;padding:0;color:var(--ink-60);flex: 1 1 auto;}
.features li{margin:.35rem 0}

/* Plan-specific feature list */
.plan-feats{list-style:none;margin:0;padding:0;color:var(--ink-60);flex:1 1 auto}
.plan-feats li{margin:.35rem 0}

.plan-head{text-align:center}

/* Burst (base) - positioned badge */
.burst{
  position:absolute; top:-12px; right:-12px;
  display:grid; place-items:center;
  width:88px; height:88px;
  color:#fff; font-weight:800; line-height:1.1; text-align:center;
  z-index:2;
}

/* Starburst (recommended) */
.burst-reco{
  background:#e53935;
  clip-path: polygon(50% 0%, 61% 10%, 75% 5%, 80% 20%, 95% 25%, 85% 39%, 100% 50%, 85% 61%, 95% 75%, 80% 80%, 75% 95%, 61% 90%, 50% 100%, 39% 90%, 25% 95%, 20% 80%, 5% 75%, 15% 61%, 0% 50%, 15% 39%, 5% 25%, 20% 20%, 25% 5%, 39% 10%);
  transform: rotate(-6deg);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* Pricing section */
.pricing{padding:56px 0 32px}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-3{display:grid}
.pricing .grid-3{grid-template-columns:repeat(3,300px);justify-content:center;gap:24px}
.pricing .grid-3{ align-items: stretch; }
.pricing .card, .pricing .plan{max-width:300px}

/* --- Fix: pricing cards line-up --- */
/* support container named .pricing-grid as well */
.pricing-grid{display:grid;gap:24px;align-items:stretch;grid-template-columns:repeat(3,minmax(260px,1fr));justify-content:center}
/* make sure cards are not capped */
.pricing-grid .card, .pricing-grid .plan{max-width:unset}

/* 2 columns on medium screens */
@media (max-width:1100px){
  .pricing-grid{grid-template-columns:repeat(2,minmax(260px,1fr))}
}
/* 1 column on small screens */
@media (max-width:720px){
  .pricing-grid{grid-template-columns:1fr}
}

/* Plan compare */
.plan-compare{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);text-align:left}
.plan-compare h4{margin:0 0 6px;font-size:14px;font-weight:700}
.bullets{list-style:none;margin:0;padding:0;font-size:14px;color:var(--ink-60)}
.bullets li{position:relative;padding-left:20px;margin:6px 0}
.bullets li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:var(--gold-600)}

/* push CTA to card bottom */
.card .btn,
.plan-cta{ margin-top:auto; }

/* Price highlight */
.old-price{
  text-decoration:line-through;
  text-decoration-color:#e53935; /* vivid red strike */
  text-decoration-thickness:3px;
  text-decoration-skip-ink:none;
  color:#666; /* keep text readable under the line */
  margin-right:6px;
}

/* How-to */
.howto{padding:24px 0 64px}
.step{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:20px}
.step h3{margin:.2rem 0 .4rem;font-size:16px}

/* Footer */
.site-footer{background:var(--gold);color:#fff;margin-top:32px}
.footer-inner{padding:28px 0;text-align:center}
.brand-mark--inv{background:#fff;opacity:.9}
.brand-name--inv{font-weight:700}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .pricing .grid-3{grid-template-columns:1fr}
  .burst{top:-10px;right:10px}
}

/* Utility: screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Popular badge (black pill) */
.badge-popular{position:absolute;top:10px;right:10px;background:#111;color:#fff;font-size:12px;padding:4px 8px;border-radius:999px;font-weight:700}

/* Countries notice bar */
.notice-countries{background:#fff7e0;border-block:1px solid #f1e2b6;color:#5b4a1f}
.notice-countries .container{padding:10px 20px}

/* unify plan CTA visuals */
.plan .btn{min-width:140px}

/* === Forward Tokyo: fixes 2025-08-26 === */
/* 1) Unify CTA button look inside pricing cards (FREE card included) */
.plan .btn,
.plan a.btn,
.plan button,
.plan a[href*="register"],
.plan a[href*="signup"],
.plan a[href*="sign-up"]{
  display:inline-block;
  padding:.65rem 1rem;
  border-radius:10px;
  background:var(--gold);
  color:#fff;
  font-weight:700;
  border:1px solid transparent;
  min-width:140px;
  text-align:center;
}

/* 2) Make any old price shown with <s> or <del> render as a thick red strike */
.plan s,
.plan del{
  text-decoration:line-through;
  text-decoration-color:#e53935; /* vivid red */
  text-decoration-thickness:3px;
  text-decoration-skip-ink:none;
  color:#666;
  margin-right:6px;
}

/* 3) Align separators & buttons by equalizing features height */
.plan{display:flex;flex-direction:column}
.plan .features{flex:1 1 auto; min-height:220px;} /* tune if you change copy length */
/* 3.1) Normalize the note block right under price so cards with more note lines don't push things */
.plan .price + p{
  min-height:64px;
  display:block;
  margin-top:8px;   /* add spacing below price */
  line-height:1.4;
  white-space:normal; /* allow wrapping naturally */
}
.plan .plan-sep{margin-top:auto}

/* ==== FT fix: align FREE card separator & avoid extra vertical space (2025-08-26) ==== */

/* 1) Reserve a small, consistent note slot right under the price for ALL plans. 
   Cards that actually have a note (<p> right after .price) will cancel this space. */
.plan .price::after{
  content:"";
  display:block;
  height:44px;          /* keep compact; was larger before and felt too airy */
}
/* If there is a real note paragraph after the price, remove the reserved slot */
.plan .price:has(+ p)::after{ height:0; }

/* 2) Normalize the real note paragraph block height (so annual note doesn't push things). */
.plan .price + p{
  min-height:44px;      /* match the reserved slot above */
  margin:8px 0 0;       /* small gap under price */
  line-height:1.45;
}

/* 3) Keep features area consistent but not too tall so separators line up. */
.plan .features{ min-height:180px; }

/* 4) Ensure the thin separator sits on the same baseline across cards. */
.plan .plan-sep{ margin-top:auto; }

/* 5) On medium / small screens relax heights to avoid overly tall cards. */
@media (max-width:1100px){
  .plan .features{ min-height:160px; }
  .plan .price::after{ height:36px; }
  .plan .price + p{ min-height:36px; }
}
@media (max-width:720px){
  .plan .features{ min-height:0; }
  .plan .price::after{ height:0; }
  .plan .price + p{ min-height:0; }
}