/* brutor-2026-chrome.css - GENERATED by scripts/build-chrome-css.py from brand2026/brutor-2026.css.
Header, footer, their buttons, tokens and the font. Nothing else. Do not edit here. */
/* ───────────────────────── 0. KNOBS + TOKENS ───────────────────────── */
:root{
/* page frame */
--page-max: none;
--page-pad: 48px;
--page-bg: #FFFFFF; /* RULING 2026-09-08: the page ground is WHITE, carrying the squared grid; bone is for a card or a band, not the page */
--margin-bg: #F3EFE7; /* RULING 2026-09-08: BONE. The sheet is white, the ground it lies on is Bone Deep - that contrast is what makes it read as a sheet. */
--margin-rule: none;
/* rhythm */
--strap-h: 36px; /* was 50. RULING 2026-09-08: the top menu is 30% shorter (147px -> 103px) */
--header-h: 66px; /* was 96. Same ruling: the bar carries the reduction with the strap */
--section-y: 120px; /* Tandem's own section padding. Was 64 - that condensing was reversed 2026-09-04 */
--section-y-tight: 64px; /* for a section that is solid text or a list: .sec--tight */
--gutter: 24px;
/* ── COLOUR. TWO SOURCES, AND THEY AGREE ────────────────────────────────────
The web Colors sheet is the working palette for the site: use its ramps freely, they are
tints of these same colours, and any step is the base at that opacity (rgba(6,22,53,.6) is
Ink Navy 60%). The Brand Book (Marketing Stuff > Branding > Brutor Final Brand Book.pdf,
p7 primary, p8 supporting) holds the ABSOLUTE values, so "our brand azure" or "our brand
orange" always means the figure below, never a ramp step. Verified: the two sources give
identical hexes at 100% for all six primaries.
There is ONE azure and ONE orange. Azure Ink and Orange Deep are supporting values with
their own jobs; neither is ever "the azure" or "the orange".
What each primary is FOR, in the book's own words (p7):
Ink Navy structure: headers, dark surfaces, charts, the mark
Azure the signal: links, actions, the full stop. Never means success.
Bone the warm light ground: marketing, documents, decks
White the product surface: interface, cards, forms
Orange energy: illustration, graphics, AND TEXT ON DARK GROUNDS
Plum depth: editorial, covers, section markers. Never in product. */
--ink-black:#131927; /* Grey 100 - headline black, warmer than Ink Navy */
--ink:#061635; --ink-80:rgba(6,22,53,.8); --ink-60:rgba(6,22,53,.6); --ink-10:rgba(6,22,53,.1);
--azure:#1BB5E8; --azure-40:rgba(27,181,232,.4); --azure-10:rgba(27,181,232,.1);
--orange:#FF6D00; --orange-10:rgba(255,109,0,.1);
--plum:#6E2A56;
/* SUPPORTING VALUES (Brand Book p8) - secondary colours used in pairings. None of these is
ever "the azure" or "the orange"; each has its own job. */
--ink-slate:#1C2B45; --azure-ink:#0A5A78; --sky:#7ADCF8;
--orange-deep:#B84E00; --orange-tint:#FFE2CC;
--plum-deep:#3D162F; --plum-mid:#A84B82; --mauve:#C79BB6;
--bone:#FCFAF6; --bone-deep:#F3EFE7; --white:#fff;
--grey:#4D5461; --grey-100:#131927; --grey-30:#E5E7EA; /* Grey ramp 70 / 100 / 30 */
--grey-80:#394050; /* Grey 80 - field fill on a dark ground */
--navy-soft:#1D2C48; /* Ink Navy 90% */
--footer-bg:#000000; /* brand black (Black 100%) */
--divider-dark:rgba(252,250,246,.15); /* lines on dark grounds (CTA to footer, footer copyright row) */
--menu-card:#E6E8EB; /* Ink Navy 10% - mega-menu CTA card (Tandem Header sheet) */
--disabled-bg:#D2D5DB; --disabled-fg:#9EA2AE; /* Grey 40 / Grey 50 - Button sheet, disabled */
--disabled-bg-dark:#4D5461; --disabled-fg-dark:#6D717F; /* Grey 70 / Grey 60 - disabled on a dark ground */
/* semantic (Tandem 500 steps). RULING: green only for ticks, red only for a failure cross.
Never a section ground, never a brand accent. */
--success:#43B75D; --danger:#EE443F; --warning:#FFAA00; --info:#0095FF;
/* type */
/* RULING 2026-09-06 (Veronika): the sans is FIGTREE, everywhere, replacing Inter. It overrides the
Brand Book's "Inter" and reverses the 2026-09-01 "we keep our font" ruling now that it has been
judged next to the logo: Figtree is geometric with round bowls and a straight-sided A - the same
skeleton as the wordmark - was drawn for product interfaces, carries a true 900, and is the face
every Tandem screen was composed in, so the built site now matches the signed-off designs.
Archivo was tried the same morning and rejected (squared, too wide, fought the logo): a candidate
is judged NEXT TO THE LOGO first, against competitors second.
Google Fonts: Figtree 400;600;700;900 - loaded by the theme (brutor-fonts) and by the page
in the same line as IBM Plex Mono, which is unchanged. */
--sans:'Figtree',Inter,system-ui,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,monospace;
/* hard offsets — the signature. Azure on buttons and on boxes that sit on navy; black on light boxes */
--shadow-azure: 6px 6px 0 var(--azure);
--shadow-ink: 6px 6px 0 var(--ink);
--shadow-w: 6px; /* the offset's width: the column reserves it on the right (.wrap) */
--line-w: 1px; /* RULING 2026-09-07: every separator line INSIDE a component (stats, header cells, rows, tables) is 1px, the header cell weight. Colour is the component's own. */
--radius: 6px; /* buttons, chips */
--radius-box: 8px; /* cards, panels, schematic frames */
--grid-cols: 12; /* Page Layout sheet: 12 columns, 24px gutter */
--schematic-max: 1160px; /* Schematics sheet: full-width illustration */
}
/* ───────────────────────── 3. BUTTONS ─────────────────────────
SPEC, from the node tree ("Button" frames) and the Button sheet:
size 150x48 (219x48 when the label is long) - radius 6 - padding 20 across / 14 down
border 1px #061635 - hard offset = a duplicate frame at +6,+6 filled #1BB5E8
fills primary #FF6D00 / secondary #FFFFFF / on-navy #FCFAF6 / on-light #061635
on-light border #061635; a navy button placed ON a navy band takes a #1BB5E8 border
disabled Grey 40 #D2D5DB fill with Grey 50 #9EA2AE text and border
Tandem Button sheet. Every button: 1px Ink border, 6px radius, azure hard offset.
States default = full offset - hover = shifts 2px into it - press = flat, no offset -
disabled = grey, no offset, not clickable.
Variants primary (orange) - secondary (white) - on-dark (bone, for navy grounds) -
on-light (navy, for light grounds) - text button (azure, arrow).
Sizes L 17/24 (default) - M 14/16 - S 12/16 - Tiny 10/12.
The sheet draws an arrow-tr inside the on-dark / on-light buttons; ours carries one only
where the page asks for it: inside the button. */
.hd .btn,footer.foot .btn,.strap .btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--radius);border:1px solid var(--ink);
font:600 17px/24px var(--sans);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-azure);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.hd .btn:hover,footer.foot .btn:hover,.strap .btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--azure)}
.hd .btn:active,footer.foot .btn:active,.strap .btn:active{transform:translate(6px,6px);box-shadow:none}
.hd .btn--primary,footer.foot .btn--primary,.strap .btn--primary{background:var(--orange)}
.hd .btn--secondary,footer.foot .btn--secondary,.strap .btn--secondary{background:var(--white)}
.hd .btn--bone,footer.foot .btn--bone,.strap .btn--bone{background:var(--bone)}
.hd .btn--on-dark,footer.foot .btn--on-dark,.strap .btn--on-dark{background:var(--bone)} /* sits on a navy ground */
.hd .btn--navy,footer.foot .btn--navy,.strap .btn--navy,.hd .btn--on-light,footer.foot .btn--on-light,.strap .btn--on-light{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.hd .btn--md,footer.foot .btn--md,.strap .btn--md{height:40px;padding:0 16px;font-size:14px;line-height:16px;box-shadow:4px 4px 0 var(--azure)}
.hd .btn--sm,footer.foot .btn--sm,.strap .btn--sm{height:32px;padding:0 12px;font-size:12px;line-height:16px;box-shadow:3px 3px 0 var(--azure)}
.hd .btn--tiny,footer.foot .btn--tiny,.strap .btn--tiny{height:26px;padding:0 10px;font-size:10px;line-height:12px;box-shadow:2px 2px 0 var(--azure)}
.hd .btn[disabled],footer.foot .btn[disabled],.strap .btn[disabled],.hd .btn[aria-disabled="true"],footer.foot .btn[aria-disabled="true"],.strap .btn[aria-disabled="true"],.hd .btn--disabled,footer.foot .btn--disabled,.strap .btn--disabled{background:var(--disabled-bg);color:var(--disabled-fg);
border-color:var(--disabled-fg);box-shadow:none;pointer-events:none}
.on-dark .btn[disabled],.on-dark .btn--disabled{background:var(--disabled-bg-dark);color:var(--disabled-fg-dark);border-color:var(--disabled-fg-dark)}
.hd .btn .ic,footer.foot .btn .ic,.strap .btn .ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ══════════════════════════════════════════════════════════════════════════════════════════
THE BUTTON SPEC. Transcribed from Tandem's own sheet:
"Web Design and Assets/00-SPECS/Web style guidelines from Tandem/Button.png" (read 2026-09-09).
THIS IS THE WHOLE TRUTH ABOUT BUTTONS. Five kinds, four states, and the arrow belongs to
three of the five. Nothing else is a button.
KIND fill type arrow our class
1 Primary Orange Ink NO .btn--primary
2 Secondary White Ink NO .btn--secondary (.btn--bone)
3 Button against DARK Bone Ink YES .btn--on-dark + .btn--go
4 Button against LIGHT Ink Navy Bone YES .btn--navy (.btn--on-light)
5 Text button none Azure YES .tbtn
WHY 1 AND 2 HAVE NO ARROW, which I got wrong on 2026-09-08 by making the arrow universal:
they are the CONVERSION pair, Download Free Trial and Book Demo. The arrow means "this takes
you onward"; a conversion button is the end of the journey. Kinds 3, 4 and 5 are navigation,
so they carry it. Add .btn--go to force the arrow onto a kind that has none by default (a bone
button used as navigation on a dark band); add .btn--noarrow to take it off kind 4.
STATES, all four from the sheet:
Default 1px ink border, radius 6, 6px azure offset shadow
Hover the button moves 2px toward the shadow, which shortens to 3px
Press the button moves the full 6px and the shadow disappears
Disabled grey fill, grey type, grey border, no shadow, no pointer events
(the sheet only draws Disabled for kinds 3, 4 and 5)
THE ARROW IS NEVER A TEXT CHARACTER. Tandem's own page shipped `↗`, and
Figtree has no glyph at U+2197, so every one of those buttons rendered a tofu box. The arrow
is either the #i-tr SVG symbol in the markup or the mask below. Audit check 7 enforces the
whole of this: the right kinds carry it, the wrong kinds do not, and no button contains a
text arrow. ══════════════════════════════════════════════════════════════════════════════ */
a.btn--navy:not(.btn--noarrow):not(:has(.ic))::after,
a.btn--on-light:not(.btn--noarrow):not(:has(.ic))::after,
a.btn--go:not(:has(.ic))::after{content:"";width:20px;height:20px;flex:none;
background:currentColor;-webkit-mask:url("data:image/svg+xml,") center/contain no-repeat;mask:url("data:image/svg+xml,") center/contain no-repeat}
.hd .btn--noarrow .ic,footer.foot .btn--noarrow .ic,.strap .btn--noarrow .ic{display:none}
/* a text arrow inside a button is always a mistake: hide it and let the rule above draw the real
one. Kept as markup rather than deleted, so nothing is lost from a carried-over page. */
.hd .btn .ar,footer.foot .btn .ar,.strap .btn .ar,.hd .tbtn .ar,footer.foot .tbtn .ar,.strap .tbtn .ar{font-size:0;line-height:0}
.hd .btn .ar::after,footer.foot .btn .ar::after,.strap .btn .ar::after,.hd .tbtn .ar::after,footer.foot .tbtn .ar::after,.strap .tbtn .ar::after{content:"";display:inline-block;width:20px;height:20px;
background:currentColor;-webkit-mask:url("data:image/svg+xml,") center/contain no-repeat;mask:url("data:image/svg+xml,") center/contain no-repeat}
.hd .btn--primary .ar,footer.foot .btn--primary .ar,.strap .btn--primary .ar,.hd .btn--secondary .ar,footer.foot .btn--secondary .ar,.strap .btn--secondary .ar,.hd .btn--bone .ar,footer.foot .btn--bone .ar,.strap .btn--bone .ar{display:none}
.hd .btns,footer.foot .btns,.strap .btns{display:flex;flex-wrap:wrap;gap:14px}
/* text button: azure with an arrow-tr; ink-azure on hover; grey when disabled */
.hd .tbtn,footer.foot .tbtn,.strap .tbtn{display:inline-flex;align-items:center;gap:6px;font:600 17px/24px var(--sans);color:var(--azure);text-decoration:none}
.hd .tbtn .ic,footer.foot .tbtn .ic,.strap .tbtn .ic{width:24px;height:24px;stroke:var(--azure);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hd .tbtn:hover,footer.foot .tbtn:hover,.strap .tbtn:hover{color:var(--azure-ink)}
.hd .tbtn:hover .ic,footer.foot .tbtn:hover .ic,.strap .tbtn:hover .ic{stroke:var(--azure-ink)}
.hd .tbtn--ul,footer.foot .tbtn--ul,.strap .tbtn--ul{text-decoration:underline;text-underline-offset:4px}
.hd .tbtn--disabled,footer.foot .tbtn--disabled,.strap .tbtn--disabled{color:var(--disabled-fg);pointer-events:none}
.hd .tbtn--disabled .ic,footer.foot .tbtn--disabled .ic,.strap .tbtn--disabled .ic{stroke:var(--disabled-fg)}
/* ───────────────────────── 5. STRAP + HEADER ─────────────────────────
SPEC, from the node tree:
strap 1400x72, fill #1BB5E8 at 40%, 1px #061635 stroke (ours is 50 tall by ruling)
header 1400x66, fill #FFFFFF, 1px #061635, shadow #19213D 0,1 blur 4
(Tandem drew 96; RULING 2026-09-08, approved: 30% shorter, strap 36 + bar 66 = 103)
logo cell 240x96 - nav cell 159x96, fill #FCFAF6, 1px #061635, padding 12
Book Demo cell 205x96, padding 24/12; the button itself 150x48
chevron 24x24, stroke #061635 1.5px (ours is Azure by ruling) */
.strap{background:var(--azure-40);height:var(--strap-h);display:flex;align-items:center;justify-content:center;padding:0 var(--gutter)}
.strap a{display:inline-flex;align-items:center;gap:12px;font:900 13px/18px var(--sans);text-decoration:none}
.strap .ic{width:22px;height:22px;stroke:var(--orange);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} /* RULING 2026-09-08: the strap's arrow is the signature orange, and drawn heavier than a body arrow so it carries at 13px */
.hd{background:var(--white);border-bottom:1px solid var(--ink);box-shadow:0 1px 4px rgba(25,33,61,.25);position:sticky;top:0;z-index:40}
.hd .bar{display:flex;align-items:stretch;height:var(--header-h)}
.hd .logo{flex:none;display:flex;align-items:center;padding:0 20px 0 var(--page-pad);border-right:1px solid var(--ink)}
.hd .logo img{width:126px;height:auto} /* 2026-09-08: proportional to the shorter bar */
.hd nav{display:flex;flex:1}
.hd nav>ul{display:flex;flex:1;margin:0;padding:0;list-style:none}
.hd nav .links{margin:0;padding:0;list-style:none}
.hd nav .item{flex:1 1 159px;display:flex;position:relative;border-right:1px solid var(--ink)}
.hd nav .item:last-child{border-right:0}
.hd nav .item>a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;background:var(--white);
font:600 13px/16px var(--sans);text-decoration:none;white-space:nowrap}
.hd nav .item>a:hover,.hd nav .item:hover>a,.hd nav .item:focus-within>a,.hd nav .item.open>a{color:var(--azure)}
.hd nav .item:hover .ic,.hd nav .item:focus-within .ic,.hd nav .item.open .ic{transform:rotate(180deg)} /* active item azure, chevron flips up */
.hd nav .ic{width:20px;height:20px;stroke:var(--azure);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* chevrons azure */
/* mega menus (Tandem Header sheet): panel under the item's cell — mono eyebrow + link list left,
grey CTA card right (framed zoom + caption + Get Started button). Veronika: azure bullet per link,
CTA = zoom on the AI Systems Assurance white paper. Opens on hover / keyboard focus; the top item clicks through. */
.hd nav .drop{display:none;position:absolute;top:calc(100% + 16px);left:0;width:640px;padding:20px 24px 24px;background:var(--white);
border:1px solid var(--ink);border-radius:var(--radius-box);box-shadow:var(--shadow-ink);z-index:50;
grid-template-columns:1fr 290px;gap:24px;cursor:default}
.hd nav .drop::before{content:"";position:absolute;left:0;right:0;top:-17px;height:17px} /* keeps the panel open while the pointer crosses the gap */
.hd nav .item:hover .drop,.hd nav .item:focus-within .drop,.hd nav .item.open .drop{display:grid}
.hd nav .item:nth-last-child(-n+3) .drop{left:auto;right:0} /* panels near the right edge open leftwards */
.hd nav .drop .eyebrow{color:var(--grey);margin:0 0 14px}
.hd nav .drop .links a{display:flex;align-items:center;gap:12px;padding:8px 0 8px 12px;font:400 15px/24px var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
.hd nav .drop .links a::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--azure)}
.hd nav .drop .links a:hover{color:var(--azure)}
.hd nav .drop .promo{background:var(--menu-card);border-radius:var(--radius-box);padding:16px}
.hd nav .drop .promo .frame{background:var(--white);border-radius:6px;padding:8px;margin-bottom:14px}
.hd nav .drop .promo .frame img{width:100%;height:auto;border-radius:4px;border:1px solid rgba(6,22,53,.12)}
.hd nav .drop .promo p{font:400 15px/22px var(--sans);color:var(--ink);margin:0 0 14px}
.hd nav .drop .promo .btn{height:40px;padding:0 16px;font-size:15px;box-shadow:4px 4px 0 var(--azure)}
.hd .cta{flex:none;display:flex;align-items:center;padding:0 var(--page-pad) 0 20px;border-left:1px solid var(--ink)}
.hd .cta .btn{height:40px;padding:0 16px;font-size:15px;box-shadow:4px 4px 0 var(--azure)} /* was 48/20/17; 2026-09-08 the shorter bar takes the sheet's own medium button */
/* ── mobile navigation ──────────────────────────────────────────────────────
No design exists from Tandem, so it is built from the system: the same cells, the same ink
rules, the same azure bullets. No JavaScript - a hidden checkbox drives it, so it works in a
WordPress snippet with nothing else loaded. Sub-menus sit open under their parent; the
mega-menu promo card is dropped on small screens. */
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:none;flex:none;align-items:center;justify-content:center;width:56px;align-self:stretch;
border-left:1px solid var(--ink);cursor:pointer;background:var(--bone)}
.burger span,.burger span::before,.burger span::after{display:block;width:22px;height:2px;background:var(--ink);content:"";transition:transform var(--t),opacity var(--t)}
.burger span{position:relative}
.burger span::before{position:absolute;top:-7px}
.burger span::after{position:absolute;top:7px}
.navtoggle:checked ~ .bar .burger span{background:transparent}
.navtoggle:checked ~ .bar .burger span::before{transform:translateY(7px) rotate(45deg)}
.navtoggle:checked ~ .bar .burger span::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){
.hd nav>ul{flex-direction:column;width:100%}
.hd .bar{position:relative}
.hd .logo{border-right:0}
.hd .cta{margin-left:auto;border-left:1px solid var(--ink)}
.burger{display:flex}
.hd nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
background:var(--white);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
max-height:calc(100vh - var(--header-h));overflow:auto;z-index:60}
.navtoggle:checked ~ .bar nav{display:flex}
.hd nav .item{flex:none;display:block;border-right:0;border-top:1px solid var(--ink)}
.hd nav .item:first-child{border-top:0}
.hd nav .item>a{justify-content:flex-start;padding:16px var(--page-pad);font-size:17px;background:var(--white)}
.hd nav .item .ic{display:none}
.hd nav .drop{display:block;position:static;width:auto;padding:0 0 12px;border:0;border-radius:0;
box-shadow:none;background:transparent}
.hd nav .drop::before{display:none}
.hd nav .drop .eyebrow,.hd nav .drop .promo{display:none}
.hd nav .drop .links a{padding:10px var(--page-pad) 10px calc(var(--page-pad) + 12px);font-size:15px}
}
@media (max-width:760px){
.hd .logo{padding:0 16px 0 var(--page-pad)}
.hd .logo img{width:112px}
.hd .cta{padding:0 var(--page-pad) 0 12px}
.hd .cta .btn{height:40px;padding:0 14px;font-size:14px}
.burger{width:48px}
.strap a{font-size:13px;line-height:18px}
.strap{height:auto;min-height:var(--strap-h);padding:8px var(--page-pad)}
}
@media (max-width:420px){
.hd .logo img{width:96px}
.hd .cta .btn{padding:0 10px;font-size:13px}
}
/* ───────────────────────── 9. CTA + FOOTER ─────────────────────────
Opened once, 2026-09-06, because Veronika asked for the footer by name: type made thin,
headers to IBM Plex Mono caps. Locked again after. */
.cta .wrap{padding-top:80px;padding-bottom:80px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
/* RULING 2026-09-08, the closing CTA:
- the buttons align with the TEXT, top to top, instead of floating centred beside it;
- the headline is smaller than a section H2: this band closes the page, it does not open a
topic, and at 40px it was shouting;
- the emphasis word is BONE with an orange underline, never orange type. Orange on Ink Navy
at headline size is the loudest thing on the site. */
/* RULING 2026-09-08: "ALIGN TO TEXT" MEANS THE HEADLINE OR THE BODY COPY. Never align anything
to an eyebrow, a pill, a tag or a badge. Those are labels: they sit above the text block's
optical edge, so anything aligned to one ends up reading 8 to 20px too high. In this band the
rule is deliberately broken the other way: the eyebrow gets real air under it and the whole
left block is centred against the buttons. */
.cta .head{align-self:center}
.cta .eyebrow{margin-bottom:16px}
.cta .head h2{font-size:32px;line-height:42px}
.cta .head h2 .o{color:var(--bone);text-decoration:underline;text-decoration-color:var(--orange);
text-decoration-thickness:3px;text-underline-offset:6px}
@media (max-width:760px){.cta .wrap{grid-template-columns:1fr;gap:28px}} /* the auto column cannot shrink under a button, so it stacks (2026-09-08) */
.cta .btns{flex-direction:column;align-items:stretch;gap:14px}
.cta .btns .btn{justify-content:center}
.cta .head{margin-bottom:0}
footer.foot{background:var(--footer-bg);border-top:1px solid var(--divider-dark)} /* brand black, Black 100% */
footer.foot .grid{display:grid;grid-template-columns:230px repeat(5,auto);gap:40px;padding:48px 0 0;justify-content:space-between}
/* RULING 2026-09-06 (Veronika, footer named): the footer type was reading THICK - 600-weight
Inter in white on black. Nothing was a shadow or a tint; it was weight plus light-on-dark
rendering. Now: column headers in IBM Plex Mono, ALL CAPS, 500 weight, tracked; links stay
400 Inter but in Bone rather than pure white so they sit back. Nothing here is bold. */
footer.foot h4{font:500 11px/20px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone);margin:0 0 12px}
footer.foot h4::before{content:"/ ";color:var(--azure)}
/* ruling 2026-09-05: smaller again, and more air between the lines. A footer list is
scanned, not read - the space between items is what makes it scannable, not the size. */
footer.foot .col a{display:block;padding:5px 0 5px 12px;white-space:nowrap;font:400 12px/18px var(--sans);color:rgba(252,250,246,.82);text-decoration:none}
footer.foot .col a:hover{color:var(--azure)}
.flogo{height:44px;width:auto;margin:0 0 16px;display:block} /* the transparent logo, nothing behind it */
footer.foot .desc{font:500 13px/20px var(--mono);color:rgba(252,250,246,.6);margin:0;max-width:250px}
/* .nl-label is the class the locked footer markup carries; the bare `b` is kept so the
rule still holds if the class is ever dropped. */
footer.foot .nl b,footer.foot .nl-label{display:block;font:500 13px/20px var(--mono);color:var(--bone);margin-bottom:8px}
footer.foot form{display:flex;gap:8px}
footer.foot input{width:156px;height:36px;padding:0 10px;font:400 12px/20px var(--sans);border-radius:var(--radius);border:1px solid var(--azure);background:var(--azure-10);color:var(--bone)}
footer.foot .btn{height:36px;padding:0 14px;font-size:13px;box-shadow:4px 4px 0 var(--azure)}
footer.foot .sub{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:4px 0 20px} /* newsletter starts right under the lowest sub-menu item; social icons sit on the Subscribe baseline */
footer.foot .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 0 16px;border-top:1px solid var(--divider-dark)}
footer.foot .legal{display:flex;gap:10px;align-items:center;font:400 11px/20px var(--sans);color:rgba(252,250,246,.5)}
footer.foot .legal a{color:var(--bone);text-decoration:none;padding:4px 8px}
footer.foot .social{display:flex;gap:18px;align-items:flex-end;padding-bottom:6px}
footer.foot .social a{display:block;color:var(--azure)}
footer.foot .social svg{width:24px;height:24px;fill:currentColor;display:block}
footer.foot .social a:hover{color:#fff}
@media (max-width:1100px){footer.foot .grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:640px){footer.foot .grid{grid-template-columns:1fr 1fr}}
/* the NEW badge in the strap (ruling 2026-09-08): 2px orange border, IBM Plex Mono caps, no fill */
html body .strap .pill{display:inline-block;padding:3px 8px;border-radius:6px;border:2px solid #FF6D00; /* literal, not var(--orange): the old v18 CSS redefines that token and loads after this file (it was rendering #F97316) */
background:transparent;color:#061635 !important;font:700 11px/14px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.1em;
text-transform:uppercase;text-decoration:none}
/* on old pages the .page/main wrappers the header opens are inert */
.page.page--edges{position:static}
.page.page--edges main{position:static}
.page.page--edges main::before,.page.page--edges main::after{display:none}
/* WIDTH: the 2026 sheet gets its page width from .page (max-width var(--page-max)), which is
inert on old pages, so the header bar and footer would stretch to the viewport. Cap them here. */
html body .hd>.bar,html body footer.foot>.wrap{max-width:1400px;margin-left:auto;margin-right:auto}
/* LINK COLOUR: the old v18 CSS colours every and loads after this file. The 2026 header
and footer set their own colours; the `html body` prefix and !important make those win. */
html body .hd a:not(.btn){color:var(--ink) !important}
html body .hd .drop .links a{color:var(--ink) !important}
html body footer.foot a:not(.btn){color:var(--bone) !important}
html body footer.foot .col a:hover{color:var(--azure) !important}
html body .strap a{color:var(--ink) !important}
html body .strap .ic{stroke:#FF6D00 !important;stroke-width:2.4} /* literal: the old v18 CSS redefines --orange (it was rendering #F97316) */
/* THE FONT, site-wide (ruling 2026-09-06: Figtree everywhere). Old pages keep their old
stylesheets for everything else; only the family changes. */
html body,html body button,html body input,html body select,html body textarea,html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,html body .ast-container,html body .site-title{font-family:'Figtree',Inter,system-ui,sans-serif !important}
/* `html body` prefix: the v18 custom CSS sets Inter with !important at single-element specificity and
loads after this file; two extra ancestors outrank it without touching v18 */
code,pre,kbd,samp{font-family:'IBM Plex Mono',ui-monospace,monospace}