/* site.css, loaded after styles.css and notte.css on every page.
   Two parts: the header mega menu that site.js writes, and the components the inner pages
   are built from (pg-*). A page-specific rule lives in that page's own <style>. */

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono.woff2") format("woff2");
}
:root { --mono-ui: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- header: triggers ---------- */
.nav { gap: 2px; align-items: center; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px;
  border-radius: 999px; font-size: 15.5px; color: inherit; transition: background-color .15s;
}
.nav__trigger:hover, .nav__item.is-open .nav__trigger { background: rgba(22, 35, 59, .07); }
.nav__item.is-current .nav__trigger { font-weight: 500; }
.nav__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .2s; }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }
.header.is-menu {
  background: rgba(255, 255, 255, .94); border-bottom-color: var(--line);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.header.is-menu .btn--dark { background: var(--nt-900); border-color: var(--nt-900); color: var(--lime); }

/* ---------- the mega menu: a light panel under the header since 2026-10-05, with the two large cards in blu
   notte as the contrast, as the skills card on the homepage. It was a blu notte panel taken from RevSure. ---------- */
.mega { position: absolute; left: 0; right: 0; top: 100%; pointer-events: none; }
.mega__inner {
  pointer-events: auto;
  width: min(1240px, calc(100% - 48px)); margin: 8px auto 0; padding: 22px;
  display: grid; gap: 28px;
  color: var(--nt-900);
  background:
    radial-gradient(40% 70% at 100% 0%, rgba(213, 239, 102, .28) 0%, rgba(213, 239, 102, 0) 70%),
    radial-gradient(40% 80% at 0% 100%, rgba(120, 176, 236, .2) 0%, rgba(120, 176, 236, 0) 70%),
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 70px -24px rgba(22, 35, 59, .35);
  animation: mega-in .18s ease-out;
}
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
.mega--cores .mega__inner { grid-template-columns: 1.2fr 1fr; }
.mega--columns .mega__inner { grid-template-columns: 1fr 1fr .9fr; }
.mega--list .mega__inner { grid-template-columns: 2fr .9fr; }
.mega--catalog .mega__inner { grid-template-columns: 1fr 2fr 1fr; gap: 20px; padding: 20px 18px; }
.mega__col { display: grid; align-content: start; gap: 18px; }
.mega__row--compact { padding: 7px 8px; gap: 11px; }
.mega__row--compact .mega__ico { width: 30px; height: 30px; padding: 6px; border-radius: 8px; }
.mega__row--compact strong { font-size: 14.5px; }
.mega__row--compact small { font-size: 12.5px; }

.mega__label {
  display: block; margin: 4px 0 14px 10px;
  font-family: var(--mono-ui); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--nt-600);
}
.mega__ico {
  width: 34px; height: 34px; padding: 7px; flex: none; border-radius: 9px;
  background: var(--nt-100); border: 1px solid transparent;
  fill: none; stroke: var(--nt-900); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .15s, border-color .15s, background-color .15s;
}
.mega__core .mega__ico { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .09); stroke: #dfe6f5; }

.mega__core-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mega__core {
  display: flex; flex-direction: column; gap: 14px; min-height: 228px; padding: 20px;
  border-radius: 14px; border: 1px solid var(--nt-900); color: #e6eaf4;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(92, 112, 150, .45) 0%, transparent 65%),
    radial-gradient(50% 50% at 0% 100%, rgba(43, 62, 96, .55) 0%, transparent 70%),
    var(--nt-900);
  transition: box-shadow .15s;
}
.mega__core:hover { box-shadow: 0 0 0 4px rgba(213, 239, 102, .55); }
.mega__core:hover .mega__ico { stroke: var(--lime); }
.mega__core-head { display: flex; align-items: center; gap: 12px; }
.mega__core strong { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.mega__core small { font-size: 14px; line-height: 1.55; color: #aeb8cf; }
.mega__art { margin-top: auto; color: #7f93ba; }
.mega__art svg { width: 160px; height: 44px; }

.mega__rows { display: grid; gap: 2px; }
.mega__rows--two { grid-template-columns: 1fr 1fr; column-gap: 6px; }
.mega__row { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 10px; transition: background-color .15s; }
.mega__row:hover { background: rgba(22, 35, 59, .05); }
.mega__row:hover .mega__ico { background: var(--lime); }
.mega__row strong { display: block; font-size: 15px; font-weight: 500; color: var(--nt-900); }
.mega__row small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.mega__row[aria-current="page"] { background: rgba(213, 239, 102, .4); }
.mega__core[aria-current="page"] strong { color: var(--lime); }

.mega__feature {
  display: flex; flex-direction: column; padding: 22px; border-radius: 14px;
  background: var(--lime); color: var(--nt-900); transition: background-color .15s;
}
.mega__feature:hover { background: var(--lime-hi); }
.mega__feature .mega__label { margin: 0 0 auto; color: var(--nt-700); }
.mega__feature strong { margin-top: 48px; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.mega__feature small { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #2b3e60; }
.mega__cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.mega__arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.mega__feature:hover .mega__arrow { transform: translateX(3px); }

@media (max-width: 1140px) {
  .mega__rows--two { grid-template-columns: 1fr; }
  .mega--catalog .mega__rows--two { grid-template-columns: 1fr 1fr; }
  .mega__row--compact small { display: none; }
  .mega__core { min-height: 0; }
  .nav__trigger { padding: 0 9px; font-size: 15px; }
}

/* ---------- mobile menu: one group per menu entry ---------- */
.mm__group { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mm__group summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; font-size: 17px; color: #fff; cursor: pointer;
}
.mm__group summary::-webkit-details-marker { display: none; }
.mm__group[open] .nav__chev { transform: rotate(180deg); }
.mobile-menu .mm__group a { display: block; padding: 9px 0 9px 14px; font-size: 15.5px; color: #aeb8cf; border: 0; }
.mobile-menu .mm__group a:last-child { padding-bottom: 16px; }
.mm__label { display: block; padding: 12px 0 4px 14px; font-family: var(--mono-ui); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); }

/* ---------- footer: six columns read from the menu ---------- */
.footer__cols--site { grid-template-columns: repeat(6, minmax(110px, auto)); gap: 28px; }
.footer__cols--site a { max-width: 190px; }
.footer__legal { display: flex; gap: 18px; }
.footer__legal a:hover { color: #fff; }
@media (max-width: 1100px) { .footer__inner { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .footer__cols--site { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .footer__cols--site { grid-template-columns: 1fr 1fr; } }


/* =====================================================================
   Inner pages. Every page: .pg-hero, then .pg-section blocks, then .pg-cta.
   ===================================================================== */

.pg-wrap { max-width: var(--frame); margin: 0 auto; padding: 0 var(--gutter); }
.pg-mono { font-family: var(--mono-ui); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

/* the lime pill, the primary action on a light ground */
.btn--lime { background: var(--lime); border-color: var(--lime); color: var(--nt-900); }
.btn--lime:hover { background: var(--lime-hi); border-color: var(--lime-hi); }
.btn--line { background: transparent; border-color: #c9d1e2; color: var(--nt-900); }
.btn--line:hover { border-color: var(--nt-600); }
.pg-section--night .btn--line, .pg-cta .btn--line { border-color: rgba(255, 255, 255, .28); color: #fff; }

/* ---------- hero, runs up under the announcement and the header ---------- */
.pg-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: -101px; padding: 189px 0 88px;
  background:
    radial-gradient(52% 60% at 88% 0%, rgba(58, 112, 226, .18), transparent 70%),
    radial-gradient(34% 44% at 100% 18%, rgba(213, 239, 102, .38), transparent 70%),
    radial-gradient(40% 50% at 0% 0%, rgba(169, 188, 240, .25), transparent 70%),
    #f7f9fb;
}
.pg-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .08 0 0 0 0 .19 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  -webkit-mask-image: linear-gradient(#000, transparent 80%); mask-image: linear-gradient(#000, transparent 80%);
}
.pg-crumb { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--nt-600); }
.pg-crumb > * { white-space: nowrap; }
.pg-crumb a:hover { color: var(--nt-900); }
.pg-crumb span[aria-hidden] { opacity: .5; }
.pg-hero h1 {
  margin-top: 22px; max-width: 15ch;
  font-size: clamp(2.6rem, 1.5rem + 3.3vw, 4.25rem); font-weight: 450; line-height: 1.02; letter-spacing: -0.047em; color: var(--nt-900);
}
.pg-hero h1 em { font-style: normal; color: var(--nt-600); }
.pg-hero__lede { margin-top: 24px; max-width: 640px; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.45; letter-spacing: -0.01em; color: #3f4a60; }
.pg-hero__ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.pg-hero__visual { margin-top: 64px; }
.pg-hero--split .pg-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pg-hero--split .pg-hero__visual { margin-top: 0; }

/* ---------- sections ---------- */
.pg-section { padding: 108px 0; }
/* two plain sections in a row share one gap; after a paper or night band the full padding stays */
.pg-section:not(.pg-section--paper):not(.pg-section--night) + .pg-section:not(.pg-section--paper):not(.pg-section--night) { padding-top: 24px; }
/* paper kept as a class, white since 2026-10-05: the homepage runs on white and puts the colour in the cards */
.pg-section--paper { background: none; }
.pg-section--night { background: var(--nt-900); color: #dfe5f2; }
.pg-section--night .h2 { color: #f3f5fb; }
.pg-section--night .lede { color: #aeb8cf; }
.pg-head { max-width: 780px; }
.pg-head--center { margin: 0 auto; text-align: center; }
.pg-head--center .lede { margin-left: auto; margin-right: auto; }
.pg-section--night .eyebrow { background: var(--lime); }

/* ---------- grids of cards ---------- */
.pg-grid { margin-top: 52px; display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.pg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pg-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* the light cards take their ground from the homepage card rule in notte.css, the side of the chartreuse alternating */
.pg-card {
  position: relative; display: flex; flex-direction: column; padding: 26px;
  border-radius: 18px; border: 1px solid var(--line);
}
:is(.pg-grid, .pg-next) > .pg-card:nth-child(even), .pg-halo--flip { --lime-x: 10%; --blue-x: 90%; }
.pg-section--night .pg-card { background: var(--nt-800); border-color: rgba(255, 255, 255, .08); }
.pg-card--night {
  border-color: var(--nt-900); color: #dfe5f2;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(92, 112, 150, .45) 0%, transparent 65%),
    radial-gradient(50% 50% at 0% 100%, rgba(43, 62, 96, .55) 0%, transparent 70%),
    var(--nt-900);
}
.pg-card--lime { background: var(--lime); border-color: var(--lime); }
.pg-card__ico {
  width: 40px; height: 40px; padding: 9px; border-radius: 10px;
  background: var(--nt-100); fill: none; stroke: var(--nt-900); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.pg-section--night .pg-card__ico, .pg-card--night .pg-card__ico { background: rgba(255, 255, 255, .07); stroke: var(--lime); }
.pg-card h3 { margin-top: 20px; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--nt-900); }
.pg-section--night .pg-card h3, .pg-card--night h3 { color: #fff; }
.pg-card p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.pg-section--night .pg-card p, .pg-card--night p { color: #aeb8cf; }
.pg-card__art { margin: -6px -6px 18px; border-radius: 12px; overflow: hidden; }
a.pg-card { transition: border-color .15s, transform .15s; }
a.pg-card:hover { border-color: var(--nt-600); transform: translateY(-2px); }
.pg-card__more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--nt-900); }
.pg-card__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- split: text on one side, a visual on the other ---------- */
.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.pg-split + .pg-split { margin-top: 112px; }
.pg-split--flip > :first-child { order: 2; }
.pg-split .lede { max-width: 520px; }

/* a checklist with square lime markers */
.pg-list { margin-top: 28px; display: grid; gap: 14px; }
.pg-list li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.5; color: #3f4a60; }
.pg-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; background: var(--lime); box-shadow: inset 0 0 0 1px rgba(22, 35, 59, .25); }
.pg-list strong { color: var(--nt-900); font-weight: 600; }
.pg-section--night .pg-list li { color: #c3cbdc; }
.pg-section--night .pg-list strong { color: #fff; }

/* ---------- the framed visual: a mock, a diagram, a table ---------- */
.pg-panel {
  position: relative; overflow: hidden; padding: 24px;
  border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(22, 35, 59, .28);
}
.pg-panel--night { background: var(--nt-900); border-color: var(--nt-900); color: #dfe5f2; }
.pg-panel--halo {
  background:
    radial-gradient(55% 60% at 30% 20%, rgba(58, 112, 226, .16), transparent 70%),
    radial-gradient(45% 50% at 100% 100%, rgba(213, 239, 102, .4), transparent 70%),
    #f7f9fb;
}
/* :where keeps this at element weight, so any class rule for an icon inside a panel wins */
:where(.pg-panel) svg { width: 100%; height: auto; }
.pg-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--nt-100); color: var(--nt-700); }
.pg-tag--lime { background: var(--lime); color: var(--nt-900); }
.pg-tag--night { background: var(--nt-900); color: var(--lime); }

/* ---------- steps ---------- */
.pg-steps { margin-top: 52px; display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.pg-steps--3 { grid-template-columns: repeat(3, 1fr); }
.pg-step { padding: 24px; border-top: 2px solid var(--nt-900); background: #fff; border-radius: 0 0 16px 16px; }
.pg-section--paper .pg-step { background: #fff; }
.pg-section--night .pg-step { background: var(--nt-800); border-top-color: var(--lime); }
.pg-step__n { color: var(--nt-600); }
.pg-section--night .pg-step__n { color: var(--lime); }
.pg-step h3 { margin-top: 26px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--nt-900); }
.pg-section--night .pg-step h3 { color: #fff; }
.pg-step p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.pg-section--night .pg-step p { color: #aeb8cf; }

/* ---------- comparison table ---------- */
.pg-table-wrap { margin-top: 52px; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.pg-table th, .pg-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.pg-table thead th { font-family: var(--mono-ui); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--nt-600); background: #fafbfd; }
.pg-table thead th.is-us { background: var(--nt-900); color: var(--lime); }
.pg-table td.is-us { background: #f4f7fd; color: var(--nt-900); font-weight: 500; }
.pg-table tr:last-child td, .pg-table tr:last-child th { border-bottom: 0; }
.pg-table tbody th { font-weight: 500; color: var(--nt-900); }
.pg-yes, .pg-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; vertical-align: -4px; margin-right: 6px; }
.pg-yes { background: var(--lime); }
.pg-yes::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--nt-900); border-bottom: 2px solid var(--nt-900); transform: rotate(-45deg) translate(1px, -1px); }
.pg-no { background: #eef0f4; }
.pg-no::after { content: ""; width: 8px; height: 2px; background: #9aa3b5; }

/* ---------- related pages ---------- */
.pg-next { margin-top: 44px; display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }

/* ---------- closing band ---------- */
.pg-cta { padding: 40px 0 108px; }
.pg-cta__band {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 72px; border-radius: 28px; background: var(--nt-900); color: #fff;
}
.pg-cta__band::before {
  content: ""; position: absolute; z-index: -1; right: -10%; top: -40%; width: 60%; height: 140%;
  background: radial-gradient(closest-side, rgba(213, 239, 102, .28), transparent), radial-gradient(closest-side at 30% 60%, rgba(58, 112, 226, .45), transparent);
  filter: blur(20px);
}
.pg-cta__band .pg-mono { color: var(--lime); }
.pg-cta__band h2 { margin-top: 22px; max-width: 18ch; font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.3rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.04em; }
.pg-cta__band p { margin-top: 18px; max-width: 540px; font-size: 17px; line-height: 1.5; color: #aeb8cf; }
.pg-cta__band .pg-hero__ctas { margin-top: 32px; }

/* ---------- small screens ---------- */
@media (max-width: 1024px) {
  .pg-grid--4, .pg-steps { grid-template-columns: repeat(2, 1fr); }
  .pg-split { gap: 44px; }
}
@media (max-width: 860px) {
  .pg-hero { padding: 150px 0 64px; }
  .pg-hero--split .pg-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pg-hero__visual { margin-top: 44px; }
  .pg-section { padding: 72px 0; }
  .pg-grid, .pg-grid--2, .pg-grid--4, .pg-steps, .pg-steps--3, .pg-next { grid-template-columns: 1fr; }
  .pg-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pg-split--flip > :first-child { order: 0; }
  .pg-split + .pg-split { margin-top: 72px; }
  .pg-cta__band { padding: 44px 24px; border-radius: 22px; }
  .pg-panel { padding: 16px; border-radius: 18px; }
}


/* =====================================================================
   Homepage: Work with any agent framework (#frameworks), after For your agents.
   A wide panel with the frameworks around one brain, in their own colours so each
   is recognisable, then two cards: how an agent connects, and the model picker.
   ===================================================================== */
.fw { padding: 96px 40px 90px; }
@media (min-width: 861px) { .fw { padding-left: var(--gutter); padding-right: var(--gutter); } }
.fw .lede { max-width: 640px; }
.fw svg { fill: currentColor; }
.fw .fw__ico, .fw .fw__chev, .fw .fw__tick { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the hub panel: positions are percentages of a 1200 by 420 drawing, the lines share its viewBox */
.fw__hubpanel {
  position: relative; margin-top: 48px; aspect-ratio: 1200 / 420; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(34% 50% at 50% 50%, rgba(58, 112, 226, .13), transparent 70%),
    radial-gradient(26% 40% at 92% 100%, rgba(213, 239, 102, .4), transparent 70%),
    radial-gradient(26% 40% at 6% 0%, rgba(169, 188, 240, .3), transparent 70%), #fff;
  border: 1px solid #e1e5ee; box-shadow: 0 40px 80px -48px rgba(22, 35, 59, .3);
}
.fw__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.fw__lines path { fill: none; stroke: #b8c3d9; stroke-width: 1.4; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.fw__hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; gap: 12px; padding: 16px 22px 16px 18px; border-radius: 18px;
  background: var(--nt-900); color: #fff; box-shadow: 0 0 0 6px rgba(213, 239, 102, .6), 0 20px 40px -16px rgba(22, 35, 59, .55);
}
.fw__hub > svg { width: 38px; height: 38px; color: var(--lime); }
.fw__hub b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.fw__hub small { display: block; margin-top: 5px; font-family: var(--mono-ui); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.fw__tiles li {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -32px); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--nt-900); white-space: nowrap;
}
.fw__tile {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px;
  background: #fff; border: 1px solid #dfe4ee; box-shadow: 0 12px 24px -14px rgba(22, 35, 59, .4);
}
.fw__tile img { width: 34px; height: 34px; object-fit: contain; }
.fw__tile img[src$="hermes.svg"] { height: 44px; } /* a tall, narrow mark */
.fw__tile .fw__ico { width: 30px; height: 30px; color: var(--nt-900); }
.fw__tiles li.is-own .fw__tile { background: var(--lime); border-color: var(--lime); }

/* the two cards under it */
.fw__row { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fw__card { margin: 0; }
.fw__art { position: relative; height: 336px; overflow: hidden; border-radius: 18px; border: 1px solid #e1e5ee; }
.fw__card figcaption { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); max-width: 52ch; }
.fw__card figcaption strong { color: var(--nt-900); font-weight: 600; }

.fw__code { background: var(--nt-900); border-color: var(--nt-900); padding: 18px 22px; display: flex; flex-direction: column; }
.fw__code-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-family: var(--mono-ui); font-size: 12px; color: #8f9cb8; }
.fw__code pre { margin: 14px 0 0; font-family: var(--mono-ui); font-size: 12px; line-height: 1.65; color: #dfe5f2; white-space: pre; overflow: hidden; }

.fw__pick {
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
  background: radial-gradient(50% 60% at 100% 0%, rgba(213, 239, 102, .3), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(58, 112, 226, .12), transparent 70%), #fff;
}
.fw__select, .fw__menu li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--nt-900); }
.fw__select { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid #d4dbe8; background: #fff; font-weight: 500; }
.fw__select img, .fw__menu img, .fw__menu .fw__ico { width: 16px; height: 16px; flex: none; }
.fw__select .fw__chev { margin-left: auto; width: 15px; height: 15px; }
.fw__menu { padding: 5px; border-radius: 10px; border: 1px solid #e1e5ee; background: #fff; box-shadow: 0 12px 26px -16px rgba(22, 35, 59, .35); }
.fw__menu li { height: 30px; padding: 0 8px; border-radius: 7px; }
.fw__menu li.is-on { background: var(--nt-100); font-weight: 500; }
.fw__menu .fw__tick { margin-left: auto; width: 15px; height: 15px; color: var(--nt-900); }
.fw__ctx { margin-top: auto; padding: 12px; border-radius: 12px; background: var(--nt-900); color: #dfe5f2; display: grid; gap: 8px; }
.fw__ctx-h { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #fff; }
.fw__ctx-h svg { width: 14px; height: 14px; color: var(--lime); }
.fw__srcs { display: flex; flex-wrap: wrap; gap: 6px; }
.fw__srcs b { font-weight: 500; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.fw__ctx small { font-family: var(--mono-ui); font-size: 10.5px; color: var(--lime); letter-spacing: .06em; }

/* the third card: an agent proposes a write, a person approves it */
.fw__write {
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(50% 60% at 0% 0%, rgba(58, 112, 226, .12), transparent 70%), radial-gradient(45% 55% at 100% 100%, rgba(213, 239, 102, .35), transparent 70%), #fff;
}
.fw__call { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--nt-tray); border: 1px solid #e1e5ee; }
.fw__call .fw__who { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--nt-900); }
.fw__call .fw__who img { width: 14px; height: 14px; }
.fw__call code { font-family: var(--mono-ui); font-size: 11.5px; line-height: 1.6; color: var(--nt-600); white-space: pre-wrap; }
.fw__wait { margin-top: auto; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid #dfe4ee; box-shadow: 0 16px 34px -18px rgba(22, 35, 59, .4); display: grid; gap: 10px; }
.fw__wait-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--nt-900); }
.fw__wait-h .pg-tag { margin-left: auto; height: 20px; font-size: 11px; }
.fw__dot { width: 8px; height: 8px; border-radius: 50%; background: #c2560c; box-shadow: 0 0 0 4px rgba(194, 86, 12, .15); }
.fw__wait dl { margin: 0; display: grid; gap: 5px; }
.fw__wait dl div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; font-size: 12.5px; }
.fw__wait dt { font-family: var(--mono-ui); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--nt-600); padding-top: 2px; }
.fw__wait dd { margin: 0; color: var(--nt-900); }
.fw__btns { display: flex; justify-content: flex-end; gap: 8px; }
.fw__btn { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--nt-900); border: 1px solid #d4dbe8; background: #fff; }
.fw__btn--yes { background: var(--lime); border-color: var(--lime); }

@media (max-width: 1100px) and (min-width: 861px) {
  .fw__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fw__row .fw__card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .fw { padding: 64px 24px; }
  .fw__hubpanel { aspect-ratio: auto; padding: 24px 16px; display: grid; gap: 22px; justify-items: center; }
  .fw__lines { display: none; }
  .fw__hub { position: static; transform: none; }
  .fw__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; width: 100%; }
  .fw__tiles li { position: static; transform: none; font-size: 11.5px; white-space: normal; text-align: center; }
  .fw__tile { width: 52px; height: 52px; border-radius: 14px; }
  .fw__tile img { width: 28px; height: 28px; }
  .fw__row { grid-template-columns: minmax(0, 1fr); }
  .fw__code pre { font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* Homepage: the 60-second film between the lead paragraph and the tools row.
   The iframe is the 16:9 frame plus the 53 px player bar, as in the hero. */
.film { padding: 8px 40px 24px; }
@media (min-width: 861px) { .film { padding-left: var(--gutter); padding-right: var(--gutter); } }
.film__frame {
  container-type: inline-size; overflow: hidden; border-radius: 20px; background: #101a2d;
  box-shadow: 0 0 0 1px #e1e5ee, 0 0 0 6px rgba(213, 239, 102, .35), 0 40px 80px -40px rgba(22, 35, 59, .45);
}
.film__frame iframe { display: block; width: 100%; height: calc(100cqw * 9 / 16 + 53px); border: 0; }
@media (max-width: 860px) { .film { padding: 0 20px 16px; } .film__frame { border-radius: 14px; } }

/* Homepage, The brain (#core): on the white part of the page the white cards disappeared, so they
   take the halo ground of the For your team cards, and the skills card turns blu notte as the contrast. */
.core__cell { border-radius: 18px; border-color: var(--line); }
.core__cell h3 { font-size: 24px; letter-spacing: -0.025em; }
.core__cell--truth, .core__cell--activity {
  --lime-x: 92%; --blue-x: 8%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .08 0 0 0 0 .19 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    radial-gradient(45% 40% at 70% 45%, rgba(58, 112, 226, .22) 0%, rgba(58, 112, 226, 0) 70%),
    radial-gradient(28% 30% at var(--lime-x) 12%, rgba(213, 239, 102, .55) 0%, rgba(213, 239, 102, 0) 70%),
    radial-gradient(30% 34% at var(--blue-x) 90%, rgba(120, 176, 236, .4) 0%, rgba(120, 176, 236, 0) 70%),
    linear-gradient(180deg, #f7f9fb 0%, #fff 75%);
}
.core__cell--activity { --lime-x: 10%; --blue-x: 92%; }
.core__cell--skills {
  border-color: var(--nt-900); color: #f3f5fb;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(92, 112, 150, .45) 0%, transparent 65%),
    radial-gradient(50% 50% at 0% 100%, rgba(43, 62, 96, .55) 0%, transparent 70%),
    var(--nt-900);
}
.core__cell--skills h3 { color: #f3f5fb; }
.core__cell--skills p { color: #aeb8cf; }
.core__cell--skills .skill { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); }
.core__cell--qa { background: var(--nt-tray); border-color: #e1e5ee; }
.core__cell .mpage, .core__cell .alog { box-shadow: 0 18px 44px -20px rgba(22, 35, 59, .35); }

/* Homepage, For your team (#floor): the wide card puts its text beside the version list, on one row */
@media (min-width: 861px) {
  .fcard--wide {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto;
    column-gap: 56px; align-content: center; padding: 48px 48px 48px 44px;
  }
  .fcard--wide .fcard__art--wide { position: static; inset: auto; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .fcard--wide .fcard__art--wide .versions { width: 100%; max-width: none; }
  .fcard--wide > h3 { grid-column: 1; grid-row: 1; align-self: end; }
  .fcard--wide > p { grid-column: 1; grid-row: 2; align-self: start; }
}

/* Homepage, working-day tabs: the forecast case draws the CRM commit against the evidence commit */
.case__viz:empty { display: none; }
.case__viz { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--nt-tray); display: grid; gap: 10px; }
.fc__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 64px; align-items: center; gap: 12px; font-size: 13px; color: var(--nt-900); }
.fc__row b { font-weight: 600; text-align: right; }
.fc__label small { display: block; font-family: var(--mono-ui); font-size: 10.5px; letter-spacing: .06em; color: var(--nt-600); }
.fc__bar { height: 12px; border-radius: 999px; background: #e1e5ee; overflow: hidden; }
.fc__bar i { display: block; height: 100%; border-radius: inherit; background: var(--nt-600); }
.fc__row--ev .fc__bar i { background: var(--lime); box-shadow: inset 0 0 0 1px rgba(22, 35, 59, .2); }
.fc__gap { font-size: 12.5px; color: var(--nt-700); }
.fc__gap b { font-weight: 600; color: var(--nt-900); }
@media (max-width: 560px) { .fc__row { grid-template-columns: minmax(0, 1fr) 56px; } .fc__bar { grid-column: 1 / -1; grid-row: 2; } }