/* Humanopia theme layouts. Component styles come from humanopia-ds.css. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:80px}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden}
.h-main{flex:1 0 auto}
img{max-width:100%;height:auto}
a{color:var(--link)}
a:hover{color:var(--human)}
.h-m0{margin:0}
.h-muted{color:var(--muted)}
.h-balance{text-wrap:balance}
.h-pretty{text-wrap:pretty}
.h-measure{max-width:var(--reading-measure)}
.h-measure-wide{max-width:900px}
.h-wrap{width:100%;max-width:var(--container);margin-left:auto;margin-right:auto;padding-left:var(--space-5);padding-right:var(--space-5)}
.h-reading{width:100%;max-width:calc(var(--reading-measure) + 2 * var(--space-5));margin-left:auto;margin-right:auto;padding-left:var(--space-5);padding-right:var(--space-5)}
.h-stack-2,.h-stack-3,.h-stack-4,.h-stack-5,.h-stack-6,.h-stack-7{display:grid;align-content:start}
.h-stack-2{gap:var(--space-2)}.h-stack-3{gap:var(--space-3)}.h-stack-4{gap:var(--space-4)}.h-stack-5{gap:var(--space-5)}.h-stack-6{gap:var(--space-6)}.h-stack-7{gap:var(--space-7)}
.h-section{padding-top:var(--space-9);padding-bottom:var(--space-9)}
.h-section-tight{padding-top:var(--space-8);padding-bottom:var(--space-8);display:grid;gap:var(--space-5)}
.h-section-sm{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.h-section-top{padding-top:var(--space-6);padding-bottom:var(--space-8)}
/* Neighbouring sections share one gap instead of adding their paddings: space-8, space-10 around the Humanity pull quote,
   and space-6 + space-6 under the search, model, news-lead and pillar hero heads, which end in their own space-6. */
:is(.h-section-tight,.h-section-sm,.h-section-top,.h-topics,.h-quote-section,.h-comments)+:is(.h-section-tight,.h-section-sm,.h-nl-section){padding-top:0}
.h-section-top+.h-quote-section{padding-top:var(--space-8)}
:is(.h-article-head,.h-review-head,.h-lead,.h-hero)+.h-section-sm{padding-top:var(--space-6)}
.h-eyebrow{color:var(--muted);text-transform:uppercase}
.h-tone-human{color:var(--human)}.h-tone-ai{color:var(--ai)}.h-tone-muted{color:var(--muted)}
.h-lede{max-width:620px;color:var(--text);text-wrap:pretty}
.h-lede-sm{max-width:480px}
.h-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);padding-top:var(--space-2)}
.h-rule{display:block;width:40px;height:2px;background:var(--human)}
.h-rule-top{border-top:1px solid var(--line)}
.h-surface-band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Skip link */
.h-skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 16px;background:var(--human);color:var(--on-accent);border-radius:var(--radius-md);text-decoration:none}
.h-skip:focus{top:12px;color:var(--on-accent)}
.h-main:focus{outline:none}

/* Header */
.h-header-wrap{position:relative;z-index:40}
.h-has-hero .h-header-wrap{position:absolute;top:0;left:0;right:0}
.admin-bar.h-has-hero .h-header-wrap{top:32px}
.h-header .hu-header-nav{flex:1 1 auto}
.h-menu-btn{display:none}
.h-ic-close{display:none}
.h-search-panel{background:rgba(6,8,10,.94);border-bottom:1px solid var(--line);padding:var(--space-4) 0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.h-search-panel .hu-search{max-width:760px}
@supports (color:color-mix(in srgb,red,blue)){.h-search-panel{background:color-mix(in srgb,var(--void) 94%,transparent)}}
@media (max-width:1100px){
.h-menu-btn{display:inline-grid}
.h-header .hu-header-nav{display:none;order:3;flex:1 1 100%;flex-direction:column;padding:var(--space-2) 0 var(--space-3);border-top:1px solid var(--line)}
.h-header.is-open .hu-header-nav{display:flex}
.h-header.is-open .h-ic-open{display:none}
.h-header.is-open .h-ic-close{display:inline-block}
}
@media (max-width:782px){.admin-bar.h-has-hero .h-header-wrap{top:46px}}
@media (max-width:480px){.h-join{display:none}}

/* Grids */
.h-grid{display:grid;gap:var(--space-4)}
.h-grid-pillars{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.h-grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-5)}
.h-grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.h-grid-mini{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--space-3)}
.h-grid-topics{grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:var(--space-3)}
.h-grid-essays{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--space-5)}
.h-grid-tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.h-grid-tools{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-5)}
.h-grid-cats{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.h-grid-models{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.h-grid-2-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:var(--space-8)}

.h-section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-4)}

/* Editorial card (image top) */
.h-card{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;color:var(--text);text-decoration:none;transition:border-color 240ms cubic-bezier(.2,.7,.2,1),box-shadow 300ms ease}
.h-card:hover{border-color:var(--line-strong);color:var(--text);box-shadow:var(--shadow-card)}
.h-card-media{position:relative;display:block;overflow:hidden;flex:none}
.h-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,24,29,0) 42%,var(--surface) 100%)}
.h-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.2,.7,.2,1)}
.h-card:hover .h-card-img{transform:scale(1.03)}
.h-card-body{position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) var(--space-5) var(--space-5);flex:1}
.h-card-title{font-family:var(--font-display);font-size:1.75rem;line-height:1.15;text-wrap:balance}
.h-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3)}
.h-card-cta{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--human);margin-top:auto;padding-top:var(--space-2)}
.h-round-arrow{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:var(--radius-pill)}
.h-pillar-body{margin-top:-12px}
.h-pillar-title{font-size:1.625rem}

/* Home hero */
.h-home-hero{position:relative;overflow:hidden;background:var(--void)}
.h-home-hero-img{position:absolute;top:0;right:0;width:min(64%,920px);height:min(100%,720px);object-fit:cover;object-position:center top}
.h-home-hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 34%,rgba(6,8,10,.55) 50%,rgba(6,8,10,0) 72%),linear-gradient(180deg,rgba(6,8,10,0) 420px,var(--void) 660px)}
.h-home-hero-body{position:relative;z-index:2;padding-top:136px;padding-bottom:var(--space-8);display:grid;gap:var(--space-8)}
.h-home-hero-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-6)}
.h-home-hero-copy{max-width:560px}
.h-hero-title em{font-style:normal;color:var(--human)}
.h-side-caption{display:grid;gap:var(--space-3);justify-items:end;text-align:right;margin-left:auto;padding-top:72px}
.h-side-caption .eyebrow{color:var(--text);text-transform:uppercase;line-height:1.9}
.h-side-caption-band{padding-top:var(--space-3)}

/* Pillar hero */
.h-hero{position:relative;overflow:hidden;background:var(--background)}
.h-hero-img{position:absolute;top:0;right:0;height:100%;object-fit:cover}
.h-hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--background) 40%,rgba(11,14,17,.45) 62%,rgba(11,14,17,0) 88%),linear-gradient(180deg,rgba(11,14,17,0) 60%,var(--background) 100%)}
.h-hero-full .h-hero-fade{background:linear-gradient(180deg,rgba(6,8,10,.85) 0%,rgba(6,8,10,.35) 45%,rgba(6,8,10,.2) 70%,var(--background) 100%),linear-gradient(90deg,rgba(6,8,10,.7) 0%,rgba(6,8,10,0) 60%)}
.h-hero-body{position:relative;z-index:2;padding-top:128px;padding-bottom:var(--space-6);display:grid;gap:var(--space-4)}
.h-hero-tall .h-hero-body{padding-bottom:200px}
.h-hero-after{padding-top:var(--space-3)}
.h-search-wide{max-width:760px}
.h-search-wide .hu-search{max-width:none}
.h-chips{width:100%}
.h-tab{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
.hu-tabs-chip .h-tab:hover{color:var(--text)}
.hu-tabs-chip .h-tab.is-active:hover{color:var(--background)}
.h-results-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding-bottom:var(--space-2)}
.h-results-line>span{min-width:0}
.h-results-line a{display:inline-flex;align-items:center;min-height:44px}

/* Sticky section tabs */
.h-sticky-tabs{position:sticky;top:0;z-index:20;background:rgba(11,14,17,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.admin-bar .h-sticky-tabs{top:32px}
.h-sticky-tabs .h-wrap{padding-top:var(--space-2);padding-bottom:var(--space-2)}
.h-sticky-tabs .hu-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.h-anchor{scroll-margin-top:84px}

/* Mission band */
.h-band{position:relative;overflow:hidden;background:var(--void);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.h-band-img{position:absolute;top:0;right:0;width:72%;height:100%;object-fit:cover}
.h-band-fade{position:absolute;inset:0;background:linear-gradient(270deg,rgba(6,8,10,.85) 0%,rgba(6,8,10,0) 26%),linear-gradient(90deg,var(--void) 28%,rgba(6,8,10,.6) 46%,rgba(6,8,10,0) 70%)}
.h-band-body{position:relative;padding-top:var(--space-9);padding-bottom:var(--space-9);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-6)}
.h-band-copy{max-width:520px}
.h-band-copy p{max-width:440px}

/* Homepage news + topics */
.h-mini{display:flex;gap:var(--space-3);align-items:stretch;padding:var(--space-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);text-decoration:none;transition:border-color 240ms ease}
.h-mini:hover{border-color:var(--line-strong);color:var(--text)}
.h-mini-media{flex:none;width:76px;height:76px;border-radius:var(--radius-md);overflow:hidden;display:block}
.h-mini-img{width:100%;height:100%;object-fit:cover;display:block}
.h-mini-body{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-2);padding:var(--space-1) 0;min-width:0}
.h-mini-title{line-height:1.35;text-wrap:pretty}
.h-topics{border-top:1px solid var(--line)}
.h-topic{display:grid;justify-items:center;align-content:start;gap:var(--space-2);padding:var(--space-5) var(--space-3);text-align:center;border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);text-decoration:none;transition:border-color 240ms ease}
.h-topic:hover{border-color:var(--line-strong);color:var(--text)}
.h-topic-ai{background:radial-gradient(120% 80% at 50% 0%,var(--ai-soft),var(--surface) 70%)}
.h-topic-human{background:radial-gradient(120% 80% at 50% 0%,var(--human-soft),var(--surface) 70%)}
.h-topic-title{font-family:var(--font-display);font-size:1.3125rem;line-height:1.2}

/* Newsletter banner */
.h-nl-section{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.h-nl-banner{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.h-nl-img{position:absolute;top:0;left:26%;width:34%;height:100%;object-fit:cover}
.h-nl-fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--surface) 26%,rgba(19,24,29,.35) 34%,rgba(19,24,29,0) 43%,rgba(19,24,29,.45) 53%,var(--surface) 60%)}
.h-nl-row{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-7)}
.h-nl-copy{max-width:360px}
.h-nl-title{font-size:2.125rem;line-height:1.1}
.h-nl-side{width:min(100%,380px)}
.h-nl-points{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.h-nl-points span{display:inline-flex;align-items:center;gap:var(--space-1)}
.h-nl-form{display:flex;gap:var(--space-2);width:100%}
.h-nl-form[hidden],.h-nl-done[hidden],.h-nl-error[hidden]{display:none}
.h-nl-field{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);background:var(--void);border:1px solid var(--line-strong);border-radius:var(--radius-md);color:var(--muted)}
.h-nl-field:focus-within{border-color:var(--ai)}
.h-nl-field input{flex:1 1 0;width:100%;min-width:0;height:46px;background:transparent;border:0;color:var(--text);font-family:inherit}
.h-nl-field input:focus-visible{outline:none}
.h-nl-field input::placeholder{color:var(--muted)}
.h-nl-form.is-big{flex-wrap:wrap;gap:var(--space-3)}
.h-nl-form.is-big .h-nl-field{flex:1 1 280px;background:var(--elevated);padding:0 var(--space-4)}
.h-nl-form.is-big .h-nl-field input{height:52px;font-size:1.0625rem}
.h-nl-form.is-big .hu-btn{min-height:54px}
.h-nl-done{display:flex;align-items:center;gap:var(--space-2);min-height:48px;margin:0;color:var(--text)}
.h-nl-error{margin:0;color:var(--text)}
.h-community-form{max-width:640px}

/* Footer */
.h-footer{background:var(--void);border-top:1px solid var(--line)}
.h-footer-row{padding-top:var(--space-6);padding-bottom:var(--space-6);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-5)}
.h-footer-menu{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin:0;padding:0}
.h-footer-menu a,.h-social a{font-family:var(--font-sans);font-size:.8125rem;color:var(--text);text-decoration:none}
.h-footer-menu a:hover,.h-social a:hover{color:var(--human)}
.h-footer a{min-height:44px;display:inline-flex;align-items:center}
.h-footer-end{display:grid;gap:var(--space-2);justify-items:end}
.h-social{display:flex;gap:var(--space-4)}

/* News */
.h-lead{padding-top:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--line)}
.h-lead-link{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:var(--space-7);align-items:center;color:var(--text);text-decoration:none}
.h-lead-link:hover{color:var(--human)}
.h-lead-media{display:block;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:7/6}
.h-lead-img{width:100%;height:100%;object-fit:cover;display:block}
.hu-card-row .hu-card-media .hu-plate{aspect-ratio:3/2}

/* Overlay feature, essays, guides */
.h-overlay{position:relative;display:block;min-height:520px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);text-decoration:none;transition:border-color 240ms ease}
.h-overlay:hover{border-color:var(--line-strong);color:var(--text)}
.h-overlay-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform 800ms cubic-bezier(.2,.7,.2,1)}
.h-overlay:hover .h-overlay-img{transform:scale(1.02)}
.h-overlay-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,10,0) 35%,rgba(6,8,10,.94) 88%)}
.h-overlay-body{position:absolute;left:0;right:0;bottom:0;padding:var(--space-7);display:grid;gap:var(--space-3);max-width:760px}
.h-quote-section{padding-top:var(--space-10);padding-bottom:var(--space-10)}
.h-quote-section .hu-quote{padding-top:0;padding-bottom:0}
.h-essay{display:flex;gap:var(--space-5);align-items:center;padding:var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);text-decoration:none;transition:border-color 240ms ease}
.h-essay:hover{border-color:var(--line-strong);color:var(--text)}
.h-essay-media{flex:none;width:140px;height:140px;border-radius:var(--radius-md);overflow:hidden;display:block}
.h-essay-img{width:100%;height:100%;object-fit:cover;display:block}
.h-essay-body{display:grid;gap:var(--space-2);min-width:0}
.h-essay-title{font-family:var(--font-display);font-size:1.625rem;line-height:1.15}
.h-linklist{display:grid;border-top:1px solid var(--line)}
.h-linklist a{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);min-height:52px;padding:var(--space-2) 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;transition:color 200ms ease}
.h-linklist a:hover{color:var(--human)}
.h-guide{position:relative;display:block;height:220px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);text-decoration:none}
.h-guide:hover{border-color:var(--line-strong);color:var(--text)}
.h-guide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-guide-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,10,0) 30%,rgba(6,8,10,.92) 100%)}
.h-guide-body{position:absolute;left:0;right:0;bottom:0;padding:var(--space-5);display:grid;gap:var(--space-1)}

.h-empty{display:grid;gap:var(--space-4);justify-items:start;padding:var(--space-7);border:1px dashed var(--line-strong);border-radius:var(--radius-lg)}
.h-pagination{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-5)}
.h-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-md);color:var(--text);text-decoration:none}
.h-pagination .page-numbers.current{background:var(--text);border-color:var(--text);color:var(--background)}
.h-pagination a.page-numbers:hover{border-color:var(--text)}

/* Article */
.h-article-head{padding-top:var(--space-7);padding-bottom:var(--space-6);display:grid;gap:var(--space-4);max-width:calc(900px + 2 * var(--space-5))}
.h-article-figure{margin:0 auto var(--space-7)}
.h-article-figure figcaption{margin-top:var(--space-2)}
.h-article-img{width:100%;max-height:620px;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line);display:block}
.h-prose{color:var(--text)}
.h-prose>*{margin-top:0;margin-bottom:var(--space-5)}
.h-prose h2{font-family:var(--font-display);font-weight:400;font-size:1.875rem;line-height:1.2;margin-top:var(--space-7)}
.h-prose h3{font-family:var(--font-sans);font-weight:600;font-size:1.25rem;line-height:1.3;margin-top:var(--space-6)}
.h-prose a{color:var(--ai);text-underline-offset:3px}
.h-prose a:hover{color:var(--human)}
.h-prose ul,.h-prose ol{padding-left:1.25em}
.h-prose li{margin-bottom:var(--space-2)}
.h-prose blockquote{margin-left:0;padding-left:var(--space-5);border-left:2px solid var(--human);font-family:var(--font-display);font-style:italic;font-size:1.625rem;line-height:1.35}
.h-prose img{border-radius:var(--radius-md)}
.h-prose figcaption{font-size:.8125rem;color:var(--muted)}
.h-prose hr{border:0;border-top:1px solid var(--line);margin:var(--space-7) 0}
.h-prose table{width:100%;border-collapse:collapse}
.h-prose th,.h-prose td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);text-align:left}
.h-prose code{font-family:var(--font-mono);font-size:.9em;background:var(--elevated);padding:2px 6px;border-radius:var(--radius-sm)}
.h-prose pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4);overflow-x:auto}
.h-prose-lede>p:first-of-type{font-size:1.1875rem;line-height:1.6}
.h-prose-lede h2{margin-top:0}
.h-wtm-wrap{padding-top:var(--space-4);padding-bottom:var(--space-4)}
.h-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-4);padding-bottom:var(--space-4)}
.h-tag{border-color:var(--line-strong);color:var(--text)}
.h-related{border-top:1px solid var(--line);margin-top:var(--space-7)}
.h-comments{padding-bottom:var(--space-8)}
.h-comments input,.h-comments textarea{width:100%;background:var(--elevated);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:var(--space-3)}

/* Tool review */
.h-review-head{padding-top:var(--space-7);padding-bottom:var(--space-6);display:grid;gap:var(--space-4)}
.h-review-body{position:relative;overflow:hidden}
.h-review-portrait{position:absolute;top:0;right:0;width:min(34%,420px);height:100%;object-fit:cover;object-position:center top}
.h-review-fade{position:absolute;inset:0;background:linear-gradient(90deg,var(--background) 62%,rgba(11,14,17,.4) 78%,rgba(11,14,17,0) 100%),linear-gradient(180deg,rgba(11,14,17,0) 70%,var(--background) 100%)}
.h-review-inner{position:relative;padding-top:var(--space-7);padding-bottom:var(--space-9);display:grid;gap:var(--space-8)}
.h-verdict-wrap{max-width:780px}
.h-takeaways{max-width:620px}
.hu-verdict-main h2{margin:0}

/* Models */
.h-compare{position:relative;overflow:hidden}
.h-compare-img{position:absolute;right:0;bottom:0;width:min(60%,760px);height:220px;object-fit:cover;opacity:.8}
.h-compare-fade{position:absolute;inset:0;background:linear-gradient(180deg,var(--background) 55%,rgba(11,14,17,0) 100%)}
.h-compare-body{position:relative;padding-top:var(--space-6);padding-bottom:var(--space-10)}
.h-th-link{display:inline-flex;align-items:center;min-height:32px;color:inherit;text-decoration:none}
.h-th-link:hover{color:var(--human)}
/* Compare tool: checkbox chips pick the models, the table shows only the picked columns. */
.h-cmp-pick{display:grid;gap:var(--space-3);justify-items:start}
.h-cmp-fieldset{margin:0;padding:0;border:0;min-width:0}
.h-cmp-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.h-cmp-chip{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3) 0 6px;border:1px solid var(--line-strong);border-radius:999px;background:var(--elevated);color:var(--muted);cursor:pointer;transition:border-color 200ms ease,background-color 200ms ease,color 200ms ease}
.h-cmp-chip:hover{color:var(--text);border-color:var(--muted)}
.h-cmp-check{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.h-cmp-mono{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--ai);font-family:var(--font-mono);font-size:.8125rem;text-transform:uppercase}
.h-cmp-tick{display:none;color:var(--ai)}
.h-cmp-chip:has(.h-cmp-check:checked){background:var(--ai-soft);border-color:var(--ai);color:var(--text)}
.h-cmp-chip:has(.h-cmp-check:checked) .h-cmp-tick{display:block}
.h-cmp-chip:has(.h-cmp-check:checked) .h-cmp-mono{border-color:var(--ai)}
.h-cmp-chip:has(.h-cmp-check:focus-visible){outline:2px solid var(--focus-ring);outline-offset:3px}
.h-cmp-chip:has(.h-cmp-check:disabled){opacity:.45;cursor:not-allowed}
.h-cmp-chip:has(.h-cmp-check:disabled):hover{color:var(--muted);border-color:var(--line-strong)}
.h-cmp-status{min-height:1.5em}
.h-compare-body.is-js .h-cmp-submit{display:none}
.h-compare-body:not(.is-js) .h-cmp-remove{display:none}
.h-cmp-table th[hidden],.h-cmp-table td[hidden],.h-cmp-table tr[hidden],.h-cmp-remove[hidden]{display:none}
.h-cmp-table{min-width:0}
.h-cmp-table thead th,.h-cmp-table td{min-width:150px}
.h-cmp-table .h-cmp-spec{position:sticky;left:0;z-index:1;width:200px;min-width:140px;background:var(--surface)}
.h-cmp-head{display:inline-flex;align-items:center;gap:2px}
.h-cmp-remove{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.h-cmp-remove:hover{color:var(--text);background:var(--elevated)}
.h-cmp-remove:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.h-cmp-add{border-left:1px dashed var(--line-strong)}
.h-cmp-table thead .h-cmp-add{font-weight:500}
.h-cmp-add-link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);border:1px dashed var(--line-strong);border-radius:var(--radius-md);color:var(--muted);text-decoration:none;white-space:nowrap}
.h-cmp-add-link:hover{color:var(--ai);border-color:var(--ai)}
.h-cmp-bar{display:block;width:min(120px,100%);height:4px;margin:6px auto 0;border-radius:4px;background:var(--line)}
.h-cmp-bar>span{display:block;height:100%;border-radius:inherit;background:var(--ai);transition:width 300ms ease}
@media (prefers-reduced-motion:reduce){.h-cmp-chip,.h-cmp-bar>span{transition:none}}
@media (max-width:640px){.h-cmp-table .h-cmp-spec{width:120px;min-width:120px}.h-cmp-table thead th,.h-cmp-table td{min-width:130px}}
.h-model-head{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center}
.h-model-head .hu-model{width:200px}
.h-spec-table{min-width:0}
.h-spec-table tbody th{width:40%}
.h-spec-table td{text-align:left}

/* About */
.h-why{position:relative;overflow:hidden;background:var(--void);border-top:1px solid var(--line)}
.h-why-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.h-why-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,10,.2) 0%,rgba(6,8,10,.55) 50%,var(--void) 100%),linear-gradient(90deg,rgba(6,8,10,.85) 0%,rgba(6,8,10,0) 60%)}
.h-why-body{position:relative;padding-top:280px;padding-bottom:var(--space-9)}
.h-why-text{max-width:560px}
.h-about-team{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-6)}

/* Community */
.h-closing{position:relative;overflow:hidden;background:var(--void)}
.h-closing-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.h-closing-fade{position:absolute;inset:0;background:linear-gradient(180deg,var(--background) 0%,rgba(6,8,10,0) 25%,rgba(6,8,10,.35) 60%,var(--void) 100%)}
.h-closing-body{position:relative;padding-top:300px;padding-bottom:var(--space-10);text-align:center;display:grid;gap:var(--space-5);justify-items:center}

/* WordPress core */
.alignwide{max-width:min(1000px,100vw - 48px);margin-left:50%;transform:translateX(-50%)}
.alignfull{width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%)}
.wp-caption-text,.wp-element-caption{font-size:.8125rem;color:var(--muted)}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{clip:auto;width:auto;height:auto;margin:0;padding:12px 16px;z-index:100;background:var(--human);color:var(--on-accent)}
.sticky,.bypostauthor,.gallery-caption{}

/* Phones */
@media (max-width:900px){
.h-home-hero-img{width:100%;height:520px;opacity:.55}
.h-home-hero-fade{background:linear-gradient(180deg,rgba(6,8,10,.3) 0%,rgba(6,8,10,.7) 300px,var(--void) 520px)}
.h-side-caption{display:none}
.h-hero-img{width:100%!important;opacity:.45}
.h-band-img{width:100%;opacity:.5}
.h-nl-img{left:0;width:100%;opacity:.25}
.h-nl-fade{background:linear-gradient(180deg,rgba(19,24,29,.6),var(--surface))}
.h-review-portrait{opacity:.25;width:100%}
}
@media (max-width:640px){
.h-wrap,.h-reading{padding-left:var(--space-4);padding-right:var(--space-4)}
.display-xl{font-size:2.75rem}
.display-l{font-size:2.5rem}
.heading-1{font-size:1.875rem}
.h-section{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.h-home-hero-body{padding-top:112px}
.h-hero-body{padding-top:112px}
.h-nl-row{padding:var(--space-5)}
.h-nl-form{flex-wrap:wrap}
.h-nl-form .hu-btn{width:100%}
.h-overlay{min-height:440px}
.h-overlay-body{padding:var(--space-5)}
.h-essay-media{width:96px;height:96px}
.h-essay-title{font-size:1.375rem}
.h-footer-end{justify-items:start}
}
@media (orientation:landscape) and (max-height:500px){
.display-xl{font-size:2.75rem}
.display-l{font-size:2.5rem}
.heading-1{font-size:1.875rem}
.h-home-hero-body,.h-hero-body{padding-top:var(--space-9)}
.h-home-hero-body{gap:var(--space-6)}
.h-home-hero-copy{gap:var(--space-3);max-width:720px}
.h-home-hero-copy .h-lede-sm{font-size:1.0625rem;line-height:1.5;max-width:none}
}
/* Very short landscape screens (320-340px tall): the home H1 steps down once more so the lede still fits. */
@media (orientation:landscape) and (max-height:340px){
.display-xl{font-size:2.25rem}
.h-home-hero-body,.h-hero-body{padding-top:88px}
}
@media (prefers-reduced-motion:reduce){
.h-card,.h-card-img,.h-overlay-img,.h-mini,.h-topic,.h-essay{transition:none}
.h-card:hover .h-card-img,.h-overlay:hover .h-overlay-img{transform:none}
html{scroll-behavior:auto}
}

/* Clean editorial source framing. */
.h-home-hero-img{object-position:right center}
.h-review-portrait{object-position:72% center}

/* Article and identity imagery stay inside their reading and card containers. */
.h-article-head,.h-article-figure{max-width:calc(var(--reading-measure) + 2 * var(--space-5))}
.h-article-figure{overflow:hidden}
.h-article-img{height:auto;max-height:none;aspect-ratio:16/9;object-fit:cover;object-position:center}
.h-prose img,.h-prose video,.h-prose iframe{max-width:100%}
.h-prose figure{max-width:100%;margin-left:0;margin-right:0}
.h-prose .alignwide,.h-prose .alignfull{width:100%;max-width:100%;margin-left:0;margin-right:0;transform:none}
.h-card-media,.hu-card-media,.hu-tile,.h-overlay,.h-guide,.h-lead-media{overflow:hidden;min-width:0}
.h-card-img,.hu-card-img,.h-guide-img,.h-overlay-img,.h-lead-img,.h-essay-img{object-fit:cover;object-position:center}
.h-review-head{grid-template-columns:minmax(0,1fr) 280px}
.h-review-head>:not(.h-tool-identity){grid-column:1;min-width:0}
.h-tool-identity{grid-column:2;grid-row:1/span 4;align-self:center;max-width:100%;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg)}
.h-tool-identity-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--background)}
.h-review-portrait{object-position:50% 35%}
@media(max-width:900px){.h-review-head{grid-template-columns:minmax(0,1fr)}.h-tool-identity{grid-column:1;grid-row:auto;width:min(320px,100%);order:5}.h-article-head,.h-article-figure{max-width:100%}}
@media(max-width:640px){.h-article-img{border-radius:var(--radius-md)}.h-hero-img{object-position:65% center!important}}

/* UX audit, October 2026: preserve Humanopia's design and improve controls. */
[hidden]{display:none!important}
.h-header-wrap:has(.h-header.is-open),.h-header-wrap:has(.h-search-panel:not([hidden])){background:var(--void)}
.h-header.is-open .hu-header-nav{max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
.h-mobile-subscribe{display:none}
.h-nl-field:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
.h-nl-form[aria-busy="true"]{opacity:.75}
.h-nl-form input[type="email"]{font-size:1rem}
.h-nl-error{color:#ffb4ab}
.h-prose{overflow-wrap:anywhere}
.h-stack-2>*,.h-stack-3>*,.h-stack-4>*,.h-stack-5>*,.h-stack-6>*,.h-stack-7>*{min-width:0}
.hu-search,.hu-search-input,.h-search-wide{min-width:0;max-width:100%}
.hu-table-wrap:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.hu-table-wrap{max-width:100%;scrollbar-width:auto}
.h-scroll-hint{margin:0 0 12px;font-size:.8125rem;color:var(--muted)}
.h-sticky-tabs .hu-tabs{scrollbar-width:thin;padding-bottom:4px}
.h-sticky-tabs .hu-tabs:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.h-footer-nav a,.hu-btn-link{min-height:44px;display:inline-flex;align-items:center}
.h-anchor{scroll-margin-top:90px}
.h-placeholder-notice{padding:20px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface)}
.h-placeholder-notice p{margin:0}
@media(max-width:480px){
  .h-header{column-gap:8px}
  .h-header>.hu-wordmark{gap:8px;flex:0 1 auto;min-width:0}
  .h-header .hu-wordmark-mark{height:32px!important;width:auto}
  .h-header .hu-wordmark-img{height:20px!important;width:auto;max-width:calc(100vw - 216px);object-fit:contain}
  .h-header-actions{flex:none;gap:4px}
  .h-mobile-subscribe{display:inline-flex;color:var(--human)}
  .h-nl-field{flex-basis:100%;width:100%;min-height:52px}
  .h-closing-body{padding-top:160px;padding-bottom:64px}
}

/* Foundations (QA fixes, October 2026). Font sizes are rem everywhere, so they follow the reader's default size; never set a root font-size. */
/* Long unbroken strings (pasted URLs, long words) wrap instead of widening the page. Tables keep whole words and scroll. */
h1,h2,h3,h4,.heading-1,.heading-3,.h-card-title,.hu-card-title,.h-essay-title,.h-mini-title,.hu-iconcard-title,.h-results-line span,.comment-content,.comment-body{overflow-wrap:anywhere}
.h-article-head,.h-hero-body,.h-home-hero-body,.h-card-body,.h-review-inner{grid-template-columns:minmax(0,1fr)}
.h-prose table,.h-prose th,.h-prose td{overflow-wrap:normal;word-break:normal}
.h-prose .wp-block-table{overflow-x:auto}
/* Narrowest phones (320px reflow width): a smaller essay thumbnail and title, so long words such as 'superintelligent' fit the row. */
@media (max-width:359px){.h-essay{gap:var(--space-4)}.h-essay-media{width:72px;height:72px}.h-essay-title{font-size:1.25rem}}
/* Long-form measure (DS decision): from 1024px, prose is 1.125rem (18px). Paragraphs and lists stop at --prose-measure (33em,
   a median of about 70 characters per line at 17px and 18px); images, tables, code and headings keep the 680px reading column. */
@media (min-width:1024px){.h-prose{font-size:1.125rem}}
.h-prose>:is(p,ul,ol){max-width:var(--prose-measure)}

/* Home hero: the picture shows both faces (the human on the left, the AI on the right). It fills the hero from the header to the cards and fades at its edges so the headline stays readable. On wide screens it is shifted 100px to the right and cropped at the right edge of the content. */
@media (min-width:901px){
.h-home-hero .h-home-hero-img{right:max(0px,calc((100% - var(--container)) / 2 + var(--space-5)));width:min(70%,940px);height:min(100%,620px);object-fit:cover;object-position:100% 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 90%,transparent 100%),linear-gradient(180deg,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 90%,transparent 100%),linear-gradient(180deg,#000 78%,transparent 100%);mask-composite:intersect}
.h-home-hero .h-home-hero-fade{background:linear-gradient(90deg,var(--void) 0,var(--void) 30%,rgba(6,8,10,0) 42%),linear-gradient(180deg,rgba(6,8,10,0) 420px,var(--void) 660px)}
}
@media (min-width:1352px){
.h-home-hero .h-home-hero-img{right:calc((100% - var(--container)) / 2 + var(--space-5) - 100px);clip-path:inset(0 100px 0 0);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 calc(100% - 190px),transparent calc(100% - 100px)),linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 calc(100% - 190px),transparent calc(100% - 100px)),linear-gradient(180deg,#000 78%,transparent 100%)}
}
@media (max-width:900px){.h-home-hero .h-home-hero-img{height:auto;opacity:.7}}

/* Pillar heroes get the same edge fade as the home hero (from Claude Design). */
@media (min-width:901px){
.h-hero:not(.h-hero-full) .h-hero-img{right:calc(max(0px,(100% - var(--container)) / 2) + var(--space-5));max-width:calc(var(--container) * .6);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 90%,transparent 100%),linear-gradient(180deg,#000 70%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 90%,transparent 100%),linear-gradient(180deg,#000 70%,transparent 100%);mask-composite:intersect}
.h-hero.h-hero-full .h-hero-img{right:calc(max(0px,(100% - var(--container)) / 2) + var(--space-5));width:min(64%,820px)!important;object-position:70% center!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 90%,transparent 100%),linear-gradient(180deg,#000 70%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 90%,transparent 100%),linear-gradient(180deg,#000 70%,transparent 100%);mask-composite:intersect}
.h-hero.h-hero-full .h-hero-fade{background:linear-gradient(90deg,var(--background) 36%,rgba(11,14,17,.5) 52%,rgba(11,14,17,0) 70%),linear-gradient(180deg,rgba(11,14,17,0) 70%,var(--background) 100%)}
}

/* Tool review (from Claude Design, 2026-10-09): the portrait stays inside the container and fades on all four edges. */
@media (min-width:901px){
.h-review-body .h-review-portrait{right:calc(max(0px,(100% - var(--container)) / 2) + var(--space-5));-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 75%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 35%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 75%,transparent 100%);mask-composite:intersect}
}

/* Display type is Source Serif 4 sitewide (from Claude Design); the weights for display-xl/l, heading-1/2 are in the design-system tokens. */
.h-card-title,.h-topic-title,.h-essay-title,.h-prose h2{font-weight:600;letter-spacing:-.01em;font-optical-sizing:auto}

/* Humanity pull quote: centered, with a closing quote mark (from Claude Design). */
.h-quote-section .hu-quote{margin-left:auto;margin-right:auto}
.hu-quote blockquote{width:fit-content;max-width:100%;margin-left:auto!important;margin-right:auto!important;text-align:center}
.hu-quote blockquote::before{text-align:left}
.hu-quote blockquote::after{content:"\201D";display:block;height:40px;margin-top:var(--space-4);text-align:right;font-family:var(--font-display);font-size:6rem;font-style:normal;line-height:.8;color:var(--human)}

/* Join page closing image: centered, at most 1440px wide, edges fade out (from Claude Design). */
.h-closing .h-closing-img{left:50%;right:auto;width:min(100%,1440px);transform:translateX(-50%);object-position:center 35%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.h-closing .h-closing-fade{background:linear-gradient(180deg,var(--background) 0%,rgba(6,8,10,0) 18%,rgba(6,8,10,.25) 55%,var(--void) 100%)}
.h-closing .h-closing-body{padding-top:225px;padding-bottom:225px}
@media (max-width:640px){.h-closing .h-closing-body{padding-top:140px;padding-bottom:140px}}

/* Keep the two blocks below last in this file and add new rules above them. Every forced-colours rule and every print rule
   goes into its block, including rules for design-system components; do not create other forced-colors or print queries. */
/* Forced colours */
@media (forced-colors: active){
}
/* Print */
@media print{
}