/* The landing page. Every rule lives under .sqlp, the page's root, so nothing here reaches the product and
   the product's utility classes do not reach in. The values are the ones approved in the prototype, one by one;
   components/marketing/landing/landing-motion.js adds and removes the state classes (on, dim, pre, on-dark).
   It is a static file, linked by components/marketing/landing/Landing.tsx, and not a module of the build: a
   stylesheet declared by this page changes how the bundler groups the style modules of the product's screens. */
.sqlp { --white: #FFFFFF;
  --gray: #F4F6F5;
  --ink: #1A1A1A;
  --ink-2: #2C2C2A;
  --text: #444441;
  --muted: #5F5E5A;
  --faint: #888780;
  --line: rgba(44, 44, 42, .12);
  --line-soft: rgba(44, 44, 42, .07);
  --grid: rgba(12, 46, 38, .04);
  --green: #0F6E56;
  --green-hover: #0A5644;
  --green-mid: #1D9E75;
  --green-soft: #5DCAA5;
  --mint: #9FE1CB;
  --amber: #C77D24;
  --amber-ink: #8F540E;
  --deep: #0C2E26;
  --deeper: #09231D;
  --on-deep: #FFFFFF;
  --on-deep-2: rgba(255, 255, 255, .62);
  --on-deep-3: rgba(255, 255, 255, .16);
  --sans: var(--font-inter), system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: var(--font-jetbrains-mono), ui-monospace, 'SF Mono', Menlo, monospace;
  --pad-x: clamp(22px, 7vw, 120px);
  --ease: cubic-bezier(.2, .7, .2, 1); }
.sqlp { color: var(--ink-2); font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.sqlp h1, .sqlp h2, .sqlp h3, .sqlp p, .sqlp ol, .sqlp ul, .sqlp figure, .sqlp blockquote { margin: 0; }
.sqlp ol, .sqlp ul { padding: 0; list-style: none; }
.sqlp a { color: var(--green); text-underline-offset: 4px; }
.sqlp button { font: inherit; }
.sqlp button, .sqlp a { touch-action: manipulation; }
.sqlp :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.sqlp { position: relative; background: #F5F7F6; overflow: clip; }
/* One field of light behind the whole page. It follows the scroll and no section cuts it. */
.sqlp .sky { position: sticky; top: 0; height: 0; z-index: 0; pointer-events: none; }
.sqlp .sky canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; display: block; }
.sqlp.no-gl .sky { display: none; }
.sqlp > section, .sqlp > .trusted, .sqlp > footer { position: relative; z-index: 1; }
.sqlp .lp-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--pad-x); background: rgba(245, 247, 246, .74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sqlp .lp-logo { display: flex; align-items: center; gap: 10px; }
.sqlp .lp-logo svg { height: 20px; width: auto; }
.sqlp .lp-word { font-size: 17px; letter-spacing: -1.5px; color: var(--ink-2); }
.sqlp .lp-word b { font-weight: 500; }
.sqlp .lp-nav { display: flex; gap: 28px; font-size: 14px; color: var(--muted); }
.sqlp .lp-right { display: flex; align-items: center; gap: 14px; }
@media (max-width: 900px) {
  .sqlp .lp-nav { display: none; }
}
.sqlp .pill { display: inline-flex; align-items: center; background: var(--deep); color: var(--white); border: 0; border-radius: 6px; font-size: 13px; font-weight: 500; padding: 8px 14px; cursor: pointer; transition: background-color .2s ease; }
.sqlp .pill:hover { background: var(--green); }
.sqlp .pill { white-space: nowrap; }
/* On the landing landing-motion.js says when the bar is deep, from the field behind it, and how dense its
   glass is. The change itself is a short fade, of the glass, the words and the mark together. */
.sqlp .lp-header { transition: background-color .35s ease; }
.sqlp .lp-header .lp-logo rect { transition: fill .35s ease; }
.sqlp .lp-header .lp-word, .sqlp .lp-nav, .sqlp .pill { transition: color .35s ease, background-color .35s ease; }
.sqlp .lp-header.on-dark { background: rgba(9, 35, 29, .5); }
.sqlp .lp-header.on-dark .lp-word { color: var(--white); }
.sqlp .lp-header.on-dark .lp-nav { color: rgba(255, 255, 255, .72); }
.sqlp .lp-header.on-dark .lp-logo rect:last-child { fill: #FFFFFF; }
.sqlp .lp-header.on-dark .pill { background: var(--white); color: var(--deep); }
.sqlp .lp-header.on-dark .pill:hover { background: var(--mint); }
.sqlp[data-hero="dark"] .hero .display { color: var(--white); }
.sqlp[data-hero="dark"] .hero .soft { color: rgba(255, 255, 255, .56); }
.sqlp[data-hero="dark"] .hero .lead { color: rgba(255, 255, 255, .76); }
@media (max-width: 700px) {
  .sqlp .lp-header { padding-inline: 16px; gap: 10px; }
  .sqlp .lp-right { gap: 10px; }
}
/* Labels are plain sentences in the text face. The code face stays inside code. */
.sqlp .k { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.sqlp .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
/* Type: quiet, never shouting. Inter by default, as in the product; the serif is offered for comparison. */
.sqlp .display, .sqlp .h2, .sqlp .statement { font-family: var(--sans); color: var(--ink); text-wrap: balance; }
.sqlp .display { font-size: clamp(25px, 2.62vw, 40px); font-weight: 450; line-height: 1.2; letter-spacing: -.032em; }
.sqlp .display .line { display: block; }
@media (min-width: 1000px) {
  .sqlp .display .line, .sqlp .rot span { white-space: nowrap; }
}
.sqlp .h2 { font-size: clamp(25px, 2.9vw, 42px); font-weight: 450; line-height: 1.16; letter-spacing: -.033em; max-width: 21ch; }
.sqlp .h2 .name { display: block; color: var(--green); }
.sqlp .statement { font-size: clamp(22px, 2.6vw, 38px); font-weight: 300; line-height: 1.3; letter-spacing: -.025em; max-width: 24ch; color: var(--ink-2); }
.sqlp .statement b { font-weight: 500; color: var(--ink); }
.sqlp .statement.two { max-width: none; }
@media (min-width: 900px) {
  .sqlp .statement.two b { display: block; }
}
.sqlp .soft { color: var(--faint); }
.sqlp .lead { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--muted); max-width: 44ch; }
/* 01 · the first screen: a quiet question beside four bars taller than the screen */
.sqlp .hero { position: relative; min-height: clamp(540px, 88vh, 900px); padding: clamp(40px, 6vw, 96px) var(--pad-x); display: grid; align-items: center; overflow: hidden; }
.sqlp .hero-text { display: grid; gap: clamp(18px, 1.8vw, 26px); padding-bottom: clamp(40px, 13vh, 150px); }
.sqlp .hero-text .lead { max-width: 40ch; }
.sqlp .rot { display: grid; }
.sqlp .rot span { grid-area: 1 / 1; opacity: 0; transform: translateY(.16em); transition: opacity .3s ease, transform .3s ease; }
.sqlp .rot span.on { opacity: 1; transform: none; transition: opacity .7s ease .32s, transform .7s var(--ease) .32s; }
@media (max-width: 760px) {
  .sqlp .hero { align-items: start; }
  .sqlp .hero-text { padding-bottom: 0; }
}
/* Code, as code: a dark panel in a theme built from the brand's mint and one warm sand */
.sqlp .editor { position: relative; background: #0B1210; color: #C9D2CE; border-radius: 12px; font-family: var(--mono); font-size: clamp(10px, 1.16vw, 15px); line-height: 1.9; box-shadow: 0 36px 90px -46px rgba(12, 46, 38, .6); }
.sqlp .editor.narrow { max-width: 76%; }
@media (max-width: 760px) {
  .sqlp .editor.narrow { max-width: 84%; }
}
.sqlp .ed-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 11px; letter-spacing: .06em; color: rgba(255, 255, 255, .42); }
.sqlp .ed-bar span { white-space: nowrap; }
.sqlp .ed-bar span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
@media (max-width: 520px) {
  .sqlp .ed-bar { font-size: 10px; padding-inline: 14px; flex-wrap: wrap; gap: 2px 10px; }
  .sqlp .ed-bar i { display: none; }
}
.sqlp .ed-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.sqlp .ed-bar i:last-of-type { margin-right: 10px; }
.sqlp .ed-time { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--mint); border-radius: 12px 0 0 0; }
.sqlp .ed-body { position: relative; padding: 14px 0 18px; }
.sqlp .ln { position: relative; display: grid; grid-template-columns: 3.4em 1.4em minmax(0, 1fr); align-items: center; height: 1.9em; padding-right: 18px; white-space: pre; overflow: hidden; }
.sqlp .ln .no { text-align: right; padding-right: .9em; color: rgba(255, 255, 255, .22); font-variant-numeric: tabular-nums; }
.sqlp .ln .mark { width: 6px; height: 6px; border-radius: 50%; }
.sqlp .ln code { display: block; font: inherit; overflow: hidden; }
.sqlp .ln .caret { position: absolute; top: .35em; width: .55em; height: 1.2em; background: var(--mint); opacity: 0; }
.sqlp .ln.out { overflow: visible; }
.sqlp .tk-k { color: #9FE1CB; }
.sqlp .tk-s { color: #EBC98E; }
.sqlp .tk-f { color: #FFFFFF; }
.sqlp .tk-t { color: #7CCFB2; }
.sqlp .tk-n { color: #E8A867; }
.sqlp .tk-c { color: #5F6E69; font-style: italic; }
.sqlp .ed-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--mint); opacity: 0; box-shadow: 0 0 18px 2px rgba(159, 225, 203, .35); }
.sqlp .paper { font-size: 13px; font-weight: 500; }
/* Trusted by, as it runs in production */
.sqlp .trusted { padding: clamp(36px, 4.4vw, 60px) var(--pad-x); display: grid; gap: 18px; justify-items: center; }
.sqlp .mq { overflow: hidden; width: 100%; max-width: 760px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.sqlp .mq-track { display: flex; width: max-content; }
.sqlp .mq ul { display: flex; gap: clamp(48px, 7vw, 96px); padding-right: clamp(48px, 7vw, 96px); font-size: clamp(15px, 1.4vw, 18px); font-weight: 600; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
/* Screens */
.sqlp .band { padding: clamp(96px, 13vw, 220px) var(--pad-x); }
.sqlp .band.gray { background: none; }
.sqlp .facts { margin-top: clamp(48px, 6vw, 96px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink-2); }
.sqlp .facts li { padding: 20px 20px 0 0; }
.sqlp .facts li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.sqlp .facts b { display: block; font-size: clamp(26px, 3vw, 42px); font-weight: 400; letter-spacing: -.04em; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sqlp .facts span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 8px; max-width: 22ch; }
@media (max-width: 860px) {
  .sqlp .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .sqlp .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
}
/* One product per screen */
.sqlp .chapter { display: grid; gap: clamp(48px, 6vw, 96px); }
.sqlp .chapter > * { min-width: 0; }
.sqlp .ch-text { display: grid; gap: 18px; }
/* Five products, five compositions: side by side, stacked, centred, edge to edge, and a table. */
.sqlp .chapter.split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(40px, 6vw, 104px); }
.sqlp .chapter.split .editor { font-size: clamp(10px, .95vw, 13.5px); }
.sqlp .chapter.center { justify-items: center; }
.sqlp .chapter.center .ch-text { justify-items: center; text-align: center; }
.sqlp .chapter.center .h2 { max-width: 24ch; }
.sqlp .chapter.center .mg { width: 100%; gap: clamp(36px, 4vw, 56px); }
.sqlp .chapter.center .mg-legend { justify-content: center; gap: 8px 28px; }
.sqlp .chapter.head-split .ch-text { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(40px, 6vw, 104px); }
.sqlp .chapter.head-split .h2 { max-width: none; }
@media (min-width: 901px) {
  .sqlp .chapter.head-split .h2 .name { white-space: nowrap; }
}
@media (max-width: 900px) {
  .sqlp .chapter.split, .sqlp .chapter.head-split .ch-text { grid-template-columns: minmax(0, 1fr); }
  .sqlp .chapter.split .editor { font-size: clamp(10px, 1.16vw, 15px); }
}
/* Connections: the official marks ride one thin line */
.sqlp .wire { position: relative; margin-inline: calc(var(--pad-x) * -1); overflow: hidden; padding: 6px 0 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sqlp .wire::before { content: ''; position: absolute; left: 0; right: 0; top: 38px; height: 1px; background: rgba(44, 44, 42, .16); }
.sqlp .wire-track { position: relative; display: flex; width: max-content; }
.sqlp .wire-set { display: flex; gap: clamp(34px, 4.6vw, 68px); padding-right: clamp(34px, 4.6vw, 68px); }
.sqlp .chip { display: grid; justify-items: center; gap: 12px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.sqlp .disc { width: 64px; height: 64px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 12px 26px -16px rgba(12, 46, 38, .4); display: grid; place-items: center; }
.sqlp .disc img { width: 30px; height: 30px; object-fit: contain; }
/* Agents: one finding, six specialists, one pull request */
.sqlp .flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr); align-items: center; column-gap: clamp(48px, 8vw, 132px); }
.sqlp .mg .flow > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sqlp .flow-end { position: relative; display: grid; gap: 6px; max-width: 20ch; }
.sqlp .flow-end b { font-size: clamp(17px, 1.6vw, 24px); font-weight: 450; line-height: 1.25; letter-spacing: -.018em; color: var(--ink); }
.sqlp .flow-end span { font-size: 13.5px; color: var(--muted); }
.sqlp .flow-end.right { justify-self: end; text-align: right; }
.sqlp .flow-rows { position: relative; display: grid; }
.sqlp .flow-rows li { display: grid; gap: 3px; padding: clamp(13px, 1.4vw, 20px) 0; border-top: 1px solid var(--line); }
.sqlp .flow-rows li:last-child { border-bottom: 1px solid var(--line); }
.sqlp .flow-rows b { font-size: clamp(16px, 1.45vw, 21px); font-weight: 450; letter-spacing: -.014em; color: var(--ink); }
.sqlp .flow-rows span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) {
  .sqlp .flow { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .sqlp .mg .flow > svg { display: none; }
  .sqlp .flow-end, .sqlp .flow-end.right { max-width: none; justify-self: start; text-align: left; }
}
/* MCP: the terminal on the left, the marks of the tools it works with */
.sqlp .chapter.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sqlp .chapter.split.flip .ch-text { order: 2; }
.sqlp .editor.term .ln { grid-template-columns: minmax(0, 1fr); padding-left: 18px; }
.sqlp .editor.term .no, .sqlp .editor.term .mark { display: none; }
.sqlp .works { display: grid; gap: 12px; margin-top: 10px; }
.sqlp .clients { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.sqlp .clients li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.sqlp .clients img { width: 22px; height: 22px; object-fit: contain; }
@media (max-width: 900px) {
  .sqlp .chapter.split.flip { grid-template-columns: minmax(0, 1fr); }
  .sqlp .chapter.split.flip .ch-text { order: 0; }
}
/* The references, by name */
.sqlp .norms { display: grid; gap: clamp(26px, 3.2vw, 44px); }
.sqlp .norms-title { font-size: clamp(20px, 2.1vw, 30px); font-weight: 450; letter-spacing: -.025em; color: var(--ink); }
.sqlp .norm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 72px); border-top: 1px solid var(--ink-2); }
.sqlp .norm-cols ul { display: grid; align-content: start; }
.sqlp .norm-cols li { padding: clamp(13px, 1.4vw, 19px) 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.65vw, 24px); font-weight: 450; line-height: 1.25; letter-spacing: -.018em; color: var(--ink); }
.sqlp .norm-cols li.k { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.sqlp .norm-cols small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.sqlp .norms .links { margin-top: 0; }
.sqlp .norm-also { display: grid; gap: 6px; }
.sqlp .norm-also span + span { font-size: clamp(15px, 1.3vw, 18px); color: var(--ink-2); }
@media (max-width: 760px) {
  .sqlp .norm-cols { grid-template-columns: minmax(0, 1fr); border-top: 0; row-gap: 22px; }
  .sqlp .norm-cols ul { border-top: 1px solid var(--ink-2); }
}
/* What you get: one statement, and six values around one sculpture of particles. The sculpture takes a form
   for each value in turn, and the value it is showing fills its own rule (landing-motion.js draws it and
   moves the classes on, moving and held). */
.sqlp .band.worth { padding-block: clamp(72px, 10vw, 150px); display: grid; justify-items: center; gap: clamp(48px, 6vw, 88px); }
.sqlp .worth-head { display: grid; justify-items: center; gap: clamp(16px, 1.8vw, 24px); text-align: center; }
.sqlp .worth-head .statement { max-width: none; font-size: clamp(24px, 2.9vw, 42px); line-height: 1.22; letter-spacing: -.028em; }
.sqlp .worth-sub { max-width: 62ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.sqlp .values { --hold: 5200ms; width: 100%; max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 31vw, 450px) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); row-gap: clamp(22px, 2.6vw, 36px); align-items: start; }
.sqlp .values .stage { grid-column: 2; grid-row: 1 / span 3; align-self: center; position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; }
.sqlp .values .stage::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(159, 225, 203, .3), rgba(159, 225, 203, 0)); }
.sqlp .values .stage canvas { position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; display: block; }
.sqlp .value { min-width: 0; position: relative; padding-top: 18px; display: grid; gap: 8px; cursor: default; }
/* the sculpture is the first child, so the values are children 2 to 7: in reading order, left then right */
.sqlp .value:nth-child(even) { grid-column: 1; }
.sqlp .value:nth-child(odd) { grid-column: 3; }
.sqlp .value:nth-child(2), .sqlp .value:nth-child(3) { grid-row: 1; }
.sqlp .value:nth-child(4), .sqlp .value:nth-child(5) { grid-row: 2; }
.sqlp .value:nth-child(6), .sqlp .value:nth-child(7) { grid-row: 3; }
.sqlp .value .rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(44, 44, 42, .14); }
.sqlp .value .rule i { position: absolute; left: 0; top: -.5px; height: 2px; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: left center; }
.sqlp .value h3 { font-size: clamp(18px, 1.6vw, 23px); font-weight: 500; line-height: 1.22; letter-spacing: -.02em; color: var(--ink); transition: color .5s ease; text-wrap: balance; }
.sqlp .value p { max-width: 36ch; font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.55; color: var(--muted); transition: color .5s ease; }
.sqlp .value.on h3 { color: var(--green); }
.sqlp .value.on p { color: var(--text); }
.sqlp .values.moving .value.on .rule i { animation: sqlp-fill var(--hold) linear forwards; }
.sqlp .values.held .value.on .rule i { animation: none; transform: scaleX(1); }
.sqlp .values:not(.moving) .value.on .rule i { transform: scaleX(1); }
@keyframes sqlp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 980px) {
  .sqlp .values { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sqlp .values .stage { grid-column: 1 / -1; grid-row: auto; justify-self: center; width: min(360px, 78vw); margin-bottom: 8px; }
  .sqlp .values .value { grid-row: auto; }
  .sqlp .value:nth-child(even) { grid-column: 1; }
  .sqlp .value:nth-child(odd) { grid-column: 2; }
  .sqlp .value p { max-width: none; }
}
@media (max-width: 600px) {
  .sqlp .values { grid-template-columns: minmax(0, 1fr); }
  .sqlp .value:nth-child(even), .sqlp .value:nth-child(odd) { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sqlp .value h3, .sqlp .value p { transition: none; }
}
/* A reading of controls, and the dossier it closes into */
.sqlp .ledger { border-top: 1px solid var(--ink-2); }
.sqlp .ledger-head, .sqlp .ledger li { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 200px) minmax(0, 250px); column-gap: clamp(14px, 2.2vw, 36px); align-items: center; }
.sqlp .ledger-head { padding: 14px 0; font-size: 12.5px; color: var(--muted); }
.sqlp .ledger li { padding: clamp(15px, 1.7vw, 24px) 0; border-top: 1px solid var(--line); }
.sqlp .ledger .mk svg { display: block; width: 24px; height: 24px; overflow: visible; }
.sqlp .ledger .t { font-size: clamp(16px, 1.5vw, 22px); font-weight: 450; line-height: 1.3; letter-spacing: -.016em; color: var(--ink); }
.sqlp .ledger .from { font-size: 13.5px; color: var(--muted); }
.sqlp .ledger .st { font-size: 13.5px; font-weight: 500; color: var(--green); }
.sqlp .ledger li[data-s="exception"] .st { color: var(--amber-ink); }
.sqlp .ledger li[data-s="missing"] .st { color: var(--ink-2); }
.sqlp .ledger .st small { display: block; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--muted); margin-top: 2px; }
/* The way out of a control that is not met: the agent, as a quiet pill under its status. */
.sqlp .ledger .st .act { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 11px 5px 8px; border: 1px solid rgba(15, 110, 86, .45); border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: -.005em; white-space: nowrap; color: var(--green); }
.sqlp .ledger .st .act svg { flex: none; width: 15px; height: 15px; }
.sqlp .dossier { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(18px, 2.6vw, 40px); border-top: 1px solid var(--ink-2); padding-top: clamp(26px, 3.2vw, 44px); }
.sqlp .mg .dossier svg { width: clamp(72px, 8vw, 116px); height: auto; }
.sqlp .dossier b { display: block; font-size: clamp(17px, 1.6vw, 24px); font-weight: 450; letter-spacing: -.018em; color: var(--ink); }
.sqlp .dossier span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 6px; max-width: 58ch; }
@media (max-width: 760px) {
  .sqlp .ledger-head { display: none; }
  .sqlp .ledger li { grid-template-columns: 24px minmax(0, 1fr); row-gap: 4px; align-items: start; }
  .sqlp .ledger .from, .sqlp .ledger .st { grid-column: 2; }
}
.sqlp .mg { display: grid; gap: 14px; }
.sqlp .mg svg { display: block; width: 100%; height: auto; overflow: visible; }
.sqlp .mg-top, .sqlp .mg-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.sqlp .mg-legend .keys { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.sqlp .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--green); }
.sqlp .dot.gone { background: rgba(44, 44, 42, .26); }
.sqlp .dot.out { background: var(--amber); }
/* Trust */
.sqlp .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(40px, 5vw, 72px); }
.sqlp .chips li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--ink-2); background: var(--white); }
.sqlp .links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font-size: 14px; font-weight: 500; }
/* The last screen: one line, and the mark standing on the footer */
.sqlp .close { position: relative; padding: clamp(120px, 15vw, 240px) var(--pad-x) clamp(150px, 19vw, 300px); display: grid; }
.sqlp .close-text { display: grid; gap: 22px; justify-items: start; max-width: 520px; }
.sqlp .close .lead { color: rgba(255, 255, 255, .74); max-width: 36ch; }
.sqlp .close-bars { position: absolute; right: var(--pad-x); bottom: 0; width: 40%; height: 78%; pointer-events: none; }
.sqlp .go { background: var(--white); color: var(--deep); border: 0; border-radius: 8px; padding: 13px 22px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s ease; }
.sqlp .go:hover { background: var(--mint); }
.sqlp .close-links { align-items: center; }
/* The card is a dialog: it is not on the page until someone asks for it. */
.sqlp .ask-dialog { border: 0; padding: 0; background: transparent; width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; border-radius: 16px; color: var(--ink-2); }
.sqlp .ask-dialog::backdrop { background: rgba(9, 35, 29, .68); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sqlp .ask-dialog[open] { animation: sqlp-ask-in .4s var(--ease); }
@keyframes sqlp-ask-in { from { opacity: 0; transform: translateY(14px); } }
.sqlp .ask-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sqlp .ask-head h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.sqlp .ask-lead { font-size: 14.5px; color: var(--muted); margin-top: -6px; }
.sqlp .ask-x { width: 36px; height: 36px; margin: -6px -8px 0 0; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.sqlp .ask-x:hover { background: var(--gray); }
.sqlp .ask-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sqlp .ask { position: relative; background: #FBFCFB; border-radius: 16px; padding: clamp(20px, 2.6vw, 36px); display: grid; gap: 14px; box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .7); }
.sqlp .ask label { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.sqlp .ask label small { font-size: inherit; color: var(--faint); }
.sqlp .ask input, .sqlp .ask select, .sqlp .ask textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; width: 100%; min-width: 0; }
.sqlp .ask textarea { resize: vertical; min-height: 84px; }
.sqlp .ask-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sqlp .ask-go { justify-self: start; background: var(--deep); color: var(--white); border: 0; border-radius: 8px; padding: 13px 22px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s ease; }
.sqlp .ask-go:hover { background: var(--green); }
.sqlp .ask-note { font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .sqlp .close { row-gap: 40px; padding-bottom: 0; }
  .sqlp .close-bars { position: static; width: 100%; height: clamp(220px, 60vw, 320px); }
}
@media (max-width: 520px) {
  .sqlp .ask-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sqlp .ask-dialog[open] { animation: none; }
}
.sqlp .close .h2 { max-width: 16ch; color: var(--white); }
.sqlp .close-links a { color: var(--mint); }
.sqlp .close .k { color: rgba(255, 255, 255, .62); }
.sqlp .close-text :focus-visible { outline-color: var(--mint); }
.sqlp .pill .short { display: none; }
@media (max-width: 520px) {
  .sqlp .pill .long { display: none; }
  .sqlp .pill .short { display: inline; }
}
.sqlp.no-gl .close { background: linear-gradient(180deg, rgba(12, 46, 38, 0), var(--deep) 22%, var(--deeper)); }
.sqlp .close-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; font-weight: 500; }
.sqlp .close .k { margin-top: 10px; }
.sqlp .lp-footer { background: linear-gradient(180deg, var(--deep), var(--deeper)); color: var(--on-deep-2); padding: 40px var(--pad-x) 32px; display: grid; gap: 22px; }
.sqlp .lp-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; }
.sqlp .lp-footer .lp-word { color: var(--on-deep); }
.sqlp .lp-footer .lp-word i { font-style: normal; color: var(--mint); font-weight: 400; }
.sqlp .lp-footer p { font-size: 13px; max-width: 46ch; margin-top: 10px; }
.sqlp .lp-footer ul { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--on-deep); }
.sqlp .lp-footer small { font-size: 11.5px; }
.sqlp .lp-footer-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; border-top: 1px solid var(--on-deep-3); padding-top: 16px; }
.sqlp .lp-footer .social { gap: 10px; }
.sqlp .social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--on-deep); box-shadow: inset 0 0 0 1px var(--on-deep-3); transition: background-color .2s ease; }
.sqlp .social a:hover { background: rgba(255, 255, 255, .1); }
.sqlp .social svg { width: 15px; height: 15px; fill: currentColor; }
.sqlp .lp-footer :focus-visible { outline-color: var(--mint); }
/* Held at the edge: language and direct contact */
.sqlp .lang-dock { position: sticky; top: 46vh; height: 0; z-index: 12; }
.sqlp .lang-dock-in { position: absolute; right: 18px; top: 0; display: grid; gap: 10px; }
.sqlp .flag { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: var(--white); box-shadow: 0 0 0 1px rgba(44, 44, 42, .16); opacity: .74; transition: opacity .2s ease, transform .25s var(--ease); }
.sqlp .flag:hover { opacity: 1; transform: scale(1.06); }
.sqlp .flag[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--green); }
.sqlp .flag svg { display: block; width: 100%; height: 100%; }
.sqlp .lang-inline { display: none; gap: 8px; }
.sqlp .lang-inline { gap: 6px; }
.sqlp .lang-inline .flag { width: 22px; height: 22px; }
@media (max-width: 700px) {
  .sqlp .lang-dock { display: none; }
  .sqlp .lang-inline { display: flex; }
}
.sqlp .wa-dock { position: sticky; bottom: 0; height: 0; z-index: 12; }
.sqlp .wa-dock-in { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; justify-items: center; }
.sqlp .wa { width: 46px; height: 46px; border-radius: 50%; background: var(--deep); display: grid; place-items: center; text-decoration: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 2px 10px rgba(12, 46, 38, .22); transition: transform .25s var(--ease); }
.sqlp .wa:hover { transform: translateY(-2px); }
.sqlp .wa svg { width: 22px; height: 22px; fill: var(--white); }
/* Motion: slow and continuous. Things rise, are drawn and are read; nothing bounces. */
.sqlp .w { transition: opacity .6s ease; }
.sqlp[data-motion="on"] .w.dim { opacity: .18; }
.sqlp [data-enter] { transition: opacity .9s ease, transform .9s var(--ease); transition-delay: var(--stagger, 0ms); }
.sqlp[data-motion="on"] [data-enter].pre { opacity: .25; transform: translateY(16px); }
.sqlp[data-motion="on"] .mq-track { animation: sqlp-mq 38s linear infinite; }
.sqlp[data-motion="on"] .mq:hover .mq-track { animation-play-state: paused; }
.sqlp[data-motion="on"] .wire-track { animation: sqlp-mq 64s linear infinite; }
.sqlp[data-motion="on"] .wire:hover .wire-track { animation-play-state: paused; }
.sqlp:not([data-motion="on"]) .wire { -webkit-mask-image: none; mask-image: none; margin-inline: 0; }
.sqlp:not([data-motion="on"]) .wire::before { display: none; }
.sqlp:not([data-motion="on"]) .wire-track { width: auto; }
.sqlp:not([data-motion="on"]) .wire-set { flex-wrap: wrap; row-gap: 28px; padding-right: 0; }
.sqlp:not([data-motion="on"]) .wire-set[aria-hidden="true"] { display: none; }
@keyframes sqlp-mq { to { transform: translateX(-50%); } }
.sqlp:not([data-motion="on"]) .mq { -webkit-mask-image: none; mask-image: none; }
.sqlp:not([data-motion="on"]) .mq-track { width: auto; justify-content: center; }
.sqlp:not([data-motion="on"]) .mq ul { flex-wrap: wrap; justify-content: center; row-gap: 8px; white-space: normal; padding-right: 0; }
.sqlp:not([data-motion="on"]) .mq ul[aria-hidden="true"] { display: none; }
.sqlp:not([data-motion="on"]) .rot span { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sqlp [data-enter], .sqlp .rot span, .sqlp .wa, .sqlp .w, .sqlp .pill { transition: none; }
}

/* The dossier closes the reading in the middle, under the last line */
.sqlp .dossier { grid-template-columns: auto minmax(0, 44ch); justify-content: center; }
.sqlp [data-fig="governance"] .mg-legend { justify-content: center; text-align: center; }

/* Every protection of the catalog, by name, and the one the company creates */
.sqlp .guards { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.sqlp .guard-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 72px); border-top: 1px solid var(--ink-2); }
.sqlp .guard-list li { padding: clamp(12px, 1.25vw, 17px) 0; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1.45vw, 21px); font-weight: 450; line-height: 1.25; letter-spacing: -.016em; color: var(--ink); }
.sqlp .guard-list li.own { color: var(--green); }
.sqlp .guard-list li .tag { margin-left: .55em; padding: .12em .45em; border: 1px solid var(--line); border-radius: 4px; font-size: .58em; font-weight: 500; letter-spacing: .01em; color: var(--green); vertical-align: .2em; white-space: nowrap; }
@media (max-width: 900px) {
  .sqlp .guard-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sqlp .guard-list { grid-template-columns: minmax(0, 1fr); }
}

/* The screen before the deep one leaves air under its last line, for the ground to come in */
.sqlp .band.to-dark { padding-bottom: clamp(240px, 19vw, 290px); }

/* Governance is the page's one deep screen in the middle. The field paints the ground, its lights and a soft
   grid; log lines are typed around it; the reading and the references sit together in one panel of glass. */
.sqlp .chapter.dark { padding-top: clamp(72px, 7vw, 116px); padding-bottom: clamp(84px, 8vw, 132px); gap: clamp(30px, 3.4vw, 48px); }
.sqlp .chapter.dark > .ch-text, .sqlp .chapter.dark > .gov-panel { position: relative; z-index: 1; }
.sqlp.no-gl .chapter.dark { background: linear-gradient(180deg, rgba(12, 46, 38, 0), var(--deep) 8%, var(--deeper) 92%, rgba(9, 35, 29, 0)); }
.sqlp .chapter.dark .h2, .sqlp .chapter.dark .ledger .t, .sqlp .chapter.dark .dossier b, .sqlp .chapter.dark .norms-title, .sqlp .chapter.dark .norm-also span + span { color: var(--white); }
.sqlp .chapter.dark .h2 .name { color: var(--mint); }
.sqlp .chapter.dark .lead, .sqlp .chapter.dark .k, .sqlp .chapter.dark .ledger-head, .sqlp .chapter.dark .ledger .from, .sqlp .chapter.dark .ledger .st small, .sqlp .chapter.dark .dossier span { color: rgba(255, 255, 255, .66); }
.sqlp .chapter.dark .ledger, .sqlp .chapter.dark .dossier { border-top-color: rgba(255, 255, 255, .3); }
.sqlp .chapter.dark .ledger li { border-color: rgba(255, 255, 255, .1); }
.sqlp .chapter.dark .ledger .st { color: #7CCFB2; }
.sqlp .chapter.dark .ledger li[data-s="exception"] .st { color: #EBC98E; }
.sqlp .chapter.dark .ledger li[data-s="missing"] .st { color: rgba(255, 255, 255, .9); }
.sqlp .chapter.dark .ledger .st .act { color: #9FE1CB; border-color: rgba(159, 225, 203, .5); background: rgba(159, 225, 203, .07); }
.sqlp .chapter.dark .links a { color: var(--mint); }
.sqlp .chapter.dark :focus-visible { outline-color: var(--mint); }
.sqlp .gov-panel { justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); border: 1px solid rgba(255, 255, 255, .11); border-radius: 16px; background: linear-gradient(180deg, rgba(10, 38, 31, .78), rgba(7, 27, 22, .84)); box-shadow: 0 50px 130px -70px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sqlp .gov-panel > * { min-width: 0; padding: clamp(18px, 2.3vw, 32px); }
.sqlp .gov-panel > .norms { align-content: start; gap: clamp(16px, 1.7vw, 22px); border-left: 1px solid rgba(255, 255, 255, .11); }
.sqlp .gov-panel .norms-title { font-size: clamp(17px, 1.45vw, 21px); letter-spacing: -.02em; }
.sqlp .gov-panel .norm-also span + span { font-size: 14.5px; }
.sqlp .gov-panel .dossier { grid-template-columns: auto minmax(0, 40ch); gap: 16px; padding-top: 18px; }
.sqlp .gov-panel .dossier svg { width: 60px; }
.sqlp .gov-panel .dossier b { font-size: 16px; }
.sqlp .gov-panel .dossier span { font-size: 12.5px; margin-top: 3px; }
.sqlp .gov-panel .mg-legend { margin-top: 4px; }
.sqlp .chapter.center .gov-panel .mg { gap: 14px; }
.sqlp .norm-groups { display: grid; gap: 15px; }
.sqlp .norm-groups > div { display: grid; gap: 8px; }
.sqlp .norm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sqlp .norm-chips li { border: 1px solid rgba(255, 255, 255, .17); border-radius: 999px; padding: 5px 12px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .03); }
.sqlp .norm-chips small { font-size: 11.5px; color: rgba(255, 255, 255, .56); margin-left: 4px; }
@media (min-width: 761px) {
  .sqlp .gov-panel .ledger-head, .sqlp .gov-panel .ledger li { grid-template-columns: 20px minmax(0, 1fr) minmax(0, 124px) minmax(0, 188px); column-gap: clamp(10px, 1.3vw, 18px); }
  .sqlp .gov-panel .ledger-head { padding: 9px 0; font-size: 12px; }
  .sqlp .gov-panel .ledger li { padding: 11px 0; }
  .sqlp .gov-panel .ledger .mk svg { width: 20px; height: 20px; }
  .sqlp .gov-panel .ledger .t { font-size: clamp(14.5px, 1.08vw, 16px); }
  .sqlp .gov-panel .ledger .from, .sqlp .gov-panel .ledger .st { font-size: 12.5px; }
  .sqlp .gov-panel .ledger .st small { font-size: 11.5px; }
  .sqlp .gov-panel .ledger .st .act { font-size: 11.5px; padding: 4px 10px 4px 7px; }
}
@media (max-width: 1000px) {
  .sqlp .gov-panel { grid-template-columns: minmax(0, 1fr); }
  .sqlp .gov-panel > .norms { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .11); }
}

/* Agents: light runs along each fibre, fast and for good, each at its own pace (the layers and the pace are
   set by landing-motion.js) */
.sqlp[data-motion="on"] .flow-pulse { animation: sqlp-flow var(--pulse, 1.2s) linear infinite; }
.sqlp:not([data-motion="on"]) .flow-pulse { display: none; }
@keyframes sqlp-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* The names under the first screen are ink: the veil of the first screen passes over them. */
.sqlp .trusted .eyebrow { color: var(--ink); }

/* The same bar, invitation and footer on the other public pages (blog, docs, research, regulations).
   There the wrapper is only a scope: it takes no room, paints nothing and clips nothing. */
.sqlp.sqlp-page { position: static; background: none; overflow: visible; }
.sqlp.sqlp-page .lp-header { position: fixed; left: 0; right: 0; z-index: 50; background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--line-soft); }
.sqlp.sqlp-page .lang-inline { display: flex; }
.sqlp.sqlp-page .close { background: linear-gradient(180deg, var(--deep), var(--deeper)); padding-block: clamp(72px, 9vw, 128px); }

/* What the product's base stylesheet takes away and this page needs back */
.sqlp .ask-dialog { margin: auto; }
.sqlp .links a, .sqlp .paper, .sqlp .close-links a { text-decoration: underline; text-decoration-thickness: 1px; }
.sqlp .lp-logo, .sqlp .lp-nav a, .sqlp .lp-footer ul a { color: inherit; text-decoration: none; }
.sqlp .lp-nav a { transition: color .2s ease; }
.sqlp .lp-nav a:hover { color: var(--ink-2); }
.sqlp .lp-header.on-dark .lp-nav a:hover, .sqlp .lp-footer ul a:hover { color: var(--white); }
.sqlp .lp-nav .sign { color: var(--ink-2); font-weight: 500; }
.sqlp .lp-header.on-dark .lp-nav .sign { color: var(--white); }
.sqlp .ask-done { display: grid; gap: 10px; padding: 8px 0 4px; }
.sqlp .ask-done h3 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.sqlp .ask-done p, .sqlp .ask-error { font-size: 14.5px; color: var(--muted); }
.sqlp .ask-error { color: #A4372A; }
.sqlp .ask label em { font-style: normal; color: #A4372A; }
.sqlp .ask-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sqlp .ask-go[disabled] { opacity: .6; cursor: default; }

/* Code maturity, as approved in its own prototype on 14/10/2026: one instrument in three columns (what the
   reading runs, the dial of six domains, what to fix and where) joined by curved leads, and a strip below
   (the architecture found, licenses against the policy, the score measured again in CI). Classes start with
   cm- so none of the page's own (.chips, .ledger, .rule) reach in. landing-motion.js builds the dial and moves it. */
.sqlp .mat { --card: #FFFFFF; --card-line: rgba(44, 44, 42, .07); --soft-bg: #EEF3F1; --code-chip: #F1F6F4; --code-chip-fg: #0F6E56;
  --act-bg: #E6F4EE; --act-fg: #0C2E26; --act-done-bg: #0C2E26; --act-done-fg: #FFFFFF;
  --sev-crit: #B4483A; --sev-high: #8F540E; --sev-high-dot: #C77D24; --sev-med: #5F5E5A; --sev-med-dot: #B9BFBC;
  --trk: #E7ECEA; --arc-a: #5DCAA5; --arc-b: #0F6E56; --arc-amber: #C77D24; --inner-trk: #EEF2F0; --inner: #1D9E75;
  --lead-in: #5DCAA5; --lead-out: #1D9E75; --lead-amber: #C77D24;
  --spark: #1D9E75; --spark-area: rgba(93, 202, 165, .14); --spark-thr: #C9D6D1; --spark-end: #0F6E56;
  --chip-amber-bg: #FBF1E3; --name: #0F6E56; --link: #0F6E56; --code-bg: #0B1210; --code-fg: #C9D2CE; }
.sqlp .chapter.mat { gap: clamp(36px, 4.6vw, 64px); }
/* The dark look of the prototype: the field paints the ground (#0A221C, a grid of 140 px), the section takes
   the prototype's dark values. Without the field, a gradient of the same ground. */
.sqlp .mat.deep { --ink: #FFFFFF; --ink-2: #E9F1ED; --muted: rgba(255, 255, 255, .66); --faint: rgba(255, 255, 255, .42);
  --card: rgba(255, 255, 255, .045); --card-line: rgba(159, 225, 203, .14); --soft-bg: rgba(159, 225, 203, .09); --code-chip: rgba(159, 225, 203, .09); --code-chip-fg: #9FE1CB;
  --act-bg: rgba(159, 225, 203, .14); --act-fg: #E9F1ED; --act-done-bg: #5DCAA5; --act-done-fg: #0C2E26;
  --sev-crit: #F2907F; --sev-high: #EDBB76; --sev-high-dot: #E3A24F; --sev-med: rgba(255, 255, 255, .58); --sev-med-dot: rgba(255, 255, 255, .4);
  --trk: rgba(255, 255, 255, .08); --arc-a: #9FE1CB; --arc-b: #1D9E75; --arc-amber: #E3A24F; --inner-trk: rgba(255, 255, 255, .07); --inner: #5DCAA5;
  --lead-in: #5DCAA5; --lead-out: #9FE1CB; --lead-amber: #E3A24F;
  --spark: #5DCAA5; --spark-area: rgba(93, 202, 165, .18); --spark-thr: rgba(255, 255, 255, .2); --spark-end: #9FE1CB;
  --chip-amber-bg: rgba(227, 162, 79, .16); --amber-ink: #EDBB76; --name: #5DCAA5; --link: #9FE1CB; --code-bg: #06140F; }
.sqlp .mat.deep .h2 .name { color: var(--name); }
.sqlp .mat.deep :focus-visible { outline-color: var(--mint); }
.sqlp.no-gl .mat.deep { background: linear-gradient(180deg, rgba(10, 34, 28, 0), #0A221C 8%, #0A221C 92%, rgba(10, 34, 28, 0)); }
.sqlp .chapter.mat .h2 { max-width: 22ch; }
.sqlp .chapter.mat .lead { max-width: 60ch; }
.sqlp .cm-fig { width: 100%; max-width: 1240px; display: grid; gap: clamp(36px, 4.6vw, 64px); }
.sqlp .cm-inst { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sqlp .cm-leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sqlp .cm-col-title { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.sqlp .cm-reads { display: grid; gap: 8px; }
.sqlp .cm-read { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 14px; background: var(--card); border: 1px solid var(--card-line); border-radius: 10px; transition: border-color .9s ease, box-shadow .9s ease; }
.sqlp .cm-read span { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 1px; }
.sqlp .cm-read .cm-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--soft-bg); display: grid; place-items: center; transition: background-color .9s ease; }
.sqlp .cm-read .cm-ic i { width: 8px; height: 8px; border-radius: 50%; background: #C9D6D1; transition: background-color .9s ease, box-shadow .9s ease; }
.sqlp .cm-read b { display: block; font-weight: 500; font-size: 14px; color: var(--ink-2); }
.sqlp .cm-read.on { border-color: rgba(29, 158, 117, .38); box-shadow: 0 10px 30px -22px rgba(12, 46, 38, .55); }
.sqlp .cm-read.on .cm-ic { background: var(--act-bg); }
.sqlp .cm-read.on .cm-ic i { background: var(--green-mid); box-shadow: 0 0 0 4px rgba(93, 202, 165, .25); }
.sqlp .cm-verdict { position: relative; display: grid; justify-items: center; gap: 18px; }
.sqlp .cm-dial { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; }
.sqlp .cm-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sqlp .cm-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.sqlp .cm-center b { font-size: clamp(64px, 7vw, 104px); font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.sqlp .cm-center span { font-size: 13px; color: var(--faint); margin-top: 6px; }
.sqlp .cm-center em { font-style: normal; font-size: 13.5px; font-weight: 500; margin-top: 14px; color: var(--name); }
.sqlp .cm-holdnote { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--amber-ink); opacity: 0; transition: opacity .8s ease; }
.sqlp .cm-holdnote i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.sqlp .cm-holdnote.on { opacity: 1; }
.sqlp .cm-dom-label { font-size: 12.5px; fill: var(--muted); font-family: var(--sans); }
.sqlp .cm-dom-val { font-size: 17px; fill: var(--ink); font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; }
.sqlp .cm-dom-val.cm-amber { fill: var(--amber-ink); }
.sqlp .cm-trk { stroke: var(--trk); }
.sqlp .cm-arc { stroke: url(#cm-gr); transition: stroke-width .8s ease; }
.sqlp .cm-arc.cm-amber { stroke: var(--arc-amber); }
.sqlp .cm-arc.cm-hot { stroke-width: 24; }
.sqlp .cm-gstop-a { stop-color: var(--arc-a); }
.sqlp .cm-gstop-b { stop-color: var(--arc-b); }
.sqlp .cm-inner-trk { stroke: var(--inner-trk); }
.sqlp .cm-inner { stroke: var(--inner); }
.sqlp .cm-lead-in { stroke: var(--lead-in); }
.sqlp .cm-lead-out { stroke: var(--lead-out); }
.sqlp .cm-lead-amber { stroke: var(--lead-amber); }
.sqlp .cm-sp-area { fill: var(--spark-area); }
.sqlp .cm-sp-line { stroke: var(--spark); }
.sqlp .cm-sp-thr { stroke: var(--spark-thr); }
.sqlp .cm-sp-end { fill: var(--spark-end); }
.sqlp .cm-method { display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; }
.sqlp .cm-method a { font-size: 13px; font-weight: 500; color: var(--link); text-underline-offset: 4px; }
.sqlp .cm-finds { display: grid; gap: 10px; }
.sqlp .cm-find { position: relative; background: var(--card); border: 1px solid var(--card-line); border-radius: 12px; padding: 13px 15px 12px; display: grid; gap: 6px; opacity: .35; transform: translateY(4px); transition: opacity 1s ease, transform 1s var(--ease), border-color .9s ease, box-shadow .9s ease; }
.sqlp .cm-find.on { opacity: 1; transform: none; box-shadow: 0 14px 36px -26px rgba(12, 46, 38, .55); }
.sqlp .cm-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sqlp .cm-sev { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; }
.sqlp .cm-sev i { width: 7px; height: 7px; border-radius: 50%; }
.sqlp .cm-sev.crit { color: var(--sev-crit); }
.sqlp .cm-sev.crit i { background: var(--sev-crit); }
.sqlp .cm-sev.high { color: var(--sev-high); }
.sqlp .cm-sev.high i { background: var(--sev-high-dot); }
.sqlp .cm-sev.med { color: var(--sev-med); }
.sqlp .cm-sev.med i { background: var(--sev-med-dot); }
.sqlp .cm-dom { font-size: 11.5px; color: var(--faint); }
.sqlp .cm-find h4 { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--ink-2); line-height: 1.35; }
.sqlp .cm-where { font-family: var(--mono); font-size: 11.5px; color: var(--code-chip-fg); background: var(--code-chip); border-radius: 6px; padding: 3px 7px; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.sqlp .cm-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.sqlp .cm-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--act-fg); background: var(--act-bg); border-radius: 999px; padding: 5px 11px 5px 9px; transition: background-color .8s ease, color .8s ease; }
.sqlp .cm-pill svg { width: 14px; height: 14px; }
.sqlp .cm-pill.done { background: var(--act-done-bg); color: var(--act-done-fg); }
.sqlp .cm-gain { font-size: 12px; color: var(--name); font-weight: 500; opacity: 0; transition: opacity .8s ease; }
.sqlp .cm-gain.on { opacity: 1; }
.sqlp .cm-find.fixed { border-color: rgba(29, 158, 117, .45); }
.sqlp .cm-find.cm-hold { border-color: color-mix(in srgb, var(--arc-amber) 40%, transparent); }
.sqlp .cm-strip { width: 100%; display: grid; grid-template-columns: 1.1fr 1fr 1.25fr; gap: clamp(14px, 2vw, 22px); }
.sqlp .cm-tile { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 18px 20px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.sqlp .cm-tile h5 { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.sqlp .cm-layers { display: grid; gap: 6px; }
.sqlp .cm-layer { position: relative; height: 30px; border-radius: 8px; background: var(--soft-bg); display: flex; align-items: center; padding: 0 12px; font-size: 12.5px; color: var(--ink-2); overflow: hidden; }
.sqlp .cm-layer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(93, 202, 165, 0) 0%, rgba(93, 202, 165, .28) 50%, rgba(93, 202, 165, 0) 100%); transform: translateX(-100%); }
/* The sweep of the prototype (2.6 s per layer, 420 ms apart, again every 6.2 s), as one animation per layer. */
.sqlp[data-motion="on"] .cm-layer::after { animation: cm-sweep 6.2s var(--ease) infinite; animation-delay: var(--sweep-at, 0s); }
@keyframes cm-sweep { 0% { transform: translateX(-100%); } 41.94%, 100% { transform: translateX(100%); } }
.sqlp .cm-layer em { font-style: normal; margin-left: auto; font-size: 11px; color: var(--faint); }
.sqlp .cm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sqlp .cm-chip { font-size: 11.5px; border-radius: 999px; padding: 4px 9px; background: var(--soft-bg); color: var(--ink-2); }
.sqlp .cm-chip.part { background: var(--chip-amber-bg); color: var(--amber-ink); }
.sqlp .cm-lic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sqlp .cm-lic div { display: grid; gap: 2px; }
.sqlp .cm-lic b { font-size: 26px; font-weight: 400; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sqlp .cm-lic b.amber { color: var(--amber-ink); }
.sqlp .cm-licbar { height: 8px; border-radius: 4px; background: var(--soft-bg); overflow: hidden; display: flex; }
.sqlp .cm-licbar i { display: block; height: 100%; }
.sqlp .cm-ci { background: var(--code-bg); color: var(--code-fg); border-radius: 10px; padding: 12px 14px; font-family: var(--mono); font-size: 11.5px; line-height: 1.75; overflow-x: auto; }
.sqlp .cm-ci .ok { color: var(--mint); }
.sqlp .cm-ci .dim { color: #6E7C76; }
.sqlp .cm-spark { width: 100%; height: 64px; display: block; overflow: visible; }
.sqlp .cm-spark-k { display: flex; justify-content: space-between; }
@media (max-width: 1080px) {
  .sqlp .cm-inst { grid-template-columns: minmax(0, 1fr); }
  .sqlp .cm-leads { display: none; }
  .sqlp .cm-verdict { order: -1; }
  .sqlp .cm-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sqlp .cm-strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sqlp .cm-reads { grid-template-columns: minmax(0, 1fr); }
}

/* AI Workspace, as approved in its own prototype on 14/10/2026: where people work (a Chat ask and a Code ask),
   the official marks of the makers on three slow orbits around the count, and the rules and the cost of each
   call. A thread runs from the ask to the chosen model and from the model to the ledger. Classes start with aw-. */
.sqlp .ws { --card: #FFFFFF; --card-line: rgba(44, 44, 42, .07); --soft-bg: #EEF3F1; --code-chip: #F1F6F4; --code-chip-fg: #0F6E56;
  --me-bg: #EEF3F1; --me-fg: #2C2C2A; --pii-bg: #E6F4EE; --pii-fg: #0C2E26; --pii-ic: #1D9E75;
  --rule-on-bg: #E6F4EE; --rule-on-fg: #0C2E26; --rule-dot: #C9D6D1; --rule-dot-on: #1D9E75;
  --ring: rgba(15, 110, 86, .16); --ring-2: rgba(15, 110, 86, .10); --glow: rgba(93, 202, 165, .20);
  --chip-bg: #FFFFFF; --chip-line: rgba(44, 44, 42, .10); --chip-shadow: 0 10px 24px -14px rgba(12, 46, 38, .45); --chip-halo: rgba(93, 202, 165, .38);
  --thread-in: #5DCAA5; --thread-out: #1D9E75; --token-bg: #0C2E26; --token-fg: #9FE1CB;
  --name: #0F6E56; --link: #0F6E56; --tag-bg: #0C2E26; --tag-fg: #FFFFFF; --new-bg: rgba(93, 202, 165, .14); }
.sqlp .chapter.ws { gap: clamp(36px, 4.4vw, 60px); }
.sqlp .chapter.ws .h2 { max-width: 24ch; }
.sqlp .chapter.ws .lead { max-width: 64ch; text-wrap: pretty; }
.sqlp .aw-col-title { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
/* The prototype framed this figure with clamp(16px, 6vw, 104px) at each side, a little less than the page's --pad-x. */
.sqlp .aw-fig { position: relative; width: calc(100% + 2 * (var(--pad-x) - clamp(16px, 6vw, 104px))); max-width: 1280px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 540px) minmax(0, .92fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.sqlp .aw-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 6; }
.sqlp .aw-threads path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.sqlp .aw-threads .aw-t-in { stroke: var(--thread-in); }
.sqlp .aw-threads .aw-t-out { stroke: var(--thread-out); stroke-dasharray: 1 5; }
.sqlp .aw-threads circle { fill: var(--thread-out); }
.sqlp .aw-token { position: absolute; z-index: 7; left: 0; top: 0; font-family: var(--mono); font-size: 11px; line-height: 1; padding: 5px 7px; border-radius: 6px; background: var(--token-bg); color: var(--token-fg); white-space: nowrap; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.sqlp .aw-token.on { opacity: 1; }
.sqlp .aw-left { display: grid; gap: 14px; min-width: 0; }
.sqlp .aw-pane { position: relative; background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 14px 16px 16px; display: grid; gap: 10px; transition: border-color .9s ease, box-shadow .9s ease, opacity .9s ease; }
.sqlp .aw-pane.on { border-color: rgba(29, 158, 117, .38); box-shadow: 0 16px 40px -28px rgba(12, 46, 38, .6); }
.sqlp .aw-pane.dim { opacity: .55; }
.sqlp .aw-pane header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sqlp .aw-mode { font-size: 13px; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.sqlp .aw-mode i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-dot); transition: background-color .8s ease, box-shadow .8s ease; }
.sqlp .aw-pane.on .aw-mode i { background: var(--green-mid); box-shadow: 0 0 0 4px rgba(93, 202, 165, .22); }
.sqlp .aw-who { font-size: 12px; color: var(--faint); }
.sqlp .aw-msg { font-size: 13.5px; line-height: 1.5; border-radius: 12px; padding: 9px 12px; max-width: 92%; min-width: 0; }
.sqlp .aw-msg.me { justify-self: end; background: var(--me-bg); color: var(--me-fg); border-bottom-right-radius: 4px; min-height: 2.6em; }
.sqlp .aw-msg.me.short { min-height: 0; }
.sqlp .aw-msg.ai { justify-self: start; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 4px 0; color: var(--ink-2); opacity: 0; transform: translateY(4px); transition: opacity .9s ease, transform .9s var(--ease); }
.sqlp .aw-msg.ai.on { opacity: 1; transform: none; }
.sqlp .aw-av { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--chip-line); display: grid; place-items: center; overflow: hidden; }
.sqlp .aw-av img { width: 14px; height: 14px; object-fit: contain; }
.sqlp .aw-msg.ai small { display: block; font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.sqlp .aw-pii { border-radius: 5px; transition: background-color .8s ease, padding .8s ease; }
.sqlp .aw-pii svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; color: var(--pii-ic); display: none; }
.sqlp .aw-pii.on { background: var(--pii-bg); color: var(--pii-fg); padding: 1px 5px; }
.sqlp .aw-pii.on svg { display: inline; }
.sqlp .aw-hid { justify-self: end; margin: -4px 2px 0 0; font-size: 11.5px; color: var(--name); display: inline-flex; align-items: center; gap: 5px; opacity: 0; transition: opacity .8s ease; }
.sqlp .aw-hid svg { width: 12px; height: 12px; }
.sqlp .aw-hid.on { opacity: 1; }
.sqlp .aw-caret { display: inline-block; width: 1px; height: 1.05em; background: var(--green-mid); vertical-align: -2px; margin-left: 1px; animation: aw-blink 1.1s steps(1) infinite; }
@keyframes aw-blink { 50% { opacity: 0; } }
.sqlp .aw-path { font-family: var(--mono); font-size: 12px; color: var(--code-chip-fg); background: var(--code-chip); border-radius: 5px; padding: 1px 5px; }
.sqlp .aw-where { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--soft-bg); }
.sqlp .aw-where span { font-size: 11.5px; border-radius: 999px; padding: 3px 9px; color: var(--muted); transition: background-color .8s ease, color .8s ease; }
.sqlp .aw-where span.on { background: var(--deep); color: #FFFFFF; }
.sqlp .aw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sqlp .aw-steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); opacity: .38; transition: opacity .8s ease, color .8s ease; }
.sqlp .aw-steps li i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--rule-dot); display: grid; place-items: center; transition: background-color .8s ease, border-color .8s ease; }
.sqlp .aw-steps li i svg { width: 10px; height: 10px; opacity: 0; color: #FFFFFF; transition: opacity .6s ease; }
.sqlp .aw-steps li.on { opacity: 1; color: var(--ink-2); }
.sqlp .aw-steps li.on i { background: var(--green-mid); border-color: var(--green-mid); }
.sqlp .aw-steps li.on i svg { opacity: 1; }
.sqlp .aw-steps code { font-family: var(--mono); font-size: 11.5px; color: var(--code-chip-fg); }
.sqlp .aw-mid { min-width: 0; display: grid; justify-items: center; gap: 14px; }
.sqlp .aw-orbit { position: relative; width: 100%; aspect-ratio: 560 / 460; max-width: 100%; }
.sqlp .aw-orbit::before { content: ''; position: absolute; left: 22%; right: 22%; top: 24%; bottom: 24%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.sqlp .aw-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sqlp .aw-rings ellipse { fill: none; stroke: var(--ring); stroke-width: 1; }
.sqlp .aw-rings ellipse.r2 { stroke: var(--ring-2); }
.sqlp .aw-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; justify-items: center; text-align: center; pointer-events: none; }
.sqlp .aw-core b { font-size: clamp(50px, 5vw, 76px); font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.sqlp .aw-core span { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-top: 6px; }
.sqlp .aw-core em { font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--faint); margin-top: 3px; max-width: 20ch; }
.sqlp .aw-chip { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--chip-bg); border: 1px solid var(--chip-line); box-shadow: var(--chip-shadow); display: grid; place-items: center; will-change: transform, opacity; transition: box-shadow .9s ease; }
.sqlp .aw-chip img { width: 22px; height: 22px; object-fit: contain; display: block; }
.sqlp .aw-chip.picked { box-shadow: 0 0 0 7px var(--chip-halo), var(--chip-shadow); }
.sqlp .aw-tag { position: absolute; left: 0; top: 0; z-index: 8; font-size: 12px; font-weight: 500; white-space: nowrap; padding: 5px 9px; border-radius: 999px; background: var(--tag-bg); color: var(--tag-fg); opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.sqlp .aw-tag.on { opacity: 1; }
.sqlp .aw-right { display: grid; gap: 22px; min-width: 0; }
.sqlp .aw-rules { display: grid; gap: 7px; }
.sqlp .aw-rule { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--card-line); font-size: 13px; color: var(--ink-2); transition: background-color .8s ease, border-color .8s ease; }
.sqlp .aw-rule i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-dot); transition: background-color .8s ease, box-shadow .8s ease; }
.sqlp .aw-rule em { font-style: normal; font-size: 11.5px; color: var(--name); opacity: 0; transition: opacity .8s ease; }
.sqlp .aw-rule.on { background: var(--rule-on-bg); border-color: transparent; color: var(--rule-on-fg); }
.sqlp .aw-rule.on i { background: var(--rule-dot-on); box-shadow: 0 0 0 4px rgba(93, 202, 165, .22); }
.sqlp .aw-rule.on em { opacity: 1; }
.sqlp .aw-ledger { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 16px 16px 10px; display: grid; gap: 4px; }
.sqlp .aw-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--card-line); }
.sqlp .aw-head span { font-size: 12.5px; color: var(--muted); }
.sqlp .aw-head b { font-size: 26px; font-weight: 400; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sqlp .aw-rows { display: grid; }
.sqlp .aw-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border-radius: 8px; border-bottom: 1px solid var(--card-line); transition: background-color 1.6s ease, opacity .9s ease; }
.sqlp .aw-row:last-child { border-bottom: 0; }
.sqlp .aw-row b { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.sqlp .aw-row span.d { display: block; font-size: 11.5px; color: var(--faint); overflow-wrap: anywhere; }
.sqlp .aw-row em { font-style: normal; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sqlp .aw-row.new { background: var(--new-bg); }
.sqlp .aw-row.in { animation: aw-rowin .9s var(--ease) both; }
@keyframes aw-rowin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sqlp .aw-legend { display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: center; text-align: center; }
/* Every protection of the catalog, under the drawing, across the whole width as it was in its own screen. */
.sqlp .chapter.ws .guards { width: 100%; }
@media (max-width: 1080px) {
  .sqlp .aw-fig { grid-template-columns: minmax(0, 1fr); }
  .sqlp .aw-threads, .sqlp .aw-token { display: none; }
  .sqlp .aw-mid { order: -1; max-width: 540px; width: 100%; justify-self: center; }
  .sqlp .aw-left, .sqlp .aw-right { max-width: 620px; width: 100%; justify-self: center; }
}

/* The programs ScaleQuality takes part in, right before the page turns deep for the close. The sentence on the
   left, each official mark above the name of its program on one baseline, no box around them. The bottom
   keeps the band's air so the deep green arrives after the marks. Classes start with pn-. */
.sqlp .pn { position: relative; padding: clamp(72px, 9vw, 140px) var(--pad-x) clamp(96px, 13vw, 220px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 96px); align-items: center; max-width: 1440px; margin: 0 auto; }
.sqlp .pn::before { content: ''; position: absolute; left: 38%; right: 4%; top: 18%; bottom: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(159, 225, 203, .26), transparent); pointer-events: none; }
.sqlp[data-motion="on"] .pn::before { animation: pn-drift 60s ease-in-out infinite alternate; }
@keyframes pn-drift { from { transform: translateX(-4%) scale(1); } to { transform: translateX(4%) scale(1.06); } }
.sqlp .pn-text { position: relative; display: grid; gap: 14px; }
.sqlp .pn .h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.03em; max-width: 20ch; }
.sqlp .pn-text p { font-size: 14px; color: var(--muted); max-width: 40ch; }
.sqlp .pn-marks { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.sqlp .pn-marks li { display: grid; justify-items: center; gap: 16px; padding: 8px clamp(12px, 2vw, 28px); text-align: center; }
.sqlp .pn-marks li + li { border-left: 1px solid var(--line); }
.sqlp .pn-marks [data-enter] { transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); transition-delay: var(--stagger, 0ms); }
.sqlp[data-motion="on"] .pn-marks [data-enter].pre { opacity: 0; transform: translateY(6px); }
.sqlp .pn-mk { height: 56px; display: grid; place-items: center; }
.sqlp .pn-mk img { display: block; max-width: 100%; width: auto; }
.sqlp .pn-mk img.aws { height: 34px; }
.sqlp .pn-mk img.dd { height: 33px; }
.sqlp .pn-name { font-size: 12.5px; line-height: 1.35; color: var(--muted); max-width: 22ch; }
.sqlp .pn-fine { grid-column: 2; position: relative; margin: -8px 0 0; font-size: 11.5px; color: var(--faint); text-align: center; }
@media (max-width: 900px) {
  .sqlp .pn { grid-template-columns: minmax(0, 1fr); }
  .sqlp .pn-fine { grid-column: 1; text-align: left; }
}
@media (max-width: 560px) {
  .sqlp .pn-marks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sqlp .pn-marks li + li { border-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
}

/* Without motion the three sections show their last frame, with nothing easing in. */
.sqlp:not([data-motion="on"]) :is(.aic, .mat, .ws, .pn) * { transition: none !important; animation: none !important; }

/* The AI in your code, as approved in its own prototype on 15/10/2026: AI durability and Shadow AI on two plates.
   Each lane is a canvas where lines of code pass a soft reader and take their colour; landing-motion.js draws it.
   Classes start with ac- (the page already has .keys, .chips and others). */
.sqlp .aic { --card: #FFFFFF; --card-line: rgba(44, 44, 42, .07); --soft-bg: #EEF3F1; --track: #E7ECEA; --red: #B4483A; --gray-seg: #C9D1CE; }
.sqlp .chapter.aic { gap: clamp(36px, 4.4vw, 60px); }
.sqlp .chapter.aic .h2 { max-width: 22ch; }
.sqlp .chapter.aic .lead { max-width: 56ch; text-wrap: pretty; }
.sqlp .ac-plates { width: 100%; max-width: 1240px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.sqlp .ac-plate { background: var(--card); border: 1px solid var(--card-line); border-radius: 16px; padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 16px; align-content: start; min-width: 0; box-shadow: 0 18px 44px -36px rgba(12, 46, 38, .5); }
.sqlp .ac-label { font-size: 13px; font-weight: 500; color: var(--green); }
.sqlp .ac-q { margin: -8px 0 0; font-size: clamp(16px, 1.35vw, 19px); font-weight: 500; line-height: 1.35; letter-spacing: -.012em; color: var(--ink); max-width: 34ch; }
.sqlp .ac-big { display: grid; gap: 4px; }
.sqlp .ac-big b { font-size: clamp(56px, 6vw, 88px); font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.sqlp .ac-big span { font-size: 14px; color: var(--muted); max-width: 46ch; }
.sqlp .ac-lane { position: relative; height: 64px; margin-top: 14px; }
.sqlp .ac-lane canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sqlp .ac-reader { position: absolute; top: 0; bottom: 0; left: 64%; width: 70px; margin-left: -35px; background: radial-gradient(closest-side, rgba(93, 202, 165, .22), rgba(93, 202, 165, 0)); pointer-events: none; }
.sqlp .ac-lane-k { position: absolute; top: -14px; font-size: 11px; line-height: 1; color: var(--faint); white-space: nowrap; }
.sqlp .ac-lane-k.ac-start { left: 0; }
.sqlp .ac-lane-k.ac-at { left: 64%; transform: translateX(-50%); }
.sqlp .ac-bar { height: 10px; border-radius: 6px; background: var(--track); overflow: hidden; display: flex; }
.sqlp .ac-bar i { display: block; height: 100%; width: 0; transition: width 1.6s var(--ease), box-shadow .5s ease; }
.sqlp .ac-bar i.g { background: linear-gradient(90deg, var(--green-soft), var(--green)); }
.sqlp .ac-bar i.r { background: var(--red); }
.sqlp .ac-bar i.n { background: var(--gray-seg); }
.sqlp .ac-bar i.glow { box-shadow: inset 0 0 0 20px rgba(255, 255, 255, .28); }
.sqlp .ac-keys { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sqlp .ac-keys span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.sqlp .ac-keys b { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sqlp .ac-keys i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.sqlp .ac-keys i.g { background: var(--green-mid); }
.sqlp .ac-keys i.r { background: var(--red); }
.sqlp .ac-keys i.n { background: var(--gray-seg); }
.sqlp .ac-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sqlp .ac-tile { border-radius: 12px; background: var(--soft-bg); padding: 14px 16px; display: grid; gap: 4px; min-width: 0; align-content: start; }
.sqlp .ac-tile b { font-size: clamp(22px, 2vw, 28px); font-weight: 400; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sqlp .ac-tile.out b { color: var(--red); }
.sqlp .ac-tile small { font-size: 12px; color: var(--faint); line-height: 1.35; }
.sqlp .ac-say { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.sqlp .ac-say b { font-weight: 500; color: var(--ink-2); }
.sqlp .ac-foot { display: flex; gap: 8px 22px; flex-wrap: wrap; justify-content: center; text-align: center; }
@media (max-width: 900px) {
  .sqlp .ac-plates { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .sqlp .ac-tiles { grid-template-columns: minmax(0, 1fr); }
}