/* Pass 4 — layout-level art direction (dark-first page, hero rebuild, numerals, flat cards, elevated pricing, FAQ grid). */
/* Loaded last: overrides lp-v8 + section files. CSS + wrapper-level HTML only. Copy/order/plan-cta bytes untouched. */

:root{
  --offwhite:#f3ede0;
  --offwhite-soft:#cbd3de;
  --edge:max(24px,calc((100vw - var(--page))/2));
  --sans:"Noto Sans JP","Yu Gothic",YuGothic,"Hiragino Sans","Meiryo",sans-serif;
}

/* ---------- 1. DARK-FIRST PAGE GROUND ---------- */
html,body{background:var(--ink)}
body{color:var(--offwhite)}

.site-header{background:rgba(11,18,32,.86);border-bottom-color:rgba(201,154,74,.22);color:var(--offwhite)}
.site-header nav a:after{background:var(--gold)}
.header-cta{background:var(--gold);color:var(--ink)}

/* why-section + comparison-section stay the two cream accent surfaces (unchanged cream tokens). */
.hero,
.hayate-section,
.specialists-section,
.price-plans,
.faq-section{background:var(--ink);color:var(--offwhite)}

/* ---------- 2. HERO FULL-BLEED ---------- */
.hero{background:var(--ink)}
.hero .eyebrow{color:var(--gold)}
.hero h1{color:var(--offwhite);font-size:clamp(3.25rem,6vw,6rem)}
@media(max-width:430px){
  .hero h1{font-size:2.25rem;letter-spacing:-.02em}
}
.hero h1 em{color:var(--gold)}
.hero-lead{color:var(--offwhite-soft)}
.hero-subline{color:var(--gold)}
.hero-link-text{color:var(--offwhite-soft)}
.hero-link-text:hover,.hero-link-text:focus-visible{color:var(--gold)}
.button-primary{background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 16px 32px rgba(0,0,0,.35)}
.button-primary:hover,.button-primary:focus-visible{background:#dcb765;box-shadow:0 20px 40px rgba(0,0,0,.4)}

/* Prevent the mobile mate-strip's scroll-snap row (flex children with a vw flex-basis) from
   ballooning hero-visual's implicit grid column via max-content auto-sizing. */
.hero-visual{grid-template-columns:minmax(0,1fr)}
.hayate-stage,.mate-selector{min-width:0}

@media(min-width:1024px){
  .hero{grid-template-columns:1.05fr .95fr;align-items:start;padding-top:calc(82px + 1rem)}
  .hero-visual{overflow:visible;background:none;border:0;box-shadow:none;border-radius:0;grid-template-rows:auto auto}
  .hero-visual:after{display:none}
  .hayate-stage{
    width:calc(100% + var(--edge));
    margin-right:calc(-1 * var(--edge));
    min-height:560px;
    border-radius:0;
    background:radial-gradient(58% 62% at 62% 34%,#2a4f6b 0,#17324c 34%,#0e2038 64%,var(--ink) 100%);
  }
  .hayate-core{bottom:118px;width:400px;height:400px}
  .hayate-core>img{width:392px;mask-image:radial-gradient(62% 72% at 54% 42%,#000 62%,transparent 100%);-webkit-mask-image:radial-gradient(62% 72% at 54% 42%,#000 62%,transparent 100%)}
  .hayate-orbit{display:none}
  .visual-kicker{display:none}
  .hayate-role{
    left:0;bottom:20px;width:auto;min-width:0;max-width:340px;
    transform:none;padding:8px 0 0;background:none;border:0;
    grid-template-columns:auto;column-gap:0;
  }
  .hayate-role small{grid-column:1;grid-row:1;display:block;font-size:8px;color:var(--gold)}
  .hayate-role strong{grid-column:1;grid-row:2;margin-top:2px;font-size:18px}
  .hayate-role span{grid-column:1;grid-row:3;display:none}

  .mate-selector{
    position:relative;
    width:calc(100% + 2 * var(--edge));
    margin-left:calc(-1 * var(--edge));
    padding:var(--space-7) var(--edge) var(--space-6);
    background:var(--navy-2);
    border-top:1px solid rgba(201,154,74,.28);
  }
  .mate-selector-head{max-width:var(--page);margin:0 auto 20px}
  .mate-selector-grid{max-width:var(--page);margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* mini mate cards: flat panel, 4px brand-colour top stripe (both breakpoints) */
.mate-selector .mate-node{
  border-top:4px solid var(--node-accent);
  background:var(--navy-2) !important;
  background-image:none !important;
  border-color:rgba(255,255,255,.16);
}
.mate-selector .mate-node:hover,.mate-selector .mate-node:focus-visible{
  background:#243f5f !important;
  border-color:rgba(255,255,255,.3);
}

@media(max-width:1023px){
  .mate-selector-grid{
    display:flex;
    grid-template-columns:none;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:4px;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .mate-selector-grid .mate-node{flex:0 0 74vw;max-width:320px;scroll-snap-align:center}
}

/* ---------- 3. SECTION NUMERALS ---------- */
main{counter-reset:sec}
.why-section,.hayate-section,.specialists-section,.comparison-section,.price-section,.faq-section{counter-increment:sec}
.section-no{position:relative;z-index:1}
.section-no::before{
  content:counter(sec,decimal-leading-zero);
  position:absolute;
  left:0;
  bottom:100%;
  margin-bottom:2px;
  font-family:var(--serif);
  font-size:clamp(2.75rem,5vw,5rem);
  font-weight:700;
  line-height:1;
  color:var(--gold);
  opacity:.22;
  white-space:nowrap;
  pointer-events:none;
  z-index:-1;
}
.hayate-section .section-no,
.specialists-heading .section-no,
.price-heading .section-no,
.faq-heading .section-no{color:var(--gold)}

.why-v2-heading h2::after,
.hayate-intro h2::after,
.specialists-heading h2::after,
.comparison-heading h2::after,
.price-heading h2::after,
.faq-heading h2::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin-top:22px;
  background:var(--gold);
  border-radius:2px;
}

/* ---------- 4. MATE FEATURE CARDS (4 large specialist cards) ---------- */
.specialists-heading h2,
.specialists-heading h2 span{color:var(--offwhite)}
.specialists-heading .specialists-title-accent,
.specialists-heading .specialists-title-accent span{color:var(--gold)}
.specialists-heading-copy>p{color:var(--offwhite-soft)}
.specialist-card{
  background-image:none !important;
  background-color:var(--navy) !important;
  color:var(--offwhite) !important;
  border:1px solid rgba(255,255,255,.14);
  border-left:4px solid var(--accent,var(--gold));
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.3);
}
.specialist-ig{--accent:#a64d76}
.specialist-x{--accent:#72859d}
.specialist-threads{--accent:#887fc0}
.specialist-line{--accent:#2a9a80}
.specialist-tiktok{--accent:#2fd9d0}
.specialist-youtube{--accent:#ff4438}
.specialist-head small{color:var(--gold) !important}
.specialist-head img{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent),0 8px 20px rgba(0,0,0,.3)}
.specialist-copy>p{color:var(--offwhite-soft) !important}
.specialist-copy .specialist-outcome{color:var(--gold) !important}
.specialist-cta{border-color:rgba(255,255,255,.3) !important}
.specialist-card:hover .specialist-cta{background:var(--offwhite) !important;color:var(--ink) !important;border-color:var(--offwhite) !important}

@media(min-width:1200px){
  .specialists-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .specialist-card{min-height:0}
  .specialist-visual{display:none}
}

/* ---------- 5. PRICING (navy panel per exactly-two-cream rule; card system unchanged shape) ---------- */
.price-plans{background:linear-gradient(180deg,var(--ink) 0%,var(--navy) 100%)}
.price-heading h2{color:var(--offwhite)}
.price-heading>p:last-child{color:var(--offwhite-soft)}
.price-swipe-cue{color:var(--offwhite-soft)}

.price-plan{background:var(--navy-2);color:var(--offwhite);border-color:rgba(255,255,255,.16);box-shadow:0 20px 48px rgba(0,0,0,.35)}
.plan-head{border-bottom-color:rgba(255,255,255,.16)}
.plan-head h3{color:var(--gold)}
.plan-head>p:not(.plan-recommend){color:var(--offwhite-soft)}
.plan-price>span{color:var(--offwhite-soft)}
.plan-price>strong{color:var(--gold);font-size:3.5rem}
.plan-price>strong b{font-size:1em}
.plan-price>strong i{color:var(--offwhite-soft)}
.plan-price>small{color:var(--offwhite-soft)}
.plan-capacity{background:rgba(255,255,255,.08)}
.plan-capacity span{color:var(--offwhite-soft)}
.plan-capacity strong{color:var(--offwhite)}
.plan-team{border-color:rgba(255,255,255,.16)}
.plan-team small{color:var(--offwhite-soft)}
.plan-support li{border-bottom-color:rgba(255,255,255,.14)}
.plan-support span{color:var(--offwhite-soft)}
.plan-support strong{color:var(--offwhite)}
.plan-creative strong{color:var(--gold)}

.plan-cta{min-height:56px;font-size:15px}
.price-standard .plan-cta{background:var(--offwhite);color:var(--ink)}
.price-standard .plan-cta:hover,.price-standard .plan-cta:focus-visible{background:#fff;transform:translateY(-2px)}

.price-unlimited{border-width:2px;box-shadow:0 32px 76px rgba(0,0,0,.55)}
@media(min-width:761px){
  .price-unlimited{transform:scale(1.03)}
}

/* ---------- 6. COMPARISON TABLE (stays cream; zebra + gold column + sticky col) ---------- */
.comparison-table tbody tr:nth-child(even) td{background:var(--paper-2)}
.comparison-table thead th:nth-child(4),
.comparison-table tbody td:nth-child(4){
  background:rgba(201,154,74,.16);
  border-color:rgba(201,154,74,.4);
}
.comparison-table thead th:nth-child(4){color:var(--gold-deep);font-weight:950;box-shadow:inset 0 4px 0 var(--gold)}
.comparison-table tbody td:nth-child(4) strong{color:var(--gold-deep)}
.comparison-table tbody td:nth-child(4) span{color:#5a4321}
@media(min-width:761px){
  .comparison-table thead th:first-child,
  .comparison-table tbody th{position:sticky;left:0;z-index:2}
}

/* ---------- 7. FAQ (two-column grid on navy, hairline rows) ---------- */
.faq-heading h2{color:var(--offwhite)}
.faq-heading .section-no{color:var(--gold)}
@media(min-width:1024px){
  .faq-section{grid-template-columns:1fr;gap:var(--space-7)}
  .faq-heading{position:static;max-width:none}
  .faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:0}
  .faq-item{border-top:1px solid rgba(255,255,255,.16)}
  .faq-list>.faq-item:nth-last-child(1),
  .faq-list>.faq-item:nth-last-child(2){border-bottom:1px solid rgba(255,255,255,.16)}
}
.faq-section .faq-item{border-bottom-color:rgba(255,255,255,.16)}
.faq-section .faq-no{color:var(--gold)}
.faq-section .faq-question-text{color:var(--offwhite)}
.faq-section .faq-toggle{border-color:rgba(255,255,255,.4) !important;color:var(--offwhite) !important;background:transparent !important}
.faq-section .faq-item[open] .faq-toggle,
.faq-section .faq-item[open] summary .faq-toggle{background:var(--gold) !important;border-color:var(--gold) !important;color:var(--ink) !important}
.faq-section .faq-answer-mark{color:var(--gold)}
.faq-section .faq-answer p{color:var(--offwhite-soft);max-width:36ch}
.faq-section .faq-item summary:hover{color:var(--gold)}

/* ---------- 8. TYPE + SPACING: JP running-text line length ---------- */
.why-v2-solution-intro,
.specialists-heading-copy>p,
.comparison-heading>p:last-child,
.price-heading>p:last-child{max-width:36ch}

/* ---------- 9. MOTION: fade-up on entry (IO-driven, visible by default) ---------- */
.p4fx .fade-target{opacity:0;transform:translateY(28px);transition:opacity .3s ease,transform .3s ease}
.p4fx .fade-target.in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .fade-target{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- 10. A11y / overflow safety ---------- */
html{overflow-x:clip}
body{overflow-x:clip}
.faq-toggle:focus-visible,.faq-item summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .price-unlimited{transform:none}
}