/* Human For Now public visual system. C1, admin, and the game remain isolated. */
:is(.hfn-home, .hfn-tool) {
  --bg: #102538; --bg-soft: #193a53; --panel: #1a3c56;
  --panel-strong: #224c6b; --text: #f6f4eb; --muted: #d2e1e6;
  --quiet: #bcd8e1; --line: #7ab2c052; --blue: #8dccff;
  --green: #83efc7; --amber: #a3f3d5;
}
:is(.hfn-home, .hfn-tool)::before { display: none; }
:is(.hfn-home, .hfn-tool) #signal-canvas { opacity: .12; background: none; }
:is(.hfn-home, .hfn-tool) .site-header { background: #0b1b2eef; border-bottom: 1px solid #7ab2c052; }
:is(.hfn-home, .hfn-tool) :is(.brand, nav, .nav-toggle) { background: #122c46; box-shadow: none; border-color: #7bb9cf50; }
:is(.hfn-home, .hfn-tool) .brand img { width: 30px; height: 30px; }
.hfn-home .hero { background: #0c2144; min-height: 760px; padding-top: 132px; padding-bottom: 70px; overflow: hidden; }
.hfn-home .hero-inner { width: 55%; position: relative; z-index: 1; }
.hfn-home .hero .human-title { font-size: clamp(4rem,8.4vw,8rem); }
.hfn-home .hero-copy { color: #d6e5ef; max-width: 680px; font-size: clamp(1.05rem,1.5vw,1.3rem); line-height: 1.6; }
.hfn-home .hero-visual { position: absolute; inset: 80px 0 0 53%; pointer-events: none; opacity: 1; }
.hfn-home .hero-art { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.hfn-home .brand-period { color: #79f2c7; }
.hfn-home .hero-status a { background: #194471; border-color: #588bac; box-shadow: none; }
.hfn-home .hero-status a:nth-child(2) { background: #12635f; border-color: #4eaea1; }
.hfn-home .hero-status a:nth-child(3) { background: #254861; }
.hfn-home .hero-links a:first-child { background: #8af0c9; color: #102c39; border-color: #8af0c9; }
:is(.hfn-home, .hfn-tool) .section { padding-top: clamp(42px,6vw,80px); padding-bottom: clamp(48px,6vw,88px); background: #19394f; }
.hfn-home :is(#now,#daily-agenda-story,#ai-readiness-scorecard) { background: #134c55; }
.hfn-home :is(#notes,#automation-menu) { background: #075c60; }
.hfn-home :is(#agent-os,#model-usage-map,#openclaw-cost-calculator) { background: #15395d; }
.hfn-home :is(#secure-ai-stack,#ai-origin-lab) { background: #164741; }
.hfn-home :is(#experiments,#archive) { background: #254764; }
.hfn-home :is(#build-log,#about) { background: #172e3e; }
:is(.hfn-home, .hfn-tool) .section::before { left: 0; right: 0; background: #91c9d04d; }
:is(.hfn-home, .hfn-tool) .section-kicker { color: #a0f1d4; font: 600 13px/1.4 ui-monospace,monospace; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 24px; display: flex; align-items: center; gap: 15px; }
:is(.hfn-home, .hfn-tool) .section-kicker::before { content: ''; width: 38px; height: 3px; background: currentColor; }
:is(.hfn-home, .hfn-tool) .section-heading.wide { max-width: var(--max); }
:is(.hfn-home, .hfn-tool) .section-heading h2 { max-width: 940px; font-size: clamp(2.25rem,4.6vw,4.4rem); letter-spacing: -.04em; line-height: 1.06; }
:is(.hfn-home, .hfn-tool) .section-heading h2::after { content: ''; display: block; width: 86px; height: 5px; margin-top: 25px; background: #89f1c9; }
:is(.hfn-home, .hfn-tool) .section-intro { color: #d5e5e9; }
.hfn-home :is(.feature-card,.now-card,.experiment-card,.agent-os-panel,.agent-roster article,.secure-stack-panel,.secure-checklist article,.story-panel,.story-obstacle,.automation-card,.usage-panel,.readiness-form,.pilot-brief-panel,.stack-form,.analyzer-shell) { background: #1c3b50; border-color: #78a7b761; box-shadow: none; backdrop-filter: none; border-radius: 12px; }
.hfn-home .now-section .section-grid { grid-template-columns: 1fr; gap: 32px; }
.hfn-home .now-stack { grid-template-columns: 1fr 1fr; gap: 18px; }
.hfn-home .now-card-featured { grid-column: 1 / -1; background: #d8f3e8; color: #122e3d; overflow: hidden; }
.hfn-home .now-card-featured :is(p,strong,.card-meta) { color: #244e5a; }
.hfn-home .now-project-image { display: block; width: 100%; height: auto; aspect-ratio: 2.7; object-fit: cover; object-position: center 53%; margin-bottom: 22px; border-radius: 6px; }
.hfn-home .now-card-featured h3 { font-size: clamp(1.6rem,3vw,2.6rem); }
.hfn-home .feature-card { min-height: 0; }
.hfn-home .card-visual { min-height: 0; aspect-ratio: 12 / 7; overflow: hidden; background: #1267a2; }
.hfn-home .card-visual svg { display: block; width: 100%; height: 100%; }
.hfn-home .card-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hfn-home #notes .feature-card:first-child { background: #123d7c; }
.hfn-home #notes .feature-card:nth-child(2) { background: #d8f3e8; color: #122e3d; }
.hfn-home #notes .feature-card:nth-child(2) :is(p,.card-meta) { color: #244e5a; }
.hfn-home #notes .feature-card:last-child { background: #08463f; }
.hfn-home .agent-os-diagram { background: #d5edf2; border: 1px solid #a8dae4; box-shadow: none; }
.hfn-home .agent-os-diagram :is(text,.subtext,.zone-label) { fill: #193d56; }
.hfn-home .agent-os-diagram figcaption { color: #315467; }
.hfn-home .agent-os-diagram .zone { fill: #edf8f7; stroke: #85b9c9; }
.hfn-home .agent-os-diagram .node rect { fill: #c8e3f8; stroke: #4681a8; }
.hfn-home .agent-os-diagram .node-specialist rect { fill: #c1e9da; stroke: #3d8b77; }
.hfn-home .agent-os-diagram .node-policy rect { fill: #f3dfc4; stroke: #9e8060; }
.hfn-home .agent-os-diagram .flow { stroke: #367894; }
.hfn-home .agent-os-diagram marker path { fill: #367894; }
.hfn-home .agent-roster article { border-top: 4px solid #6dcbec; }
.hfn-home .agent-roster article:nth-child(even) { border-top-color: #75dab2; background: #175350; }
.hfn-home .secure-stack-visual { background: #216860; border-color: #75bdb0; box-shadow: none; }
.hfn-home .secure-stack-visual .secure-node rect { fill: #15433f; stroke: #8be6cc; }
.hfn-home .secure-stack-visual :is(.subtext,.zone-label) { fill: #d0ece5; }
.hfn-home .secure-stack-visual .secure-flow { stroke: #a1efd7; }
.hfn-home #experiments .experiment-card { background: #19384e; min-height: 180px; }
.hfn-home #experiments .experiment-card.is-featured { grid-template-columns: 76px 1fr; align-items: center; background: #d8f3e8; color: #122e3d; }
.hfn-home #experiments .is-featured :is(p,.card-meta,.status-pill) { color: #244e5a; }
.hfn-home .experiment-cover { display: block; width: 100%; height: auto; aspect-ratio: 1.65; object-fit: cover; border-radius: 7px; }
.hfn-home .experiment-number { color: #84efff; background: #255879; border: 0; border-radius: 8px; font-size: 1.8rem; }
.hfn-home .build-log-list article { border-left: 3px solid #67b8cb; padding-left: 22px; }
.hfn-home .build-log-list time { color: #8deaca; }
.hfn-home .story-visual { background: #d8f3e8; border-radius: 12px; padding: 12px; }
.hfn-home .story-visual img { border-radius: 7px; }
.hfn-home .story-visual figcaption { color: #244e5a; padding: 8px; }
.hfn-home .usage-panel { background: #214c70; }
.hfn-home .usage-bars strong::before { background: #87efca; }
.hfn-home .readiness-result { background: #bdebdc; color: #173d43; border-color: #98d4c1; box-shadow: none; }
.hfn-home .readiness-result :is(p,h3,span,strong,.card-meta) { color: #173d43; }
.hfn-home .readiness-form label:has(input:checked) { background: #245d61; border-color: #8adac5; }
.hfn-home :is(.automation-menu-lead,.pilot-brief-intro) { background: #16524f; }
.hfn-home .automation-index { color: #9df4d5; }
:is(.hfn-home, .hfn-tool) .stack-summary { background: #1d665f; border-color: #74c7b6; box-shadow: none; }
:is(.hfn-home, .hfn-tool) :is(input,textarea,select) { background-color: #112d43; border-color: #719dad; }
:is(.hfn-home, .hfn-tool) input[type=radio] { accent-color: #86edc8; }
.hfn-home .analyzer-tab[aria-selected=true] { background: #9deccd; color: #143e40; }
.hfn-home :is(.score-card,.signal-card) { background: #235e5b; border-color: #659f96; }
.hfn-home .archive-list a { border-color: #77b0c354; }
.hfn-home #writing { background: #0a5c64; }
.hfn-home #writing .about-panel { background: #d8f3e8; color: #12383e; border: 0; box-shadow: none; }
.hfn-home #writing .about-panel :is(p,.eyebrow) { color: #245459; }
.hfn-home #writing .contact-link { background: #154b54; color: #effcf7; border-color: #154b54; }
.hfn-home #about .about-panel { background: #234961; box-shadow: none; }
.hfn-home .site-footer { background: #0d2434; }
.hfn-tool .cost-page-hero { background: linear-gradient(115deg,#153964,#18736a); }
.hfn-tool .cost-page-inner h1 { color: #f6f4eb; }
.hfn-tool :is(.cost-article,.cost-summary-card,.stack-form) { background: #1c425d; }
:is(.hfn-home,.hfn-tool) a:focus-visible,
:is(.hfn-home,.hfn-tool) button:focus-visible { outline: 3px solid #a9f8d8; outline-offset: 4px; }
@media(min-width:1000px) { .hfn-home .now-card-featured { display: block; } .hfn-home .now-project-image { float: right; width: 54%; aspect-ratio: 1.75; margin: 0 0 0 30px; } .hfn-home .now-card-featured p { max-width: 42%; } }
@media(max-width:1000px) { .hfn-home .hero-inner { width: 63%; } .hfn-home .hero-visual { left: 57%; opacity: .85; } }
@media(max-width:700px) {
 .hfn-home .hero { padding-top: 106px; padding-bottom: 36px; min-height: 0; display: flex; flex-direction: column; }
 .hfn-home .hero-inner { width: 100%; }
 .hfn-home .hero .human-title { font-size: clamp(3.5rem,15vw,5rem); }
 .hfn-home .hero-copy { font-size: 1.05rem; }
 .hfn-home .hero-visual { position: relative; inset: auto; order: 2; width: 100%; height: 270px; opacity: 1; margin-top: 16px; }
 .hfn-home .hero-art { object-fit: cover; object-position: center 43%; }
 .hfn-home .hero-status { gap: 8px; }
 .hfn-home .now-stack { grid-template-columns: 1fr; }
 .hfn-home .now-card-featured { grid-column: auto; }
 .hfn-home .now-project-image { aspect-ratio: 1.65; }
 .hfn-home #experiments .experiment-card.is-featured { grid-template-columns: 48px 1fr; }
 .hfn-home #experiments .experiment-card.is-featured:has(.experiment-cover) { grid-template-columns: 1fr; }
 .hfn-home .experiment-number { width: 48px; font-size: 1.4rem; }
 :is(.hfn-home,.hfn-tool) .section { scroll-margin-top: 72px; }
 .hfn-home .section-heading .eyebrow { margin-bottom: 12px; }
}
.hfn-home .hero::after { display: none; }
.hfn-home .hero-art { mask-image: linear-gradient(90deg,transparent,#000 12%,#000 92%,transparent); }
.hfn-home :is(.now-card-featured,#notes .feature-card:nth-child(2),#experiments .experiment-card.is-featured) :is(h3,h4) { color: #153e48; }
:is(.hfn-home,.hfn-tool) .stack-summary { align-self: start; justify-content: flex-start; }
.hfn-home .image-preview { background: #c6eadd; color: #214b52; border: 2px dashed #578d87; gap: 14px; align-content: center; }
.hfn-home .image-preview:not(:has(img))::before { content: ''; width: 76px; height: 62px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 62'%3E%3Crect x='3' y='3' width='70' height='56' rx='7' fill='%23e6f8ef' stroke='%23265d66' stroke-width='3'/%3E%3Ccircle cx='53' cy='19' r='6' fill='%232b8e83'/%3E%3Cpath d='m10 50 19-24 16 19 10-10 12 15' fill='%2380cbbc' stroke='%23265d66' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.hfn-home input[type=file]::file-selector-button { background: #9eeccc; color: #173d43; border: 0; border-radius: 5px; padding: 9px 13px; margin-right: 12px; cursor: pointer; }
.hfn-home #now .now-card-featured { background: #d8f3e8; color: #153e48; }
.hfn-home #now .now-card-featured :is(h3,p,strong,.card-meta) { color: #153e48; }
.hfn-tool .cost-page-hero::after { display: none; }
.hfn-tool .cost-page-inner h1 { font-size: clamp(3rem,7vw,6rem); line-height: 1.03; letter-spacing: -.04em; margin-bottom: 28px; }
.hfn-tool .cost-page-hero { min-height: 700px; }
@media(max-width:700px){.hfn-tool .cost-page-hero{min-height:0}.hfn-tool .cost-page-inner h1{font-size:clamp(2.8rem,11vw,4rem)}}
.hfn-home .hero-inner .hero-visual { inset: -50px auto auto 102%; width: 83%; height: calc(100% + 120px); }
@media(max-width:1000px) and (min-width:701px){.hfn-home .hero-inner .hero-visual{left:100%;width:61%}}
@media(max-width:700px){.hfn-home .hero-inner .hero-visual{position:relative;inset:auto;width:100%;height:240px;margin:0 0 24px}.hfn-home .hero-art{object-fit:contain;mask-image:none;mix-blend-mode:screen}}
.hfn-home #now .now-card-featured > span { color: #315963; }
@media(max-width:700px){.hfn-home .hero-inner .hero-visual{height:280px}.hfn-home .hero-art{object-fit:cover;object-position:center 45%;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}}

@media(min-width:701px){.hfn-home #experiments .experiment-card.is-featured:has(.experiment-cover){grid-template-columns:minmax(210px,.7fr) 1fr}}
.hfn-home .agent-os-diagram .mobile-flow-card { background: #c6e2ee; border-color: #8db9c7; }
.hfn-home .agent-os-diagram .mobile-flow-card:nth-child(odd) { background: #c3e6d8; }
.hfn-home .agent-os-diagram .mobile-flow-card :is(strong,p,span) { color: #204959; }
.hfn-home .agent-os-diagram .mobile-flow-card span { border-color: #6e9eaa; }
.hfn-home .agent-os-diagram .mobile-flow-card::after { background: #568a9c; }

/* Notebook plates: preserve the complete drawing rather than cropping its studies. */
.hfn-home .hero-art { mix-blend-mode: normal; object-fit: contain; mask-image: none; border: 1px solid #8dd9d14a; border-radius: 4px; background: #093249; }
.hfn-home .hero-inner .hero-visual { top: -22px; height: auto; aspect-ratio: 1122 / 1402; }
.hfn-home .card-visual { aspect-ratio: 3 / 2; }
@media(max-width:700px) {
 .hfn-home .hero-inner .hero-visual { top: auto; height: auto; max-width: 390px; aspect-ratio: 1122 / 1402; margin: 0 auto 24px; }
 .hfn-home .hero-art { height: auto; object-fit: contain; mix-blend-mode: normal; mask-image: none; }
}

@media(min-width:1001px) { .hfn-home .hero-inner .hero-visual { width: 76%; max-width: 540px; } }