@charset "UTF-8";
/*
 * BrainSync Redesign — Design System Foundation
 * Direction: Warm & Human (beige + terracotta, Fraunces + Caveat editorial)
 *
 * Phase 0: tokens, typography, paper grain, nav, footer, primitives.
 * Page-specific styles (hero, pillars, method, etc.) live in this file
 * under section blocks below.
 */

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
    /* palette */
    --bs-bg: #f3ebdd;
    --bs-surface: #faf5ea;
    --bs-ink: #2a201a;
    --bs-ink-soft: #5a4a3e;
    --bs-ink-faint: #9a8c7c;
    --bs-rule: #d8cbb6;
    --bs-accent: #b8553a;
    --bs-accent-deep: #8a3e2a;
    --bs-cream: #ece2cf;
    --bs-sage: #7d8a6e;
    --bs-sage-deep: #5d6a52;

    /* font stacks */
    --bs-font-display: 'Caveat', 'Reenie Beanie', cursive;
    --bs-font-serif: 'Fraunces', 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --bs-font-sans: 'Noto Sans JP', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* layout */
    --bs-max: 1200px;
    --bs-pad-x: 56px;
}

@media (max-width: 900px) {
    :root { --bs-pad-x: 28px; }
}
@media (max-width: 600px) {
    :root { --bs-pad-x: 20px; }
}

/* ─── Page base (overrides legacy style.css) ─────────────────── */
body {
    background: var(--bs-bg);
    color: var(--bs-ink);
    font-family: var(--bs-font-sans);
    font-size: 15px;
    line-height: 1.7;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--bs-accent); color: var(--bs-surface); }

a { color: inherit; }

button { font-family: inherit; }

/* Site wrapper */
#page.site {
    background: var(--bs-bg);
    position: relative;
    min-height: 100vh;
}

/* Paper grain texture (fixed, behind content) */
.bs-paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    z-index: 1;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(184, 85, 58, 0.06), transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(125, 138, 110, 0.05), transparent 50%);
}

/* Stack content above the paper grain, but never coerce position on
   elements that need to remain fixed/absolute (modal, toast, paper grain). */
#page.site > *:not(.bs-paper-grain):not(.bs-modal):not(.bs-toast) {
    position: relative;
    z-index: 2;
}
#page.site > .bs-paper-grain { z-index: 1; }

/* Skip-link (accessibility) */
.skip-link.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link.screen-reader-text:focus {
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 10px 18px;
    background: var(--bs-ink);
    color: var(--bs-bg);
    border-radius: 999px;
    z-index: 200;
}

/* ─── Primitives ─────────────────────────────────────────────── */

/* Kicker — small uppercase mono label with hairline */
.bs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-accent);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.bs-kicker::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    display: inline-block;
}
.bs-kicker--sage { color: var(--bs-sage); }

/* Primary button — rounded pill with offset shadow */
.bs-btn-primary {
    background: var(--bs-accent);
    color: var(--bs-surface);
    border: none;
    padding: 16px 28px;
    font-family: var(--bs-font-sans);
    font-size: 14px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 0 var(--bs-accent-deep);
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    line-height: 1;
}
.bs-btn-primary:hover,
.bs-btn-primary:focus {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--bs-accent-deep);
    color: var(--bs-surface);
    text-decoration: none;
}
.bs-btn-primary--lg { padding: 18px 36px; font-size: 15px; }

/* Ghost link — italic underlined */
.bs-ghost-link {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--bs-ink);
    border-bottom: 1px solid var(--bs-ink);
    padding-bottom: 2px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: color .15s, border-color .15s;
}
.bs-ghost-link:hover { color: var(--bs-accent); border-color: var(--bs-accent); }

/* Outline button (white-bg variant for ghost actions) */
.bs-btn-outline {
    background: transparent;
    color: var(--bs-ink);
    border: 1.5px solid var(--bs-ink);
    padding: 14px 22px;
    font-family: var(--bs-font-sans);
    font-size: 14px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: background .15s, color .15s;
    line-height: 1;
}
.bs-btn-outline:hover { background: var(--bs-ink); color: var(--bs-bg); }

/* Headings — global typography reset toward Fraunces-led editorial */
.bs-h1,
.bs-h2,
.bs-h3 {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--bs-ink);
    margin: 0;
    line-height: 1.05;
}
.bs-h1 { font-size: 76px; }
.bs-h2 { font-size: 56px; }
.bs-h3 { font-weight: 400; font-size: 28px; letter-spacing: -0.01em; }

@media (max-width: 900px) {
    .bs-h1 { font-size: 52px; }
    .bs-h2 { font-size: 40px; }
    .bs-h3 { font-size: 24px; }
}
@media (max-width: 600px) {
    .bs-h1 { font-size: 40px; }
    .bs-h2 { font-size: 32px; }
}

/* Caveat handwriting accent inside headings */
.bs-hand {
    font-family: var(--bs-font-display);
    font-weight: 400;
    color: var(--bs-accent);
    font-style: normal;
    line-height: 0.9;
}

/* Italic Fraunces inline emphasis */
.bs-em {
    font-family: var(--bs-font-serif);
    font-style: italic;
    color: var(--bs-ink);
}

/* Lead paragraph */
.bs-lead {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--bs-ink-soft);
    line-height: 1.8;
}

/* Mono meta line */
.bs-meta {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.12em;
}

/* Container */
.bs-container {
    max-width: var(--bs-max);
    margin: 0 auto;
    padding-left: var(--bs-pad-x);
    padding-right: var(--bs-pad-x);
}

/* ─── Navigation ─────────────────────────────────────────────── */
.bs-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: background .25s, backdrop-filter .25s, border-color .25s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--bs-pad-x);
}
.bs-nav.is-scrolled {
    background: rgba(243, 235, 221, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom-color: var(--bs-rule);
}

.bs-nav__brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.bs-nav__brand:hover { color: inherit; }
.bs-nav__logo {
    font-family: var(--bs-font-display);
    font-size: 32px;
    color: var(--bs-ink);
    line-height: 1;
}
.bs-nav__tagline {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--bs-ink-faint);
    white-space: nowrap;
}

.bs-nav__menu-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}
.bs-nav__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
    align-items: center;
    font-size: 14px;
    color: var(--bs-ink-soft);
}
.bs-nav__menu a {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
    cursor: pointer;
}
.bs-nav__menu a:hover { color: var(--bs-accent); }

.bs-nav__cta {
    background: var(--bs-ink);
    color: var(--bs-bg);
    border: none;
    padding: 10px 18px;
    font-family: var(--bs-font-sans);
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.bs-nav__cta:hover { background: var(--bs-accent); color: var(--bs-surface); }

/* Hamburger (mobile) */
.bs-nav__toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--bs-ink);
}
.bs-nav__toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    margin: 5px 0;
    transition: transform .25s, opacity .15s;
}
.bs-nav.is-open .bs-nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.bs-nav.is-open .bs-nav__toggle span:nth-child(2) { opacity: 0; }
.bs-nav.is-open .bs-nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
    .bs-nav__menu-wrap {
        position: fixed;
        inset: 64px 0 0 0;
        background: var(--bs-bg);
        padding: 32px var(--bs-pad-x);
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        font-size: 18px;
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s, transform .2s;
        display: flex;
        z-index: 25;
    }
    .bs-nav.is-open .bs-nav__menu-wrap {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .bs-nav__menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        font-size: 18px;
        width: 100%;
    }
    .bs-nav__toggle { display: block; }
    .bs-nav__tagline { display: none; }
    .bs-nav__cta { font-size: 14px; padding: 12px 20px; }
}

/* ─── Footer ─────────────────────────────────────────────────── */
.bs-footer {
    padding: 64px var(--bs-pad-x) 32px;
    background: var(--bs-ink);
    color: var(--bs-cream);
    position: relative;
    z-index: 2;
}
.bs-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 56px;
    max-width: var(--bs-max);
    margin: 0 auto;
}
.bs-footer__brand-logo {
    font-family: var(--bs-font-display);
    font-size: 36px;
    color: var(--bs-bg);
    line-height: 1;
}
.bs-footer__brand-desc {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--bs-ink-faint);
    margin-top: 16px;
    max-width: 320px;
    line-height: 1.7;
}
.bs-footer__col-title {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-accent);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.bs-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bs-footer__list li { padding: 7px 0; font-size: 14px; }
.bs-footer__list a {
    color: var(--bs-cream);
    text-decoration: none;
    transition: color .15s;
}
.bs-footer__list a:hover { color: var(--bs-accent); }

.bs-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 56px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(243, 235, 221, 0.12);
    max-width: var(--bs-max);
    flex-wrap: wrap;
    gap: 12px;
}
.bs-footer__copy {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.1em;
}
.bs-footer__tagline {
    font-family: var(--bs-font-display);
    font-size: 24px;
    color: var(--bs-accent);
}

@media (max-width: 900px) {
    .bs-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
    .bs-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .bs-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ─── Breathing orb (shared, used by hero) ───────────────────── */
@keyframes bs-breath-scale {
    0%   { transform: scale(0.55); }
    35%  { transform: scale(1); }
    55%  { transform: scale(1); }
    95%  { transform: scale(0.55); }
    100% { transform: scale(0.55); }
}
@keyframes bs-breath-opacity {
    0%, 100% { opacity: 0.35; }
    35%, 55% { opacity: 0.85; }
}
.bs-breath-ring {
    transform-origin: center;
    transform-box: fill-box;
    animation: bs-breath-scale 12s cubic-bezier(.45, .05, .55, .95) infinite,
               bs-breath-opacity 12s ease-in-out infinite;
}
.bs-breath-ring--slow    { animation-delay: -0.4s; }
.bs-breath-ring--slower  { animation-delay: -0.8s; }
.bs-breath-ring--slowest { animation-delay: -1.2s; }

@keyframes bs-breath-phase {
    0%, 33%      { content: 'inhale  ·  4s'; }
    33.4%, 50%   { content: 'hold    ·  3s'; }
    50.4%, 100%  { content: 'exhale  ·  5s'; }
}
.bs-breath-phase::before {
    animation: bs-breath-phase 12s steps(3) infinite;
    content: 'inhale  ·  4s';
}

/* ─── Hide legacy theme decorations on new pages ─────────────── */
/* Old style.css applies a dotted-mask gradient to .site-header::before;
   we want a clean transparent nav for the redesign. The old .site-header
   class is no longer in the DOM, so its CSS is dormant. */

/* Compatibility: ensure old utility .container doesn't constrain new sections */
.bs-section { width: 100%; }

/* Anchor scroll offset for sticky nav */
[id="why"], [id="problem"], [id="method"], [id="voices"], [id="price"], [id="faq"] {
    scroll-margin-top: 80px;
}


/* ════════════════════════════════════════════════════════════
   PAGE: Generic page (page.php) — content reading layout
   ════════════════════════════════════════════════════════════ */
.bs-page {
    padding: 80px var(--bs-pad-x) 120px;
    max-width: 760px;
    margin: 0 auto;
}
.bs-page__title {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 56px;
    letter-spacing: -0.025em;
    color: var(--bs-ink);
    margin: 0 0 12px;
    line-height: 1.1;
}
.bs-page__meta {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 48px;
}
.bs-page__body { color: var(--bs-ink); font-size: 16px; line-height: 1.85; }
.bs-page__body h2 {
    font-family: var(--bs-font-serif);
    font-weight: 400;
    font-size: 32px;
    letter-spacing: -0.015em;
    margin: 48px 0 16px;
    color: var(--bs-ink);
    line-height: 1.3;
}
.bs-page__body h3 {
    font-family: var(--bs-font-serif);
    font-weight: 400;
    font-size: 24px;
    margin: 36px 0 12px;
    color: var(--bs-ink);
}
.bs-page__body p { margin: 0 0 20px; color: var(--bs-ink-soft); }
.bs-page__body a {
    color: var(--bs-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.bs-page__body a:hover { color: var(--bs-accent-deep); }
.bs-page__body ul, .bs-page__body ol { margin: 0 0 24px; padding-left: 24px; color: var(--bs-ink-soft); }
.bs-page__body li { margin-bottom: 8px; }
.bs-page__body blockquote {
    border-left: 3px solid var(--bs-accent);
    margin: 32px 0;
    padding: 8px 0 8px 24px;
    font-family: var(--bs-font-serif);
    font-style: italic;
    color: var(--bs-ink-soft);
    font-size: 17px;
}
.bs-page__body code {
    background: var(--bs-cream);
    padding: 2px 6px;
    font-family: var(--bs-font-mono);
    font-size: 13px;
    border-radius: 4px;
    color: var(--bs-ink);
}
.bs-page__body pre {
    background: var(--bs-ink);
    color: var(--bs-bg);
    padding: 20px 24px;
    border-radius: 12px;
    overflow-x: auto;
    font-family: var(--bs-font-mono);
    font-size: 13px;
    line-height: 1.7;
    margin: 24px 0;
}
.bs-page__body pre code { background: transparent; padding: 0; color: inherit; }
.bs-page__body hr { border: none; border-top: 1px dashed var(--bs-rule); margin: 48px 0; }
.bs-page__body img { max-width: 100%; height: auto; border-radius: 8px; margin: 24px 0; }


/* ════════════════════════════════════════════════════════════
   PAGE: Single post (single.php)
   ════════════════════════════════════════════════════════════ */
.bs-post { padding: 64px var(--bs-pad-x) 96px; }
.bs-post__inner { max-width: 760px; margin: 0 auto; }
.bs-post__cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.bs-post__cat {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bs-cream);
    color: var(--bs-accent);
    font-family: var(--bs-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
}
.bs-post__cat:hover { background: var(--bs-accent); color: var(--bs-surface); }
.bs-post__title {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 56px;
    letter-spacing: -0.025em;
    color: var(--bs-ink);
    line-height: 1.15;
    margin: 0 0 24px;
}
@media (max-width: 600px) { .bs-post__title { font-size: 36px; } }
.bs-post__meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--bs-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--bs-ink-faint);
    text-transform: uppercase;
    border-top: 1px solid var(--bs-rule);
    border-bottom: 1px solid var(--bs-rule);
    padding: 16px 0;
    margin: 32px 0 48px;
}
.bs-post__meta svg { vertical-align: middle; margin-right: 4px; }
.bs-post__thumb {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 48px;
    display: block;
}


/* ════════════════════════════════════════════════════════════
   PAGE: Blog archive (page-blog.php)
   ════════════════════════════════════════════════════════════ */
.bs-blog-hero {
    padding: 80px var(--bs-pad-x) 56px;
    text-align: center;
}
.bs-blog-hero__inner { max-width: 760px; margin: 0 auto; }
.bs-blog-hero__title {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 56px;
    letter-spacing: -0.025em;
    margin: 24px 0 16px;
    line-height: 1.15;
}
.bs-blog-hero__title .bs-hand {
    font-size: 80px;
    display: inline-block;
    line-height: 0.9;
    margin-top: 16px;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .bs-blog-hero__title { font-size: 36px; }
    .bs-blog-hero__title .bs-hand { font-size: 56px; margin-top: 10px; }
}
.bs-blog-hero__lead {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--bs-ink-soft);
    margin: 0 0 32px;
    line-height: 1.7;
}

.bs-blog-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--bs-rule);
    max-width: var(--bs-max);
    margin: 32px auto 0;
    padding: 0 var(--bs-pad-x);
    flex-wrap: wrap;
}
.bs-blog-tabs button,
.bs-blog-tabs .blog-tab {
    background: transparent;
    border: none;
    padding: 14px 22px;
    font-family: var(--bs-font-sans);
    font-size: 14px;
    color: var(--bs-ink-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
    transition: color .15s, border-color .15s;
}
.bs-blog-tabs .blog-tab:hover,
.bs-blog-tabs .blog-tab.active {
    color: var(--bs-accent);
    border-bottom-color: var(--bs-accent);
}

.bs-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: var(--bs-max);
    margin: 0 auto;
    padding: 56px var(--bs-pad-x) 96px;
}
@media (max-width: 900px) { .bs-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bs-blog-grid { grid-template-columns: 1fr; } }

.bs-card {
    background: var(--bs-surface);
    border: 1px solid var(--bs-rule);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.bs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px -16px rgba(58, 46, 35, 0.25);
}
.bs-card__thumb {
    aspect-ratio: 16 / 10;
    background: var(--bs-cream);
    display: block;
    object-fit: cover;
    width: 100%;
}
.bs-card__body { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.bs-card__cat {
    font-family: var(--bs-font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--bs-accent);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.bs-card__title {
    font-family: var(--bs-font-serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: var(--bs-ink);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.bs-card__excerpt {
    font-size: 14px;
    line-height: 1.7;
    color: var(--bs-ink-soft);
    margin: 0 0 16px;
    flex: 1;
}
.bs-card__meta {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.1em;
    margin-top: auto;
}


/* ════════════════════════════════════════════════════════════
   PAGE: Front page hero variant (homepage / index.php)
   ════════════════════════════════════════════════════════════ */
.bs-home-hero {
    padding: 80px var(--bs-pad-x) 100px;
    position: relative;
}
.bs-home-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: var(--bs-max);
    margin: 0 auto;
}
.bs-home-hero__title {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 76px;
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--bs-ink);
    margin: 24px 0 0;
}
.bs-home-hero__title .bs-hand {
    font-size: 104px;
    display: inline-block;
    transform: rotate(-2deg);
    margin-top: 8px;
    line-height: 0.9;
    white-space: nowrap;
}
.bs-home-hero__lead {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--bs-ink-soft);
    max-width: 460px;
    margin-top: 32px;
}
.bs-home-hero__actions {
    display: flex;
    gap: 14px;
    margin-top: 36px;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .bs-home-hero { padding: 48px var(--bs-pad-x) 72px; }
    .bs-home-hero__inner { grid-template-columns: 1fr; gap: 48px; }
    .bs-home-hero__title { font-size: 52px; }
    .bs-home-hero__title .bs-hand { font-size: 88px; }
}
@media (max-width: 600px) {
    .bs-home-hero__title { font-size: 40px; }
    .bs-home-hero__title .bs-hand { font-size: 64px; }
}


/* ════════════════════════════════════════════════════════════
   PAGE: Contact (page-contact.php) — form + info aside
   ════════════════════════════════════════════════════════════ */
.bs-form { display: flex; flex-direction: column; gap: 22px; }
.bs-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px) { .bs-form__row { grid-template-columns: 1fr; gap: 18px; } }

.bs-form__group { display: flex; flex-direction: column; gap: 8px; }
.bs-form__group label {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-soft);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.bs-form__req { color: var(--bs-accent); }

.bs-form input[type=text],
.bs-form input[type=email],
.bs-form input[type=tel],
.bs-form select,
.bs-form textarea {
    font-family: var(--bs-font-sans);
    font-size: 15px;
    color: var(--bs-ink);
    background: var(--bs-bg);
    border: 1px solid var(--bs-rule);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.bs-form input:focus,
.bs-form select:focus,
.bs-form textarea:focus {
    outline: none;
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 3px rgba(184, 85, 58, 0.12);
}
.bs-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1l5 5 5-5' stroke='%23b8553a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.bs-form textarea { resize: vertical; min-height: 140px; line-height: 1.7; }

.bs-form__check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--bs-ink-soft);
    line-height: 1.6;
    margin-top: 4px;
    cursor: pointer;
}
.bs-form__check input[type=checkbox] {
    margin-top: 4px;
    accent-color: var(--bs-accent);
    width: 16px;
    height: 16px;
}
.bs-form__check a {
    color: var(--bs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bs-alert {
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 24px;
    border: 1px solid transparent;
}
.bs-alert--success {
    background: var(--bs-cream);
    border-color: var(--bs-sage);
    color: var(--bs-sage-deep);
}
.bs-alert--error {
    background: rgba(184, 85, 58, 0.08);
    border-color: var(--bs-accent);
    color: var(--bs-accent-deep);
}

.bs-contact__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bs-info-card {
    background: var(--bs-cream);
    border: 1px solid var(--bs-rule);
    border-radius: 16px;
    padding: 24px 22px;
}
.bs-info-card__icon {
    color: var(--bs-accent);
    margin-bottom: 12px;
}
.bs-info-card h3 {
    font-family: var(--bs-font-serif);
    font-weight: 400;
    font-size: 18px;
    margin: 0 0 6px;
    color: var(--bs-ink);
}
.bs-info-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--bs-ink-soft);
}

@media (max-width: 900px) {
    .bs-contact { grid-template-columns: 1fr !important; }
    .bs-contact__form-wrap { padding: 32px 24px !important; }
    .bs-contact__info { flex-direction: row; flex-wrap: wrap; }
    .bs-contact__info .bs-info-card { flex: 1 1 240px; }
}


/* ════════════════════════════════════════════════════════════
   PAGE: Research report (page-research.php) — long-form layout
   ════════════════════════════════════════════════════════════ */
.bs-page--wide {
    max-width: 880px;
    padding-bottom: 120px;
}
.bs-page__intro {
    text-align: center;
    margin-bottom: 64px;
}
.bs-page__intro .bs-page__title { font-size: 48px; line-height: 1.2; }
.bs-page__intro .bs-page__title .bs-hand {
    font-size: 72px;
    display: inline-block;
    line-height: 0.9;
    margin-top: 14px;
    white-space: nowrap;
}
.bs-page__intro .bs-lead { margin: 24px auto 16px; max-width: 720px; text-align: left; }
.bs-page__intro .bs-page__meta { margin-bottom: 32px; text-transform: none; letter-spacing: 0.1em; }
@media (max-width: 600px) {
    .bs-page__intro .bs-page__title { font-size: 30px; }
    .bs-page__intro .bs-page__title .bs-hand { font-size: 48px; }
}

.bs-callout {
    background: var(--bs-surface);
    border-left: 3px solid var(--bs-accent);
    border-radius: 4px;
    padding: 20px 28px;
    text-align: left;
    margin: 0 auto;
    max-width: 720px;
}
.bs-callout p {
    margin: 0;
    font-family: var(--bs-font-serif);
    font-size: 16px;
    line-height: 1.85;
    color: var(--bs-ink);
}
.bs-callout strong { color: var(--bs-accent-deep); font-weight: 500; }

/* Research-specific section classes — repurpose to bs-page__body styling */
.bs-page__body .research-summary,
.bs-page__body .research-section {
    margin: 56px 0 0;
    padding-top: 40px;
    border-top: 1px dashed var(--bs-rule);
}
.bs-page__body .research-summary:first-of-type,
.bs-page__body .research-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.bs-page__body .summary-list,
.bs-page__body .reference-list {
    margin: 16px 0 24px;
    padding-left: 24px;
    color: var(--bs-ink-soft);
}
.bs-page__body .summary-list li,
.bs-page__body .reference-list li {
    margin-bottom: 10px;
    line-height: 1.85;
}
.bs-page__body .reference-list {
    font-family: var(--bs-font-sans);
    font-size: 14px;
}
.bs-page__body .reference-list em {
    font-family: var(--bs-font-serif);
    font-style: italic;
}
.bs-page__body .app-link-box {
    margin: 32px 0;
    padding: 20px 28px;
    background: var(--bs-cream);
    border-left: 3px solid var(--bs-sage);
    border-radius: 4px;
}
.bs-page__body .app-link-box a {
    color: var(--bs-accent-deep);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ════════════════════════════════════════════════════════════
   PAGE: Apps (page-apps.php) — external tools
   ════════════════════════════════════════════════════════════ */
.bs-apps__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: var(--bs-max);
    margin: 0 auto;
}
@media (max-width: 900px) { .bs-apps__grid { grid-template-columns: 1fr; gap: 24px; } }

.bs-app {
    background: var(--bs-bg);
    border: 1px solid var(--bs-rule);
    border-radius: 20px;
    padding: 40px 36px 36px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
    text-decoration: none;
    color: inherit;
}
.bs-app:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 50px -20px rgba(58, 46, 35, 0.28);
}
.bs-app__no {
    position: absolute;
    top: 28px;
    right: 32px;
    font-family: var(--bs-font-display);
    font-size: 36px;
    color: var(--bs-accent);
    opacity: 0.55;
    line-height: 1;
}
.bs-app__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bs-surface);
    border: 1px solid var(--bs-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-accent);
    margin-bottom: 24px;
    transition: transform .25s;
}
.bs-app:hover .bs-app__icon { transform: scale(1.05) rotate(-3deg); }
.bs-app__tag {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-accent);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.bs-app__title {
    font-family: var(--bs-font-serif);
    font-weight: 400;
    font-size: 28px;
    color: var(--bs-ink);
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
.bs-app__jp {
    font-family: var(--bs-font-display);
    font-size: 26px;
    color: var(--bs-ink-soft);
    margin-bottom: 16px;
    line-height: 1;
}
.bs-app__desc {
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--bs-ink-soft);
    margin: 0 0 28px;
    flex: 1;
}
.bs-app__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: var(--bs-accent);
    color: var(--bs-surface);
    border: none;
    padding: 14px 24px;
    font-family: var(--bs-font-sans);
    font-size: 14px;
    font-weight: 500;
    border-radius: 999px;
    text-decoration: none;
    line-height: 1;
    box-shadow: 0 4px 0 var(--bs-accent-deep);
    transition: transform .15s, box-shadow .15s;
}
.bs-app:hover .bs-app__cta {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--bs-accent-deep);
}
.bs-app__url {
    margin-top: 12px;
    font-family: var(--bs-font-mono);
    font-size: 10px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.1em;
    word-break: break-all;
}


/* ════════════════════════════════════════════════════════════
   Suppress legacy theme decorations on redesigned pages
   ════════════════════════════════════════════════════════════ */
.bs-main, .bs-main * { box-sizing: border-box; }
.bs-main a:visited { color: inherit; }


/* ════════════════════════════════════════════════════════════
   PAGE: BrainSync Wellbeing — section components
   ════════════════════════════════════════════════════════════ */

.bs-main--brainsync { color: var(--bs-ink); }

.bs-section { padding: 100px var(--bs-pad-x); }
.bs-section--surface { background: var(--bs-surface); }
.bs-section--cream { background: var(--bs-cream); }
.bs-section--lg { padding: 120px var(--bs-pad-x); }
.bs-section--xl { padding: 140px var(--bs-pad-x); }

@media (max-width: 900px) {
    .bs-section { padding: 72px var(--bs-pad-x); }
    .bs-section--lg { padding: 84px var(--bs-pad-x); }
    .bs-section--xl { padding: 96px var(--bs-pad-x); }
}
@media (max-width: 600px) {
    .bs-section { padding: 56px var(--bs-pad-x); }
    .bs-section--lg { padding: 64px var(--bs-pad-x); }
    .bs-section--xl { padding: 72px var(--bs-pad-x); }
}

/* Section header (kicker + h2 + lead) */
.bs-sec-head { text-align: center; margin: 0 auto 64px; max-width: 760px; }
.bs-sec-head__h {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 56px;
    letter-spacing: -0.02em;
    margin: 20px 0 12px;
    line-height: 1.15;
    color: var(--bs-ink);
}
.bs-sec-head__h .bs-hand {
    font-size: 80px;
    display: inline-block;
    line-height: 0.9;
    margin-top: 16px;
}
.bs-sec-head__sub {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 17px;
    color: var(--bs-ink-soft);
    margin: 0;
}
@media (max-width: 900px) {
    .bs-sec-head { margin-bottom: 48px; }
    .bs-sec-head__h { font-size: 40px; }
    .bs-sec-head__h .bs-hand { font-size: 60px; }
}
@media (max-width: 600px) {
    .bs-sec-head__h { font-size: 32px; }
    .bs-sec-head__h .bs-hand { font-size: 48px; }
    .bs-sec-head__sub { font-size: 15px; }
}

/* ─── Hero ───────────────────────────────────────────────────── */
.bs-hero {
    padding: 80px var(--bs-pad-x) 120px;
}
.bs-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: var(--bs-max);
    margin: 0 auto;
    padding: 0;
}
.bs-hero__title {
    margin: 24px 0 0;
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 80px;
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--bs-ink);
}
.bs-hero__hand {
    font-size: 112px;
    line-height: 0.9;
    display: inline-block;
    margin-top: 8px;
    transform: rotate(-2deg);
    white-space: nowrap;
}
.bs-hero__lead {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--bs-ink-soft);
    max-width: 460px;
    margin-top: 32px;
}
.bs-hero__cta {
    display: flex;
    gap: 14px;
    margin-top: 36px;
    align-items: center;
    flex-wrap: wrap;
}
.bs-hero__count {
    margin-top: 56px;
    display: flex;
    gap: 24px;
    align-items: center;
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--bs-ink-faint);
}
.bs-hero__avatars { display: flex; }
.bs-hero__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bs-bg);
    margin-left: -8px;
    background: var(--chip-color, var(--bs-accent));
}
.bs-hero__avatar:first-child { margin-left: 0; }

.bs-hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
}
.bs-hero__anno-top {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: var(--bs-font-display);
    font-size: 22px;
    color: var(--bs-accent);
    transform: rotate(-6deg);
    text-align: center;
    line-height: 1.1;
}
.bs-hero__anno-top small {
    font-size: 16px;
    color: var(--bs-ink-soft);
    display: block;
    font-family: var(--bs-font-display);
}
.bs-hero__anno-arrow {
    position: absolute;
    top: 60px;
    right: 80px;
}
.bs-hero__anno-bottom {
    position: absolute;
    bottom: 30px;
    left: 20px;
    font-family: var(--bs-font-display);
    font-size: 20px;
    color: var(--bs-sage-deep);
    transform: rotate(3deg);
}

@media (max-width: 900px) {
    .bs-hero { padding: 48px var(--bs-pad-x) 80px; }
    .bs-hero__inner { grid-template-columns: 1fr; gap: 48px; }
    .bs-hero__title { font-size: 56px; }
    .bs-hero__hand { font-size: 90px; }
    .bs-hero__visual { min-height: 360px; order: -1; }
}
@media (max-width: 600px) {
    .bs-hero__title { font-size: 42px; }
    .bs-hero__hand { font-size: 72px; }
    .bs-hero__lead { font-size: 15px; }
    .bs-hero__visual { min-height: 280px; }
    .bs-hero__anno-top, .bs-hero__anno-arrow, .bs-hero__anno-bottom { display: none; }
}

/* Breathing orb container */
.bs-orb { position: relative; width: 480px; height: 480px; max-width: 100%; }
.bs-orb__phase {
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    font-family: var(--bs-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bs-ink);
    opacity: 0.7;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .bs-orb { width: 280px; height: 280px; }
}

/* ─── Pillars ────────────────────────────────────────────────── */
.bs-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
}
@media (max-width: 900px) { .bs-pillars__grid { grid-template-columns: 1fr; gap: 20px; } }

.bs-pillar {
    background: var(--bs-bg);
    border-radius: 20px;
    padding: 36px 32px;
    position: relative;
    border: 1px solid var(--bs-rule);
    transition: transform .25s, box-shadow .25s;
}
.bs-pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px -16px rgba(58, 46, 35, 0.25);
}
.bs-pillar__num {
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: var(--bs-font-display);
    font-size: 56px;
    line-height: 1;
    opacity: 0.5;
}
.bs-pillar__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bs-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-rule);
    margin-bottom: 24px;
}
.bs-pillar__tag {
    font-family: var(--bs-font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.bs-pillar__title {
    font-family: var(--bs-font-serif);
    font-weight: 400;
    font-size: 26px;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
    color: var(--bs-ink);
}
.bs-pillar__desc {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--bs-ink-soft);
    margin: 0;
}

/* ─── Problem (letter format) ────────────────────────────────── */
.bs-problem__inner {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 80px;
    align-items: center;
    max-width: var(--bs-max);
    margin: 0 auto;
}
@media (max-width: 900px) {
    .bs-problem__inner { grid-template-columns: 1fr; gap: 48px; }
}

.bs-problem__title {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 60px;
    letter-spacing: -0.025em;
    margin: 20px 0 0;
    line-height: 1.15;
    color: var(--bs-ink);
}
.bs-problem__title .bs-hand {
    font-size: 96px;
    display: inline-block;
    line-height: 0.9;
    margin-top: 18px;
}
@media (max-width: 600px) {
    .bs-problem__title { font-size: 38px; }
    .bs-problem__title .bs-hand { font-size: 64px; }
}

.bs-problem__lead {
    font-family: var(--bs-font-serif);
    font-size: 18px;
    font-style: italic;
    color: var(--bs-ink-soft);
    line-height: 1.8;
    margin-top: 32px;
    max-width: 460px;
}

.bs-letter {
    background: var(--bs-surface);
    padding: 40px 44px 44px;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 16px 40px -20px rgba(58, 46, 35, 0.25);
    transform: rotate(0.5deg);
}
@media (max-width: 600px) {
    .bs-letter { padding: 28px 24px; }
}
.bs-letter__head {
    font-family: var(--bs-font-display);
    font-size: 24px;
    color: var(--bs-accent);
    margin-bottom: 20px;
    transform: rotate(-1deg);
    display: inline-block;
}
.bs-letter__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px dashed var(--bs-rule);
}
.bs-letter__item:first-of-type { border-top: none; }
.bs-letter__num {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--bs-accent);
    margin-top: 2px;
    min-width: 16px;
}
.bs-letter__line {
    font-size: 15px;
    color: var(--bs-ink);
    line-height: 1.5;
}
.bs-letter__tag {
    font-family: var(--bs-font-mono);
    font-size: 10px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.12em;
    margin-top: 3px;
    text-transform: uppercase;
}
.bs-letter__close {
    font-family: var(--bs-font-display);
    font-size: 20px;
    color: var(--bs-ink-soft);
    margin-top: 24px;
    transform: rotate(-0.5deg);
}

/* ─── Method (8 tools grid) ──────────────────────────────────── */
.bs-method__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: var(--bs-max);
    margin: 0 auto;
    background: var(--bs-bg);
    border: 1px solid var(--bs-rule);
    border-radius: 12px;
    overflow: hidden;
}
@media (max-width: 900px) { .bs-method__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bs-method__grid { grid-template-columns: 1fr; } }

.bs-tool {
    padding: 32px 26px 36px;
    position: relative;
    transition: background .2s;
    border-right: 1px solid var(--bs-rule);
    border-bottom: 1px solid var(--bs-rule);
}
.bs-tool:hover { background: var(--bs-surface); }
.bs-tool:hover .bs-tool__icon { transform: scale(1.1) rotate(-3deg); }

/* Borders only between cells (last column / last row clean) */
.bs-method__grid .bs-tool:nth-child(4n) { border-right: none; }
.bs-method__grid .bs-tool:nth-last-child(-n+4) { border-bottom: none; }
@media (max-width: 900px) {
    .bs-method__grid .bs-tool { border-right: 1px solid var(--bs-rule); border-bottom: 1px solid var(--bs-rule); }
    .bs-method__grid .bs-tool:nth-child(4n) { border-right: 1px solid var(--bs-rule); }
    .bs-method__grid .bs-tool:nth-child(2n) { border-right: none; }
    .bs-method__grid .bs-tool:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 480px) {
    .bs-method__grid .bs-tool { border-right: none; }
    .bs-method__grid .bs-tool:not(:last-child) { border-bottom: 1px solid var(--bs-rule); }
}

.bs-tool__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}
.bs-tool__icon {
    color: var(--bs-accent);
    transition: transform .25s;
}
.bs-tool__no {
    font-family: var(--bs-font-display);
    font-size: 22px;
    color: var(--bs-accent-deep);
    opacity: 0.55;
}
.bs-tool__metric {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-accent);
    letter-spacing: 0.16em;
    margin-bottom: 4px;
}
.bs-tool__title {
    font-family: var(--bs-font-serif);
    font-weight: 400;
    font-size: 22px;
    margin: 0 0 4px;
    color: var(--bs-ink);
}
.bs-tool__jp {
    font-family: var(--bs-font-display);
    font-size: 22px;
    color: var(--bs-ink-soft);
    margin-bottom: 10px;
}
.bs-tool__desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--bs-ink-soft);
    margin: 0;
}

/* ─── Evidence ───────────────────────────────────────────────── */
.bs-evidence__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: var(--bs-max);
    margin: 0 auto;
}
@media (max-width: 900px) { .bs-evidence__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
@media (max-width: 480px) { .bs-evidence__grid { grid-template-columns: 1fr; } }

.bs-stat {
    position: relative;
    text-align: center;
    padding: 20px 12px;
}
.bs-stat__hand {
    position: absolute;
    top: -10px;
    left: 50%;
    font-family: var(--bs-font-display);
    font-size: 22px;
    color: var(--bs-accent);
}
.bs-stat__num {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 96px;
    color: var(--bs-ink);
    line-height: 1;
    letter-spacing: -0.04em;
    margin-top: 24px;
}
.bs-stat__num span {
    font-size: 48px;
    color: var(--bs-accent);
}
.bs-stat__label {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--bs-ink-soft);
    margin-top: 16px;
}
@media (max-width: 900px) {
    .bs-stat__num { font-size: 72px; }
    .bs-stat__num span { font-size: 36px; }
}

.bs-evidence__note {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.12em;
    text-align: center;
    margin: 48px 0 0;
}

/* ─── Voices ─────────────────────────────────────────────────── */
.bs-voices__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: var(--bs-max);
    margin: 0 auto;
}
@media (max-width: 900px) { .bs-voices__grid { grid-template-columns: 1fr; } }

.bs-voice {
    margin: 0;
    padding: 32px 30px;
    background: var(--bs-bg);
    border-radius: 16px;
    border: 1px solid var(--bs-rule);
    position: relative;
}
.bs-voice__quote-mark {
    font-family: var(--bs-font-display);
    font-size: 80px;
    color: var(--bs-accent);
    line-height: 0.6;
    margin-bottom: -10px;
}
.bs-voice__q {
    margin: 0;
    font-family: var(--bs-font-serif);
    font-size: 16px;
    line-height: 1.7;
    color: var(--bs-ink);
    font-style: italic;
}
.bs-voice__cap {
    margin-top: 20px;
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.1em;
}
.bs-voice__cap span { color: var(--bs-accent); }

/* ─── Pricing ────────────────────────────────────────────────── */
.bs-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: var(--bs-max);
    margin: 0 auto;
    align-items: stretch;
}
@media (max-width: 900px) {
    .bs-pricing__grid { grid-template-columns: 1fr; }
}

.bs-plan {
    background: var(--bs-surface);
    color: var(--bs-ink);
    padding: 40px 32px 32px;
    border-radius: 20px;
    border: 1px solid var(--bs-rule);
    position: relative;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}
.bs-plan--tilt-l { transform: rotate(-0.4deg); }
.bs-plan--tilt-r { transform: rotate(0.4deg); }
.bs-plan--featured {
    background: var(--bs-ink);
    color: var(--bs-bg);
    border: none;
    box-shadow: 0 20px 50px -20px rgba(58, 46, 35, 0.45);
    transform: rotate(0);
}
.bs-plan__ribbon {
    position: absolute;
    top: -14px;
    left: 24px;
    background: var(--bs-accent);
    color: var(--bs-surface);
    font-family: var(--bs-font-display);
    font-size: 22px;
    padding: 4px 16px;
    border-radius: 999px;
    transform: rotate(-3deg);
    line-height: 1.2;
}
.bs-plan__tag {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bs-accent);
}
.bs-plan--featured .bs-plan__tag { color: var(--bs-cream); }
.bs-plan__name {
    font-family: var(--bs-font-serif);
    font-weight: 400;
    font-size: 32px;
    margin: 8px 0 0;
    letter-spacing: -0.01em;
    color: inherit;
}
.bs-plan__jp {
    font-family: var(--bs-font-display);
    font-size: 32px;
    color: var(--bs-ink-soft);
    margin-bottom: 24px;
}
.bs-plan--featured .bs-plan__jp { color: var(--bs-cream); }
.bs-plan__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 28px;
}
.bs-plan__price-num {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 56px;
    letter-spacing: -0.03em;
    line-height: 1;
}
.bs-plan__price-cycle { font-size: 14px; color: var(--bs-ink-soft); }
.bs-plan--featured .bs-plan__price-cycle { color: var(--bs-cream); }

.bs-plan__bullets {
    border-top: 1px solid var(--bs-rule);
    padding-top: 24px;
    margin-bottom: 28px;
    list-style: none;
    padding-left: 0;
    flex: 1;
}
.bs-plan--featured .bs-plan__bullets { border-top-color: rgba(243, 235, 221, 0.18); }
.bs-plan__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 14px;
}
.bs-plan__bullets li svg { color: var(--bs-accent); margin-top: 4px; flex: none; }
.bs-plan--featured .bs-plan__bullets li svg { color: var(--bs-cream); }

.bs-plan__cta {
    width: 100%;
    background: transparent;
    color: var(--bs-ink);
    border: 1.5px solid var(--bs-ink);
    padding: 14px;
    font-family: var(--bs-font-sans);
    font-size: 14px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1;
    display: inline-block;
    transition: background .15s, color .15s;
}
.bs-plan__cta:hover { background: var(--bs-ink); color: var(--bs-bg); }
.bs-plan--featured .bs-plan__cta {
    background: var(--bs-accent);
    color: var(--bs-surface);
    border: none;
    box-shadow: 0 4px 0 var(--bs-accent-deep);
}
.bs-plan--featured .bs-plan__cta:hover {
    background: var(--bs-accent);
    color: var(--bs-surface);
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--bs-accent-deep);
}

/* ─── FAQ ────────────────────────────────────────────────────── */
.bs-faq__inner {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    max-width: var(--bs-max);
    margin: 0 auto;
}
@media (max-width: 900px) {
    .bs-faq__inner { grid-template-columns: 1fr; gap: 32px; }
}

.bs-faq__title {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 56px;
    letter-spacing: -0.025em;
    margin: 20px 0 0;
    line-height: 1.15;
    color: var(--bs-ink);
}
.bs-faq__title .bs-hand {
    font-size: 96px;
    display: inline-block;
    line-height: 0.9;
    margin-top: 18px;
}
@media (max-width: 600px) {
    .bs-faq__title { font-size: 38px; }
    .bs-faq__title .bs-hand { font-size: 60px; }
}
.bs-faq__intro {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--bs-ink-soft);
    margin-top: 24px;
    max-width: 320px;
}

.bs-faq__item { border-bottom: 1px solid var(--bs-rule); }
.bs-faq__btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 22px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--bs-font-sans);
    font-size: 17px;
    color: var(--bs-ink);
    font-weight: 500;
    line-height: 1.5;
}
.bs-faq__q-num {
    font-family: var(--bs-font-display);
    font-size: 22px;
    color: var(--bs-accent);
    margin-right: 14px;
    flex: none;
}
.bs-faq__q-text { flex: 1; }
.bs-faq__icon {
    color: var(--bs-accent);
    transition: transform .25s;
    flex: none;
}
.bs-faq__item.is-open .bs-faq__icon { transform: rotate(45deg); }
.bs-faq__a {
    padding: 0 0 24px 60px;
    font-family: var(--bs-font-serif);
    font-size: 16px;
    line-height: 1.85;
    color: var(--bs-ink-soft);
    font-style: italic;
    display: none;
}
.bs-faq__item.is-open .bs-faq__a { display: block; }
@media (max-width: 600px) {
    .bs-faq__a { padding-left: 0; }
}

/* ─── Final CTA ──────────────────────────────────────────────── */
.bs-final-cta {
    text-align: center;
    position: relative;
}
.bs-final-cta__h {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 76px;
    letter-spacing: -0.025em;
    margin: 24px 0 0;
    line-height: 1.15;
    color: var(--bs-ink);
}
.bs-final-cta__h .bs-hand {
    font-size: 130px;
    display: inline-block;
    line-height: 0.9;
    margin-top: 20px;
}
@media (max-width: 900px) {
    .bs-final-cta__h { font-size: 52px; }
    .bs-final-cta__h .bs-hand { font-size: 90px; }
}
@media (max-width: 600px) {
    .bs-final-cta__h { font-size: 40px; }
    .bs-final-cta__h .bs-hand { font-size: 64px; }
}
.bs-final-cta__lead {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 19px;
    color: var(--bs-ink-soft);
    max-width: 540px;
    margin: 32px auto 0;
    line-height: 1.7;
}
.bs-final-cta__actions {
    display: flex;
    gap: 16px;
    margin-top: 48px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.bs-final-cta__sq {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    opacity: 0.3;
}

/* ─── Diagnose modal ─────────────────────────────────────────── */
.bs-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: bs-modal-fade .25s;
}
.bs-modal.is-open { display: flex; }
@keyframes bs-modal-fade { from { opacity: 0 } to { opacity: 1 } }
.bs-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 32, 26, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bs-modal__panel {
    background: var(--bs-bg);
    color: var(--bs-ink);
    border-radius: 24px;
    padding: 40px 48px 36px;
    max-width: 640px;
    width: 100%;
    position: relative;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.4);
    font-family: var(--bs-font-sans);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
@media (max-width: 600px) {
    .bs-modal__panel { padding: 32px 24px; border-radius: 18px; }
}
.bs-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--bs-ink-soft);
    padding: 8px;
    line-height: 0;
}
.bs-modal__close:hover { color: var(--bs-accent); }

.bs-modal__progress {
    display: flex;
    gap: 4px;
    margin-top: 14px;
}
.bs-modal__bar {
    flex: 1;
    height: 3px;
    background: var(--bs-rule);
    border-radius: 2px;
    transition: background .25s;
}
.bs-modal__bar.is-active { background: var(--bs-accent); }

.bs-modal__q {
    font-family: var(--bs-font-serif);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.4;
    margin: 32px 0 28px;
    letter-spacing: -0.01em;
    color: var(--bs-ink);
}
@media (max-width: 600px) { .bs-modal__q { font-size: 22px; } }

.bs-modal__opts {
    display: grid;
    gap: 10px;
}
.bs-modal__opt {
    background: var(--bs-surface);
    color: var(--bs-ink);
    border: 1px solid var(--bs-rule);
    padding: 16px 22px;
    font-family: var(--bs-font-sans);
    font-size: 15px;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color .15s, background .15s;
}
.bs-modal__opt:hover {
    border-color: var(--bs-accent);
    background: var(--bs-cream);
}
.bs-modal__opt-score {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.1em;
}

.bs-modal__tagline {
    margin-top: 24px;
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.12em;
    text-align: center;
}

.bs-modal__result-h {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 32px;
    margin: 20px 0 8px;
    letter-spacing: -0.01em;
    color: var(--bs-ink);
}
.bs-modal__result-h .bs-hand { font-size: 64px; }
.bs-modal__resultbar {
    margin: 20px 0 32px;
}
.bs-modal__resultbar-track {
    height: 12px;
    background: var(--bs-rule);
    border-radius: 999px;
    overflow: hidden;
}
.bs-modal__resultbar-fill {
    height: 100%;
    background: var(--bs-accent);
    border-radius: 999px;
    transition: width .8s ease-out;
    width: 0;
}
.bs-modal__resultbar-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-faint);
    margin-top: 8px;
    letter-spacing: 0.12em;
}
.bs-modal__advice {
    font-family: var(--bs-font-serif);
    font-size: 17px;
    font-style: italic;
    color: var(--bs-ink-soft);
    line-height: 1.75;
    margin: 0;
}
.bs-modal__actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}
.bs-modal__actions .bs-btn-primary { flex: 1; justify-content: center; }
@media (max-width: 480px) {
    .bs-modal__actions { flex-direction: column; }
    .bs-modal__actions .bs-btn-primary,
    .bs-modal__actions .bs-btn-outline { width: 100%; justify-content: center; }
}

body.bs-modal-open { overflow: hidden; }

/* ─── Toast ──────────────────────────────────────────────────── */
.bs-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    background: var(--bs-ink);
    color: var(--bs-bg);
    padding: 14px 24px;
    border-radius: 999px;
    font-family: var(--bs-font-sans);
    font-size: 14px;
    z-index: 200;
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: transform .25s, opacity .25s;
}
.bs-toast.is-visible {
    display: inline-flex;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.bs-toast svg { color: var(--bs-accent); flex: none; }


/* ════════════════════════════════════════════════════════════
   Reusable utilities (extracted from inline styles)
   ════════════════════════════════════════════════════════════ */

/* Urgency badge — "今月の無料相談枠：残り N 名" */
.bs-urgency-badge {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: var(--bs-cream);
    border-radius: 999px;
    font-family: var(--bs-font-mono);
    font-size: 12px;
    color: var(--bs-accent-deep);
    letter-spacing: 0.08em;
}
.bs-urgency-badge__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-accent);
    box-shadow: 0 0 0 3px rgba(184, 85, 58, 0.18);
}
.bs-urgency-badge__count {
    font-family: var(--bs-font-display);
    font-size: 22px;
    color: var(--bs-accent);
    font-weight: 400;
}

/* Hero "joined by N engineers" row — reused on home + brainsync hero */
.bs-hero-count {
    margin-top: 48px;
    display: flex;
    gap: 18px;
    align-items: center;
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--bs-ink-faint);
}
.bs-hero-avatars { display: flex; }
.bs-hero-avatars__chip {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bs-bg);
    background: var(--chip-color, var(--bs-accent));
}
.bs-hero-avatars__chip + .bs-hero-avatars__chip { margin-left: -8px; }

/* Centered text/link wrapper used below several sections */
.bs-section-link {
    text-align: center;
    margin-top: 48px;
}
.bs-section-link--left { text-align: left; margin-top: 32px; }

/* Standalone pagination row */
.bs-pagination {
    text-align: center;
    padding: 32px var(--bs-pad-x) 96px;
}
.bs-empty-state {
    text-align: center;
    padding: 48px var(--bs-pad-x) 120px;
    color: var(--bs-ink-soft);
}

/* Tag list at the foot of a single post */
.bs-post__tags {
    margin-top: 48px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.bs-post__tag {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-soft);
    letter-spacing: 0.1em;
    text-decoration: none;
    border-bottom: 1px solid var(--bs-rule);
    padding-bottom: 1px;
}
.bs-post__tag:hover { color: var(--bs-accent); border-bottom-color: var(--bs-accent); }

/* Prev / next post navigation */
.bs-post__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--bs-rule);
}
.bs-post__nav-item {
    text-decoration: none;
    color: inherit;
    display: block;
}
.bs-post__nav-item--next { text-align: right; }
.bs-post__nav-label {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-faint);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.bs-post__nav-title {
    font-family: var(--bs-font-serif);
    font-size: 18px;
    color: var(--bs-ink);
    margin-top: 6px;
    line-height: 1.4;
}
.bs-post__back {
    text-align: center;
    margin-top: 64px;
}

/* Reusable FAQ row label wrapper (kicker + question text in flex) */
.bs-faq__btn-inner {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: 1;
    text-align: left;
}

/* Generic short-intro section + section body without top padding.
   Used by contact / apps pages. */
.bs-section-intro { padding-top: 80px; padding-bottom: 48px; }
.bs-section-intro .bs-sec-head { margin-bottom: 24px; }
.bs-section-body { padding: 0 var(--bs-pad-x) 96px; }
.bs-contact {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: start;
}
.bs-contact__form-wrap {
    background: var(--bs-surface);
    border: 1px solid var(--bs-rule);
    border-radius: 20px;
    padding: 40px 44px;
}
.bs-contact__form-title {
    font-family: var(--bs-font-serif);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--bs-ink);
}
.bs-contact__form-desc {
    font-family: var(--bs-font-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--bs-ink-soft);
    margin: 0 0 28px;
    line-height: 1.7;
}
.bs-contact__submit { margin-top: 28px; }
.bs-contact__submit .bs-btn-primary { width: 100%; justify-content: center; }
.bs-contact__faq-list { max-width: 760px; margin: 0 auto; }

/* Blog archive: section title row above the grid */
.bs-blog__section { padding-top: 48px; }
.bs-blog__section-head {
    max-width: var(--bs-max);
    margin: 0 auto;
    padding: 0 var(--bs-pad-x);
}
.bs-blog__section-title {
    font-family: var(--bs-font-serif);
    font-weight: 300;
    font-size: 36px;
    letter-spacing: -0.02em;
    color: var(--bs-ink);
    margin: 0 0 32px;
}
.bs-blog-grid--reset { padding-top: 0; }

/* Category card grid (blog page) */
.bs-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    max-width: var(--bs-max);
    margin: 0 auto;
}
.bs-cat-card {
    text-decoration: none;
    color: inherit;
    background: var(--bs-bg);
    border: 1px solid var(--bs-rule);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: transform .2s, box-shadow .2s;
}
.bs-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -16px rgba(58, 46, 35, 0.25);
}
.bs-cat-card__no {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.bs-cat-card__name {
    font-family: var(--bs-font-serif);
    font-size: 18px;
    color: var(--bs-ink);
    margin-top: 6px;
}
.bs-cat-card__count {
    font-family: var(--bs-font-display);
    font-size: 32px;
    color: var(--bs-accent);
    line-height: 1;
}