/* Hallmark · macrostructure: Long Document · tone: editorial · anchor hue: cobalt
 * theme: existing design.md · nav: N3 side rail · footer: Ft2 inline
 * pre-emit critique: P4 H4 E4 S5 R5 V4 */
@import url('/assets/tokens.css?v=20261013-cocs-1');
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-padding-top:var(--space-lg)}
body{margin:0;background:var(--color-surface);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.8}
a{color:var(--color-accent);text-underline-offset:4px}
a:hover{color:var(--color-accent-hover)}
a:active{color:var(--color-ink)}
a:focus-visible,summary:focus-visible,video:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
h1,h2,h3{font-family:var(--font-display);font-style:normal;line-height:1.5;overflow-wrap:anywhere;min-width:0}
h1{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.04em;margin:var(--space-sm) 0 var(--space-lg)}
h2{font-size:var(--text-2xl);margin:0 0 var(--space-sm)}
h3{font-size:var(--text-base);margin:0 0 var(--space-3xs)}
p{margin:0 0 var(--space-sm)}
.about-header{max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--color-rule)}
.about-header a,.about-rail a,.about-actions a,.about-footer a{white-space:nowrap}
.about-brand{font-size:var(--text-2xl);font-weight:800;color:var(--color-ink);text-decoration:none}
.about-brand span{font-size:var(--text-xs);font-weight:400;color:var(--color-muted);margin-left:var(--space-xs)}
.about-layout{max-width:1120px;margin:auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-2xl);padding:var(--space-xl)}
.about-rail{position:sticky;top:var(--space-xl);align-self:start;padding-top:var(--space-lg)}
.about-rail>p{font-size:var(--text-xs);color:var(--color-muted);margin-bottom:var(--space-2xs)}
.about-rail nav{display:flex;flex-direction:column;align-items:flex-start}
.about-rail nav a{color:var(--color-ink-2);text-decoration:none;padding:var(--space-2xs) var(--space-xs);border-left:2px solid var(--color-rule)}
.about-rail nav a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.about-guide{display:inline-block;margin-top:var(--space-xl)}
main{min-width:0}
.about-document{max-width:720px}
.about-intro{padding:var(--space-lg) 0 var(--space-xl)}
.about-caption{font-size:var(--text-sm);color:var(--color-muted)}
.about-lead{font-size:var(--text-lg)}
.about-video{margin:0 0 var(--space-lg)}
.about-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-input)}
.about-video figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-2xs) var(--space-sm);margin-top:var(--space-xs);font-size:var(--text-sm);color:var(--color-muted)}
.about-video a{white-space:nowrap}
.about-summary{border-left:3px solid var(--color-accent);padding:var(--space-xs) var(--space-lg);margin-top:var(--space-xl);background:var(--color-accent-soft)}
.about-summary p{margin:var(--space-3xs) 0 0}
section{padding:var(--space-xl) 0;border-top:1px solid var(--color-rule);scroll-margin-top:var(--space-lg)}
.about-ledger{margin:var(--space-lg) 0}
.about-ledger>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--space-lg);padding:var(--space-sm) 0;border-bottom:1px solid var(--color-rule)}
dt{font-weight:700}dd{margin:0;color:var(--color-ink-2)}
details{padding:var(--space-sm);background:var(--color-paper)}
summary{cursor:pointer;font-weight:600}
details p{margin:var(--space-xs) 0 0}
.about-steps{padding-left:var(--space-lg);margin:var(--space-lg) 0}
.about-steps li{padding-left:var(--space-2xs);margin-bottom:var(--space-lg)}
.about-steps li::marker{color:var(--color-accent);font-weight:700}
.about-note{background:var(--color-paper);padding:var(--space-lg)}
.about-note ul,.about-checklist{padding-left:var(--space-lg)}
.about-note li,.about-checklist li{margin:var(--space-2xs) 0}
.about-note p{margin-bottom:0;color:var(--color-ink-2)}
blockquote{margin:var(--space-lg) 0;padding:var(--space-sm) var(--space-lg);border-left:3px solid var(--color-boundary);font-size:var(--text-lg);font-weight:600}
.about-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-lg);margin:var(--space-lg) 0 var(--space-xs)}
.about-primary{display:inline-flex;padding:var(--space-2xs) var(--space-sm);background:var(--color-accent);color:var(--color-accent-ink);text-decoration:none;border-radius:var(--radius-input);font-weight:600}
.about-primary:hover{background:var(--color-accent-hover);color:var(--color-accent-ink)}
.about-primary:active{background:var(--color-ink)}
.about-limits{color:var(--color-ink-2)}
.about-footer{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);border-top:1px solid var(--color-rule);padding:var(--space-lg) 0;color:var(--color-muted);font-size:var(--text-sm)}
.about-skip{position:absolute;top:0;left:var(--space-sm);transform:translateY(-150%);background:var(--color-surface);padding:var(--space-xs);z-index:var(--z-raised)}
.about-skip:focus{transform:translateY(0)}
@media(max-width:800px){.about-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding:var(--space-sm)}.about-header{padding:var(--space-sm)}.about-rail{position:static;padding:0}.about-rail nav{flex-direction:row;flex-wrap:wrap;gap:var(--space-3xs) var(--space-xs)}.about-rail nav a{border:0;padding:var(--space-2xs) 0;min-height:44px;display:inline-flex;align-items:center}.about-guide{margin-top:var(--space-2xs)}.about-document{max-width:none}.about-brand span{display:none}.about-ledger>div{grid-template-columns:minmax(0,1fr);gap:var(--space-3xs)}.about-header>a,.about-actions a,.about-footer a,.about-guide,.about-video a{min-height:44px;display:inline-flex;align-items:center}summary{min-height:44px}.about-intro{padding-top:var(--space-xs)}}
@media print{.about-header,.about-rail,.about-actions,.about-skip,.about-video,.about-footer a{display:none}.about-layout{display:block;padding:0}.about-document{max-width:none}body{font-size:10pt}h1{font-size:22pt}h2{font-size:14pt}h2,h3,dt{break-after:avoid}.about-ledger>div,.about-steps li{break-inside:avoid}section{padding:12pt 0}.about-summary,.about-note{background:var(--color-surface)}a{color:inherit}details{display:none}}

/* Company identity; document structure stays unchanged. */
.about-brand{display:inline-flex;align-items:center;gap:var(--space-xs)}
.about-brand .cocs-logo{display:block;width:80px;height:60px;object-fit:contain;background:var(--color-surface)}