/* =====================================================================
   PLAYBOOK LANDING — FSC DESIGN LANGUAGE
   ---------------------------------------------------------------------
   Mirrors the visual system of /en/free-strategy-call/ (gradient hero,
   eyebrow pills, white bordered cards, soft shadows). Self-contained:
   every class is namespaced `pbf-*` under page scope `.pbf-page`. The
   legacy `.playbook-*` system (shared with hub/article pages) is left
   untouched. Tokens come from styles.css. Font stays Inter (site default).
   Used only on /en/playbook/ and /jp/playbook/ index pages.
===================================================================== */

.pbf-page{ background:#fff; }


/* =========================
   EYEBROW (shared pill)
========================= */
.pbf-eyebrow{
  display:inline-block;
  margin:0 0 14px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(0,113,235,.08);
  color:var(--blue);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}


/* =========================
   HERO
========================= */
.pbf-hero{
  position:relative;
  overflow:hidden;
  padding:88px 22px 72px;
  background:
    radial-gradient(1200px 480px at 80% -10%, rgba(107,77,230,.10), transparent 60%),
    radial-gradient(900px 420px at 5% 0%, rgba(0,113,235,.10), transparent 60%),
    linear-gradient(180deg, #f7f9fd 0%, #ffffff 100%);
  border-bottom:1px solid var(--border-subtle);
}

.pbf-hero-inner{
  max-width:920px;
  margin:0 auto;
  text-align:center;
}

.pbf-hero-title{
  margin:0 auto 22px;
  max-width:20ch;
  font-size:clamp(36px, 5.4vw, 64px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--text-main);
  text-wrap:balance;
}

.pbf-hero-title-accent{
  background:linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.pbf-hero-deck{
  max-width:64ch;
  margin:0 auto 28px;
  font-size:var(--large);
  line-height:1.65;
  color:var(--text-muted);
  text-wrap:pretty;
}

/* Micro-facts chip row (white bordered pills with an icon) */
.pbf-hero-meta{
  list-style:none;
  padding:0;
  margin:0 auto 30px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 14px;
}
.pbf-hero-meta li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border-default);
  box-shadow:var(--shadow-soft);
  font-size:var(--small);
  font-weight:500;
  color:var(--text-main);
}
.pbf-hero-meta svg{ width:16px; height:16px; flex-shrink:0; }
.pbf-ico-blue{ color:var(--blue); }
.pbf-ico-green{ color:var(--green); }
.pbf-ico-purple{ color:var(--purple); }

.pbf-hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin:0 0 36px;
}

/* Author byline chip */
.pbf-hero-byline{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 18px 8px 8px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border-default);
  box-shadow:var(--shadow-soft);
  text-decoration:none;
  transition:box-shadow .2s, transform .2s;
}
.pbf-hero-byline:hover{
  box-shadow:0 14px 30px rgba(17,24,39,.10);
  transform:translateY(-1px);
}
.pbf-hero-byline-avatar{
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.pbf-hero-byline-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  line-height:1.25;
}
.pbf-hero-byline-name{
  font-size:var(--small);
  font-weight:700;
  color:var(--text-main);
}
.pbf-hero-byline-role{
  font-size:12px;
  color:var(--text-muted);
}


/* =========================
   INTRO (lead paragraph, flat)
========================= */
.pbf-intro{
  padding:56px 22px 8px;
  background:#fff;
}
.pbf-intro-inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.pbf-intro-text{
  margin:0;
  font-size:var(--large);
  line-height:1.7;
  color:var(--text-muted);
  text-wrap:pretty;
}
.pbf-intro-text a{
  color:var(--blue);
  font-weight:600;
  text-decoration:none;
}
.pbf-intro-text a:hover{ text-decoration:underline; }


/* =========================
   HUBS
========================= */
.pbf-hubs{
  padding:72px 22px 96px;
  background:#fff;
}
.pbf-hubs-inner{
  max-width:1120px;
  margin:0 auto;
}
.pbf-hubs-header{
  text-align:center;
  max-width:720px;
  margin:0 auto 56px;
}
.pbf-hubs-title{
  margin:0 0 14px;
  font-size:clamp(28px, 3.6vw, 44px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.03em;
  color:var(--text-main);
  text-wrap:balance;
}
.pbf-hubs-deck{
  margin:0;
  font-size:var(--large);
  line-height:1.65;
  color:var(--text-muted);
}

.pbf-hub-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

/* Card */
.pbf-hub-card{
  --pbf-accent:var(--blue);
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:28px;
  background:#fff;
  border:1px solid var(--border-default);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  transition:transform .25s cubic-bezier(.2,0,0,1), box-shadow .25s ease, border-color .25s ease;
}
.pbf-hub-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--pbf-accent) 45%, transparent);
  box-shadow:0 22px 44px color-mix(in srgb, var(--pbf-accent) 20%, transparent);
}
.pbf-hub-card:hover .pbf-hub-icon{ transform:scale(1.06); }
.pbf-hub-card:hover .pbf-hub-title{ color:var(--pbf-accent); }

/* Card head: icon tile + heading */
.pbf-hub-card-top{
  display:flex;
  align-items:center;
  gap:14px;
}
.pbf-hub-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  flex-shrink:0;
  border-radius:14px;
  line-height:1;
  background:color-mix(in srgb, var(--pbf-accent) 12%, transparent);
  color:var(--pbf-accent);
  transition:transform .25s cubic-bezier(.2,0,0,1);
}
.pbf-hub-icon svg{ width:24px; height:24px; }
.pbf-hub-label{
  margin:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pbf-accent);
}
.pbf-hub-title{
  margin:4px 0 0;
  font-size:var(--large);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--text-main);
  transition:color .18s ease;
}

/* Per-category accent — one variable drives icon tint, label, hover glow, rows, CTA */
.pbf-hub-card[data-accent="blue"]   { --pbf-accent:var(--blue); }
.pbf-hub-card[data-accent="green"]  { --pbf-accent:var(--green); }
.pbf-hub-card[data-accent="yellow"] { --pbf-accent:var(--yellow-hover); }
.pbf-hub-card[data-accent="purple"] { --pbf-accent:var(--purple); }

.pbf-hub-desc{
  margin:18px 0 0;
  font-size:var(--default);
  line-height:1.6;
  color:var(--text-muted);
}

/* Guides / Tools groups — flat rows */
.pbf-hub-links{ margin-top:20px; }
.pbf-hub-links + .pbf-hub-links{ margin-top:14px; }
.pbf-hub-links-label{
  margin:0 0 4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.pbf-hub-list{
  list-style:none;
  margin:0 -12px;
  padding:0;
}
.pbf-hub-list a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text-main);
  font-size:var(--default);
  font-weight:500;
  line-height:1.4;
  transition:color .15s ease, background-color .15s ease;
}
.pbf-hub-list a span{ flex:1 1 auto; min-width:0; }
/* Leading item glyph (Material/Lucide-style), tinted in the card accent */
.pbf-hub-list-ico{
  width:20px; height:20px;
  flex-shrink:0;
  color:var(--pbf-accent);
  opacity:.9;
}
/* Trailing chevron */
.pbf-hub-list a > svg:last-child{
  width:18px; height:18px;
  flex-shrink:0;
  color:var(--border-default);
  transition:transform .2s ease, color .15s ease;
}
.pbf-hub-list a:hover{
  color:var(--pbf-accent);
  background:color-mix(in srgb, var(--pbf-accent) 8%, transparent);
}
.pbf-hub-list a:hover > svg:last-child{ transform:translateX(4px); color:var(--pbf-accent); }

/* Card footer link */
.pbf-hub-foot{
  margin-top:auto;
  padding-top:20px;
}
.pbf-hub-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  background:color-mix(in srgb, var(--pbf-accent) 10%, transparent);
  color:var(--pbf-accent);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .18s ease;
}
.pbf-hub-more:hover{ background:color-mix(in srgb, var(--pbf-accent) 18%, transparent); }
.pbf-hub-more svg{
  width:16px; height:16px;
  transition:transform .2s ease;
}
.pbf-hub-more:hover svg{ transform:translateX(4px); }


/* =========================
   BOTTOM CTA
========================= */
.pbf-cta{
  padding:80px 22px 96px;
  background:#f7f9fd;
}
.pbf-cta-inner{
  max-width:880px;
  margin:0 auto;
}
.pbf-cta-card{
  position:relative;
  overflow:hidden;
  padding:56px 56px 48px;
  background:#fff;
  background-image:
    radial-gradient(720px 280px at 85% -20%, rgba(107,77,230,.10), transparent 60%),
    radial-gradient(700px 320px at 0% 0%, rgba(0,113,235,.08), transparent 60%);
  border:1px solid var(--border-default);
  border-radius:24px;
  text-align:center;
  box-shadow:0 24px 56px rgba(17,24,39,.06);
}
.pbf-cta-title{
  margin:0 0 14px;
  font-size:clamp(28px, 3.6vw, 42px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.03em;
  color:var(--text-main);
  text-wrap:balance;
}
.pbf-cta-deck{
  margin:0 auto 32px;
  max-width:56ch;
  font-size:var(--large);
  line-height:1.6;
  color:var(--text-muted);
  text-wrap:pretty;
}
.pbf-cta-actions{
  display:flex;
  justify-content:center;
  margin:0 0 32px;
}
.pbf-cta-btn{
  min-width:260px;
  padding:16px 32px;
  font-size:18px;
  font-weight:600;
  border-radius:14px;
}
/* Sign-off chip (author) */
.pbf-cta-signoff{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 18px 8px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--border-subtle);
  text-decoration:none;
  transition:background .18s, transform .18s, box-shadow .18s;
  backdrop-filter:blur(6px);
}
.pbf-cta-signoff:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(17,24,39,.07);
}
.pbf-cta-avatar{
  width:36px; height:36px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.pbf-cta-signoff-text{
  font-size:13px;
  line-height:1.4;
  color:var(--text-muted);
  text-align:left;
}
.pbf-cta-signoff-text strong{
  display:block;
  font-weight:700;
  color:var(--text-main);
  margin-bottom:1px;
}


/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .pbf-hub-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px){
  .pbf-hub-grid{ grid-template-columns:1fr; }
  .pbf-hubs{ padding:56px 18px 72px; }
  .pbf-cta{ padding:56px 18px 72px; }
  .pbf-cta-card{ padding:40px 24px 32px; border-radius:20px; }
  .pbf-cta-btn{ width:100%; max-width:360px; min-width:0; }
}
@media (max-width: 640px){
  .pbf-hero{ padding:60px 18px 52px; }
  .pbf-intro{ padding:44px 18px 4px; }
  .pbf-hero-byline-role{ display:none; }
  .pbf-hero-byline{ padding:6px 16px 6px 6px; }
}


/* =========================
   JAPANESE LOCALE OVERRIDES
   CJK needs no letter-spacing tightening + a bit more line-height.
========================= */
html[lang="ja"] .pbf-hero-title{
  font-size:clamp(30px, 4.4vw, 52px);
  max-width:none;
  letter-spacing:0;
  line-height:1.25;
  text-wrap:pretty;
}
html[lang="ja"] .pbf-hero-deck,
html[lang="ja"] .pbf-intro-text,
html[lang="ja"] .pbf-hubs-deck,
html[lang="ja"] .pbf-cta-deck{
  letter-spacing:0;
  text-wrap:pretty;
}
html[lang="ja"] .pbf-hubs-title,
html[lang="ja"] .pbf-cta-title{
  letter-spacing:0;
  line-height:1.3;
  text-wrap:pretty;
}
html[lang="ja"] .pbf-hub-title,
html[lang="ja"] .pbf-hub-list a{
  letter-spacing:0;
  line-height:1.4;
}