/* ═══════════════════════════════════════════════════════════════════
   KEIGEN CORE CSS v2.1
   Shared primitives: tokens, typography, nav, footer, buttons, cards
   Canonical tokens reconciled with real-device testing (see SOP)
   ═══════════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

.skip-link{position:absolute;top:-100%;left:1rem;z-index:9999;padding:.75rem 1.5rem;background:var(--color-primary);color:#fff;font-weight:700;font-size:.875rem;border-radius:0 0 8px 8px;transition:top .2s}
.skip-link:focus{top:0;outline:3px solid var(--color-accent);outline-offset:2px}

/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS — v2.1 (mobile-verified)
   ══════════════════════════════════════════════════════════════ */
:root,[data-theme="light"]{
  /* Primary — darker violet, mobile-calibrated */
  --color-primary:#6D28D9;
  --color-primary-hover:#5B21B6;
  --color-primary-soft:rgba(109,40,217,.05);
  --color-primary-text:#5B21B6;
  --color-primary-ui:#7C3AED;
  --color-primary-wash:#F5F3FF;
  --color-primary-highlight:#EDE9FE;

  /* Warm accent — spark, not structure */
  --color-accent:#B5533E;
  --color-accent-hover:#9C4535;
  --color-accent-ui:#A84A32;
  --color-accent-soft:rgba(181,83,62,.06);

  /* Data accent — charts only, never CTAs */
  --color-data-accent:#F59E0B;

  /* Surfaces — cream-based, not pure white */
  --color-bg:#faf9f7;
  --color-surface:#ffffff;
  --color-surface-alt:#f0eeea;
  --color-surface-subtle:#e5e3dd;

  /* Text — warm near-black */
  --color-text:#181820;
  --color-text-secondary:#4b4b58;
  --color-text-dim:#76768a;

  /* Borders */
  --color-border:rgba(0,0,0,.07);
  --color-border-hover:rgba(0,0,0,.12);

  /* Card + nav */
  --card-bg:#fff;
  --nav-bg:rgba(250,249,247,.92);

  /* Shadows — 3-level soft ladder */
  --shadow-soft-1:0 8px 24px rgba(15,23,42,.06);
  --shadow-soft-2:0 16px 48px rgba(15,23,42,.10);
  --shadow-soft-3:0 24px 64px rgba(15,23,42,.14);

  /* Focus */
  --focus-ring:0 0 0 3px rgba(109,40,217,.35);
  --btn-text:#fff;

  /* Status colors */
  --status-bg:rgba(109,40,217,.06);
  --status-text:#5B21B6;
  --status-border:rgba(109,40,217,.15);
}

[data-theme="dark"]{
  --color-primary:#A78BFA;
  --color-primary-hover:#8B5CF6;
  --color-primary-soft:rgba(167,139,250,.06);
  --color-primary-text:#C4B5FD;
  --color-primary-ui:#A78BFA;
  --color-primary-wash:#1E1B4B;
  --color-primary-highlight:#312E81;

  --color-accent:#D97756;
  --color-accent-hover:#C56142;
  --color-accent-ui:#D97756;
  --color-accent-soft:rgba(217,119,86,.06);

  --color-data-accent:#FBBF24;

  --color-bg:#08080f;
  --color-surface:#0e0e1a;
  --color-surface-alt:#141422;
  --color-surface-subtle:#1c1c30;

  --color-text:#e2e2ee;
  --color-text-secondary:#9494a8;
  --color-text-dim:#66667a;

  --color-border:rgba(255,255,255,.06);
  --color-border-hover:rgba(255,255,255,.1);

  --card-bg:#141422;
  --nav-bg:rgba(8,8,15,.88);

  --shadow-soft-1:0 1px 2px rgba(0,0,0,.2),0 16px 40px rgba(0,0,0,.35);
  --shadow-soft-2:0 4px 12px rgba(0,0,0,.3),0 24px 48px rgba(0,0,0,.45);
  --shadow-soft-3:0 8px 24px rgba(0,0,0,.4),0 32px 64px rgba(0,0,0,.5);

  --focus-ring:0 0 0 3px rgba(167,139,250,.4);
  --btn-text:#08080f;

  --status-bg:rgba(167,139,250,.08);
  --status-text:#C4B5FD;
  --status-border:rgba(167,139,250,.2);
}

/* ══════════════════════════════════════════════════════════════
   MOTION TOKENS — brand easing curves
   ══════════════════════════════════════════════════════════════ */
:root{
  --ease-breathe:cubic-bezier(0.25,1,0.5,1);
  --ease-lift:cubic-bezier(0.34,1.56,0.64,1);
}

/* ══════════════════════════════════════════════════════════════
   RADIUS LADDER
   ══════════════════════════════════════════════════════════════ */
:root{
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
}

/* ══════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:5rem}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:'Outfit','Noto Sans JP','Noto Sans SC',system-ui,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.h1,.h2,.h3{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
}
.h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.h2{font-size:clamp(1.6rem,3.5vw,2.4rem)}
.h3{font-size:clamp(1.15rem,2vw,1.5rem)}

.body-lg{font-size:clamp(1.05rem,1.8vw,1.2rem);line-height:1.7;color:var(--color-text-secondary)}
.body{font-size:1rem;line-height:1.7;color:var(--color-text-secondary)}

.eyebrow{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-primary-ui);
}

.caption{font-size:.85rem;color:var(--color-text-dim)}

.container{max-width:1120px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.section{padding:clamp(4rem,8vw,7rem) 0}
.text-center{text-align:center}

/* Max-reading-width for prose */
.max-w-prose{max-width:65ch}

/* ══════════════════════════════════════════════════════════════
   LINKS
   ══════════════════════════════════════════════════════════════ */
a{color:var(--color-primary-text);text-decoration:none;transition:color .2s var(--ease-breathe)}
a:hover{color:var(--color-accent-ui)}
a:focus-visible,.btn:focus-visible,button:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 2rem;
  border-radius:var(--radius-sm);
  font-family:'Outfit','Noto Sans JP',system-ui,sans-serif;
  font-weight:600;
  font-size:.95rem;
  border:none;
  cursor:pointer;
  transition:background .25s var(--ease-breathe),transform .2s var(--ease-lift),box-shadow .25s var(--ease-breathe);
  text-decoration:none;
}

.btn-primary{
  background:var(--color-primary-ui);
  color:var(--btn-text);
}
.btn-primary:hover{
  background:var(--color-primary-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft-2);
}

.btn-outline{
  background:transparent;
  color:var(--color-primary-text);
  border:1.5px solid var(--color-border-hover);
}
.btn-outline:hover{
  border-color:var(--color-primary-ui);
  color:var(--color-primary-ui);
  background:var(--color-primary-soft);
}

.btn-accent{
  background:var(--color-accent-ui);
  color:#fff;
}
.btn-accent:hover{
  background:var(--color-accent);
  transform:translateY(-2px);
}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.8rem 1.4rem;
  background:transparent;
  color:var(--color-text);
  border:1px solid var(--color-border-hover);
  border-radius:var(--radius-sm);
  font-family:'Outfit','Noto Sans JP',system-ui,sans-serif;
  font-size:.95rem;
  font-weight:500;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s var(--ease-breathe),border-color .2s var(--ease-breathe),transform .12s var(--ease-lift);
}
.btn-secondary:hover{
  background:var(--color-primary-soft);
  border-color:var(--color-primary-ui);
  transform:translateY(-1px);
}

/* Text-link for inline CTAs */
.text-link{
  color:var(--color-primary-text);
  font-weight:600;
  font-size:.95rem;
  display:inline-block;
  margin-top:.75rem;
}
.text-link:hover{text-decoration:underline}

/* ══════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════ */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  background:var(--nav-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--color-border);
  transition:background .3s var(--ease-breathe);
}
.nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(1rem,3vw,2rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.nav-logo{
  font-family:'Fraunces','Noto Sans JP',serif;
  font-weight:800;
  font-size:1.35rem;
  color:var(--color-text);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.45rem;
}
.nav-logo .logo-mark{
  width:28px;height:28px;
  background:var(--color-primary-ui);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:'Fraunces','Noto Sans JP',serif;
  font-weight:800;
  font-size:.9rem;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:1.8rem;
  list-style:none;
}
.nav-links a{
  color:var(--color-text-secondary);
  font-size:.9rem;
  font-weight:500;
  padding:.35rem 0;
  position:relative;
  transition:color .2s var(--ease-breathe);
}
.nav-links a:hover,
.nav-links a[aria-current="page"]{color:var(--color-text)}
.nav-links a[aria-current="page"]::after{
  content:'';
  position:absolute;
  bottom:-2px;left:0;right:0;
  height:2px;
  background:var(--color-primary-ui);
  border-radius:1px;
}
.nav-links .dropdown{position:relative}
.nav-links .dropdown-toggle{cursor:pointer;display:flex;align-items:center;gap:.3rem}
.nav-links .dropdown-toggle::after{
  content:'';
  border:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .2s var(--ease-breathe);
}
.nav-links .dropdown.open .dropdown-toggle::after{transform:rotate(180deg)}
.nav-links .dropdown-menu{
  position:absolute;
  top:calc(100% + .75rem);
  left:50%;
  transform:translateX(-50%);
  background:var(--card-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:.5rem;
  min-width:180px;
  box-shadow:var(--shadow-soft-1);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s var(--ease-breathe),visibility .2s var(--ease-breathe);
}
.nav-links .dropdown.open .dropdown-menu{opacity:1;visibility:visible}
.nav-links .dropdown-menu a{
  display:block;
  padding:.55rem 1rem;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
.nav-links .dropdown-menu a:hover{background:var(--color-primary-soft)}

.nav-cta{
  padding:.55rem 1.4rem;
  border-radius:var(--radius-sm);
  background:var(--color-primary-ui);
  color:#fff!important;
  font-weight:600;
  font-size:.85rem;
  transition:background .2s var(--ease-breathe),transform .2s var(--ease-lift);
}
.nav-cta:hover{
  background:var(--color-primary-hover);
  transform:translateY(-1px);
}
.nav-right{display:flex;align-items:center;gap:1rem}
.theme-toggle{
  background:none;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:.4rem .6rem;
  cursor:pointer;
  color:var(--color-text-secondary);
  font-size:1rem;
  display:flex;
  align-items:center;
  transition:border-color .2s var(--ease-breathe),color .2s var(--ease-breathe);
}
.theme-toggle:hover{
  border-color:var(--color-primary-ui);
  color:var(--color-text);
}
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:1001;
}
.hamburger span{
  display:block;
  width:22px;height:2px;
  background:var(--color-text);
  border-radius:2px;
  transition:transform .3s var(--ease-breathe),opacity .3s var(--ease-breathe);
}
@media(max-width:900px){
  .hamburger{display:flex}
  .nav-links{
    position:fixed;
    top:64px;left:0;right:0;bottom:0;
    background:var(--color-bg);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:1rem 1.5rem;
    transform:translateX(100%);
    transition:transform .3s var(--ease-breathe);
    overflow-y:auto;
  }
  .nav-links.show-mobile{transform:translateX(0)}
  .nav-links a{padding:.9rem 0;font-size:1.05rem;border-bottom:1px solid var(--color-border)}
  .nav-links .dropdown-menu{position:static;transform:none;box-shadow:none;border:none;padding:0 0 0 1rem;background:transparent}
  .nav-links .dropdown.open .dropdown-menu{opacity:1;visibility:visible}
  body.mobile-nav-open{overflow:hidden}
  .hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .hamburger.active span:nth-child(2){opacity:0}
  .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.footer{
  border-top:1px solid var(--color-border);
  padding:3.5rem 0 2rem;
  background:var(--color-surface);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr repeat(3,1fr);
  gap:2.5rem;
  margin-bottom:3rem;
}
.footer-brand .nav-logo{margin-bottom:1rem}
.footer-brand .caption{max-width:260px;line-height:1.6}
.footer-col-title{
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text);
  margin-bottom:1rem;
}
.footer-col a{
  display:block;
  color:var(--color-text-secondary);
  font-size:.9rem;
  padding:.3rem 0;
  transition:color .2s var(--ease-breathe);
}
.footer-col a:hover{color:var(--color-primary-ui)}
.footer-bottom{
  border-top:1px solid var(--color-border);
  padding-top:1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}
.footer-bottom .caption{font-size:.8rem}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{color:var(--color-text-dim);font-size:.8rem}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   FADE-UP SCROLL ANIMATION
   ══════════════════════════════════════════════════════════════ */
.fade-up{opacity:1;transform:none}
.js .fade-up{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s var(--ease-breathe),transform .6s var(--ease-breathe);
}
.js .fade-up.visible{opacity:1;transform:translateY(0)}
.stagger-1{transition-delay:.1s}
.stagger-2{transition-delay:.2s}
.stagger-3{transition-delay:.3s}
.stagger-4{transition-delay:.4s}

/* ══════════════════════════════════════════════════════════════
   CARD PRIMITIVE
   ══════════════════════════════════════════════════════════════ */
.card{
  background:var(--card-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:1.5rem 1.5rem 1.75rem;
  transition:border-color .2s var(--ease-breathe),box-shadow .2s var(--ease-breathe),transform .2s var(--ease-lift);
  box-shadow:var(--shadow-soft-1);
}
.card:hover{
  border-color:var(--color-primary-ui);
  box-shadow:var(--shadow-soft-2);
  transform:translateY(-2px);
}
.card h3{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:clamp(1.05rem,1.4vw,1.2rem);
  font-weight:600;
  margin:.25rem 0 .5rem;
  letter-spacing:-.01em;
  color:var(--color-text);
}
.card p{
  font-size:.95rem;
  line-height:1.55;
  margin:0;
  color:var(--color-text-secondary);
}
.card-eyebrow{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-primary-ui);
  margin:0 0 .1rem;
}

.card-grid{display:grid;gap:1.25rem;margin:1.5rem 0}
.card-grid.three-up{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card-grid.four-up{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
@media(min-width:900px){
  .card-grid.three-up{grid-template-columns:repeat(3,1fr)}
  .card-grid.four-up{grid-template-columns:repeat(4,1fr)}
}

/* ══════════════════════════════════════════════════════════════
   LOGIC-LINE + CLEAN-LIST + MICROCOPY
   ══════════════════════════════════════════════════════════════ */
.logic-line{
  font-family:'Outfit','Noto Sans JP',system-ui,sans-serif;
  font-size:.95rem;
  font-weight:500;
  padding:1rem 1.25rem;
  background:var(--color-primary-soft);
  border-left:3px solid var(--color-primary-ui);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin:1rem 0;
  color:var(--color-text);
  line-height:1.6;
}
.logic-line p.body{color:var(--color-text);margin-bottom:.5rem}
.logic-line a{color:var(--color-primary-text);font-weight:600}
.logic-line a:hover{text-decoration:underline}

.clean-list{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:.5rem}
.clean-list li{
  padding-left:1.25rem;
  position:relative;
  font-size:.95rem;
  line-height:1.55;
  color:var(--color-text-secondary);
}
.clean-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:6px;height:6px;
  background:var(--color-primary-ui);
  border-radius:50%;
}

.microcopy{
  font-size:.8125rem;
  line-height:1.5;
  color:var(--color-text-dim);
  margin-top:.75rem;
}
.microcopy a{color:var(--color-primary-text);font-weight:600}

/* ══════════════════════════════════════════════════════════════
   SECTION INTRO + CLOSE
   ══════════════════════════════════════════════════════════════ */
.section-intro{
  font-size:1.05rem;
  line-height:1.6;
  max-width:720px;
  color:var(--color-text-secondary);
  margin:0 0 1.5rem;
}
.section-close{
  font-size:1.1rem;
  line-height:1.55;
  max-width:640px;
  margin:2rem auto 0;
  text-align:center;
  font-style:italic;
  color:var(--color-text-secondary);
}

/* ══════════════════════════════════════════════════════════════
   DIRECTION PATHS — button-row CTAs
   ══════════════════════════════════════════════════════════════ */
.direction-paths{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin:1.5rem 0;
}
.direction-path{
  padding:.75rem 1.75rem;
  border-radius:var(--radius-md);
  font-weight:600;
  font-size:.9rem;
  border:1px solid var(--color-border);
  color:var(--color-text-secondary);
  text-decoration:none;
  transition:border-color .3s var(--ease-breathe),color .3s var(--ease-breathe),background .3s var(--ease-breathe),transform .2s var(--ease-lift);
  background:var(--card-bg);
}
.direction-path:hover{
  border-color:var(--color-primary-ui);
  color:var(--color-primary-text);
  background:var(--color-primary-soft);
  transform:translateY(-2px);
}
.direction-path:last-child{
  background:var(--color-primary-ui);
  color:var(--btn-text);
  border-color:var(--color-primary-ui);
}
.direction-path:last-child:hover{
  background:var(--color-primary-hover);
}

/* ══════════════════════════════════════════════════════════════
   HERO-COPY — shared hero paragraph primitive
   White override for atmospheric hero contexts (SOP rule)
   ══════════════════════════════════════════════════════════════ */
.hero-copy{
  font-size:clamp(1rem,1.4vw,1.1rem);
  line-height:1.7;
  max-width:640px;
  margin:0 auto 1.25rem;
  color:var(--color-text-secondary);
}
[data-theme="light"] .hero-copy{color:#3a3935}

/* White override for atmospheric hero contexts */
[data-theme="light"] .hero-about .hero-copy,
[data-theme="light"] .hero-fw .hero-copy,
[data-theme="light"] .hero-home .hero-copy,
[data-theme="light"] .hero-res .hero-copy{
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* ══════════════════════════════════════════════════════════════
   REASSURANCE MICROCOPY — CTA pair
   ══════════════════════════════════════════════════════════════ */
.cta-reassurance{
  font-size:.8125rem;
  color:var(--color-text-dim);
  margin-top:.5rem;
  text-align:center;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL HERO PADDING FIX — clears 64px fixed nav
   Applied to all atmospheric hero sections
   ══════════════════════════════════════════════════════════════ */
.hero-home, .hero-fw, .hero-about, .hero-res, .hero-sw, .hero-art{
  padding-top:clamp(6rem,12vw,9rem);
}

/* ══════════════════════════════════════════════════════════════
   STAT HUGE — for $116B, 51%, 37% urgency strips
   ══════════════════════════════════════════════════════════════ */
.stat-huge{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:clamp(3.5rem,10vw,7rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--color-primary-ui);
  margin:0 0 1rem;
}
.stat-inline{
  display:inline-flex;
  align-items:baseline;
  gap:.6rem;
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  font-weight:700;
  color:var(--color-primary-ui);
  margin:1rem 2rem 1rem 0;
}
.stat-inline .stat-label{
  font-family:'Outfit','Noto Sans JP',system-ui,sans-serif;
  font-size:.95rem;
  font-weight:500;
  color:var(--color-text-secondary);
  letter-spacing:0;
}
.stat-row{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;margin:1.5rem 0}
.stat-source{
  font-size:.8rem;
  color:var(--color-text-dim);
  margin-top:.5rem;
  font-style:italic;
}

.section-urgency-strip{
  background:var(--color-surface-alt);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  padding:clamp(3rem,6vw,5rem) 0;
  text-align:center;
}
.section-urgency-strip .stat-body{
  font-size:clamp(1.05rem,1.7vw,1.2rem);
  line-height:1.6;
  max-width:640px;
  margin:0 auto .75rem;
  color:var(--color-text);
}

/* ══════════════════════════════════════════════════════════════
   AMS CALLOUT — "AMS at a glance" bounded mini-overview
   ══════════════════════════════════════════════════════════════ */
.ams-callout{
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-primary-ui);
  border-right:3px solid var(--color-primary-ui);
  background:var(--color-primary-wash);
  padding:1.25rem 1.5rem;
  border-radius:var(--radius-sm);
  margin:1.5rem 0 2rem;
  font-size:.95rem;
  line-height:1.7;
}
.ams-callout-title{
  font-weight:700;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-primary-text);
  margin:0 0 .75rem;
}
.ams-callout-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.ams-callout-list li{
  color:var(--color-text);
  padding-left:0;
}
.ams-callout-list li strong{
  color:var(--color-primary-text);
  font-weight:600;
  margin-right:.25rem;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT CARD — used for 4-product surfaces section
   ══════════════════════════════════════════════════════════════ */
.product-card{
  background:var(--card-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:border-color .2s var(--ease-breathe),box-shadow .2s var(--ease-breathe),transform .2s var(--ease-lift);
  box-shadow:var(--shadow-soft-1);
}
.product-card:hover{
  border-color:var(--color-primary-ui);
  box-shadow:var(--shadow-soft-2);
  transform:translateY(-2px);
}
.product-card .product-category{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-primary-ui);
  margin-bottom:.15rem;
}
.product-card .product-name{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:clamp(1.2rem,1.7vw,1.4rem);
  font-weight:700;
  color:var(--color-text);
  margin:.1rem 0 .35rem;
  letter-spacing:-.01em;
}
.product-card .product-body{
  font-size:.92rem;
  line-height:1.55;
  color:var(--color-text-secondary);
  flex:1;
  margin-bottom:1rem;
}
.product-card .product-ams{
  font-size:.78rem;
  color:var(--color-text-dim);
  margin:0 0 1rem;
  font-style:italic;
}
.product-card .text-link{margin-top:auto;margin-bottom:0}
.product-card .text-link + .text-link{margin-top:.3rem;color:var(--color-text-secondary);font-weight:500}
.product-card .text-link + .text-link:hover{color:var(--color-primary-ui)}

/* ══════════════════════════════════════════════════════════════
   ACTOR CLASS BLOCK — 3-class model for AMS architecture
   ══════════════════════════════════════════════════════════════ */
.actor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;
  margin:1.5rem 0;
}
@media(min-width:900px){
  .actor-grid{grid-template-columns:repeat(3,1fr)}
}
.actor-block{
  border-top:3px solid var(--color-primary-ui);
  background:var(--card-bg);
  padding:1.25rem 1.25rem 1.5rem;
  border-radius:0 0 var(--radius-md) var(--radius-md);
}
.actor-block:nth-child(3){border-top-color:var(--color-accent-ui)}
.actor-block h4{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:1.1rem;
  font-weight:600;
  color:var(--color-text);
  margin:0 0 .5rem;
}
.actor-block p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--color-text-secondary);
  margin:0;
}

/* ══════════════════════════════════════════════════════════════
   FLOW ARROW — for Commercial Impact section
   ══════════════════════════════════════════════════════════════ */
.flow-arrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.75rem 1rem;
  padding:1.5rem;
  background:var(--color-primary-wash);
  border-radius:var(--radius-md);
  margin:1.5rem 0;
  text-align:center;
}
.flow-arrow .flow-node{
  font-weight:600;
  font-size:.95rem;
  color:var(--color-text);
  padding:.4rem .75rem;
  background:var(--card-bg);
  border-radius:var(--radius-sm);
  border:1px solid var(--color-primary-highlight);
}
.flow-arrow .flow-sep{
  color:var(--color-primary-ui);
  font-weight:700;
  font-size:1.15rem;
}

/* ══════════════════════════════════════════════════════════════
   CULTURE CARD — image-over-text variant
   ══════════════════════════════════════════════════════════════ */
.culture-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin:1.5rem 0;
}
@media(min-width:768px){
  .culture-grid{grid-template-columns:1fr 1fr}
}
.culture-card{
  background:var(--card-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .2s var(--ease-breathe),box-shadow .2s var(--ease-breathe),transform .2s var(--ease-lift);
  box-shadow:var(--shadow-soft-1);
}
.culture-card:hover{
  border-color:var(--color-primary-ui);
  box-shadow:var(--shadow-soft-2);
  transform:translateY(-2px);
}
.culture-card .culture-media{
  aspect-ratio:16/10;
  background:var(--color-surface-alt);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.culture-card .culture-media img{
  width:100%;height:100%;
  object-fit:cover;
}
.culture-card .culture-media-placeholder{
  font-size:2.5rem;
  color:var(--color-text-dim);
  font-family:'Fraunces',serif;
  font-style:italic;
}
.culture-card .culture-body{
  padding:1.5rem;
}
.culture-card .culture-label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-primary-ui);
  margin-bottom:.35rem;
}
.culture-card h3{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:1.2rem;
  font-weight:600;
  color:var(--color-text);
  margin:0 0 .5rem;
}
.culture-card .culture-subline{
  font-size:.85rem;
  color:var(--color-text-dim);
  margin-top:.6rem;
  line-height:1.5;
  font-style:italic;
}

/* ══════════════════════════════════════════════════════════════
   FOUNDER QUOTE BLOCK
   ══════════════════════════════════════════════════════════════ */
.founder-quote{
  max-width:720px;
  margin:0 auto 2rem;
  padding:1.5rem 2rem;
  border-left:3px solid var(--color-accent-ui);
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-style:italic;
  font-size:clamp(1.1rem,1.7vw,1.3rem);
  line-height:1.55;
  color:var(--color-text);
}
.founder-quote-attrib{
  margin-top:.75rem;
  font-style:normal;
  font-family:'Outfit','Noto Sans JP',system-ui,sans-serif;
  font-size:.9rem;
  color:var(--color-text-dim);
}

/* ══════════════════════════════════════════════════════════════
   STAGE CARD — for Framework Section 3 (Signal/Work/Actor/Decision)
   ══════════════════════════════════════════════════════════════ */
.stage-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin:1.5rem 0;
}
@media(min-width:768px){
  .stage-grid{grid-template-columns:1fr 1fr}
}
.stage-card{
  background:var(--card-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:1.5rem;
  position:relative;
}
.stage-card .stage-label{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-primary-ui);
  background:var(--color-primary-highlight);
  padding:.25rem .6rem;
  border-radius:999px;
  margin-bottom:.75rem;
}
.stage-card .stage-question{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:1.1rem;
  font-weight:600;
  color:var(--color-text);
  margin:0 0 .5rem;
}
.stage-card .stage-body{
  font-size:.92rem;
  line-height:1.6;
  color:var(--color-text-secondary);
  margin:0;
}

/* ══════════════════════════════════════════════════════════════
   LAYER BLOCK — for Framework 5-layer model
   ══════════════════════════════════════════════════════════════ */
.layer-block{
  padding:1.5rem 0;
  border-top:1px solid var(--color-border);
}
.layer-block:first-of-type{border-top:none}
.layer-number{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:.9rem;
  font-weight:700;
  color:var(--color-primary-ui);
  letter-spacing:.04em;
  margin-bottom:.25rem;
}
.layer-title{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:clamp(1.2rem,1.8vw,1.45rem);
  font-weight:700;
  color:var(--color-text);
  margin:0 0 .75rem;
  letter-spacing:-.01em;
}
.layer-question{
  font-weight:600;
  font-size:.98rem;
  color:var(--color-text);
  margin:0 0 .5rem;
  font-style:italic;
}
.layer-body{
  font-size:.95rem;
  line-height:1.65;
  color:var(--color-text-secondary);
  max-width:720px;
  margin:0;
}

/* ══════════════════════════════════════════════════════════════
   TWO-COL — for "Why both" technical/economic resistance
   ══════════════════════════════════════════════════════════════ */
.two-col{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin:1.5rem 0;
}
@media(min-width:768px){
  .two-col{grid-template-columns:1fr 1fr;gap:2rem}
}
.two-col-block{
  padding:1.5rem 1.5rem 1.75rem;
  background:var(--card-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}
.two-col-block h4{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:1.1rem;
  font-weight:700;
  color:var(--color-primary-text);
  margin:0 0 .75rem;
}
.two-col-block p{
  font-size:.93rem;
  line-height:1.6;
  color:var(--color-text-secondary);
  margin:0;
}

/* ══════════════════════════════════════════════════════════════
   CAPABILITY LIST — for Framework 4 capabilities
   ══════════════════════════════════════════════════════════════ */
.capability-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin:1.5rem 0;
}
@media(min-width:768px){
  .capability-grid{grid-template-columns:1fr 1fr}
}
.capability-item{
  padding:1.25rem 1.5rem;
  background:var(--card-bg);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-primary-ui);
  border-radius:var(--radius-sm);
}
.capability-item h4{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--color-text);
  margin:0 0 .4rem;
}
.capability-item p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--color-text-secondary);
  margin:0;
}

/* ══════════════════════════════════════════════════════════════
   BOUNDARY BLOCK — for Framework "What it is not / is"
   ══════════════════════════════════════════════════════════════ */
.boundary-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin:1.5rem 0;
}
@media(min-width:768px){
  .boundary-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
.boundary-block{padding:0}
.boundary-block h4{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:1.1rem;
  font-weight:700;
  color:var(--color-text);
  margin:0 0 .75rem;
}
.boundary-is-not h4{color:var(--color-text-dim)}
.boundary-is h4{color:var(--color-primary-text)}
.boundary-block .clean-list{margin:0}

/* ══════════════════════════════════════════════════════════════
   ANCHOR NAV — jump strip below hero
   ══════════════════════════════════════════════════════════════ */
.anchor-nav{
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  padding:.85rem 0;
  position:sticky;
  top:64px;
  z-index:50;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.anchor-nav-inner{
  display:flex;
  gap:.35rem;
  align-items:center;
  white-space:nowrap;
  padding:0 clamp(1.25rem,4vw,3rem);
  max-width:1120px;
  margin:0 auto;
  font-size:.82rem;
}
.anchor-nav a{
  color:var(--color-text-secondary);
  font-weight:500;
  padding:.3rem .65rem;
  border-radius:var(--radius-sm);
  transition:background .2s var(--ease-breathe),color .2s var(--ease-breathe);
}
.anchor-nav a:hover,.anchor-nav a.active{
  background:var(--color-primary-soft);
  color:var(--color-primary-text);
}
.anchor-nav .anchor-sep{
  color:var(--color-text-dim);
  margin:0 .1rem;
}

/* ══════════════════════════════════════════════════════════════
   PUBLICATION CARD — flagship whitepaper + companion
   ══════════════════════════════════════════════════════════════ */
.publication-card{
  background:var(--color-primary-wash);
  border:1px solid var(--color-primary-highlight);
  border-radius:var(--radius-lg);
  padding:2rem;
  margin:1.5rem 0;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.publication-card h3{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:clamp(1.4rem,2.5vw,1.8rem);
  font-weight:700;
  color:var(--color-text);
  margin:0;
  letter-spacing:-.01em;
}
.publication-card p{
  font-size:.98rem;
  line-height:1.65;
  color:var(--color-text-secondary);
  margin:0;
  max-width:640px;
}
.publication-card .publication-cta-row{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:.25rem;
}
.publication-companion{
  background:var(--card-bg);
  border:1px solid var(--color-border);
  padding:1.5rem;
  border-radius:var(--radius-md);
  margin-top:1.5rem;
}
.publication-companion .eyebrow{margin-bottom:.25rem}
.publication-companion h4{
  font-family:'Fraunces','Noto Sans JP',Georgia,serif;
  font-size:1.2rem;
  font-weight:600;
  color:var(--color-text);
  margin:.25rem 0 .5rem;
}
.publication-companion p{
  font-size:.92rem;
  line-height:1.6;
  color:var(--color-text-secondary);
  margin:0 0 .75rem;
  max-width:640px;
}