/* ---- boxline: a headline drawn inside a labelled boundary ---------------------------------
   The outline is the claim: everything inside the box runs under the label on its top edge
   (Governed on the homepage). The label sits on the border like a fieldset legend, offset from
   the left corner, on a solid chip of the surface colour so the line appears to pass behind it.

   .flip is the one word that changes. It sits on a highlight in its capability's colour, so
   the eye goes there first, and it changes like an odometer: every letter is a column holding a
   strip of that position's letter in each word, the strip slides, and the column's width eases
   to the new letter, left to right with a short stagger. boxline.js builds the columns from
   data-flip and runs the loop. Screen readers and crawlers read the headline once: the flip keeps
   its own word as its only text, and the letters the odometer draws are CSS, not text, and
   aria-hidden. It runs under every motion setting (user ruling 2026-09-25) and pauses while the
   headline holds keyboard focus. */
.boxline{
  --bx:var(--p-gov);
  position:relative;
  border:2px solid var(--bx);
  border-radius:22px;
}
.ctahero .claim.boxline{padding:30px 34px 22px;margin-top:14px}
/* The Governed box is the hero's only frame: the frosted card around it, and the ring motion.css
   spins on its edge, go. */
.ctahero.hero-open{border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  /* No edge, but the copy still needs the field knocked back behind it: a fade that is solid
     under the text and gone well before the sides, so it reads as calm space, not a panel. */
  background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(var(--surface),.93) 58%,rgba(var(--surface),0) 100%)}
.ctahero.hero-open::before{display:none}
.mqs-certs{margin:-36px 0 30px;position:relative;text-align:center;font-size:calc((13px) * var(--ts));color:var(--muted)}
.mqs-certs a{color:inherit}
.mqs-certs a:hover{color:var(--mint)}
.boxline-k{
  position:absolute;top:0;left:30px;transform:translateY(-54%);
  padding:2px 12px;border-radius:8px;
  background:rgb(var(--surface));
  color:var(--bx);
  font-size:calc((clamp(12px,1.25vw,15px)) * var(--ts));
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;
  white-space:nowrap;
}
.boxline .bl-line{display:block}
/* On a product page the box hugs the headline inside the left-aligned hero plate. Every box is
   Governance amber and every label leads with GOVERNED: governed is the storyline on every page
   that makes a product claim (user ruling 2026-09-26). A page adds its own attribute after it in
   its capability's colour, as the <b> in the label (GOVERNED · COMPRESSED on Models and Context). */
.plate h1.boxline{width:fit-content;max-width:100%;padding:24px 28px 16px}
.boxline-k b{font-weight:inherit;color:var(--bk2,var(--bx))}
.boxline.bl-models{--bk2:var(--p-models)}
.boxline.bl-context{--bk2:var(--p-context)}

.flip{
  --flip-roll:900ms;--flip-ease:cubic-bezier(.65,0,.35,1);
  display:inline-flex;vertical-align:bottom;
  padding:0 .16em;margin-left:.04em;border-radius:.16em;
  background:var(--flip-bg,var(--p-models));
  color:rgb(var(--surface));
  transition:background-color var(--flip-roll) var(--flip-ease);
}
/* flex:none: .flip is a flex container and a clipped column has no minimum width, so without this
   a line even a pixel short squeezes the last column to nothing and its letter disappears. */
.flip-col{
  display:inline-block;position:relative;height:1.12em;overflow:hidden;flex:none;
  transition:width var(--flip-roll) var(--flip-ease);
}
.flip-strip{display:block;transition:transform var(--flip-roll) var(--flip-ease)}
.flip.flip-now,.flip.flip-now .flip-col,.flip.flip-now .flip-strip{transition:none!important}
/* NIGHT. The night palette lightens every capability colour so it reads as TEXT on dark paper,
   which makes it a pale chip under near-black letters here. The highlight wants the opposite: a
   deep, saturated block with white letters. So on night the chip takes the day hues (white on
   each clears 5.9:1) while the rest of the page keeps the night ones. */
[data-theme="night"] .flip{
  --p-models:#1F5FA8;--p-context:#0C6E58;--p-docs:#9A3D8F;--p-gov:#8A5A0F;
  color:#fff;
}
/* motion.css outlines the night homepage headline in dark ink when motion is reduced or off, for
   the retired highlighted-words headline. The boxed headline has no marker for it to rescue, and
   on the chip it draws a dark rim round white letters, so the boxed headline opts out. */
.ctahero .claim.boxline,.plate h1.boxline{text-shadow:none}
.flip-strip > span{display:block;height:1.12em;line-height:1.12em;width:max-content;white-space:pre}
/* The letters are CSS, not text: boxline.js sets each one's data-c and this prints it. */
.flip-strip > span::before{content:attr(data-c)}
/* The word a text reader gets. It is on screen only until boxline.js has built the columns. */
.flip > .flip-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(max-width:560px){
  /* Two lines at 375px: each line needs about 9.5em, so the size and the side padding are
     sized to fit rather than letting the line break inside the headline. */
  .ctahero .claim.boxline{padding:24px 12px 16px;font-size:calc((25px) * var(--ts))}
  .boxline-k{left:16px}
}

/* ---- hero tiles, all four product pages: one figure and a few words each, in place of the old paragraph ----
   --tc is the page's pillar colour. Four tiles sit in one row from 1100px, two by two below; five tiles
   (.n5, Context) fit one row from 1190px, then go three over two, then two by two. */
.htiles{--tc:var(--p-context);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.htiles.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
html[data-pillar="models"] .htiles{--tc:var(--p-models)}
html[data-pillar="gov"] .htiles{--tc:var(--p-gov)}
html[data-pillar="documents"] .htiles{--tc:var(--p-docs)}
.htile{display:flex;flex-direction:column;gap:6px;padding:14px 12px 12px;border:1px solid var(--rule-deep);
  border-radius:14px;background:rgba(var(--surface),.72);color:var(--ink);text-decoration:none;background-image:none}
.htile svg{width:22px;height:22px;color:var(--tc)}
.htile b{font-size:calc((21px) * var(--ts));font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--tc)}
/* 19px, not 21, with five tiles: each heading gets about 180px, and "18.6× more requests" needs 177 at 19px. */
.htiles.n5 .htile b{font-size:calc((19px) * var(--ts))}
.htile span{font-size:calc((14px) * var(--ts));line-height:1.35;color:var(--muted)}
.htile:hover,.htile:focus-visible{border-color:var(--tc)}
.htile:focus-visible{outline:2px solid var(--tc);outline-offset:2px}
@media(max-width:1189px){.htiles.n5{grid-template-columns:repeat(6,minmax(0,1fr))}.htiles.n5>.htile{grid-column:span 2}.htiles.n5>.htile:nth-child(n+4){grid-column:span 3}}
@media(max-width:1099px){.htiles:not(.n5){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.htiles,.htiles.n5{grid-template-columns:repeat(2,minmax(0,1fr))}.htiles.n5>.htile,.htiles.n5>.htile:nth-child(n+4){grid-column:auto}.htile:last-child:nth-child(odd){grid-column:1/-1}}

/* ---- product-page hero: a calmer card -------------------------------------------------------------
   The eyebrow and the boxed headline's own label sat about 14px apart, with the eyebrow's rule mark,
   the box edge and the page's wave lines all in that gap; the waves ran on behind the headline, the
   paragraph and every tile because the card was only 32% opaque. The rule mark goes, the gap grows
   (the eyebrow is a block, so its margin collapses into the headline's inline 22px), and the card is
   90% opaque, so the waves stay in the page around it. Models, Context, Governance and Documents share
   this header, so they change together. */
.hero.subhero .plate{background:color-mix(in srgb,var(--bg) 90%,transparent)}
.hero.subhero .plate>.eyebrow{margin-bottom:42px}
.hero.subhero .plate>.eyebrow::before{display:none}
@media(max-width:820px){.hero.subhero .plate>.eyebrow{margin-bottom:32px}}