:root {
  --layout-shell: 1200px;
  --header-height: calc(var(--spacing-16) + var(--spacing-2));
  --section-space: calc(var(--spacing-20) + var(--spacing-10));
  --border-width-base: 1px;
  --brand-mark-size: var(--spacing-10);
  --brand-bar-width: 2px;
  --hero-title-size: clamp(var(--font-size-4xl), 6vw, 64px);
  --section-title-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: var(--spacing-0); background: var(--color-bg-base); color: var(--color-text-primary); font-family: var(--font-family-sans); font-size: var(--font-size-base); line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; }
h1, h2, h3, p { margin-top: var(--spacing-0); }
.shell { width: min(var(--layout-shell), calc(100% - var(--spacing-12))); margin-inline: auto; }
.sr-only { position: absolute; width: var(--border-width-base); height: var(--border-width-base); padding: var(--spacing-0); margin: calc(var(--border-width-base) * -1); overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: var(--spacing-0); }
.skip-link { position: fixed; z-index: var(--z-toast); inset: calc(var(--spacing-20) * -1) auto auto var(--spacing-4); padding: var(--spacing-2) var(--spacing-4); background: var(--color-bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.skip-link:focus { top: var(--spacing-4); }

.site-header { position: sticky; inset-block-start: var(--spacing-0); z-index: var(--z-sticky); height: var(--header-height); border-bottom: var(--border-width-base) solid var(--color-border); background: var(--color-bg-surface); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: var(--spacing-3); }
.brand-logo { width: calc(var(--spacing-20) * 2); max-height: var(--spacing-12); object-fit: contain; object-position: left center; }
.brand > span:last-child { display: grid; line-height: var(--line-height-tight); }
.brand strong { font-size: var(--font-size-base); letter-spacing: var(--border-width-base); }
.brand small { margin-top: var(--spacing-1); color: var(--color-text-tertiary); font-family: var(--font-family-mono); font-size: var(--font-size-xs); letter-spacing: var(--border-width-base); }
.brand-mark { width: var(--brand-mark-size); height: var(--brand-mark-size); display: flex; align-items: center; justify-content: center; gap: var(--spacing-1); border-radius: var(--radius-lg); background: var(--gradient-brand); }
.brand-mark i { width: var(--brand-bar-width); height: var(--spacing-3); border-radius: var(--radius-full); background: var(--color-text-inverse); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: var(--spacing-5); }.brand-mark i:nth-child(3) { height: var(--spacing-6); }
nav { display: flex; align-items: center; gap: var(--spacing-8); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
nav a { transition: color var(--transition-base); }
nav a:hover, nav a:focus-visible, nav a.active { color: var(--color-text-brand); }
nav a:focus-visible, .button:focus-visible, .gallery-tab:focus-visible, .menu-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-action { height: var(--control-height-base); display: inline-flex; align-items: center; padding-inline: var(--spacing-4); border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-primary); background: var(--color-bg-surface); }
.menu-button { display: none; width: var(--control-height-lg); height: var(--control-height-lg); border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.menu-button span { width: var(--spacing-5); height: var(--brand-bar-width); background: var(--color-text-primary); }

.home-hero { padding-block: var(--section-space); background: var(--gradient-brand-soft); border-bottom: var(--border-width-base) solid var(--color-border-brand); }
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--spacing-20); align-items: center; }
.kicker { margin-bottom: var(--spacing-4); color: var(--color-text-brand); font-family: var(--font-family-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--spacing-1); }
.kicker.inverse { color: var(--color-primary-300); }
h1 { margin-bottom: var(--spacing-6); font-size: var(--hero-title-size); line-height: var(--line-height-tight); letter-spacing: calc(var(--border-width-base) * -2); }
.hero-copy > p:not(.kicker) { max-width: calc(var(--spacing-20) * 8); color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }
.hero-actions { display: flex; gap: var(--spacing-3); margin-top: var(--spacing-8); }
.button { min-height: var(--control-height-lg); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-4); padding-inline: var(--spacing-5); border: var(--border-width-base) solid transparent; border-radius: var(--radius-lg); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: all var(--transition-base); }
.button-primary { color: var(--color-text-inverse); background: var(--color-brand); box-shadow: var(--shadow-brand); }.button-primary:hover { background: var(--color-brand-hover); transform: translateY(calc(var(--border-width-base) * -1)); }.button-primary:active { background: var(--color-brand-active); }
.button-secondary { color: var(--color-text-primary); background: var(--color-bg-surface); border-color: var(--color-border); }.button-secondary:hover { color: var(--color-text-brand); border-color: var(--color-brand); }
.portfolio-summary { padding: var(--spacing-6); border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg-surface); box-shadow: var(--shadow-base); }
.portfolio-summary > p { color: var(--color-text-tertiary); font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
.portfolio-summary > div { display: grid; grid-template-columns: var(--spacing-10) 1fr; gap: var(--spacing-2) var(--spacing-3); padding-block: var(--spacing-5); border-top: var(--border-width-base) solid var(--color-divider); }
.portfolio-summary div span { grid-row: span 2; color: var(--color-text-brand); font-family: var(--font-family-mono); }.portfolio-summary div strong { font-size: var(--font-size-lg); }.portfolio-summary div small { color: var(--color-text-secondary); }
.portfolio-summary footer { display: flex; align-items: baseline; gap: var(--spacing-3); padding-top: var(--spacing-5); border-top: var(--border-width-base) solid var(--color-divider); }.portfolio-summary footer b { color: var(--color-text-brand); font-family: var(--font-family-mono); font-size: var(--font-size-4xl); }.portfolio-summary footer span { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

.product-matrix, .detail-section, .gallery-section, .company-section, .governance-section { padding-block: var(--section-space); }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--spacing-20); align-items: end; margin-bottom: var(--spacing-16); }
.section-heading.compact { margin-bottom: var(--spacing-10); }
.section-heading h2, .company-grid h2 { margin-bottom: var(--spacing-0); font-size: var(--section-title-size); line-height: var(--line-height-tight); letter-spacing: calc(var(--border-width-base) * -1); }
.section-heading > p { margin-bottom: var(--spacing-0); color: var(--color-text-secondary); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); }
.product-row { display: grid; grid-template-columns: .72fr 1.28fr; gap: var(--spacing-12); align-items: center; padding-block: var(--spacing-16); border-top: var(--border-width-base) solid var(--color-border); }
.product-row-reverse .product-info { order: 2; }.product-row-reverse .product-preview { order: 1; }
.product-number { margin-bottom: var(--spacing-10); color: var(--color-text-brand); font-family: var(--font-family-mono); font-size: var(--font-size-3xl); }
.product-label { margin-bottom: var(--spacing-3); color: var(--color-text-tertiary); font-family: var(--font-family-mono); font-size: var(--font-size-xs); letter-spacing: var(--spacing-1); }
.product-info h3 { margin-bottom: var(--spacing-4); font-size: var(--font-size-4xl); line-height: var(--line-height-tight); }.product-info > p:not(.product-label) { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }.product-info ul { margin: var(--spacing-6) var(--spacing-0); padding: var(--spacing-0); list-style: none; }.product-info li { padding-block: var(--spacing-2); border-top: var(--border-width-base) solid var(--color-divider); font-size: var(--font-size-sm); }.product-info li::before { content: "•"; margin-right: var(--spacing-2); color: var(--color-text-brand); }
.product-preview { overflow: hidden; border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg-surface); box-shadow: var(--shadow-base); transition: box-shadow var(--transition-base), transform var(--transition-base); }.product-preview:hover { transform: translateY(calc(var(--spacing-1) * -1)); box-shadow: var(--shadow-lg); }.product-preview img { width: 100%; height: auto; object-fit: contain; background: var(--color-bg-surface); }
.preview-toolbar { min-height: var(--control-height-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); padding-inline: var(--spacing-4); border-bottom: var(--border-width-base) solid var(--color-divider); color: var(--color-text-tertiary); font-size: var(--font-size-xs); }.preview-toolbar span { font-family: var(--font-family-mono); }.preview-toolbar b { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }

.method-section, .process-section { padding-block: var(--section-space); background: var(--color-neutral-900); color: var(--color-neutral-100); }
.method-section .section-heading > p { color: var(--color-neutral-400); }
.method-list { margin: var(--spacing-0); padding: var(--spacing-0); list-style: none; border-top: var(--border-width-base) solid var(--color-neutral-700); }
.method-list li { display: grid; grid-template-columns: var(--spacing-16) 1fr; gap: var(--spacing-6); padding-block: var(--spacing-8); border-bottom: var(--border-width-base) solid var(--color-neutral-700); }.method-list li > span { color: var(--color-primary-300); font-family: var(--font-family-mono); }.method-list h3 { margin-bottom: var(--spacing-2); font-size: var(--font-size-2xl); }.method-list p { max-width: calc(var(--spacing-20) * 8); margin-bottom: var(--spacing-0); color: var(--color-neutral-400); }
.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-20); }.company-grid > div > p { color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }.company-grid dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--spacing-10) var(--spacing-0) var(--spacing-0); }.company-grid dl div { padding: var(--spacing-5); border-left: var(--border-width-base) solid var(--color-border); }.company-grid dt { color: var(--color-text-brand); font-family: var(--font-family-mono); font-size: var(--font-size-3xl); }.company-grid dd { margin: var(--spacing-1) var(--spacing-0) var(--spacing-0); color: var(--color-text-secondary); font-size: var(--font-size-xs); }

.contact-section { padding-block: var(--section-space); color: var(--color-neutral-100); background: var(--color-neutral-900); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-20); align-items: center; }
.contact-copy h2 { margin-bottom: var(--spacing-5); font-size: var(--section-title-size); line-height: var(--line-height-tight); letter-spacing: calc(var(--border-width-base) * -1); }
.contact-copy > p:not(.kicker) { max-width: calc(var(--spacing-20) * 8); color: var(--color-neutral-400); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }
.contact-copy ul { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin: var(--spacing-8) var(--spacing-0) var(--spacing-0); padding: var(--spacing-0); list-style: none; }
.contact-copy li { min-height: var(--control-height-sm); display: inline-flex; align-items: center; padding-inline: var(--spacing-3); border: var(--border-width-base) solid var(--color-neutral-700); border-radius: var(--radius-sm); color: var(--color-primary-300); font-size: var(--font-size-xs); }
.contact-card { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-6); align-items: center; padding: var(--spacing-6); border: var(--border-width-base) solid var(--color-neutral-700); border-radius: var(--radius-xl); background: var(--color-neutral-800); box-shadow: var(--shadow-lg); }
.contact-qr { width: calc(var(--spacing-20) * 3); overflow: hidden; padding: var(--spacing-2); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.contact-qr img { width: 100%; height: auto; }
.contact-card strong { display: block; margin-bottom: var(--spacing-3); color: var(--color-neutral-100); font-size: var(--font-size-xl); }
.contact-card p { margin-bottom: var(--spacing-4); color: var(--color-neutral-400); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.contact-card span { color: var(--color-primary-300); font-family: var(--font-family-mono); font-size: var(--font-size-xs); }

.product-hero { padding-block: var(--spacing-16) var(--spacing-20); background: var(--gradient-brand-soft); border-bottom: var(--border-width-base) solid var(--color-border-brand); }
.back-link { display: inline-flex; margin-bottom: var(--spacing-12); color: var(--color-text-secondary); font-size: var(--font-size-sm); }.back-link:hover { color: var(--color-text-brand); }
.product-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--spacing-20); align-items: end; }.product-hero h1 { font-size: var(--hero-title-size); }.product-lede { max-width: calc(var(--spacing-20) * 8); color: var(--color-text-secondary); font-size: var(--font-size-xl); line-height: var(--line-height-relaxed); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: var(--spacing-8); }.tag-list span { min-height: var(--control-height-sm); display: inline-flex; align-items: center; padding-inline: var(--spacing-3); border: var(--border-width-base) solid var(--color-brand-border); border-radius: var(--radius-sm); color: var(--color-text-brand); background: var(--color-brand-bg); font-size: var(--font-size-xs); }
.product-promise { padding: var(--spacing-8); border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg-surface); box-shadow: var(--shadow-base); }.product-promise > span { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }.product-promise strong { display: block; margin-block: var(--spacing-6); font-size: var(--font-size-3xl); line-height: var(--line-height-tight); }.product-promise p { margin-bottom: var(--spacing-0); color: var(--color-text-secondary); }
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-4); }.capability-card { min-height: calc(var(--spacing-20) * 3); padding: var(--spacing-6); border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-surface); box-shadow: var(--shadow-base); }.capability-card > span { color: var(--color-text-brand); font-family: var(--font-family-mono); font-size: var(--font-size-xs); }.capability-card h3 { margin: var(--spacing-10) var(--spacing-0) var(--spacing-3); font-size: var(--font-size-xl); }.capability-card p { margin-bottom: var(--spacing-0); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.process-section .section-heading { color: var(--color-neutral-100); }.process-line { display: grid; grid-template-columns: repeat(4, 1fr); margin: var(--spacing-0); padding: var(--spacing-0); list-style: none; border-top: var(--border-width-base) solid var(--color-neutral-700); border-left: var(--border-width-base) solid var(--color-neutral-700); }.process-line li { min-height: calc(var(--spacing-20) * 2); padding: var(--spacing-6); border-right: var(--border-width-base) solid var(--color-neutral-700); border-bottom: var(--border-width-base) solid var(--color-neutral-700); }.process-line span { color: var(--color-primary-300); font-family: var(--font-family-mono); font-size: var(--font-size-xs); }.process-line b { display: block; margin: var(--spacing-8) var(--spacing-0) var(--spacing-2); font-size: var(--font-size-lg); }.process-line p { margin-bottom: var(--spacing-0); color: var(--color-neutral-400); font-size: var(--font-size-sm); }
.governance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); }.governance-card { padding: var(--spacing-6); border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-surface); box-shadow: var(--shadow-base); }.governance-card-wide { grid-column: span 2; }.governance-card > span { color: var(--color-text-brand); font-family: var(--font-family-mono); font-size: var(--font-size-xs); }.governance-card h3 { margin: var(--spacing-8) var(--spacing-0) var(--spacing-3); font-size: var(--font-size-xl); }.governance-card p { margin-bottom: var(--spacing-0); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }

.gallery-tabs { display: flex; gap: var(--spacing-2); overflow-x: auto; padding-bottom: var(--spacing-3); scrollbar-width: thin; }
.gallery-tab { flex: 0 0 auto; min-height: var(--control-height-base); padding-inline: var(--spacing-4); border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-secondary); background: var(--color-bg-surface); cursor: pointer; font-size: var(--font-size-sm); transition: all var(--transition-base); }.gallery-tab:hover { color: var(--color-text-brand); border-color: var(--color-brand); }.gallery-tab.active { color: var(--color-text-inverse); border-color: var(--color-brand); background: var(--color-brand); box-shadow: var(--shadow-brand); }
.gallery-viewer { margin-top: var(--spacing-4); overflow: hidden; border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg-surface); box-shadow: var(--shadow-base); }
.gallery-meta { display: grid; grid-template-columns: auto auto 1fr; gap: var(--spacing-4); align-items: center; padding: var(--spacing-4) var(--spacing-5); border-bottom: var(--border-width-base) solid var(--color-divider); }.gallery-meta span { color: var(--color-text-brand); font-family: var(--font-family-mono); font-size: var(--font-size-xs); }.gallery-meta strong { font-size: var(--font-size-lg); }.gallery-meta p { margin: var(--spacing-0); color: var(--color-text-secondary); font-size: var(--font-size-sm); text-align: right; }
.gallery-viewer figure { margin: var(--spacing-0); padding: var(--spacing-4); background: var(--color-bg-muted); overflow: auto; }.gallery-viewer img { width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center top; border: var(--border-width-base) solid var(--color-border); background: var(--color-bg-surface); transition: opacity var(--transition-base); }.gallery-viewer img.switching { opacity: .35; }
.usage-section { padding-block: var(--section-space); background: var(--color-neutral-900); color: var(--color-neutral-100); }.usage-section .section-heading > p { color: var(--color-neutral-400); }.usage-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--spacing-8); align-items: start; }.notice-card { padding: var(--spacing-6); border: var(--border-width-base) solid var(--color-neutral-700); border-radius: var(--radius-lg); background: var(--color-neutral-800); }.notice-card h3 { margin-bottom: var(--spacing-5); font-size: var(--font-size-xl); }.notice-card ul { margin: var(--spacing-0); padding-left: var(--spacing-5); }.notice-card li { padding-block: var(--spacing-2); color: var(--color-neutral-400); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }.faq-list { border-top: var(--border-width-base) solid var(--color-neutral-700); }.faq-list details { border-bottom: var(--border-width-base) solid var(--color-neutral-700); }.faq-list summary { position: relative; padding: var(--spacing-5) var(--spacing-10) var(--spacing-5) var(--spacing-0); cursor: pointer; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; position: absolute; inset: var(--spacing-5) var(--spacing-0) auto auto; color: var(--color-primary-300); font-family: var(--font-family-mono); }.faq-list details[open] summary::after { content: "−"; }.faq-list details p { margin: var(--spacing-0) var(--spacing-0) var(--spacing-5); color: var(--color-neutral-400); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }

.crm-hero .hero-actions { margin-top: var(--spacing-8); }
.crm-overview, .story-section { padding-block: var(--section-space); }
.crm-lifecycle { display: grid; grid-template-columns: repeat(5, 1fr); margin: var(--spacing-0); padding: var(--spacing-0); list-style: none; border-top: var(--border-width-base) solid var(--color-border); border-left: var(--border-width-base) solid var(--color-border); }
.crm-lifecycle li { min-height: calc(var(--spacing-20) * 2); padding: var(--spacing-5); border-right: var(--border-width-base) solid var(--color-border); border-bottom: var(--border-width-base) solid var(--color-border); background: var(--color-bg-surface); }
.crm-lifecycle span, .story-index, .management-map span { color: var(--color-text-brand); font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
.crm-lifecycle b { display: block; margin-block: var(--spacing-8) var(--spacing-2); font-size: var(--font-size-lg); }
.crm-lifecycle p { margin: var(--spacing-0); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.role-section, .management-section { padding-block: var(--section-space); color: var(--color-neutral-100); background: var(--color-neutral-900); }
.role-section .section-heading > p, .management-section .story-heading > p { color: var(--color-neutral-400); }
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--border-width-base) solid var(--color-neutral-700); border-left: var(--border-width-base) solid var(--color-neutral-700); }
.role-item { min-height: calc(var(--spacing-20) * 2); padding: var(--spacing-6); border-right: var(--border-width-base) solid var(--color-neutral-700); border-bottom: var(--border-width-base) solid var(--color-neutral-700); }
.role-item span { color: var(--color-primary-300); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.role-item p { margin: var(--spacing-8) var(--spacing-0) var(--spacing-0); color: var(--color-neutral-400); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.story-heading { max-width: calc(var(--spacing-20) * 10); margin-bottom: var(--spacing-16); }
.story-heading h2 { margin-bottom: var(--spacing-4); font-size: var(--section-title-size); line-height: var(--line-height-tight); }
.story-heading > p:last-child { color: var(--color-text-secondary); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); }
.story-row { display: grid; grid-template-columns: .72fr 1.28fr; gap: var(--spacing-12); align-items: center; padding-block: var(--spacing-16); border-top: var(--border-width-base) solid var(--color-border); }
.story-row-reverse .story-copy { order: 2; }.story-row-reverse .story-visual { order: 1; }
.story-copy h3 { margin: var(--spacing-5) var(--spacing-0) var(--spacing-4); font-size: var(--font-size-3xl); line-height: var(--line-height-tight); }
.story-copy > p { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.story-points, .story-steps { margin: var(--spacing-6) var(--spacing-0) var(--spacing-0); padding: var(--spacing-0); list-style: none; border-top: var(--border-width-base) solid var(--color-divider); }
.story-points li { padding-block: var(--spacing-3); border-bottom: var(--border-width-base) solid var(--color-divider); font-size: var(--font-size-sm); }
.story-points li::before { content: "✓"; margin-right: var(--spacing-2); color: var(--color-text-brand); }
.story-steps li { display: grid; grid-template-columns: var(--spacing-16) 1fr; gap: var(--spacing-3); padding-block: var(--spacing-3); border-bottom: var(--border-width-base) solid var(--color-divider); font-size: var(--font-size-sm); }
.story-steps span { color: var(--color-text-secondary); }
.story-proof { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: var(--spacing-6); }
.story-proof span { padding: var(--spacing-2) var(--spacing-3); border: var(--border-width-base) solid var(--color-border-brand); border-radius: var(--radius-sm); color: var(--color-text-brand); background: var(--color-bg-brand); font-size: var(--font-size-xs); }
.story-visual { overflow: hidden; border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg-surface); box-shadow: var(--shadow-base); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.story-visual:hover { transform: translateY(calc(var(--spacing-1) * -1)); box-shadow: var(--shadow-lg); }
.story-visual img { width: 100%; height: auto; object-fit: contain; }
.management-section .story-heading h2 { color: var(--color-neutral-100); }
.management-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; border-top: var(--border-width-base) solid var(--color-neutral-700); border-bottom: var(--border-width-base) solid var(--color-neutral-700); }
.management-map > div { padding-block: var(--spacing-6); }
.management-map > i { display: grid; place-items: center; padding-inline: var(--spacing-3); color: var(--color-primary-300); font-style: normal; }
.management-map b { display: block; margin-block: var(--spacing-6) var(--spacing-2); font-size: var(--font-size-base); }
.management-map p { margin: var(--spacing-0); color: var(--color-neutral-400); font-size: var(--font-size-xs); line-height: var(--line-height-relaxed); }
.management-visuals { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); margin-top: var(--spacing-10); }
.management-visual { overflow: hidden; border: var(--border-width-base) solid var(--color-neutral-700); border-radius: var(--radius-lg); background: var(--color-neutral-800); transition: border-color var(--transition-base); }
.management-visual:hover { border-color: var(--color-primary-400); }
.management-visual img { width: 100%; height: auto; object-fit: contain; }
.management-visual > span { display: grid; gap: var(--spacing-1); padding: var(--spacing-4); border-top: var(--border-width-base) solid var(--color-neutral-700); }
.management-visual small { color: var(--color-neutral-400); }
.gallery-group-label { display: flex; align-items: baseline; gap: var(--spacing-4); margin-bottom: var(--spacing-3); }
.gallery-group-label-secondary { margin-top: var(--spacing-8); }
.gallery-group-label span { color: var(--color-text-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.gallery-group-label p { margin: var(--spacing-0); color: var(--color-text-tertiary); font-size: var(--font-size-xs); }

.site-footer { padding-block: var(--spacing-10); border-top: var(--border-width-base) solid var(--color-border); color: var(--color-text-secondary); background: var(--color-bg-surface); }.site-footer .brand { color: var(--color-text-primary); }.footer-inner { display: grid; grid-template-columns: 1fr auto auto; gap: var(--spacing-10); align-items: center; }.footer-inner p { margin: var(--spacing-0); font-size: var(--font-size-xs); }.footer-meta { display: grid; gap: var(--spacing-1); text-align: right; }.icp-link { color: var(--color-text-tertiary); font-size: var(--font-size-xs); transition: color var(--transition-base); }.icp-link:hover, .icp-link:focus-visible { color: var(--color-text-brand); }
.reveal { opacity: 0; transform: translateY(var(--spacing-4)); transition: opacity var(--transition-slow), transform var(--transition-slow); }.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; } }
@media (max-width: 62em) {
  .shell { width: calc(100% - var(--spacing-8)); }
  .menu-button { display: grid; place-content: center; gap: var(--spacing-1); }
  nav { position: absolute; inset: var(--header-height) var(--spacing-4) auto; display: none; padding: var(--spacing-4); border: var(--border-width-base) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg-surface); box-shadow: var(--shadow-lg); flex-direction: column; align-items: stretch; gap: var(--spacing-1); }
  nav.open { display: flex; } nav a { padding: var(--spacing-3); }
  .hero-grid, .section-heading, .product-hero-grid, .company-grid, .usage-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--spacing-8); }
  .product-row { grid-template-columns: 1fr; }.product-row-reverse .product-info, .product-row-reverse .product-preview { order: initial; }
  .capability-grid { grid-template-columns: 1fr 1fr; }.gallery-meta { grid-template-columns: auto 1fr; }.gallery-meta p { grid-column: span 2; text-align: left; }
  .crm-lifecycle { grid-template-columns: 1fr 1fr; }
  .role-grid { grid-template-columns: 1fr 1fr; }
  .story-row { grid-template-columns: 1fr; }.story-row-reverse .story-copy, .story-row-reverse .story-visual { order: initial; }
  .management-map { grid-template-columns: 1fr; }.management-map > i { display: none; }.management-map > div { border-bottom: var(--border-width-base) solid var(--color-neutral-700); }
  .management-visuals { grid-template-columns: 1fr; }
}
@media (max-width: 36em) {
  :root { --section-space: var(--spacing-20); --hero-title-size: var(--font-size-4xl); --section-title-size: var(--font-size-3xl); }
  .shell { width: calc(100% - var(--spacing-6)); }
  .brand { gap: var(--spacing-2); }.brand-logo { width: calc(var(--spacing-20) + var(--spacing-8)); max-height: var(--spacing-10); }.brand strong { font-size: var(--font-size-sm); }.brand small { display: none; }
  .home-hero { padding-block: var(--spacing-20); }.hero-actions { align-items: stretch; flex-direction: column; }.hero-actions .button { width: 100%; }
  .section-heading { margin-bottom: var(--spacing-10); }.product-row { gap: var(--spacing-8); padding-block: var(--spacing-12); }.product-number { margin-bottom: var(--spacing-6); }.product-info h3 { font-size: var(--font-size-3xl); }
  .capability-grid, .process-line, .governance-grid { grid-template-columns: 1fr; }.capability-card { min-height: auto; }.process-line { border-top: var(--border-width-base) solid var(--color-neutral-700); }.governance-card-wide { grid-column: auto; }
  .company-grid dl { grid-template-columns: 1fr; }.company-grid dl div { border-left: var(--spacing-0); border-top: var(--border-width-base) solid var(--color-border); }
  .gallery-viewer figure { padding: var(--spacing-2); }.gallery-meta { display: block; }.gallery-meta strong { display: block; margin-block: var(--spacing-2); }.gallery-meta p { margin-bottom: var(--spacing-0); }
  .crm-lifecycle, .role-grid { grid-template-columns: 1fr; }
  .story-row { gap: var(--spacing-8); padding-block: var(--spacing-12); }.story-copy h3 { font-size: var(--font-size-2xl); }
  .gallery-group-label { align-items: flex-start; flex-direction: column; gap: var(--spacing-1); }
  .contact-card { grid-template-columns: 1fr; }.contact-qr { width: 100%; max-width: calc(var(--spacing-20) * 4); }
  .footer-inner { grid-template-columns: 1fr; gap: var(--spacing-4); }.footer-meta { text-align: left; }
}