/* Webgentic site layer (task 005 build). Loaded after base.css (V6 style.css, unchanged) and
   sections.css (V6, unchanged). Only NEW class names live here, so the homepage renders as V6.
   Components are documented live at /design-system/components. */

/* ---------- header: the six-item menu ---------- */
.menu-trigger.is-current,.nav-link.is-current{position:relative}
.menu-trigger.is-current::after,.nav-link.is-current::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--ink)}
.mega-link[aria-current="page"]{background:var(--blue-wash)}
.panel-prod2{width:720px;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.panel-prod2 .mega-foot,.panel-uc2 .mega-foot{grid-column:1/-1}
.panel-uc2{width:700px;display:grid;grid-template-columns:.8fr 1.2fr;gap:4px 14px}
.panel-uc2 .mega-col:last-of-type{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:2px 8px}
.panel-uc2 .mega-col:last-of-type .mega-col-head{grid-column:1/-1}
.mega-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-col-head{padding:6px 10px 8px;font:600 .9rem/1.3 var(--font-body);color:var(--ink)}
.mega-col-head span{font-weight:400;color:var(--muted)}
.panel-pf6{width:600px}
.panel-pf6 .pf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.panel-list{width:380px}
.mega-list{display:flex;flex-direction:column;gap:2px}
.m-col-head{padding:14px 0 4px;font:600 .82rem/1.3 var(--font-body);color:var(--muted)}
@media (max-width:1240px){.primary .menu-trigger,.primary .nav-link{padding:0 10px}}

/* ---------- page hero ---------- */
.phero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--head) + clamp(28px,4vw,52px)) 0 clamp(56px,6vw,88px);background:linear-gradient(135deg,#D7E1F3 0%,#CDE5E1 100%)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
.phero-grid.solo{grid-template-columns:minmax(0,1fr)}
.phero-grid.solo .phero-copy{max-width:820px}
.phero h1{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.04;letter-spacing:-.04em;max-width:20ch}
.phero .lede{margin-top:20px;color:var(--body);max-width:54ch}
.phero .hero-ctas{margin-top:28px}
.phero-note{margin-top:18px;max-width:52ch;font-size:.9rem;line-height:1.5;color:#4F5460}
.phero-visual{min-width:0}
.phero .hb1{opacity:.75}
.phero-short{padding-bottom:clamp(40px,5vw,64px)}

/* ---------- breadcrumb ---------- */
.crumbs{margin-bottom:20px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;font-size:.92rem;line-height:1.4;color:#3A3E47}
.crumbs li+li::before{content:"/";margin:0 .55em;color:rgba(17,18,20,.5)}
.crumbs a{display:inline-block;padding:10px 0;color:var(--blue-deep);font-weight:500;text-decoration:underline;text-decoration-color:rgba(26,95,122,.35);text-underline-offset:3px}
.crumbs a:hover{text-decoration-color:currentColor}
.crumbs [aria-current]{color:#3A3E47}
.phero .btn-ghost{border-color:rgba(17,18,20,.3)}

/* ---------- headings and text inside sections ---------- */
.sec-head-center{margin-inline:auto;text-align:center}
.sec-head-center .lede{margin-inline:auto}
.h3-lg{font:500 clamp(1.5rem,2.4vw,2rem)/1.15 var(--font-head);letter-spacing:-.03em;color:var(--ink)}
.muted{color:var(--muted)}
.link{color:var(--blue-ink);text-decoration:underline;text-decoration-color:rgba(26,95,122,.4);text-underline-offset:3px}
.link:hover{text-decoration-color:currentColor;color:var(--blue-deep)}
.dark .link{color:var(--blue);text-decoration-color:rgba(160,225,247,.5)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- cards ---------- */
.boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.boxes-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.boxes-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.box{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);background:var(--card);border:1px solid var(--line);border-radius:18px;min-width:0}
.box h3{font-size:1.2rem}
.box p{color:var(--muted);line-height:1.55}
.box .ticks{margin-top:6px}
.box-link{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);text-decoration:none}
.box-link:hover{text-decoration:underline}
a.box{text-decoration:none;color:inherit;transition:border-color .18s}
a.box:hover{border-color:var(--ink)}
.box-dark{background:var(--black);border-color:var(--black);color:#fff}
.box-dark h3{color:#fff}
.box-dark p{color:rgba(255,255,255,.74)}

/* ---------- feature rows ---------- */
.frows{display:flex;flex-direction:column;gap:clamp(56px,7vw,104px)}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.frow:nth-child(even)>.frow-vis{order:-1}
.frow h3{font:500 clamp(1.55rem,2.5vw,2.1rem)/1.12 var(--font-head);letter-spacing:-.035em}
.frow-copy>p{margin-top:14px;max-width:52ch;color:var(--muted);line-height:1.6}
.frow .ticks{margin-top:22px}
.frow .ticks .ic{color:#0E7C66}
.frow-proof{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);max-width:52ch;font-size:.93rem;line-height:1.5;color:var(--muted)}
.frow-proof strong{color:var(--ink);font-weight:600}
.frow-vis{position:relative;min-width:0}

/* A quiet product mock: white panel, soft shadow, real UI words. No window chrome. */
.mock{position:relative;padding:clamp(18px,2vw,26px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 34px 80px -34px rgba(17,18,20,.32)}
.mock-dark{background:var(--black);border-color:rgba(255,255,255,.08);color:#fff;box-shadow:0 50px 120px -40px rgba(160,225,247,.32),0 30px 60px -30px rgba(0,0,0,.6)}
.mock-field{position:relative;isolation:isolate;overflow:hidden;padding:clamp(20px,3vw,40px);border-radius:24px;background:linear-gradient(135deg,#D7E1F3,#CDE5E1)}
.mock-field::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:200px;mix-blend-mode:multiply;opacity:.2;pointer-events:none}
.mock-title{font:600 .95rem/1.3 var(--font-body);color:var(--ink)}
.mock-dark .mock-title{color:#fff}
.mock-sub{margin-top:2px;font-size:.82rem;color:var(--muted)}
.mock-dark .mock-sub{color:rgba(255,255,255,.6)}
.mock-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.mock-list li{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:10px;background:var(--canvas);font-size:.9rem;line-height:1.45;color:var(--body)}
.mock-dark .mock-list li{background:rgba(255,255,255,.06);color:rgba(255,255,255,.88)}
.mock-list .ic{width:18px;height:18px;margin-top:2px;color:var(--blue-ink)}
.mock-dark .mock-list .ic{color:var(--blue)}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.mock-dark .mock-row{border-top-color:rgba(255,255,255,.12)}
.mock-mono{font:500 12px/1.4 var(--mono);color:var(--muted)}
.mock-dark .mock-mono{color:rgba(255,255,255,.55)}
.state{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.state-plan{color:#7A5BB5}.state-wait{color:#966000}.state-work{color:#1A5F7A}.state-done{color:#0E7C66}
.mock-dark .state-work{color:var(--blue)}.mock-dark .state-done{color:#5FD3B3}.mock-dark .state-wait{color:#F2C46B}.mock-dark .state-plan{color:#C3AEF0}
.mock-bubble{max-width:88%;padding:10px 14px;border-radius:14px;background:var(--canvas);font-size:.9rem;line-height:1.45}
.mock-bubble.me{margin-left:auto;background:#0B0C10;color:#fff}
.mock-thread{display:flex;flex-direction:column;gap:10px}

/* ---------- process steps (a quieter rail) ---------- */
.steps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:20px;counter-reset:step}
.steps li{position:relative;padding-top:30px;border-top:1px solid var(--line-2)}
.steps li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.steps h3{font-size:1.15rem}
.steps p{margin-top:8px;font-size:.95rem;line-height:1.55;color:var(--muted)}
.dark .steps li{border-top-color:rgba(255,255,255,.2)}
.dark .steps li::before{background:var(--blue)}
.dark .steps p{color:rgba(255,255,255,.7)}

/* ---------- product split / data tables ---------- */
.tbl-wrap{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.tbl th,.tbl td{padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.tbl thead th,.tbl thead td{border-top:0;padding-top:20px;padding-bottom:20px}
.tbl tbody th{width:22%;font-weight:600;color:var(--ink)}
.tbl td{color:var(--body)}
.tbl .t-yes,.tbl .t-no,.tbl .t-part{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.tbl .t-yes{color:#0E7C66}.tbl .t-no{color:#5E636E}.tbl .t-part{color:#966000}
.tbl .t-yes .ic,.tbl .t-no .ic,.tbl .t-part .ic{width:18px;height:18px}
.split thead th{font:600 1.1rem/1.2 var(--font-head);letter-spacing:-.02em;color:var(--ink)}
.split thead th small{display:block;margin-top:4px;font:400 .88rem/1.3 var(--font-body);letter-spacing:0;color:var(--muted)}
.split thead th.s-orc{background:var(--black);color:#fff}
.split thead th.s-orc small{color:rgba(255,255,255,.65)}
.split tbody td{width:39%}
@media (max-width:760px){
  .tbl,.tbl thead,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tbody tr{padding:6px 0;border-top:1px solid var(--line-2)}
  .tbl tbody tr:first-child{border-top:0}
  .tbl tbody th{width:auto;padding:14px 18px 4px;border-top:0}
  .tbl td{width:auto !important;padding:6px 18px;border-top:0}
  .tbl td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:.82rem;font-weight:600;color:var(--muted)}
  .tbl tbody tr td:last-child{padding-bottom:14px}
}

/* ---------- honest notes ---------- */
.callout{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-radius:16px;background:var(--blue-wash);color:var(--ink);line-height:1.55}
.callout .ic{width:22px;height:22px;margin-top:1px;color:var(--blue-ink)}
.callout p+p{margin-top:6px}
.callout-plain{background:#fff;border:1px solid var(--line)}

/* ---------- reading pages (legal, docs, articles) ---------- */
.prose{max-width:70ch;color:var(--body);line-height:1.7}
.prose>*+*{margin-top:1em}
.prose h2{margin-top:2.2em;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.15;scroll-margin-top:96px}
.prose h3{margin-top:1.8em;font-size:1.2rem;scroll-margin-top:96px}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li+li{margin-top:.4em}
.prose a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:600}
.with-toc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.toc{position:sticky;top:96px;font-size:.92rem}
.toc p{font-weight:600;color:var(--ink);margin-bottom:8px}
.toc ul{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line-2)}
.toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--ink);border-left-color:var(--ink)}
@media (max-width:1100px){.with-toc{grid-template-columns:minmax(0,1fr)}.toc{position:static}}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field label,.field legend{font:600 .95rem/1.3 var(--font-body);color:var(--ink)}
.field .opt{font-weight:400;color:var(--muted)}
.field .help{font-size:.88rem;line-height:1.45;color:var(--muted)}
.input{width:100%;min-height:48px;padding:12px 14px;border:1px solid rgba(17,18,20,.28);border-radius:12px;background:#fff;color:var(--ink);font:400 1rem/1.4 var(--font-body)}
.input:hover{border-color:rgba(17,18,20,.5)}
.input:focus-visible{outline:3px solid var(--blue-ink);outline-offset:1px;border-color:var(--blue-ink)}
.field.has-error .input{border-color:#B42318}
.field-error{display:flex;gap:6px;align-items:flex-start;font-size:.9rem;line-height:1.4;color:#B42318}
.field-error[hidden]{display:none}
.check{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:#0B0C10}
.choice{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px;border:0;margin:0;padding:0}
.choice legend{margin-bottom:8px}
.choice label{position:relative;display:flex;flex-direction:column;gap:2px;min-height:64px;padding:14px 16px 14px 48px;border:1px solid rgba(17,18,20,.28);border-radius:14px;background:#fff;cursor:pointer;font-weight:600;color:var(--ink)}
.choice label small{font-weight:400;font-size:.86rem;color:var(--muted)}
.choice input{position:absolute;left:16px;top:16px;width:20px;height:20px;margin:0;accent-color:#0B0C10}
.choice label:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.choice label:has(input:focus-visible){outline:3px solid var(--blue-ink);outline-offset:2px}
.form-panel{padding:clamp(24px,3vw,40px);background:#fff;border:1px solid var(--line);border-radius:22px}
.form-after{font-size:.9rem;line-height:1.5;color:var(--muted)}
.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.choice{grid-template-columns:minmax(0,1fr)}}

/* ---------- pricing ---------- */
.pplans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.pplan{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.6vw,32px);background:#fff;border:1px solid var(--line);border-radius:20px}
.pplan h3{font-size:1.3rem}
.pplan-for{color:var(--muted);font-size:.95rem;line-height:1.5}
.pplan-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font:500 clamp(2.4rem,4vw,3rem)/1 var(--font-head);letter-spacing:-.04em;color:var(--ink)}
.pplan-price small{font:400 .95rem/1.3 var(--font-body);letter-spacing:0;color:var(--muted)}
.pplan .ticks{margin-top:4px;font-size:.95rem}
.pplan .ticks .ic{color:#0E7C66}
.pplan .btn{margin-top:auto}
.pplan-mid{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pplan-orc{background:var(--black);border-color:var(--black);color:#fff}
.pplan-orc h3,.pplan-orc .pplan-price{color:#fff}
.pplan-orc .pplan-for,.pplan-orc .pplan-price small{color:rgba(255,255,255,.68)}
.pplan-orc .ticks li{color:rgba(255,255,255,.88)}
.pplan-orc .ticks .ic{color:var(--blue)}
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:#fff}
.seg button{min-height:40px;min-width:56px;padding:0 16px;border:0;border-radius:999px;background:transparent;font:500 .92rem/1 var(--font-body);color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:#0B0C10;color:#fff}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]:hover{color:#fff}

/* ---------- door cards (sign in, 404) ---------- */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.door{display:flex;flex-direction:column;gap:12px;padding:clamp(26px,3vw,40px);border-radius:22px;background:#fff;border:1px solid var(--line)}
.door-dark{background:var(--black);border-color:var(--black);color:#fff}
.door-dark h2,.door-dark h3{color:#fff}
.door p{color:var(--muted);line-height:1.55}
.door-dark p{color:rgba(255,255,255,.74)}
.door .btn{align-self:flex-start;margin-top:auto}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .boxes-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pplans{grid-template-columns:minmax(0,1fr);max-width:620px}
}
@media (max-width:980px){
  .phero-grid{grid-template-columns:minmax(0,1fr)}
  .frow{grid-template-columns:minmax(0,1fr)}
  .frow:nth-child(even)>.frow-vis{order:0}
  .boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .doors{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .boxes,.boxes-2,.boxes-4,.steps{grid-template-columns:minmax(0,1fr)}
  .phero .hero-ctas .btn,.btn-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.box,.a.box{transition:none}}

/* ---------- page list (404) ---------- */
.nf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 24px;margin-top:28px}
.nf-list li{display:flex;flex-direction:column;padding:8px 0;border-top:1px solid var(--line)}
.nf-list li[hidden]{display:none}
.nf-list .muted{font-size:.85rem}

/* ---------- mock details ---------- */
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.lede-on-dark{color:rgba(255,255,255,.74)}
.mock-head{margin-top:0;padding-top:0;border-top:0}
.mock-steps{margin:6px 0 8px;padding-left:1.2em;list-style:decimal;font-size:.88rem;line-height:1.5}
.mock-steps li+li{margin-top:2px}
.mock-btn{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:#0B0C10;color:#fff;font-size:.85rem;font-weight:500;white-space:nowrap}
.mock-attach{display:inline-flex;align-self:flex-end;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font:500 12px/1.3 var(--mono);color:var(--muted)}
.mock-attach .ic{width:14px;height:14px}
.mock-list li .state{margin-left:auto;flex:none}
.mock-li-main{min-width:0}
.mock-list li .ic{flex:none}
.tree-field{padding:clamp(20px,3vw,40px)}
.tree-field .orc{--orc-font:'Inter',system-ui,sans-serif;--orc-node:rgba(255,255,255,.92);--orc-node-line:rgba(17,18,20,.10);--orc-line:rgba(17,18,20,.26);--orc-muted:#4F5460}
.tree-notes{margin-top:16px}
.tree-foot{margin-top:18px;max-width:70ch;font-size:.95rem;line-height:1.55}
.boxes>li>.box{height:100%}

/* ---------- form summary and checkbox field (shared by every form) ---------- */
.form-summary{padding:16px 18px;border:2px solid #B42318;border-radius:14px;background:#FEF3F2;color:var(--ink)}
.form-summary:focus-visible{outline:3px solid var(--blue-ink);outline-offset:2px}
.form-summary p{font-weight:600}
.form-summary ul{margin-top:6px;padding-left:1.2em;list-style:disc}
.form-summary a{color:#B42318;text-decoration:underline;text-underline-offset:3px}
.check-field{display:flex;flex-direction:column;gap:7px}
.check-field.has-error .check input{outline:2px solid #B42318;outline-offset:2px}

/* ---------- design system page ---------- */
.ds-rule{max-width:80ch;padding:14px 18px;border:1px solid var(--line-2);background:var(--blue-wash);border-radius:12px;color:var(--ink);line-height:1.6}
.ds-rule code,.prose code{font:500 .86em/1.4 var(--mono);color:var(--blue-deep)}

/* FAQ partial: the closing "ask" card fills whatever is left of its row, so any number of
   questions leaves no gap (the first card spans two columns). Home builds its own grid and is untouched. */
@media (min-width:1101px){
  .fq-fill .fq-ask:nth-child(4n){grid-column:1/-1}
  .fq-fill .fq-ask:nth-child(4n+1){grid-column:span 3}
  .fq-fill .fq-ask:nth-child(4n+2){grid-column:span 2}
}
@media (min-width:641px) and (max-width:1100px){.fq-fill .fq-ask:nth-child(2n){grid-column:1/-1}}

/* ---------- page hero variants (30 Oct): pages no longer all open on the same pastel field ----------
   Inner-page blobs drop the blur filter: the radial gradients are already soft, and the filter cost
   about 150 ms of paint per page load on a throttled CPU (the "delay between pages"). The homepage
   hero (.hero) keeps V6 exactly. */
.phero .hb{filter:none}
.phero-paper{background:var(--canvas);border-bottom:1px solid var(--line)}
.phero-media,.phero-banner{background:var(--canvas)}
.phero-art{position:absolute;top:0;right:0;bottom:0;width:min(58%,960px);z-index:-1;overflow:hidden}
.phero-art-img{width:100%;height:100%;object-fit:cover}
.phero-media .phero-art{width:min(46%,780px);top:var(--head)}
.has-art .phero-copy{max-width:min(560px,52vw)}
.phero-dark{background:#0A0D14;color:#fff}
.phero-dark .hero-fx{display:none}
.phero-dark .phero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0A0D14 0%,rgba(10,13,20,.72) 26%,rgba(10,13,20,0) 62%)}
.phero-dark h1{color:#fff}
.phero-dark .lede{color:rgba(255,255,255,.8)}
.phero-dark .phero-note{color:rgba(255,255,255,.7)}
.phero-dark .crumbs ol,.phero-dark .crumbs [aria-current]{color:rgba(255,255,255,.72)}
.phero-dark .crumbs li+li::before{color:rgba(255,255,255,.42)}
.phero-dark .crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.phero-dark .btn-primary{background:#fff;color:#0B0C10}
.phero-dark .btn-primary:hover{background:var(--blue);color:#0B0C10}
.phero-dark .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.phero-dark .btn-ghost:hover{border-color:#fff}
.phero-dark :focus-visible{outline-color:var(--blue)}
.hero-dark .site-header::before{opacity:1;background:#fff}
.phero-logo{display:block;width:auto;max-width:220px;margin:4px 0 22px}
.phero-band{margin-top:clamp(36px,5vw,60px)}
.phero-band-img{width:100%;height:clamp(220px,30vw,420px);object-fit:cover;border-radius:20px}
@media (max-width:980px){
  .phero .phero-art,.phero-media .phero-art{position:relative;inset:auto;width:100%;height:clamp(220px,52vw,360px);margin-top:var(--head)}
  .phero-dark.has-art,.phero-media.has-art{padding-top:0}
  .phero-dark .phero-art::after{background:linear-gradient(0deg,#0A0D14 0%,rgba(10,13,20,0) 55%)}
  .has-art .phero-copy{max-width:none;margin-top:28px}
}

/* ---------- image tiles (30 Oct): a plain tile can lead with one of the old site's images ----------
   <li class="box box-pic"><img class="box-img" src="/static/img/old/x.webp" alt="" loading="lazy" width="800" height="500"><h3>..</h3><p>..</p></li>
   No icon squares, no coloured top borders: the picture is the only decoration. */
.box-pic{padding:0;overflow:hidden;gap:0}
.box-pic .box-img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#E9E8E4}
.box-pic > :not(.box-img){margin-inline:clamp(22px,2.4vw,30px)}
.box-pic > h3{margin-top:22px}
.box-pic > p,.box-pic > ul{margin-top:10px}
.box-pic > :last-child{margin-bottom:clamp(22px,2.4vw,30px)}
.box-pic .box-link{margin-top:auto;padding-top:14px}