/* ============================================================
   brand.css — loads last. The Kapālins brand keeps uppercase mono for
   section EYEBROWS only (v7-4 .eyebrow). Every other small label added in
   v11 reads as a sentence-case Inter label, not shouted mono caps.
   ============================================================ */
.ih-label,.ih-cap,.ih-tile .tl,.em-t,.dt,.dsub,.uc .ind,.ptier .k,.resgrid .k,.dd.mega .mgh,.finding .fk,.origin .k,.sv .k,.tier .k,.fmx th,.rad .t,
.pa-fam .k,.pa-q .k,.pa-planes .k,.pa-src .k,.pb-k,.pb-verb,.pb-card .pb-tag,.pc-source .k,.pc-tag,.pc-state,.pc-facts .k,.pc-steps .k,.pc-reach .k,.pc-table th{
  text-transform:none!important;letter-spacing:0!important;font-family:var(--sans)!important;font-weight:600!important;font-size:.8rem!important}
/* the name is always "Kapālins" — never set in capitals, whatever the label around it does */
.knm{display:contents;text-transform:none!important;letter-spacing:normal!important;font-variant:normal}
/* footer assurance: small marks under the social links, not a strip of boxes */
.fassure{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap}
.fassure .fb{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-3)}
.fassure svg{width:34px;height:34px;color:var(--ink-3)}
.fassure sup,.fstar sup{color:var(--flag)}
.fstar{font-size:.72rem;color:var(--ink-3);margin-top:6px}
.fwi.avail .n{color:var(--allow)}
.fwi.avail{border-style:solid}
/* plan badge: sentence case, same as every other card label */
.tier .badge{text-transform:none;letter-spacing:0;font-family:var(--sans);font-weight:600;font-size:.72rem;border-radius:100px;padding:3px 10px}
/* pricing table: ticks and plain words, no feature codes and no rung jargon */
.fmx tr.grp td{background:var(--sunken);color:var(--ink);font-family:var(--serif);font-weight:700;font-size:.84rem;padding:12px 14px 8px}
.fmx td.c{text-align:center;vertical-align:middle;width:16%}
.fmx th:not(:first-child){text-align:center}
.fmx td .fx{font-family:var(--sans);font-size:.8rem;font-weight:600;display:inline-flex;flex-direction:column;align-items:center;line-height:1.2}
.fmx td .fx small{font-weight:480;font-size:.7rem;color:var(--ink-3);margin-top:2px}
.fmx td .fx.yes{color:var(--allow);font-size:1rem}
.fmx td .fx.yes small{font-size:.7rem}
.fmx td .fx.view{color:var(--ink-2)}
.fmx td .fx.add{color:var(--amber)}
.fmx td .fx.no{color:var(--ink-4)}
/* one logo, two themes: the build writes a dark-mode twin for dark-ink wordmarks (site.json darkLogos) */
.lg-d{display:none!important}
html[data-theme="dark"] .lg-l{display:none!important}
html[data-theme="dark"] .lg-d{display:inline-block!important}
/* menus: a solid surface. The nav bar's own blur stops a nested backdrop blur working, so a glass menu showed the page through it */
.nav .dd{background:var(--paper)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 18px 50px rgba(6,8,14,.22)}
/* keyboard: a focused menu heading opens its menu, so every item can be reached by Tab */
.nav-links>div:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd a span .knm,.dd a b .knm{display:inline!important;margin:0!important}
/* section labels outside eyebrows are sentence-case Inter, never shouted mono */
.mnav .grp b,.footer h5,.df label,.demo-form label,form label{text-transform:none!important;letter-spacing:0!important;font-family:var(--sans)!important;font-weight:600!important;font-size:.82rem!important}
.mnav .grp.solo a{font-weight:600}
.mnav-util{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 8px}
.mnav-util .btn{padding:10px 16px;font-size:.9rem}
.nav-toggle.is-open svg path{d:path("M6 6l12 12M18 6L6 18")}
/* eyebrows are always amber */
.eyebrow{color:var(--amber)!important}
.fassure .fb small{display:block;font-size:.7rem;color:var(--flag);font-weight:600}
.fassure .fb>span{display:flex;flex-direction:column;line-height:1.25}
/* FAQ: a drawn plus/minus, not the browser's default triangle */
details>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"+";flex:none;width:24px;height:24px;border-radius:100px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--ink-2);transition:transform .2s}
details[open]>summary::after{content:"−"}
/* footer on a phone: the brand column takes the full width, the link columns pair up beneath it */
@media(max-width:820px){.footer-top>.about{grid-column:1/-1}}
/* legal tables on a phone: each row becomes a small card instead of a table cut off at the right */
@media(max-width:620px){
  .pc-table table,.pc-table tbody,.pc-table tr,.pc-table td{display:block;width:100%}
  .pc-table thead{display:none}
  .pc-table tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--paper)}
  .pc-table td{border:0!important;padding:3px 0!important;text-align:left!important}
}
.lchip.txt{padding-left:12px;padding-right:12px}
/* evidence rows: a plain status word, not a progress bar that measures nothing */
.evrow .ev-pill{margin-left:auto;flex:none;font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:100px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.evrow .ev-pill.live{color:var(--allow);border-color:color-mix(in srgb,var(--allow) 45%,transparent)}
.evp{position:static}
/* AI Hub: sentence-case labels; an offline hub does not show a live dot; the fallback is a short set of links */
.ihub-resp-label,.ihub-modelabel,.ihub-modes button,.ihub-head .ttl{text-transform:none!important;letter-spacing:0!important;font-family:var(--sans)!important}
.ihub-modelabel{font-size:.8rem!important;font-weight:600;color:var(--ink-3)}
.ihub-modes button{font-size:.8rem!important;font-weight:600;white-space:nowrap}
.ihub.offline .ihub-head .ttl .d{background:var(--ink-4);animation:none}
.ihub-alt{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ihub-alt a{font-size:.84rem;font-weight:600;padding:6px 12px;border-radius:100px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;background:var(--paper)}
.ihub-alt a:hover{border-color:var(--amber);color:var(--amber)}
.pe-sub{display:block;font-size:.74rem;color:var(--ink-3);margin-top:2px;font-weight:500}
/* use cases by team: CISO and risk stacked on the left, security operations beside them, so no card trails empty space */
@media(min-width:1081px){
  .pd-teams{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;grid-template-areas:"ciso soc" "grc soc";align-items:stretch!important}
  .pd-teams #ciso{grid-area:ciso}.pd-teams #soc{grid-area:soc}.pd-teams #grc{grid-area:grc}
}
/* the playbook names are a list, not buttons */
.pd-pbh{margin:4px 0 6px;font-size:.8rem;font-weight:600;color:var(--ink-3)}
.pd-pb span{border:0!important;background:var(--sunken)!important;border-radius:6px!important;color:var(--ink-2)!important}
/* the sticky header reads as solid: at 72% the headings scrolling under it showed through as ghost text */
.nav{background:color-mix(in srgb,var(--bg) 94%,transparent)!important}
/* wide wordmarks a little larger so small red/blue marks stay legible */
.lchip.wide img{height:17px!important}
.ihub-resp-label{font-size:.8rem!important;font-weight:600;color:var(--ink-3)}
/* the selected tab, cut or filter: ink on light, amber on dark (ink there is near-white, which read as a blank white box) */
html[data-theme="dark"] .hero-tabs button[aria-selected="true"],
html[data-theme="dark"] .sx-cuts button[aria-selected="true"],
html[data-theme="dark"] .rh-filter button[aria-pressed="true"],
html[data-theme="dark"] .jur button[aria-pressed="true"],
html[data-theme="dark"] .em-h .tab.on{background:var(--amber)!important;color:#1A1206!important;border-color:var(--amber)!important}
/* Shadow AI decisions keep their meaning in colour */
.sx-tier.sx-done.no,.sx-qd.no,.sx-done-note.no{color:var(--block)!important;border-color:var(--block)!important}
.sx-tier.sx-done.mid,.sx-qd.mid,.sx-done-note.mid{color:var(--ink-2)!important;border-color:var(--line-2)!important}
/* estate map: the cut tabs sit on their own row, so switching cut never moves them */
.sx-mh{flex-direction:column;align-items:flex-start}
/* integrity "six questions" on a phone: the reading drops under the question instead of squeezing it to one word a line */
@media(max-width:620px){
  .ih-kinds button{grid-template-columns:12px minmax(0,1fr)!important}
  .ih-kinds button .kv{grid-column:2;text-align:left}
  .ih-sealrow{flex-direction:column;align-items:flex-start}
}
/* plan cards: the button sits at the foot of every card, level across the row */
.tiers3 .tier{display:flex;flex-direction:column}
.tiers3 .tier .btn{margin-top:auto;align-self:flex-start}
/* pricing table on a phone: three narrow plan columns beside a wrapping feature name, instead of a 640px table to scroll */
@media(max-width:620px){
  .fmx table{min-width:0!important;font-size:.78rem}
  .fmx th,.fmx td{padding:8px 6px!important}
  .fmx td:first-child{width:40%}
  .fmx td .fx{font-size:.72rem}
  .fmx td .fx small{display:none}
}
.v9-tile .tl{gap:8px}
/* the capability map stays wide, but its heading lines up with every other section */
.v9cap-sec .shead,.v9cap-sec .v9stat{max-width:1180px;margin-left:auto!important;margin-right:auto!important}
.card .num{letter-spacing:.02em!important;font-family:var(--sans)!important;font-weight:600;font-size:.78rem!important}
/* plans: four across when Sovereign is shown; the foot line is counted from the plan data */
.tiers3.tiers4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:1100px){.tiers3.tiers4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:620px){.tiers3.tiers4{grid-template-columns:minmax(0,1fr)!important}}
.tier .tier-foot{font-size:.8rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px;margin:12px 0 14px}
.tier.soon{border-style:dashed;background:transparent}
.tier.soon .badge{color:var(--ink-2);border-color:var(--line-2)}
.fmx th.soon,.fmx td.soon{opacity:.62}
.fmx th.soon small{display:block;font-weight:500;font-size:.7rem}
/* packaging rules */
.pk-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pk-rule{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:18px 20px}
.pk-n{display:inline-flex;width:26px;height:26px;border-radius:100px;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent)}
.pk-rule h3{font-family:var(--serif);font-size:1.02rem;margin:10px 0 6px}
.pk-rule p{margin:0;font-size:.88rem;color:var(--ink-2)}
@media(max-width:900px){.pk-rules{grid-template-columns:minmax(0,1fr)}}
.tier h3{padding-right:96px}
.tiers3 .tier .btn{align-self:stretch!important;justify-content:center;white-space:normal;text-align:center}
/* tracker: country cards are the filter, written into the page so search engines read each country's latest and next date */
.rh-filter{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px!important}
.rh-filter .rj{display:flex;flex-direction:column;align-items:stretch;gap:5px;text-align:left;border-radius:14px!important;padding:12px 14px!important;font-weight:400!important}
.rj-h{display:flex;align-items:center;gap:8px}
.rj-h b{font-family:var(--serif);font-size:.95rem;color:inherit}
.rj-n{margin-left:auto;font-size:.72rem;color:var(--ink-3);font-weight:600}
.rj-l{font-size:.76rem;color:var(--ink-2);line-height:1.35}
.rj-l b{font-weight:600;margin-right:6px;color:var(--ink-3)}
.rj-l time{font-family:var(--mono);font-size:.72rem}
.rh-filter .rj[aria-pressed="true"] .rj-n,.rh-filter .rj[aria-pressed="true"] .rj-l,.rh-filter .rj[aria-pressed="true"] .rj-l b{color:inherit;opacity:.85}
.pf-col i.tr,.pf-key i.tr{background:var(--ink-3);opacity:.55}
.pf-col i.rd,.pf-key i.rd{background:repeating-linear-gradient(135deg,var(--amber) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--amber);opacity:.9}
html[data-theme="dark"] .pf-col i.tr,html[data-theme="dark"] .pf-key i.tr{background:var(--ink-2);opacity:.6}
.rh.st-tracked,.rh.st-roadmap{border-style:dashed}
/* v14 · regulation history: masonry so cards of different heights leave no holes; phone filter and chart scroll sideways */
.rh-list{display:block!important;columns:2;column-gap:14px}
.rh-list>.rh{break-inside:avoid;margin:0 0 14px;display:block}
.rh-list>.rh[hidden]{display:none}
@media(max-width:900px){.rh-list{columns:1}}
@media(max-width:700px){
  .rh-filter{display:flex!important;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
  .rh-filter .rj{flex:0 0 76%;scroll-snap-align:start}
  .pf-bars{position:relative;overflow-x:auto;grid-auto-columns:30px;gap:6px;padding-bottom:6px;height:136px}
}
/* v14 · pricing table: beta marks, and on a phone each feature is a name over four labelled plan cells */
.fmx td b .fx-beta{display:inline-block;font-style:normal;font-family:var(--sans);font-size:.66rem;font-weight:600;color:var(--slate);border:1px solid color-mix(in srgb,var(--slate) 40%,transparent);border-radius:100px;padding:0 7px;margin-left:6px;vertical-align:2px}
@media(max-width:640px){
  .fmx-plans{overflow:visible}
  .fmx-plans table{min-width:0!important;display:block}
  .fmx-plans thead{display:none}
  .fmx-plans tbody{display:block}
  .fmx-plans tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
  .fmx-plans tr.grp{display:block}
  .fmx-plans tr.grp td{display:block}
  .fmx-plans td{border:0!important;width:auto!important}
  .fmx-plans td:first-child{grid-column:1/-1;padding:10px 12px 2px!important}
  .fmx-plans td.c{padding:4px 4px 10px!important;display:flex;flex-direction:column;align-items:center;gap:3px}
  .fmx-plans td.c::before{content:attr(data-plan);font-size:.66rem;font-weight:600;color:var(--ink-3)}
  .fmx-plans td .fx small{display:block!important;text-align:center}
  .fmx-plans td.soon{opacity:.7}
}
/* v14 · uppercase mono is for section eyebrows only: every other small label is sentence case (found by computed style, site-wide) */
.theme-tog button,.v9cap .lens .lbl,.v9cap .panel .hd,.v9cap .panel .hd .mono,.v9cap .scg,.v9-live,.v9-scoreL,.tl>span,.v9-sh>span,.tindex-score .grade,.v9-vd{text-transform:none!important;letter-spacing:.01em!important}
/* v14 · use cases: a second source sits beside the first with a clear gap */
.pd-src+.pd-src{margin-left:16px}
/* v14 · a long source or law name wraps inside its card rather than widening the page */
.rh-tl,.rh-e{min-width:0}
.rh-e p,.rh-src{overflow-wrap:anywhere}
.rh-src{white-space:normal}
/* v14 · keyboard: a menu opened by focus shows at once, so the next Tab can reach its links (a fading visibility is skipped) */
.nav-links>div:focus-within .dd{transition:none}
/* v14 · footer marks: the name and its asterisk stay on one line */
.fbn{white-space:nowrap}
/* v14 · assessments: the "not covered" card reads as a boundary, not a sixth category */
.pb-card.pb-out{background:transparent!important;border:1px dashed var(--line-2)!important;box-shadow:none!important}
.pb-card.pb-out h3{color:var(--ink-2)}
/* v14 · the last two menus open leftwards from their right edge, so a wide menu never runs past the window */
.nav-links>div:nth-last-child(-n+2) .dd{left:auto;right:0}
/* v14 · a resgrid card that is a status, not a link, looks the same as its linked siblings */
.resgrid>div{display:flex;flex-direction:column;gap:6px;border:1px dashed var(--line-2);border-radius:14px;background:var(--paper);padding:18px;color:var(--ink)}
