/* Site-level settings for noetion.ai. Components live in noetion.css, values in tokens.css. */
html { background: var(--paper); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
/* hero uses a light gradient, no photo */
[id] { scroll-margin-top: 24px; }

/* Home hero: loose threads (many tools, scattered data) gather into one line between the problem and the solution */
.nt-hero--threads .nt-hero__statement { position: relative; z-index: 1; }
.nt-hero--threads .nt-horizon { display: block; position: relative; height: 0; background: none; box-shadow: none; animation: none; }
.nt-hero--threads .nt-horizon::before,
.nt-hero--threads .nt-horizon > canvas {
  position: absolute; left: 0; bottom: -4px; width: 100%; height: clamp(220px, 24vw, 320px);
  pointer-events: none;
  animation: nt-threads-in 1800ms cubic-bezier(0.2, 0.7, 0.2, 1) 150ms both;
}
.nt-hero--threads .nt-horizon::before { content: ""; background: url("/assets/img/hero-threads.svg") no-repeat 0 100% / 100% 100%; }
.nt-hero--threads .nt-horizon.is-live::before { display: none; } /* threads.js has drawn the live version */
.nt-hero--threads .nt-hero__lake { padding-block-start: clamp(24px, 16px + 2cqi, 40px); }
@keyframes nt-threads-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@container page (max-width: 639px) { .nt-hero--threads .nt-horizon::before, .nt-hero--threads .nt-horizon > canvas { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .nt-hero--threads .nt-horizon::before, .nt-hero--threads .nt-horizon > canvas { animation: none; } }
/* The problem in four small lines; the solution below the line is the large one */
.nt-hero--threads .nt-hero__statement { padding-block-start: clamp(40px, 24px + 5cqi, 104px); }
.nt-hero--threads .nt-hero__statement h1 { max-width: none; font-size: clamp(1.25rem, 0.9rem + 1.4cqi, 2rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 400; color: var(--text-muted); }
.nt-hero--threads .nt-hero__reflection { max-width: 18ch; font-size: clamp(2.25rem, 1.25rem + 3.4cqi, 4rem); line-height: 1.04; letter-spacing: -0.035em; color: var(--text); }
/* Desktop: the calls to action sit to the right of the paragraph instead of below it */
@container page (min-width: 960px) {
  .nt-hero--threads .nt-hero__lake .nt-container { display: grid; grid-template-columns: minmax(0, var(--measure)) auto; column-gap: var(--space-8); align-items: center; justify-content: start; }
  .nt-hero--threads .nt-hero__reflection { grid-column: 1 / -1; }
  .nt-hero--threads .nt-hero__lake .nt-actions { flex-wrap: nowrap; }
}
/* Dark hero (the default homepage): night background, pale threads; the light version lives on index2.html */
.nt-hero--threads[data-theme="night"] {
  background-color: var(--night);
  background-image:
    radial-gradient(60rem 28rem at 88% -8%, rgba(45, 212, 191, 0.16), rgba(45, 212, 191, 0) 70%),
    radial-gradient(48rem 26rem at 4% 8%, rgba(125, 211, 252, 0.10), rgba(125, 211, 252, 0) 70%);
}
.nt-hero--threads[data-theme="night"] .nt-horizon::before { background-image: url("/assets/img/hero-threads-night.svg"); }
/* Header: lang.js pins it to the top of the window (without JavaScript it scrolls away as before) and gives it the
   light or dark theme of the section beneath it. At the top of the page it is transparent over the hero; once the
   page scrolls it takes that section's background, slightly see-through with a blur, a 1px line along its bottom
   and a short fade below, so content dissolves as it passes under. lang.js sets --nt-header-bg (the section's
   background as "r, g, b") and --nt-band-room (how far that section reaches below the header). */
html { scroll-padding-top: var(--nt-header-h, 0px); }
.nt-header__bar { min-height: 72px; } /* 14px above and below the 44px contents (noetion.css has 80px) */
.nt-header.is-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background-color: transparent; } /* under the skip link (50) */
.nt-header.is-fixed::before,
.nt-header.is-fixed::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.nt-header.is-fixed::before {
  z-index: -1; top: 0; bottom: 0;
  background-color: rgba(var(--nt-header-bg, 255, 255, 255), 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nt-header.is-fixed::after {
  top: 100%; height: 24px;
  background-image: linear-gradient(rgba(var(--nt-header-bg, 255, 255, 255), 0.92), rgba(var(--nt-header-bg, 255, 255, 255), 0));
  clip-path: inset(0 0 max(0px, calc(100% - var(--nt-band-room, 100vh))) 0);
}
.nt-header.is-scrolled::before,
.nt-header.is-scrolled::after { opacity: 1; }
.nt-header.is-fixed :is(.nt-brand, .nt-wordmark, .nt-brand__tagline, .nt-nav__link, .nt-dd > summary, .nt-lang > summary, .nt-menu > summary) {
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nt-header.is-fixed .nt-menu__panel { z-index: 1; max-height: calc(100dvh - var(--nt-header-h, 80px)); overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) {
  .nt-header.is-fixed::before, .nt-header.is-fixed::after,
  .nt-header.is-fixed :is(.nt-brand, .nt-wordmark, .nt-brand__tagline, .nt-nav__link, .nt-dd > summary, .nt-lang > summary, .nt-menu > summary) { transition: none; }
}
/* Header layout (gen_nav.py writes the buttons). From 1280px wide: the navigation on the left beside the wordmark;
   on the right the language menu (pin icon only), "Sign in" and "Try a live demo", the primary call to action.
   Below 1280px the row has no room for all of it (French and German need up to 1164px), so the header keeps the
   wordmark, language icon, "Try a live demo" and the menu button, and the links and "Sign in" live in the menu.
   The language list ticks the current language. */
@container page (min-width: 960px) and (max-width: 1279px) {
  .nt-nav__links { display: none; }
  .nt-menu { display: block; }
  .nt-menu__panel { padding-inline: var(--gutter-desktop); }
}
@container page (min-width: 1280px) {
  .nt-nav { flex: 1; }
  .nt-nav__links { margin-left: var(--space-5); margin-right: auto; }
  .nt-nav, .nt-nav__links { gap: var(--space-5); } /* room for German's "Datenschutz und Sicherheit" on one line */
}
.nt-nav__signin { display: none; margin-right: calc(var(--space-3) - var(--space-6)); } /* 12px from "Try a live demo" */
@container page (min-width: 1280px) { .nt-nav__signin { display: inline-flex; } }
.nt-lang > summary > span { display: none; } /* the summary keeps its aria-label, such as "Language: English" */
.nt-lang__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.nt-lang__list a[aria-current="true"]::after {
  content: ""; width: 16px; height: 16px; flex: none; background-color: var(--horizon-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nt-menu__signin { margin: var(--space-3) 0 0 var(--space-3); }
.nt-menu__panel .nt-button--secondary { background: transparent; color: var(--starlight); border-color: #475569; }
/* Live demo page: the fictional companies in a row that slides sideways, two at a time from 960px wide and one (with
   the next peeking in) below. Each company is a panel, dark and pale in turn. The arrows, shown by the page's script,
   move the row one company at a time; without JavaScript it scrolls with a swipe, a trackpad or its scrollbar. */
.nt-demo__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-7); }
.nt-carousel__nav { display: flex; gap: var(--space-2); }
.nt-carousel__nav[hidden] { display: none; }
.nt-carousel__arrow {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 50%; background: var(--paper); color: var(--text); cursor: pointer;
  transition: border-color 150ms ease, opacity 150ms ease;
}
.nt-carousel__arrow:hover:not(:disabled) { border-color: var(--text); }
.nt-carousel__arrow:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nt-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.nt-carousel__arrow svg { width: 18px; height: 18px; }
.nt-carousel {
  list-style: none; margin: 0; padding: 0 0 var(--space-3); display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 560px);
  gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.nt-carousel.is-enhanced { padding-bottom: 0; scrollbar-width: none; }
.nt-carousel.is-enhanced::-webkit-scrollbar { display: none; }
@container page (min-width: 960px) { .nt-carousel { grid-auto-columns: calc((100% - var(--space-5)) / 2); } }
.nt-carousel > .nt-company {
  container: company / inline-size; scroll-snap-align: start; display: flex; flex-direction: column; padding: var(--space-6) var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.nt-company[data-theme="day"] { background: var(--paper); }
.nt-company[data-theme="day"] :is(.nt-case, .nt-tags li, .nt-tools li) { background: var(--mist); }
[data-theme="night"] .nt-tools img { filter: invert(1); } /* the icons are single-colour night */
.nt-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.nt-facts dt { color: var(--text-muted); }
.nt-facts dd { margin: 0; }
.nt-col > .nt-facts { margin-top: var(--space-5); }
/* Live demo: the "Integrations" fact, every tool the company connects as a small icon tile (named in alt text and on hover) */
.nt-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.nt-tools li { width: 30px; height: 30px; display: grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.nt-tools img { width: 18px; height: 18px; }
.nt-facts dt:has(+ dd > .nt-tools) { padding-top: 2px; }
/* Below 960px a single, narrower panel shows at a time: the integrations take its full width under their label */
@container page (max-width: 959px) {
  .nt-facts dt:has(+ dd > .nt-tools) { grid-column: 1 / -1; padding-top: 0; }
  .nt-facts dd:has(> .nt-tools) { grid-column: 1 / -1; }
}
.nt-demo__title { flex: 0 1 auto; min-width: 0; max-width: 40ch; margin: 0; text-wrap: balance; }
@container page (min-width: 640px) { .nt-demo__bar { flex-wrap: nowrap; } } /* the arrows stay beside the heading */
/* Live demo page: each fictional company's logo beside its name, and its two buttons below its facts */
.nt-company__head { display: flex; align-items: center; gap: var(--space-3); }
.nt-company__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.nt-company__title > .nt-term { margin: 0; }
/* the company's Noetion plan and setup as small tags after its name; they wrap under the name when there's no room */
.nt-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nt-tags li { padding: 2px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-raised); font-size: 0.75rem; font-weight: 600; line-height: 1.5; color: var(--text-muted); white-space: nowrap; }
.nt-company__logo { display: block; flex: none; width: 40px; height: 40px; }
.nt-col > .nt-actions { margin-top: var(--space-6); }
/* Live demo: the second "Test drive" button, under the company's sample problems, names the company on a second line */
.nt-button--stacked { flex-direction: column; gap: 2px; min-height: 64px; padding: var(--space-3) var(--space-7); white-space: normal; text-align: center; }
.nt-button__lead { font-size: 0.8125rem; font-weight: 500; }
.nt-button--stacked > span:last-child { font-size: 1rem; }
/* the panels in the row share one height, so every company's bottom button sits at its foot */
.nt-company > .nt-company__cta { margin-top: auto; padding-top: var(--space-6); }
/* Live demo: under each company, sample problems no single team can answer, one card per row (.nt-case, as on the
   security page). Each traces what Noetion finds in each team's systems, the source as a small tag, then what it
   hands back and what waits for approval. In a panel narrower than 460px the team label sits above its finding. */
.nt-samples { margin: var(--space-8) 0 0; font-size: 1rem; font-weight: 600; }
.nt-company .nt-cases { margin-top: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.nt-trace { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.nt-trace li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--space-4); }
.nt-trace__team { padding-top: 1px; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }
.nt-trace__src { display: inline-block; margin-left: var(--space-2); padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 0.75rem; line-height: 1.6; color: var(--text-muted); white-space: nowrap; vertical-align: 1px; }
.nt-case__result { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.nt-case__result strong { margin-right: var(--space-2); color: var(--accent-text); font-weight: 600; }
@container company (max-width: 459px) { .nt-trace li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } }
/* Live demo: "Test drive" opens a panel listing the company's people (the popover attribute: Escape, the close
   button or a click outside closes it, with no JavaScript). Each row: initials in the company's colour, name, role. */
.nt-people {
  width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 48px)); margin: auto; padding: 0; overflow: auto;
  border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); color: var(--night); box-shadow: var(--shadow-mock);
}
.nt-people::backdrop { background: rgba(10, 15, 28, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.nt-people__head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; column-gap: var(--space-4); row-gap: 2px; align-items: center; padding: var(--space-5) var(--space-5) var(--space-4); }
.nt-people__head img { grid-row: 1 / span 2; width: 40px; height: 40px; }
.nt-people__title { margin: 0; font: 600 1.125rem/1.3 var(--font-text); }
.nt-people__intro { grid-column: 2; margin: 0; color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.45; }
.nt-people__close {
  grid-column: 3; grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer;
}
.nt-people__close svg { width: 16px; height: 16px; }
.nt-people__close:hover { background: var(--mist); color: var(--night); }
.nt-people__close:focus-visible { outline: 2px solid var(--horizon-deep); outline-offset: 2px; }
.nt-people__list { list-style: none; margin: 0; padding: 0 0 var(--space-2); }
.nt-person {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; column-gap: var(--space-4); align-items: center;
  padding: var(--space-3) var(--space-5); border-top: 1px solid var(--rule); color: inherit; text-decoration: none;
}
.nt-person:hover { background: var(--mist); }
.nt-person:focus-visible { outline: 2px solid var(--horizon-deep); outline-offset: -2px; background: var(--mist); }
.nt-person__avatar {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--company, var(--night)); color: #fff; font: 600 0.875rem/1 var(--font-text); letter-spacing: 0.02em;
}
.nt-person__name { font-weight: 600; line-height: 1.3; }
.nt-person__role { grid-column: 2; color: var(--ink-muted); font-size: 0.875rem; line-height: 1.35; }
.nt-person__chev { grid-column: 3; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--ink-muted); }
/* Careers (/careers/): the intro, "Why join" columns and the open roles. Roles reuse the blog's ruled rows (.nt-posts);
   a role's title is an h3 under "Open roles", styled like a post title. A role's page puts the posting in .nt-prose
   under its title, team and type, with "Apply for this role" above and below it. */
.nt-careers__intro { display: grid; gap: var(--space-7); align-items: center; }
@container page (min-width: 960px) { .nt-careers__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-9); } }
.nt-careers__text > * { margin: 0; }
.nt-careers__text > * + * { margin-top: var(--space-5); }
.nt-careers__text > .nt-actions { margin-top: var(--space-6); }
.nt-careers__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-raised); }
.nt-careers__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Why join (dark): the photo on the left, as tall as the reasons beside it on desktop; the reasons two by two */
.nt-careers__why { display: grid; gap: var(--space-7); }
@container page (min-width: 640px) { .nt-careers__reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (min-width: 960px) {
  .nt-careers__why { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
  .nt-careers__why > .nt-careers__photo { aspect-ratio: auto; height: 100%; min-height: 320px; }
}
/* ...then a full-width note on succeeding together: its title under the photo, its text under the reasons */
.nt-careers__together { display: grid; gap: var(--space-2); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.nt-careers__together > * { margin: 0; }
.nt-careers__together p { max-width: var(--measure); }
@container page (min-width: 960px) { .nt-careers__together { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-8); align-items: baseline; } }
.nt-roles .nt-post-item h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.8cqi, 2.5rem); line-height: 1.15; letter-spacing: -0.035em; text-wrap: balance; }
.nt-roles .nt-post-item h3 a { color: var(--text); text-decoration: none; }
.nt-roles .nt-post-item h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nt-roles__more { margin: var(--space-6) 0 0; color: var(--text-muted); }
.nt-role__title { margin: 0; max-width: 20ch; }
.nt-role__meta { margin: var(--space-4) 0 0; }
.nt-role__apply { margin-top: var(--space-6); }
.nt-role__body { margin-top: var(--space-8); }
.nt-role__apply--end { margin-top: var(--space-8); gap: var(--space-5); }
/* About: "Meet our team", a grid of people: photo, name, and their areas as small tags (.nt-tags). Until a photo
   exists the slot shows a neutral silhouette; an <img class="nt-team__photo"> takes its place (see about.html). */
.nt-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
@container page (min-width: 640px) { .nt-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container page (min-width: 960px) { .nt-team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } }
.nt-team__person > * { margin: 0; }
.nt-team__photo {
  display: grid; place-items: end center; width: 100%; height: auto; aspect-ratio: 1; overflow: hidden; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--border-strong);
}
.nt-team__photo svg { width: 64%; height: auto; opacity: 0.45; }
.nt-team__name { margin-top: var(--space-4) !important; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.nt-team__person > .nt-tags { margin-top: var(--space-2); }
/* Live demo: a sample problem shown as a conversation (.nt-case--chat; for now Neuravanta's first case). The person's
   question is a bubble on the right with their name and role under it; Noetion's answer sits on the left: what it found
   in each team's systems, what it prepared and what waits for approval, then a link that opens it in the test drive. */
.nt-chat { display: grid; gap: var(--space-5); }
.nt-chat__ask > p, .nt-chat__answer > p, .nt-chat__reply > * { margin: 0; }
.nt-chat__ask { justify-self: end; max-width: 85%; display: grid; justify-items: end; gap: var(--space-2); }
.nt-chat__bubble {
  padding: var(--space-3) var(--space-4); border-radius: 18px 18px 4px 18px; font-size: 1rem; line-height: 1.45; color: var(--text);
  background: color-mix(in srgb, var(--horizon) 20%, var(--surface-raised)); border: 1px solid color-mix(in srgb, var(--horizon) 40%, transparent);
}
.nt-chat__who { font-size: 0.8125rem; color: var(--text-muted); text-align: right; }
.nt-chat__answer { justify-self: start; min-width: 0; display: grid; gap: var(--space-2); }
.nt-chat__from { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.nt-chat__from::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--horizon); box-shadow: 0 0 0 3px color-mix(in srgb, var(--horizon) 25%, transparent); }
.nt-chat__reply { padding: var(--space-4); border: 1px solid var(--border); border-radius: 4px 18px 18px 18px; background: var(--surface); }
.nt-chat__reply > * + * { margin-top: var(--space-4); }
.nt-chat__reply .nt-trace { margin-top: var(--space-4); }
.nt-chat__open { margin-top: var(--space-3) !important; }
.nt-verdict svg { flex: none; } /* keeps the icon full size when the pill wraps */
/* About: light and dark sections in turn, each balancing a heavier side with a lighter one. The name: the two roots
   in small type on the left, the word they make on the right (stacked on phones, roots first). What Noetion does
   (dark): the idea on the left, three points as ruled rows on the right. */
.nt-section--compact { padding-block: clamp(40px, 28px + 3cqi, 72px); }
.nt-name { display: grid; gap: var(--space-7); align-items: center; }
@container page (min-width: 960px) { .nt-name { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); } }
.nt-name__roots { margin: 0; display: grid; gap: var(--space-5); }
.nt-name__roots dt { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.nt-name__roots dd { margin: var(--space-1) 0 0; max-width: 46ch; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }
.nt-name__word .nt-word__headword { font-size: clamp(3rem, 1.8rem + 5.5cqi, 6.25rem); }
.nt-name__word .nt-word__senses { margin-top: var(--space-4); font-size: 1.0625rem; }
.nt-aims { row-gap: var(--space-7); }
.nt-aims__lead > * { margin: 0; }
.nt-aims__lead > * + * { margin-top: var(--space-5); }
.nt-aims__lead > p:not(:last-child) { max-width: var(--measure); color: var(--text-muted); }
.nt-aims__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
.nt-aims__list li { padding-block: var(--space-5); border-top: 1px solid var(--border); }
.nt-aims__list li > * { margin: 0; }
.nt-aims__list p { margin-top: var(--space-2); max-width: var(--measure); color: var(--text-muted); }
/* Pricing: no hero. The plans come first, on white with soft teal light at the top of the page that also runs behind
   the header; the plans section itself is transparent so the light shows through, and the cards lift slightly. */
.nt-page--pricing {
  background-color: var(--paper); background-repeat: no-repeat;
  background-image:
    radial-gradient(60rem 30rem at 88% -6%, rgba(45, 212, 191, 0.22), rgba(45, 212, 191, 0) 70%),
    radial-gradient(48rem 26rem at 4% 18%, rgba(45, 212, 191, 0.12), rgba(45, 212, 191, 0) 70%);
}
.nt-page--pricing .nt-pricing { background: transparent; }
.nt-page--pricing .nt-plan { box-shadow: 0 1px 2px rgba(13, 19, 34, 0.04), 0 16px 36px -20px rgba(13, 19, 34, 0.22); }
/* Careers: the same teal light behind the header and the intro, which is transparent so it shows through. The page is
   much longer than pricing, so the glows sit at fixed offsets from the top rather than percentages of the page. */
.nt-page--careers {
  background-color: var(--paper); background-repeat: no-repeat;
  background-image:
    radial-gradient(60rem 30rem at 88% -8rem, rgba(45, 212, 191, 0.22), rgba(45, 212, 191, 0) 70%),
    radial-gradient(48rem 26rem at 4% 24rem, rgba(45, 212, 191, 0.12), rgba(45, 212, 191, 0) 70%);
}
.nt-page--careers .nt-careers { background: transparent; }
/* Visually hidden, still read by screen readers and search engines */
.nt-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Network diagrams (data-privacy.html, options 1 and 2). Plain HTML, so build_i18n.py translates the labels.
   Dashed box: a cloud subscription. Solid box: a virtual network. Labels sit on the box's top border. White boxes are
   components (teal ring: Noetion). The link between two boxes: a teal line for Private Link, a dashed line for the
   access a customer grants Noetion's team. Stacked on phones, with the link running down between the boxes; side by
   side from 960px, with every component and the link line on the same horizontal centre line. */
.nt-net { margin: 0 0 clamp(40px, 28px + 3cqi, 72px); }
.nt-net__row { display: grid; gap: var(--space-5); }
.nt-net__zone { position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--space-5) var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.nt-net__zone .nt-net__zone { border-style: solid; border-radius: var(--radius-md); }
.nt-net__label { position: absolute; top: 0; left: var(--space-3); transform: translateY(-50%); margin: 0; padding: 0 var(--space-2); background: var(--surface); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; color: var(--text-muted); white-space: nowrap; }
.nt-net__nodes { display: flex; flex-direction: column; }
.nt-net__node { padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); }
.nt-net__node--noetion { border-color: var(--horizon); box-shadow: inset 0 0 0 1px var(--horizon); }
.nt-net__node--outside { align-self: center; }
.nt-net__name { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.nt-net__desc { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); }
.nt-net__caption { margin-top: var(--space-5); max-width: var(--measure); font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }
/* arrows between components: down (phones) or right (960px+); --back points the other way */
.nt-net__arrow { position: relative; align-self: center; width: 0; height: 24px; border-left: 1.5px solid var(--border-strong); }
.nt-net__arrow::after { content: ""; position: absolute; left: -5.75px; bottom: -1px; border: 5px solid transparent; border-top: 7px solid var(--border-strong); border-bottom: 0; }
.nt-net__arrow--back::after { bottom: auto; top: -1px; border-top: 0; border-bottom: 7px solid var(--border-strong); }
/* the link between boxes: on phones a vertical line with its name and description beside it */
.nt-net__link { display: grid; grid-template-columns: 2px minmax(0, 1fr); column-gap: var(--space-4); align-items: center; padding: var(--space-2) 0 var(--space-2) var(--space-7); }
.nt-net__link > .nt-net__name { grid-column: 2; grid-row: 1; }
.nt-net__link > .nt-net__desc { grid-column: 2; grid-row: 2; }
.nt-net__wire { position: relative; z-index: 1; grid-column: 1; grid-row: 1 / 3; align-self: stretch; margin-block: calc(-1 * (var(--space-5) + var(--space-2))); background: var(--horizon); box-shadow: var(--shadow-glow); }
.nt-net__wire::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border: 6px solid transparent; border-top: 8px solid var(--horizon); border-bottom: 0; }
.nt-net--one .nt-net__wire { margin-bottom: calc(-1 * (var(--space-4) + 2px)); } /* the arrow stops just above the next box's label */
.nt-net__link--access .nt-net__wire { width: 0; background: none; box-shadow: none; border-left: 1.5px dashed var(--border-strong); }
.nt-net__link--access .nt-net__wire::after { bottom: auto; top: 0; border-top: 0; border-bottom: 8px solid var(--border-strong); }
@container page (min-width: 960px) {
  .nt-net__row { gap: 0; }
  .nt-net--one .nt-net__row { grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1.2fr); }
  .nt-net--two .nt-net__row { grid-template-columns: minmax(0, 3fr) 176px minmax(0, 1fr); }
  .nt-net__nodes { flex-direction: row; align-items: center; }
  .nt-net__nodes > .nt-net__node { flex: 1 1 0; }
  .nt-net__arrow { flex: none; width: 28px; height: 0; border-left: 0; border-top: 1.5px solid var(--border-strong); }
  .nt-net__arrow::after { left: auto; right: -1px; bottom: auto; top: -5.75px; border: 5px solid transparent; border-left: 7px solid var(--border-strong); border-right: 0; }
  .nt-net__arrow--back::after { right: auto; left: -1px; border-left: 0; border-right: 7px solid var(--border-strong); }
  /* name above the line, description below, the line on the row's centre line */
  .nt-net__link { grid-template-columns: none; grid-template-rows: 1fr auto 1fr; padding: 0 var(--space-3); text-align: center; }
  .nt-net__link > .nt-net__name { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: var(--space-2); }
  .nt-net__link > .nt-net__desc { grid-column: 1; grid-row: 3; align-self: start; padding-top: var(--space-2); }
  .nt-net__wire { grid-column: 1; grid-row: 2; height: 2px; margin-block: 0; }
  .nt-net__wire::after { left: auto; right: 0; bottom: auto; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left: 8px solid var(--horizon); border-right: 0; }
  /* Private Link runs from the private endpoint to the Private Link service, through the box borders between them */
  .nt-net--one .nt-net__wire { margin-left: calc(-1 * (var(--space-3) + var(--space-4) + 1px)); margin-right: calc(-1 * (var(--space-3) + 2 * (var(--space-4) + 1px))); }
  /* delegated access runs from Noetion operations to the edge of your subscription */
  .nt-net--two .nt-net__wire { margin-inline: calc(-1 * var(--space-3)); }
  .nt-net__link--access .nt-net__wire { width: auto; height: 0; border-left: 0; border-top: 1.5px dashed var(--border-strong); }
  .nt-net__link--access .nt-net__wire::after { top: 50%; right: auto; left: 0; border: 6px solid transparent; border-right: 8px solid var(--border-strong); border-left: 0; }
}