/* Nordform Pewter & Ink 2.1. Semantic status and CAD layer colors stay distinct from identity. */

:root {
  /* paper */
  --bg: #F3F3EF;                       /* Nordform paper */
  --concrete: #F3F3EF;                 /* section band and model stage only */
  --surface: #FAFAF7;
  --surface-2: #E6E8E7;
  --line: #CDD1D2;
  --grid: rgba(28, 26, 23, 0.06);      /* 24px drafting grid */
  /* ink */
  --ink: #30383D;                      /* Site Ink */
  --ink-2: #606970;                    /* Pencil */
  /* brand */
  --forest: #263F61;
  --sage: #CDD1D2;
  --brass: #C77745;
  --brand-mark: #263F61;
  --action: var(--forest);
  --action-hover: #1C304B;
  --action-ink: #263F61;
  --action-soft: #E4E9EF;
  --on-action: #FAFAF7;
  --amber: var(--action);             /* compatibility for existing UI consumers */
  --amber-hover: var(--action-hover);
  --amber-ink: var(--action-ink);                /* legacy action text token */
  --amber-soft: var(--action-soft);
  --on-amber: var(--on-action);
  /* quiet register ground */
  --ground: #263F61;
  --on-ground: #FAFAF7;
  --on-ground-2: #CDD1D2;
  --ground-hair: #858F96;
  --chalk: #263F61;                    /* Chalk Line: pro accent, links to drawings, focus */
  --chalk-ink: #263F61;
  --chalk-soft: #E4E9EF;
  --on-chalk: #FFFFFF;
  /* semantic */
  --level: #24924F;                    /* check success only; never engineering approval */
  --level-ink: #1E7A43;                /* level as text on light */
  --level-soft: #DCF1E3;
  --redline: #D8412A;                  /* error: needs a change */
  --redline-ink: #A63424;              /* redline as text on light */
  --redline-soft: #F9E1DB;
  --glow: rgba(133, 143, 150, 0.18);
  /* type */
  --font-display: "Inter Tight", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;          /* titles and section heads */
  --font-record: "Inter Tight", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;           /* records: sign-off, concept sheet, exported report */
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  /* shape */
  --radius-card: 8px;
  --radius-input: 8px;
  --radius-pill: 999px;
  --grid-step: 24px;
  /* people: one colour per participant, by join order (MGP-29); never status, never identity.
     3:1 on the viewer backdrop and the sheet paper; scripts/person-colours.mjs checks it. */
  --person-1: #2F77C8;                 /* azure */
  --person-2: #D03980;                 /* rose */
  --person-3: #21808F;                 /* teal */
  --person-4: #9F51D6;                 /* violet */
  --person-5: #996E24;                 /* ochre */
  --person-6: #C82FBC;                 /* magenta */
  --person-7: #7066DB;                 /* indigo */
  --person-8: #7D4F79;                 /* plum */
  --person-agent: #858F96;             /* agents are Pewter, never a person's colour */
  --on-person: #FFFFFF;                /* a name on a person's colour: 4.5:1 or better */
}

[data-theme="dark"], .charcoal {
  --bg: #20272C;
  --concrete: #30383D;
  --ground: #30383D;
  --on-ground: #F3F3EF;
  --on-ground-2: #CDD1D2;
  --ground-hair: #606970;
  --surface: #30383D;
  --surface-2: #39434B;
  --line: #606970;
  --grid: rgba(255, 190, 90, 0.08);
  --ink: #F3F3EF;
  --ink-2: #CDD1D2;
  --action: #CDD1D2;
  --action-hover: #F3F3EF;
  --action-ink: #F3F3EF;
  --action-soft: #39434B;
  --on-action: #263F61;
  --amber: var(--action);
  --amber-hover: var(--action-hover);
  --amber-ink: var(--action-ink);
  --amber-soft: var(--action-soft);
  --on-amber: var(--on-action);
  --chalk: #BACBDD;
  --chalk-ink: #CDD1D2;
  --chalk-soft: #263F61;
  --on-chalk: #20272C;
  --level: #55CC8A;
  --level-ink: #7FDCA6;
  --level-soft: #17402A;
  --redline: #FF7458;
  --redline-ink: #FF9A85;
  --redline-soft: #4D211A;
  --glow: rgba(133, 143, 150, 0.18);
  --person-1: #5892D5;
  --person-2: #DA6A9E;
  --person-3: #2B9CAD;
  --person-4: #B276DD;
  --person-5: #B8852E;
  --person-6: #D862CE;
  --person-7: #8C85E0;
  --person-8: #B07CAB;
  --person-agent: #858F96;
  --on-person: #20272C;
}

/* AutoCAD layer index colours: for drawing layers and overlays only, never brand UI */
:root {
  --layer-1: #E0452B; --layer-2: #F2D23A; --layer-3: #2FB35A;
  --layer-4: #22B8D8; --layer-5: #2F4FD1; --layer-6: #C43BC0;
}

/* drafting grid ground */
.paper {
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px var(--grid-step)),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px var(--grid-step)),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

/* Shared surface language: soft depth, quiet edges, no decorative drafting grid. */
:root {
  --shadow-soft: none;                 /* resting cards separate with a hairline, not a shadow */
  --shadow-float: 0 8px 30px #30271914, 0 1px 4px #30271904;
  --border-soft: rgba(48, 56, 61, .18);
  --focus-neutral: #606970;
  --surface-radius: 10px;
}
.paper { background: radial-gradient(circle, #8b7f6712 .7px, transparent .85px) 0 0 / 24px 24px, var(--bg); }


:root { --nf-graphite:#30383d; --nf-pewter:#858f96; --nf-silver:#cdd1d2; --nf-chalk:#f3f3ef; --nf-ink:#263f61; --nf-copper:#c77745; --nf-control-duration:150ms; --nf-text-duration:300ms; --nf-ease:cubic-bezier(.22,1,.36,1); }
.paper { background:var(--bg); }

/* Dot grid (MGP-33): boards read as boards. A 24 px grid of dots in the hairline colour at low
   opacity, over whatever ground the element already has. For the massing board and the options
   tree only; never on the 3D viewer or a drawing sheet, which stay plain. */
.dot-grid {
  background-image: radial-gradient(circle at center, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1.4px);
  background-size: var(--grid-step) var(--grid-step);
  background-position: calc(var(--grid-step) / 2) calc(var(--grid-step) / 2);
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/shared/inter-tight.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/shared/instrument-sans.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/shared/geist-mono.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url(/shared/plex-sans-regular.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url(/shared/plex-sans-medium.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url(/shared/plex-sans-semibold.woff2) format('woff2');
  font-weight: 600 900;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url(/shared/plex-mono-regular.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* One lockup for React and generated public pages; size follows its surrounding header.
   Nordform Group leads, Nordform follows as the product. Markup lives in lockup.mjs. */
.buildable-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  flex-shrink: 0;
  vertical-align: middle;
  white-space: nowrap;
  font-family: var(--font-body, 'IBM Plex Sans', Arial, sans-serif);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.buildable-lockup > .brand-house {
  display: block;
  width: 1.2em;
  height: 1.2em;
  margin: 0;
  flex-shrink: 0;
}
.buildable-lockup > .buildable-name {
  display: inline-flex;
  flex-direction: column;
  font: inherit;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: inherit;
  margin: 0;
}
.buildable-lockup > .buildable-name small {
  font-family: var(--font-mono, 'IBM Plex Mono', Menlo, monospace);
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: 0.32em;
  line-height: 1.5;
  text-transform: uppercase;
}
.buildable-lockup > .lockup-product {
  margin-left: 0.1em;
  padding-left: 0.46em;
  border-left: 1px solid currentColor;
  border-left-color: color-mix(in srgb, currentColor 32%, transparent);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  opacity: 0.82;
}

.nordform-lockup > .nordform-wordmark { display:block; width:6.5em; max-width:180px; height:auto; flex:none; }
.nordform-lockup > .nordform-descriptor { font:400 9px/1.4 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; margin-left:10px; }
@media(max-width:600px){.nordform-lockup > .nordform-descriptor{display:none}.nordform-lockup > .nordform-wordmark{max-width:130px}}
/* Taking form: one uniform-scale, six-path master; never behind reading or data. */
.taking-form { color:var(--nf-ink,#263f61); width:100%; min-width:360px; line-height:0; }
.taking-form svg { display:block; width:100%; height:auto; aspect-ratio:900/220; overflow:visible; }
.taking-form path { fill:none; }
@media(prefers-reduced-motion:no-preference) {
 .taking-form-reveal path { animation:nf-line-reveal 1800ms cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i)*65ms); }
}
@keyframes nf-line-reveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
@media(max-width:359px) { .taking-form { display:none; } }
@media print { .taking-form path { animation:none!important; clip-path:none!important; } }

/* Shared pill silhouette for actions; tabs retain their grouped layout, a button drawn as a card
   (.card-button) keeps its card corners, and rows in a list or menu (sidebar rows, menu items,
   options) keep their own small radius, since a pill on a two-line row reads as a blob.
   Public demos own their control shapes: model tools and drawing cards are not pill actions. */
body:not(.demo-page) :is(button:not([role="tab"]):not([role^="menuitem"]):not([role="option"]):not(.pro-sidebar-backdrop):not(.card-button):not(.pro-nav *):not(.steel-chapters *):not(.customer-demo-page *):not(.customer-review-layout nav *):not(.customer-pdf-toolbar *):not(.drawing-review-sidebar *):not(.deck-overlay *):not(.source-presentation-entry *),[role="button"],.button,.secondary-button,.cta,.nav-cta) { border-radius:999px!important; }

/* Shared light-to-graphite closing edge, including customer and private surfaces. */
.footer-signature { width:100%; line-height:0; overflow:hidden; background:linear-gradient(var(--page-end, transparent) 60%, #30383d 60%); }
/* Above the lines the band shows the body, so the edge continues the page; a page whose last band
   is another colour sets --page-end on body.
   The graphite starts inside the field, 132/900 of the band's width down (a margin percentage
   resolves against the width); below 360 px the lines are hidden and it starts at the top. */
:is(.site-footer,.footer):has(> .footer-signature) { position:relative; isolation:isolate; background:none; }
:is(.site-footer,.footer):has(> .footer-signature)::before { content:""; position:absolute; inset:0; z-index:-1; margin-top:calc(100% * 132 / 900); background:#30383d; pointer-events:none; }
@media(max-width:359px) { :is(.site-footer,.footer):has(> .footer-signature)::before { margin-top:0; } }
.footer-signature .taking-form { color:#858f96; }
.footer-signature .taking-form .footer-field { fill:#30383d; }
/* The six lines draw in as the footer arrives, one after another, tied to the scroll. */
@media(prefers-reduced-motion:no-preference) { @supports(animation-timeline:view()) {
 .footer-signature { view-timeline:--footer-edge block; }
 .footer-signature g path { animation:nf-line-reveal linear both; animation-timeline:--footer-edge; animation-range:entry calc(var(--i) * 6%) cover calc(40% + var(--i) * 6%); }
} }
body .site-footer { background:#30383d; padding-top:0; }
.site-footer .footer-signature { margin-bottom:64px; }
.site-footer .footer-brand .wordmark { display:inline-flex; margin-bottom:40px; }
.site-footer .footer-brand h2 { margin-top:0; }
/* The footer column is narrow: the descriptor sits under the wordmark, never beside it. */
.site-footer .footer-brand .nordform-lockup { display:inline-grid; grid-template-columns:auto auto; align-items:center; row-gap:6px; }
.site-footer .footer-brand .nordform-lockup > .nordform-mark { grid-row:1 / span 2; }
.site-footer .footer-brand .nordform-lockup > .nordform-descriptor { display:block; grid-column:2; margin-left:0; }

/* Approved Gather companion; optically paired with the sketch wordmark. */
.nordform-lockup > .nordform-mark { display:block; width:1.55em; height:1.55em; flex:none; margin-right:.15em; }





* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  cursor: pointer;
}
button,
input,
textarea,
select {
  font-family: inherit;
}
:focus-visible {
  outline: 2px solid var(--chalk);
  outline-offset: 2px;
}
::selection {
  background: var(--amber-soft);
  color: var(--ink);
}
a {
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}
.brand-house {
  display: inline-block;
  width: 29px;
  height: 32px;
  vertical-align: -5px;
  margin-right: 9px;
  flex-shrink: 0;
}

/* Rev D application: plain surfaces; the drafting grid is deliberately opt-in. */
body {
  background: var(--bg);
  color: var(--ink);
}
h1,
h2,
h3 {
  text-wrap: balance;
}
.wordmark {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.wordmark span {
  font-weight: inherit;
}
.brand-house {
  width: 30px;
  height: 30px;
  vertical-align: -4px;
  margin-right: 10px;
}
button {
  transition:
    background 120ms ease,
    transform 120ms ease;
}
button:not(:disabled):hover {
  transform: translateY(-1px);
}
.eyebrow,
.section-label,
.model-tag,
.model-label small,
.model-label > span,
.pill,
.model-info,
.local-badge,
.statusbar,
.price,
.revision-picker,
.slider-field b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):hover {
    transform: none;
  }
}

/* Default controls use the secondary treatment; component variants override it. */
:where(button) {
  appearance: none;
  background: var(--surface, #FAF9F6);
  color: var(--ink);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: var(--shadow-soft);
}
:where(button):disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
a {
  text-decoration: none;
}
a:hover {
  color: var(--amber-ink);
}


:root {
  color: var(--ink);
  background: var(--bg);
}
body {
  margin: 0;
}
.wordmark {
  font-size: 31px;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-decoration: none;
}
.wordmark span {
  font-weight: inherit;
}
header {
  height: 90px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--surface-2);
  gap: 70px;
}
nav {
  display: flex;
  gap: 34px;
  font-size: 12px;
}
nav a {
  text-decoration: none;
}
.nav-cta {
  margin-left: auto;
  font-size: 12px;
  text-decoration: none;
  display: flex;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 13px 16px;
}
.nav-cta:hover {
  background: var(--surface-2);
}
.hero {
  display: grid;
  grid-template-columns: 47% 53%;
  min-height: 640px;
}
.hero-copy {
  padding: 67px 8% 65px 10.7%;
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 1.8px;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  gap: 9px;
  align-items: center;
}
.eyebrow > span {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: var(--ink-2);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.4vw, 82px);
  letter-spacing: -3.8px;
  font-weight: 600;
  line-height: 1.05;
  margin: 29px 0;
}
.hero h1 em {
  color: var(--ink-2);
  font-weight: 500;
}
.hero p {
  font-size: 14px;
  line-height: 1.9;
  max-width: 360px;
  color: var(--ink-2);
}
.button {
  display: inline-flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 16px 20px;
  font-size: 12px;
  margin-top: 19px;
}
.button:hover {
  background: var(--ink);
}
.hero-model {
  position: relative;
  background: var(--bg);
  min-height: 580px;
  overflow: hidden;
}
.hero-model .viewer {
  height: 100%;
  width: 100%;
  position: absolute;
}
.viewer canvas {
  display: block;
}
/*
  The 3D preview's own failure line: no WebGL, or the bundle never arrived. It sits inside the
  element the viewer would have filled, so the hero keeps its shape instead of collapsing. Declared
  here rather than at the end of the file because a media query further down already narrows it.
*/
.viewer-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 180px 40px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
/*
  The page-level failure panel. A visitor who sees this has already lost the site once, so it says
  what happened, offers the two things that can fix it, and carries the error text they can quote.
*/
.page-failure {
  max-width: 560px;
  margin: 0 auto;
  padding: 72px 24px 120px;
  text-align: center;
}
/* The Flow signature, wider than the text column and full bleed on a phone so it keeps its 360 px. */
.page-failure-signature {
  width: min(100vw, 720px);
  margin: 0 0 40px calc(50% - min(50vw, 360px));
}
.page-failure-signature .taking-form {
  color: var(--action);
  min-width: 0;
}
.page-failure h1 {
  margin: 0 0 12px;
}
.page-failure p {
  color: var(--ink-2);
  margin: 0 0 16px;
}
.page-failure-detail {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-word;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
.page-failure-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* The secondary action matches the primary beside it. */
.page-failure-actions .button,
.page-failure-actions .secondary-button {
  font-size: 13px;
  height: 48px;
  margin: 0;
}
.page-failure-hint {
  font-size: 13px;
}
.page-failure-hint a {
  color: inherit;
  text-decoration: underline;
}
.model-label {
  position: absolute;
  left: 32px;
  bottom: 35px;
  pointer-events: none;
}
.model-label span,
.model-tag {
  font-size: 9px;
  letter-spacing: 1.7px;
  color: var(--ink-2);
}
.model-label b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 29px;
  margin: 10px 0;
  color: var(--ink);
}
.model-label small {
  font-size: 10px;
  color: var(--ink-2);
}
.model-tag {
  position: absolute;
  top: 30px;
  left: 32px;
}
.orbit-hint {
  position: absolute;
  right: 27px;
  bottom: 35px;
  font-size: 9px;
  color: var(--ink-2);
}
.ticker {
  padding: 26px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  gap: 20px;
  background: var(--bg);
}
.ticker span {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--ink-2);
}
.ticker b {
  font: 600 22px var(--font-display);
}
.ticker i {
  color: var(--ink-2);
  font-style: normal;
}
.catalog {
  padding: 96px 5%;
}
.section-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 36px;
}
h2 {
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: -1.8px;
  font-weight: 600;
  line-height: 1.12;
  margin: 20px 0 0;
}
.section-top p {
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 0;
}
.cards {
  display: grid;
  /* Four open families, so two even rows rather than a row of three and an orphan. */
  grid-template-columns: repeat(2, 1fr);
  gap: 19px;
}
.card {
  display: block;
  border: 1px solid var(--surface-2);
  border-radius: 7px;
  background: var(--bg);
  padding: 22px;
  text-decoration: none;
}
.card.featured {
  background: var(--surface-2);
  border-color: var(--line);
}
.card.featured:hover {
  background: var(--surface-2);
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font: 10px var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.pill {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  font-size: 10px;
  letter-spacing: 0;
  white-space: nowrap;
}
.pill.muted {
  color: var(--ink-2);
  border-color: var(--line);
}
.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card h3 {
  font: 600 27px var(--font-display);
  letter-spacing: -0.6px;
  margin: 14px 0 0;
}
.card p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 2px;
  max-width: 46ch;
}

.pricing {
  padding: 96px 5%;
}
.pricing .section-top p {
  margin: 0;
}
.pricing p {
  max-width: 56ch;
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.pricing small {
  display: block;
  margin: 15px;
  font-size: 10px;
  color: var(--ink-2);
}
footer {
  border-top: 1px solid var(--surface-2);
  padding: 32px 5%;
  display: flex;
  align-items: center;
  gap: 32px;
}
footer > span {
  font-size: 10px;
  color: var(--ink-2);
}
footer p {
  margin-left: auto;
  font-size: 9px;
  color: var(--ink-2);
}
@media (max-width: 950px) {
  header {
    gap: 35px;
  }
  nav {
    gap: 20px;
  }
  .hero-copy {
    padding-top: 50px;
  }
  .hero h1 {
    letter-spacing: -2.5px;
  }
  .hero {
    min-height: 600px;
  }
  .ticker span:last-child {
    display: none;
  }

  .card {
    padding: 16px;
  }
  .card-top {
    font-size: 7px;
  }
  .card h3 {
    font-size: 24px;
  }
  footer {
    gap: 15px;
  }
}
@media (max-width: 680px) {
  header {
    height: 75px;
    padding: 0 20px;
  }
  nav {
    display: none;
  }
  .nav-cta {
    font-size: 10px;
    gap: 15px;
  }
  .hero {
    display: flex;
    flex-direction: column;
  }
  .hero-copy {
    padding: 45px 25px;
  }
  .hero h1 {
    font-size: 59px;
  }
  .hero-model {
    min-height: 400px;
  }
  .model-label b {
    font-size: 25px;
  }
  .ticker {
    flex-wrap: wrap;
    padding: 20px 25px;
    justify-content: start;
    gap: 20px;
  }
  .ticker span {
    width: 100%;
    font-size: 10px;
  }
  .ticker b {
    font-size: 20px;
  }
  .section-top {
    display: block;
  }
  .section-top p {
    margin-top: 20px;
  }
  .catalog {
    padding: 50px 20px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  h2 {
    font-size: 39px;
  }

  .pricing {
    padding: 65px 25px;
  }
  footer {
    flex-wrap: wrap;
  }
  footer p {
    order: 4;
    width: 100%;
    margin-left: 0;
  }
  .viewer-error {
    padding: 130px 30px;
    font-size: 13px;
  }
}
.brief-entry {
  max-width: 440px;
  margin-top: 20px;
}
.brief-entry label {
  display: block;
  font-size: 12px;
  margin-bottom: 8px;
}
.brief-entry textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font:
    13px/1.6 Arial,
    sans-serif;
}
.brief-entry button {
  cursor: pointer;
  border: 0;
  margin-top: 10px;
  width: 100%;
  justify-content: space-between;
}
.design-gallery {
  padding: 96px 5%;
}
.gallery-status {
  max-width: 96ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 24px 0;
}
.design-grid {
  display: grid;
  /* Three demo concepts carry this row, so it is a row of three: a fourth column left a hole. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.design-card {
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}
.design-art {
  background: var(--surface-2);
  padding: 22px 12px 16px;
}
.design-art svg {
  width: 100%;
  height: 150px;
}
.design-art span {
  display: block;
  font: 11px var(--font-mono);
  text-align: center;
  color: var(--ink-2);
}
.design-art-1 {
  background: var(--surface-2);
}
.design-art-2 {
  background: var(--surface-2);
}
.design-art-3 {
  background: var(--surface-2);
}
.design-card-copy {
  padding: 18px;
}
.design-card h3 {
  font: 600 24px var(--font-display);
  margin: 15px 0;
}
.design-card h3 span {
  float: right;
  font: 16px var(--font-body);
}
.design-card-copy > small {
  font: 11px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.design-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.block-samples-top {
  margin-top: 56px;
}
.design-grid.block-samples {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;
}
.block-art svg {
  display: block;
  width: 100%;
  height: 170px;
}
.block-attribution {
  padding: 0 18px 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.block-attribution summary {
  cursor: pointer;
  color: var(--ink);
}
.block-attribution p {
  font-size: 13px;
  margin: 10px 0 0;
}
.block-attribution a {
  color: var(--ink);
}
@media (max-width: 1050px) {
  .design-grid.block-samples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .design-grid.block-samples {
    grid-template-columns: 1fr;
  }
}
.gallery-policy {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg);
  font-size: 13px;
}
.gallery-policy p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 82ch;
  color: var(--ink-2);
}
.gallery-policy a {
  color: var(--ink);
  font-size: 13px;
}
@media (max-width: 1050px) {
  .design-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .design-gallery {
    padding: 60px 24px;
  }
  .design-grid {
    grid-template-columns: 1fr;
  }
  .design-art svg {
    height: 180px;
  }
}
header {
  gap: 40px;
}
header nav {
  gap: 24px;
}
.hero {
  min-height: 570px;
}
.hero-copy {
  padding-top: 55px;
  padding-bottom: 45px;
}
.hero h1 {
  font-size: clamp(44px, 4.7vw, 68px);
  letter-spacing: -2.8px;
}
.hero-copy > .brief-entry,
.maker-start > .brief-entry {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.hero-copy .brief-entry textarea,
.maker-start .brief-entry textarea {
  background: var(--bg);
}
.hero-copy .brief-entry button,
.maker-start .brief-entry button {
  margin-top: 10px;
}
.hero-copy .hero-note {
  max-width: 420px;
}
@media (max-width: 640px) {
  .hero-copy {
    padding: 38px 24px;
  }
  .hero h1 {
    font-size: 48px;
  }
  .hero-copy > .brief-entry,
.maker-start > .brief-entry {
    padding: 14px;
  }
}
.upcoming {
  padding: 80px 5%;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.upcoming-grid article {
  padding: 25px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 7px;
}
.upcoming-grid h3 {
  font: 600 27px var(--font-display);
  margin: 20px 0 12px;
}
.upcoming-grid small {
  font-size: 10px;
  color: var(--ink-2);
}
.upcoming-grid p {
  font-size: 12px;
  line-height: 1.8;
  min-height: 66px;
}
.upcoming-grid button {
  border: 1px solid var(--ink-2);
  border-radius: var(--radius-card);
  background: transparent;
  padding: 11px 14px;
  color: var(--ink);
  font-size: 11px;
  cursor: pointer;
}
.upcoming-grid button[aria-pressed='true'] {
  background: var(--ink);
  color: white;
}
@media (max-width: 900px) {
  .upcoming-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .upcoming-grid {
    grid-template-columns: 1fr;
  }
  .upcoming {
    padding: 55px 24px;
  }
  .brand-house {
    width: 25px;
    margin-right: 6px;
  }
}
.public-design {
  max-width: 1400px;
  margin: auto;
  padding: 50px 5%;
}
.public-design-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 24px;
}
.public-design h1 {
  font: 600 60px/1.1 var(--font-display);
  letter-spacing: -2px;
  margin: 20px 0;
}
.public-design-top p {
  font-size: 14px;
  color: var(--ink-2);
}
.public-design-viewer {
  height: 560px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  background: var(--bg);
}
.public-design-viewer .viewer {
  height: 100%;
}
.public-design-top > div:first-child { flex: 1; min-width: 0; max-width: 680px; }
.public-design-top > .design-actions { flex: 0 0 auto; display: grid; gap: 10px; padding-top: 20px; }
.public-design .design-actions > a, .public-design .design-actions > button { white-space: nowrap; min-height: 44px; padding: 12px 20px; }
.design-preview-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; font-size: 12px; color: var(--ink-2); }
.design-preview-caption .revision-status { font-weight: 600; color: var(--ink); }
.design-notes { border-top: 1px solid var(--line); padding: 14px 0; }
.design-notes summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.public-design .design-notes p { margin-bottom: 0; line-height: 1.65; }
.public-design-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 40px;
}
.creator {
  display: flex;
  gap: 13px;
  align-items: center;
}
.creator > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border-radius: 50%;
  font: 600 26px var(--font-display);
}
.creator b {
  font-size: 13px;
}
.creator small {
  display: block;
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 4px;
}
.public-design h2 {
  font: 600 32px var(--font-display);
}
.public-design-details p {
  font-size: 13px;
  line-height: 1.9;
  max-width: 510px;
}
.public-design h3 {
  font: 600 26px var(--font-display);
}
.public-design dl {
  font-size: 12px;
}
.public-design dl > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--surface-2);
}
.public-design dt {
  color: var(--ink-2);
}
.public-design dd {
  margin: 0;
  text-align: right;
}
@media (max-width: 640px) {
  .public-design {
    padding: 30px 24px;
  }
  .public-design-top {
    align-items: flex-start;
    flex-direction: column;
  }
  .public-design-top > .design-actions { padding-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-design .design-actions > a, .public-design .design-actions > button { padding: 12px; font-size: 12px; }
  .public-design h1 {
    font-size: 45px;
  }
  .public-design-viewer {
    height: 400px;
  }
  .public-design-details {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* Supplied Rev D identity,
adapted to the working prototype. */
header {
  background: var(--surface);
  gap: 42px;
}
.wordmark,
.wordmark span {
  font-weight: 600;
}
.button {
  border-radius: var(--radius-pill);
  background: var(--amber);
  color: var(--on-amber);
  border-color: transparent;
  font-weight: 600;
}
.button:hover {
  background: var(--amber-hover);
}
/* One filled amber element per screen, and it is the page's own action, not the nav. */
.nav-cta {
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}
.nav-cta:hover {
  background: var(--concrete);
}
/* One size and one shape for every button, and the arrow travels with the label instead of being
   pushed to the far edge: at 35px of gap it read as two things that happened to share a border. */
.button,
.nav-cta,
.secondary-button {
  gap: 10px;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  font-size: 13px;
  line-height: 1.2;
}
.button .brand-arrow,
.nav-cta .brand-arrow,
.secondary-button .brand-arrow {
  margin-right: -2px;
}
/* Quiet register: controls are drawn in ink, never filled. */
.enterprise-page .button,
.enterprise-page .button:hover {
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.enterprise-page .eyebrow > span {
  background: var(--ink-2);
}
.hero {
  min-height: 680px;
}
.hero-copy {
  background: var(--bg);
}
.hero h1 {
  font: 600 clamp(34px, 3.6vw, 52px)/1.08 var(--font-display);
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.hero h1 em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}
.hero p {
  font-size: 16px;
  line-height: 1.55;
  max-width: 40ch;
}
.eyebrow {
  color: var(--ink-2);
  font: 500 11px var(--font-mono);
  letter-spacing: 0.12em;
}
.eyebrow > span {
  background: var(--amber);
}
h2 {
  font: 600 clamp(24px, 2.8vw, 32px)/1.18 var(--font-display);
  letter-spacing: -0.02em;
}
/* A card is a control, so its title stays in the sans. */
.card h3,
.design-card h3,
.upcoming-grid h3 {
  font: 600 18px/1.3 var(--font-body);
  letter-spacing: -0.006em;
}
.card,
.design-card,
.upcoming-grid article,
.gallery-policy,
.public-design-viewer {
  border-radius: var(--radius-card);
  background: var(--surface);
}
.card.featured {
  background: var(--concrete);
}
.brief-entry,
.hero-copy > .brief-entry,
.maker-start > .brief-entry {
  border-radius: var(--radius-input);
  background: var(--surface);
  border-color: var(--line);
}
.brief-entry textarea,
.hero-copy .brief-entry textarea,
.maker-start .brief-entry textarea {
  background: var(--surface);
  font-family: var(--font-body);
  border-radius: var(--radius-input);
}
.hero-model {
  margin: 34px 28px 34px 0;
  min-height: 540px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg);
}
.model-label b {
  font: 600 25px/1.2 var(--font-display);
}
.model-tag {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 6px;
}
.ticker {
  background: var(--surface);
}
.ticker b {
  font: 600 20px var(--font-display);
}
.ticker i {
  color: var(--amber-ink);
}
.design-art {
  background: var(--surface-2);
}
.design-art-1 {
  background: #e8eaf2;
}
.design-art-2 {
  background: #f2e9db;
}
.design-art-3 {
  background: #e8e7e3;
}
.gallery-policy a {
  color: var(--chalk-ink);
}
.upcoming-grid button {
  border-radius: var(--radius-pill);
}
.upcoming-grid button[aria-pressed='true'] {
  background: var(--chalk-soft);
  color: var(--chalk-ink);
  border-color: var(--chalk);
}
.public-design h1 {
  font: 700 clamp(36px, 5vw, 60px)/1.05 var(--font-display);
  letter-spacing: -0.04em;
}
@media (max-width: 800px) {
  .hero-model {
    margin: 0 20px 28px;
    min-height: 420px;
  }
  header {
    gap: 18px;
  }
}
@media (max-width: 480px) {
  .hero h1 {
    font-size: 40px;
  }
  .hero-model {
    min-height: 360px;
  }
}

.site-footer {
  display: block;
  padding: 72px 5% 24px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
}
.footer-brand .wordmark {
  font-size: 34px;
}
.footer-brand h2 {
  margin-top: 32px;
  font-size: 32px;
}
.site-footer p {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 38ch;
  color: #c4beb5;
}
.footer-column {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 18px;
  font-size: 14px;
}
.footer-column h3 {
  font: 500 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c4beb5;
  margin: 8px 0 12px;
}
.footer-column a:hover {
  color: var(--amber);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid #3d342b;
  font: 11px var(--font-mono);
  color: #c4beb5;
}
.footer-bottom p {
  margin: 0;
  max-width: none;
  font: 12px var(--font-body);
}
@media (max-width: 640px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    align-items: start;
    flex-direction: column;
  }
  .site-footer p {
    display: block;
  }
  .site-footer {
    padding-top: 48px;
  }
}

/* Plan comparison and regional professional discovery. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0 24px;
}
.price-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.price-card.price-featured {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}
.price-card h3 {
  font: 600 26px var(--font-display);
  margin: 20px 0 0;
}
.pricing .price-card p {
  margin: 12px 0;
  font-size: 14px;
}
.plan-price {
  /* The price now carries its period and the word "proposed" with it, from one source, so it is a
     line of type rather than a single large number. */
  font: 600 26px var(--font-display);
  margin: 18px 0 24px;
}
.plan-price span {
  font: 14px var(--font-body);
  color: var(--ink-2);
}
.pricing .plan-excludes-label {
  margin: 22px 0 0;
  font: 600 11px/1.4 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.price-card ul.plan-excludes {
  padding-top: 4px;
  color: var(--ink-2);
}
.price-card .button {
  margin: 0;
  justify-content: center;
  font-size: 13px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.price-card .button:hover {
  background: var(--concrete);
}
.price-featured .button,
.price-featured .button:hover {
  background: var(--amber);
  border-color: transparent;
  color: var(--on-amber);
}
.price-featured .button:hover {
  background: var(--amber-hover);
}
.price-card ul {
  list-style: none;
  padding: 20px 0 0;
  font-size: 14px;
  line-height: 1.6;
}
.price-card li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.pricing .pricing-disclosure {
  max-width: 86ch;
  font-size: 13px;
  line-height: 1.6;
}
.expert-market {
  padding: 96px 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  border-top: 1px solid var(--line);
}
.expert-intro h2 {
  margin: 24px 0;
}
.expert-market p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 16px 0;
}
.expert-discovery {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.expert-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.expert-filters label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.expert-filters input,
.expert-filters select {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
  font: inherit;
}
.expert-empty {
  padding: 24px;
  background: var(--bg);
  border-radius: var(--radius-card);
}
.expert-empty h3 {
  margin-top: 14px;
}
.expert-market .expert-note {
  font-size: 12px;
}
.expert-enrollment {
  grid-column: 1 / -1;
}
.expert-enrollment > button {
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.expert-enrollment form {
  max-width: 800px;
  padding: 28px;
  margin-top: 20px;
  background: var(--surface);
  border-radius: var(--radius-card);
}
@media (max-width: 800px) {
  .pricing-grid,
  .expert-market {
    grid-template-columns: 1fr;
  }
  .expert-filters {
    grid-template-columns: 1fr;
  }
  .expert-market {
    gap: 24px;
    padding: 48px 6%;
  }
}
.expert-landing {
  max-width: 1200px;
  margin: auto;
  padding: 72px 5%;
}
.expert-landing h1 {
  font: 600 clamp(36px, 5vw, 64px)/1.08 var(--font-display);
  letter-spacing: -0.04em;
  margin: 28px 0;
}
.expert-lead {
  max-width: 700px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 24px 0;
}
.expert-terms {
  padding: 40px;
  background: var(--surface);
  border-radius: var(--radius-card);
}
.expert-landing p,
.expert-terms dd {
  line-height: 1.6;
  margin: 16px 0;
}
.expert-terms dt {
  font-weight: 600;
  margin-top: 24px;
}
.expert-terms dd {
  color: var(--ink-2);
}
.expert-profile-form {
  max-width: 800px;
}
.expert-bio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.expert-bio textarea {
  min-height: 160px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: 16px;
  font: inherit;
}
.profile-bio {
  white-space: pre-wrap;
}
/* The measured figure,
when there is one to state. Absent by default and by design (LIV-246). */
.hero-measure {
  display: block;
  margin: 18px 0 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--ink);
  background: var(--surface);
}
.hero-measure b {
  display: block;
  font: 600 15px/1.45 var(--font-display);
}
.hero-measure small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* No figure yet: one quiet sentence, the same box, so the space reads as reserved for a measurement. */
.hero-measure-empty {
  border-left-color: var(--ink-2);
}
.hero-measure-empty small {
  margin-top: 0;
}

/* Priced service lines on the enterprise page: what is delivered,
and what is not (LIV-249). */
.service-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin: 28px 0 0;
}
.service-line {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.service-line h3 {
  margin: 0 0 6px;
}
.service-line p {
  font-size: 14px;
  line-height: 1.6;
}
.service-unit {
  font: 11px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.service-excludes {
  color: var(--ink-2);
}
.service-note {
  margin-top: 22px;
  font-size: 13px;
  color: var(--ink-2);
}

/* The chain from a brief to a building: one rail per owner, with the seam between them (LIV-244).

The eight stages used to stand as eight columns of body copy, so the first thing under the hero was
twelve hundred characters of 12px grey and a label turned on its side. The rail carries what a
reader takes at a glance — the order of the stages and which of them are ours — and the stage
descriptions sit under it behind one click. Nothing was deleted; the structure stopped competing
with the detail. */
.chain {
  padding: 66px 5% 60px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--concrete);
}
.chain-rails {
  display: flex;
  align-items: stretch;
}
.chain-group {
  min-width: 0;
}
.chain-ours {
  /* The two rails are sized by how many stages they carry, so the nodes keep one pitch. */
  flex: 6 1 0;
}
.chain-theirs {
  flex: 2 1 0;
}
.chain-group-label {
  margin: 0 0 14px;
  font: 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.chain-line {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chain-stage {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 17px 16px 0 0;
  border-top: 1.5px solid var(--ink);
}
.chain-stage i {
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}
.chain-stage b {
  font: 600 17px/1.3 var(--font-display);
}
/* What we do not do is drawn open: a broken rule and a hollow node. */
.chain-elsewhere {
  border-top-style: dashed;
  border-top-color: var(--ink-2);
}
.chain-elsewhere b {
  color: var(--ink-2);
}
.chain-elsewhere i {
  background: var(--concrete);
  border: 1.5px solid var(--ink-2);
}
.chain-seam {
  position: relative;
  flex: 0 0 58px;
}
.chain-seam::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 4px;
  left: 50%;
  border-left: 1px dashed var(--ink-2);
}
.chain-seam-note {
  margin: 32px 0 0;
  max-width: 76ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}
.chain-detail {
  margin-top: 26px;
  border-top: 1px solid var(--line);
}
.chain-detail > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  padding: 15px 0 0;
  list-style: none;
  cursor: pointer;
  font: 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.chain-detail > summary::-webkit-details-marker {
  display: none;
}
.chain-detail > summary::after {
  content: '+';
  font-size: 14px;
  line-height: 1;
}
.chain-detail[open] > summary::after {
  content: '–';
}
.chain-detail dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 56px;
  margin: 24px 0 4px;
  max-width: 1120px;
}
.chain-detail dt {
  margin-bottom: 5px;
  font: 600 16px/1.3 var(--font-display);
}
.chain-detail dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* Inside a page section that already has its own gutter and its own ground,
the rail uses the width it is given and brings no band with it. */
.enterprise-section .chain,
.editorial .chain {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}
@media (max-width: 900px) {
  .chain-rails {
    display: block;
  }
  .chain-line {
    display: block;
  }
  .chain-stage {
    padding: 12px 0 0;
  }
  .chain-stage + .chain-stage {
    margin-top: 12px;
  }
  .chain-seam {
    height: 30px;
  }
  .chain-seam::before {
    top: 15px;
    bottom: auto;
    left: 0;
    right: 0;
    border-left: 0;
    border-top: 1px dashed var(--ink-2);
  }
  .chain-detail dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* What the page stands behind (LIV-245): the argument on the left, one row per claim on the right.

Four columns of 13px grey text made the honest part of this page look like the small print. A claim
is worth more room than a footnote, so each gets a row of its own, at a size a reader meets rather
than squints at, with the page that proves it at the end of the row. */
.trust-strip {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.4fr);
  gap: 40px 76px;
  padding: 78px 5% 80px;
  border-top: 1px solid var(--line);
}
.trust-head h2 {
  max-width: 15ch;
}
.trust-footnote {
  margin: 24px 0 0;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}
.trust-strip ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-strip li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) max-content;
  column-gap: 20px;
  row-gap: 7px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.trust-strip li:last-child {
  border-bottom: 1px solid var(--line);
}
.trust-index {
  grid-area: 1 / 1;
  font: 11px/1.6 var(--font-mono);
  color: var(--ink-2);
}
.trust-strip b {
  grid-area: 1 / 2;
  font: 600 21px/1.3 var(--font-display);
}
.trust-detail {
  grid-area: 2 / 2;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.trust-strip a {
  grid-area: 1 / 3 / span 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.trust-strip a:hover {
  color: var(--ink);
}
@media (max-width: 1040px) {
  .trust-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .trust-head h2 {
    max-width: 22ch;
  }
}
@media (max-width: 700px) {
  .trust-strip li {
    grid-template-columns: 26px minmax(0, 1fr);
  }
  .trust-strip a {
    grid-area: 3 / 2;
    align-self: start;
  }
}
.hero .hero-package-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 20px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.hero .hero-third-audience {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.hero .hero-third-audience a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.hero .hero-third-audience .brand-arrow {
  width: 14px;
  height: 14px;
}
.hero .hero-package-link .brand-arrow {
  width: 14px;
  height: 14px;
  color: var(--amber);
}

/* The builder's package: one sheet per file format,
with its state. */
.package {
  padding: 96px 5%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--concrete);
  scroll-margin-top: 90px;
}
.package .section-top p {
  max-width: 360px;
}
.package-files {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.package-file {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.package-sheet {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 6px 22px 6px 6px;
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.package-sheet::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 0 6px;
  background: var(--surface-2);
}
.package-sheet svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.package-sheet b {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.02em;
}
.package-file:hover .package-sheet {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}
.package-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font: 600 9px var(--font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.package-state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: currentColor;
}
.is-today .package-state {
  background: var(--amber-soft);
  border-color: transparent;
  color: var(--amber-ink);
}
.is-today .package-state::before {
  background: var(--amber);
}
.is-concept .package-sheet {
  color: var(--ink-2);
}
.is-target .package-sheet {
  background: transparent;
  border-style: dashed;
  color: var(--ink-2);
}
.is-target .package-sheet::before {
  display: none;
}
.is-target .package-state {
  border-style: dashed;
}
.package-file h3 {
  font: 600 18px var(--font-body);
  letter-spacing: -0.006em;
  margin: 4px 0 0;
}
.package-file p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

@media (max-width: 950px) {
  .package-files {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 680px) {
  .package {
    padding: 60px 5% 64px;
  }
  .package .section-top {
    flex-direction: column;
    align-items: start;
    gap: 16px;
  }
  .package-files {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .package-sheet {
    transition: none;
  }
  .package-file:hover .package-sheet {
    transform: none;
  }
}

.expert-card-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
}
.expert-card-identity h3 {
  margin: 0 0 8px;
}
.expert-avatar {
  flex: 0 0 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: var(--amber-soft);
  color: var(--amber-ink);
  border-radius: 50%;
  font: 600 23px var(--font-display);
}
.expert-rating {
  font-size: 12px;
  color: var(--ink-2);
}
.expert-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.expert-tags span {
  padding: 6px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 11px;
}
.brief-entry .composer-attach {
  display: inline-flex;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: var(--radius-input);
  background: var(--bg);
  font-size: 12px;
  cursor: pointer;
}
.composer-attach input {
  width: 1px;
  height: 1px;
  opacity: 0;
  position: absolute;
}
.composer-attach:focus-within {
  outline: 1px solid var(--ink-2);
}
.composer-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-copy .brief-entry .composer-file-list button,
.maker-start .brief-entry .composer-file-list button {
  width: auto;
  padding: 5px 8px;
  background: var(--bg);
  font-size: 11px;
}
.hero .attachment-notice,
.maker-start .attachment-notice {
  font-size: 11px;
  margin: 8px 0;
}
header nav a {
  padding: 8px 10px;
  border-radius: var(--radius-card);
  transition:
    background 120ms,
    color 120ms;
}
header nav a:hover {
  background: var(--bg);
  color: var(--amber-ink);
}
header nav a:focus-visible {
  outline: 1px solid var(--ink-2);
  outline-offset: 2px;
}
.landing-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.hero-copy .brief-entry .landing-composer-actions > button,
.maker-start .brief-entry .landing-composer-actions > button {
  width: auto;
  padding: 12px 22px;
  margin: 0;
}
.brief-entry .landing-composer-actions .composer-attach {
  margin: 0;
}
.brief-entry .composer-attach::before {
  content: none;
}
.signup-banner {
  padding: 40px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
}
.signup-banner h2 {
  font-size: 26px;
}
.signup-banner p {
  margin-top: 12px;
  color: var(--ink-2);
}
.signup-banner .button {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .signup-banner {
    flex-direction: column;
    align-items: start;
  }
}

.brief-entry textarea:focus {
  outline: none;
  border-color: #88837b;
  box-shadow: 0 0 0 1px #88837b;
}

.roadmap-recent {
  margin: 0 0 28px;
  padding: 16px 20px;
  border: 1px solid var(--line, #dcddd5);
  border-radius: 10px;
}
.roadmap-recent h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}
.roadmap-recent ul {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 4px;
  font-size: 0.9rem;
}
.roadmap-recent time {
  font-variant-numeric: tabular-nums;
}
.roadmap-phase {
  margin-top: 56px;
}
.roadmap-phase > h3 {
  font-size: 26px;
  margin-bottom: 12px;
}
.roadmap-phase > p {
  color: #716e67;
  margin-bottom: 24px;
}
.design-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.design-creator {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}
.design-creator svg {
  width: 32px;
  height: 32px;
  color: var(--forest, #12392f);
}
.design-creator strong,
.design-creator small {
  display: block;
}
.design-creator strong {
  font-size: 13px;
}
.design-social {
  padding: 0 20px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.design-social button {
  background: var(--surface);
  border: 1px solid #d7d4ce;
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  cursor: pointer;
}
.design-social button:hover,
.design-social button[aria-pressed='true'] {
  background: #eeeae3;
  border-color: #88837b;
}
.design-social small,
.design-social p {
  font-size: 11px;
  color: #716e67;
}
.landing-nav {
  position: sticky;
  top: 12px;
  z-index: 100;
  margin: 12px 2%;
  width: 96%;
  height: 76px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 0 28px;
  gap: 28px;
  background: rgba(250, 249, 246, 0.96);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(14px);
}
.landing-nav nav {
  gap: 16px;
}
.composer-signup {
  display: inline-flex;
  margin-top: 16px;
  padding: 8px 2px;
  font-size: 13px;
  color: var(--ink-2);
  text-underline-offset: 5px;
}
.composer-signup:hover {
  color: var(--ink);
}
@media (max-width: 900px) {
  .landing-nav {
    padding: 10px 18px;
    height: auto;
    min-height: 70px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .landing-nav nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}
.hero-copy {
  background-image: radial-gradient(circle, #8b7f6714 0.7px, transparent 0.85px);
  background-size: 24px 24px;
}
.roadmap-phase > .upcoming-grid {
  background-image: radial-gradient(circle, #8b7f6710 0.65px, transparent 0.8px);
  background-size: 24px 24px;
}
.brief-entry > label {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.4px;
  line-height: 1.4;
}
.landing-nav {
  position: fixed;
  left: 2%;
  top: 12px;
  margin: 0;
  transition:
    height 0.25s,
    width 0.25s,
    left 0.25s,
    box-shadow 0.25s;
}
.landing-nav-space {
  height: 100px;
}
.landing-nav.is-scrolled {
  height: 62px;
  min-height: 62px;
  width: 92%;
  left: 4%;
  box-shadow: var(--shadow-float);
}
.landing-nav.is-scrolled .wordmark {
  font-size: 25px;
}
.landing-nav.is-scrolled .brand-house {
  width: 25px;
  height: 25px;
}
@media (max-width: 900px) {
  .landing-nav-space {
    height: 142px;
  }
  .landing-nav.is-scrolled {
    height: auto;
    min-height: 62px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-nav {
    transition: none;
  }
}
.landing-nav {
  border-color: transparent;
  background: rgba(250, 249, 246, 0.9);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(18px);
}
.landing-nav.is-scrolled {
  box-shadow: var(--shadow-float);
}
@media (min-width: 700px) and (max-width: 1000px) {
  .landing-nav {
    gap: 14px;
    flex-wrap: nowrap;
    padding: 0 18px;
  }
  .landing-nav .wordmark {
    font-size: 25px;
  }
  .landing-nav nav {
    gap: 10px;
    font-size: 10px;
  }
  .landing-nav .nav-cta {
    padding: 10px 12px;
    gap: 10px;
    white-space: nowrap;
  }
}
.card,
.design-card,
.price-card,
.upcoming-grid article,
.brief-entry,
.expert-card {
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}
.public-mobile-menu {
  display: none;
  position: relative;
}
.public-mobile-menu summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-size: 12px;
  border-radius: var(--radius-card);
}
.public-mobile-menu summary::-webkit-details-marker {
  display: none;
}
.public-mobile-menu nav {
  position: absolute;
  right: 0;
  top: 44px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  padding: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  border-radius: var(--radius-card);
}
.public-mobile-menu nav a {
  padding: 12px 14px;
  border-radius: var(--radius-input);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}
.public-mobile-menu nav a:hover {
  background: var(--bg);
}
.landing-nav {
  flex-wrap: nowrap;
  height: 76px;
  min-height: 76px;
}
.landing-nav > .wordmark {
  white-space: nowrap;
  flex-shrink: 0;
}
.landing-nav > .nav-cta {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}
.landing-nav > nav {
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media (max-width: 1050px) {
  header > .public-desktop-nav,
  .landing-nav > .public-desktop-nav {
    display: none;
  }
  .public-mobile-menu {
    display: block;
    margin-left: auto;
  }
  .landing-nav > .nav-cta {
    margin-left: 0;
  }
  .landing-nav,
  .landing-nav.is-scrolled {
    flex-wrap: nowrap;
  }
  .landing-nav-space {
    height: 100px;
  }
}
@media (max-width: 600px) {
  .landing-nav {
    gap: 6px;
    padding: 0 12px;
    height: 68px;
    min-height: 68px;
  }
  .landing-nav .wordmark,
  .landing-nav.is-scrolled .wordmark {
    font-size: 22px;
    letter-spacing: -1px;
  }
  .landing-nav .brand-house {
    width: 23px;
    height: 23px;
  }
  .landing-nav .nav-cta {
    padding: 10px;
    font-size: 10px;
    gap: 5px;
  }
  .public-mobile-menu summary {
    padding: 10px 6px;
    font-size: 11px;
  }
}
.brand-arrow {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
.lucide {
  stroke-width: 2;
}
.hero-copy {
  background-image: radial-gradient(rgba(83, 73, 54, 0.11) 0.85px, transparent 0.85px);
  background-size: 24px 24px;
}
.site-footer {
  background-color: #ece9e2;
  background-image:
    linear-gradient(rgba(91, 81, 61, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 81, 61, 0.065) 1px, transparent 1px);
  background-size: 28px 28px;
}
/* Quiet,
useful movement: arrive,
respond,
settle. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *,
  .expert-landing > h1 {
    animation: buildable-arrive 0.6s both;
  }
  .hero-copy > :nth-child(2) {
    animation-delay: 0.06s;
  }
  .hero-copy > :nth-child(3) {
    animation-delay: 0.12s;
  }
  .hero-copy > :nth-child(4) {
    animation-delay: 0.18s;
  }
  .button,
  .nav-cta,
  .price-card,
  .design-card {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      background-color 0.2s ease;
  }
  .button:hover,
  .nav-cta:hover {
    transform: translateY(-2px);
  }
  .button:active,
  .nav-cta:active {
    transform: translateY(0) scale(0.98);
  }
  .price-card:hover {
    transform: translateY(-3px);
  }
  @keyframes buildable-arrive {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(150px, 1fr));
  gap: 28px;
}
.footer-stack {
  display: grid;
  align-content: start;
  gap: 32px;
}
.footer-column h3 a {
  color: inherit;
  text-decoration: none;
}
.footer-column h3 a:hover {
  color: var(--amber);
}
.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-bottom nav a {
  color: inherit;
  text-decoration: none;
}
.footer-brand h2 {
  font-size: clamp(25px, 3vw, 38px);
}
.footer-brand p {
  max-width: 320px;
}
.espoo-link {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.espoo-link:hover {
  color: var(--amber-dark, #8b5700);
}
@media (max-width: 1200px) {
  /* The brand takes the full width back and the four groups keep their own columns. */
  .footer-top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1/-1;
  }
}
@media (max-width: 900px) {
  /* Family names read as two lines each below this, so two wider columns beat four narrow ones. */
  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .footer-bottom {
    flex-wrap: wrap;
    gap: 18px;
  }
}
@media (max-width: 460px) {
  /* One column only where two would not hold a link name; eight groups make a long list of it. */
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
  }
}
.login-options {
  max-width: 420px;
  display: grid;
  gap: 12px;
  margin: 30px 0;
}
.provider-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}
.provider-button:hover {
  background: #e8e5df;
}
.login-options form {
  display: grid;
  gap: 12px;
}
.login-options input {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
}
.login-options label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}
.login-options button {
  padding: 15px 20px;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--amber);
  color: var(--on-amber);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.login-options button:hover {
  background: var(--amber-hover);
}
.login-divider {
  text-align: center;
  color: var(--ink-2);
  font-size: 13px;
  margin: 8px;
}
/* A grounded,
high-contrast close to the page. */
.site-footer {
  background-color: #24241f;
  color: #f7f4ec;
  background-image:
    linear-gradient(rgba(247, 244, 236, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 244, 236, 0.045) 1px, transparent 1px);
}
.site-footer .wordmark,
.site-footer h2,
.site-footer .footer-column a {
  color: #f7f4ec;
}
.site-footer .footer-brand p,
.site-footer .footer-column h3,
.site-footer .footer-bottom {
  color: #bdbbb0;
}
.site-footer .footer-bottom {
  border-color: rgba(247, 244, 236, 0.18);
}
.site-footer a:hover,
.site-footer .footer-column a:hover {
  color: #f3aa2e;
}

.enterprise-plan {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  margin: 28px 0 0;
  padding: 44px;
  text-align: left;
  background: #252824;
  color: #f6f3eb;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.enterprise-plan .eyebrow {
  justify-content: flex-start;
  color: #c9b58b;
}
.enterprise-plan h3 {
  font: 600 38px var(--font-display);
  letter-spacing: -0.02em;
  margin: 12px 0 0;
}
.pricing .enterprise-plan p {
  max-width: none;
  margin: 0;
  color: #d1d0c7;
  font-size: 14px;
  line-height: 1.6;
}
.pricing .enterprise-plan .enterprise-lede {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: #f6f3eb;
}
.enterprise-points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.enterprise-points li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  align-items: start;
}
.enterprise-points li::before {
  content: '';
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px #e8951c26;
}
.enterprise-points h4 {
  font: 600 16px var(--font-display);
  margin: 0 0 4px;
  color: #f6f3eb;
}
.pricing .enterprise-points li > p {
  grid-column: 2;
}
.pricing .enterprise-plan .enterprise-note {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid #f6f3eb22;
  font-size: 12.5px;
  color: #a8a79c;
}
.enterprise-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.enterprise-figure {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.enterprise-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border: 1px solid #f6f3eb22;
  border-radius: var(--radius-card);
  background: #1e211d;
}
.enterprise-offer strong {
  display: block;
  font: 600 17px var(--font-display);
  color: #f6f3eb;
}
.pricing .enterprise-plan .enterprise-offer p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #a8a79c;
}
.enterprise-plan .button {
  margin: 0;
  color: #201e19;
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .enterprise-plan {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px;
  }
}
@media (max-width: 700px) {
  .enterprise-plan {
    padding: 24px;
  }
  .enterprise-plan h3 {
    font-size: 30px;
  }
  .enterprise-offer {
    flex-direction: column;
    align-items: stretch;
  }
  .enterprise-plan .button {
    justify-content: center;
  }
}

/* Keep the navigation action subordinate to the hero CTA. */
.landing-nav .nav-cta {
  min-height: 44px;
  padding: 0 18px;
  font-size: 13px;
  gap: 10px;
}
.landing-nav .nav-cta svg {
  width: 18px;
  height: 18px;
}

.catalog-illustration {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  /* Two cards to a row makes each one wide, and an uncapped 3:2 crop then runs to 400px of
     illustration above four lines of text. The crop is the card, not the subject. */
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius-card);
  margin: 24px 0;
}
.roadmap-illustration {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: var(--radius-card);
  margin-bottom: 20px;
}

/* Design details share the public navigation and action hierarchy. */
.design-breadcrumb {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--ink-2);
}
.design-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.design-actions .button {
  margin: 0;
}
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.secondary-button:hover {
  background: var(--surface-2);
}
.secondary-button:focus-visible {
  outline: 2px solid var(--ink-2);
  outline-offset: 3px;
}
.share-notice {
  flex-basis: 100%;
  margin: 0;
  max-width: 32rem;
}
@media (max-width: 640px) {
  .design-actions {
    width: 100%;
  }
  .design-actions > a,
  .design-actions > button {
    width: 100%;
    box-sizing: border-box;
  }
}
.design-actions .secondary-button {
  font-size: 12px;
  font-weight: 600;
  min-height: 52px;
}
.enterprise-page {
  max-width: 1320px;
  margin: auto;
  padding: 64px 5% 80px;
}
.enterprise-page h1 {
  font: 700 clamp(38px, 4.8vw, 64px)/1.08 var(--font-display);
  letter-spacing: -0.045em;
  margin: 24px 0;
}
.enterprise-page h2 {
  font: 600 clamp(28px, 3vw, 42px)/1.15 var(--font-display);
  letter-spacing: -0.035em;
  margin: 18px 0 28px;
}
.enterprise-page h3 {
  font-size: 20px;
  line-height: 1.35;
}
.enterprise-page p,
.enterprise-page li {
  line-height: 1.75;
}
.enterprise-page .lead {
  font-size: 20px;
  color: var(--ink-2);
}
.enterprise-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}
.enterprise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 28px 0 18px;
}
.enterprise-actions .button {
  margin: 0;
}
.enterprise-actions .secondary-button {
  font-size: 12px;
  font-weight: 600;
  min-height: 52px;
}
.enterprise-note {
  font-size: 13px;
  color: var(--ink-2);
}
.factory-preview {
  background: var(--concrete);
  border-radius: var(--radius-card);
  padding: 28px;
}
.factory-preview div {
  border-top: 1px solid #29271f20;
  padding: 18px 0;
}
.factory-preview b,
.factory-preview span {
  display: block;
}
.factory-preview span {
  font-size: 13px;
  margin-top: 8px;
  color: var(--ink-2);
}
.factory-preview > p:last-child {
  font-size: 14px;
}
.enterprise-section {
  margin-top: 90px;
}
.enterprise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.enterprise-grid article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px;
}
.enterprise-grid p,
.enterprise-grid li {
  font-size: 15px;
  color: var(--ink-2);
}
.enterprise-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* The quiet register's ground: an evidence surface, not a decorative panel. */
.enterprise-dark {
  background: var(--ground);
  color: var(--on-ground);
  border-radius: var(--radius-card);
  padding: 40px;
}
.enterprise-dark p {
  max-width: 850px;
  color: var(--on-ground-2);
}
.enterprise-dark a {
  color: var(--amber);
}
.enterprise-contact {
  padding: 40px;
  background: var(--concrete);
  border-radius: var(--radius-card);
}
@media (max-width: 800px) {
  .enterprise-hero,
  .enterprise-grid {
    grid-template-columns: 1fr;
  }
  .enterprise-page {
    padding-top: 36px;
  }
  .enterprise-section {
    margin-top: 54px;
  }
  .enterprise-dark,
  .enterprise-contact {
    padding: 24px;
  }
}
.secondary-button {
  text-decoration: none;
}

/* Programmatic access explainer under the plan grid. */
.developer-access {
  display: grid;
  grid-template-columns: minmax(0, 38ch) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  margin: 28px 0 0;
  padding: 44px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
/* The drawing carries type as small as 8px, so it is never scaled below its own size: on a
   narrow screen it pans instead of shrinking into illegibility. */
.developer-figure {
  justify-self: end;
  width: 100%;
  max-width: 700px;
  overflow-x: auto;
}
.developer-figure img {
  display: block;
  width: 700px;
  height: auto;
}
.developer-access .eyebrow {
  justify-content: flex-start;
}
.developer-access h3 {
  font: 600 32px var(--font-display);
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  max-width: 24ch;
}
.pricing .developer-access p {
  max-width: 78ch;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}
.developer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 2px;
}
.developer-link:hover {
  color: var(--amber-dark, #8b5700);
}

@media (max-width: 1000px) {
  .developer-access {
    /* minmax(0, …) rather than 1fr: a bare 1fr refuses to go below the figure's 700px
       min-content width, and the whole page scrolls sideways instead of the figure. */
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 32px;
  }
  .developer-access h3 {
    max-width: none;
  }
}
@media (max-width: 700px) {
  .developer-access {
    padding: 24px;
  }
}

header nav a[aria-current='page'] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--amber, #c8862b);
}
.brief-entry .button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.upcoming article[data-status='live'] {
  border-color: #2f7a44;
}
.upcoming article[data-status='live'] > small:first-of-type {
  color: #2f7a44;
  font-weight: 600;
}
.upcoming article[data-status='next'] > small:first-of-type {
  color: #7a5a12;
  font-weight: 600;
}
.roadmap-here {
  color: var(--ink-2);
  font-style: italic;
}

/* Public collection directory: only currently usable authored examples. */
.library-directory {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 28px 80px;
}
.library-heading {
  max-width: 800px;
  margin: 48px 0 58px;
}
.library-heading h1 {
  font-size: clamp(38px, 5vw, 68px);
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin: 20px 0;
}
.library-heading > p {
  max-width: 650px;
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink-2);
}
.library-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.library-section-label h2 {
  font-size: 20px;
  margin: 0;
}
.library-section-label > span {
  font-size: 13px;
  color: var(--ink-2);
}
.library-collection {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}
.library-collection-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  padding: 36px;
}
.library-status {
  display: inline-block;
  padding: 7px 11px;
  border-radius: var(--radius-card);
  font-size: 12px;
  background: #e7eddf;
  color: #33452b;
}
.library-collection-intro h2 {
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.035em;
  margin: 22px 0 16px;
}
.library-directory p {
  line-height: 1.65;
}
.library-collection-intro p,
.library-starting-points > p,
.library-scope p,
.library-next p {
  color: var(--ink-2);
}
.library-collection-intro figure {
  margin: 0;
  align-self: center;
}
.library-collection-intro img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
.library-collection-intro figcaption {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 10px;
}
.library-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0 0;
}
.library-facts dt {
  font-size: 11px;
  color: var(--ink-2);
  margin-bottom: 5px;
}
.library-facts dd {
  font-size: 13px;
  margin: 0;
}
.library-starting-points {
  padding: 30px 36px 36px;
  border-top: 1px solid var(--line);
}
.library-starting-points h3,
.library-scope h3 {
  margin: 0 0 8px;
  font-size: 19px;
}
.library-starting-points > p {
  font-size: 14px;
  margin: 0 0 24px;
}
.library-design-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.library-design {
  display: block;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
}
.library-design:hover {
  border-color: var(--ink-2);
}
.library-design:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.library-design-style {
  font-size: 11px;
  color: var(--ink-2);
}
.library-design h4 {
  font-size: 20px;
  margin: 14px 0 8px;
  letter-spacing: -0.02em;
}
.library-design p {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 22px;
}
.library-design-link,
.library-next a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.library-design-link svg,
.library-next a svg {
  width: 17px;
  height: 17px;
}
.library-scope {
  padding: 26px 36px;
  border-top: 1px solid var(--line);
  background: #efece580;
}
.library-scope p {
  max-width: 950px;
  font-size: 14px;
  margin: 0;
}
.library-next {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 70px;
  padding: 62px 0 0;
}
.library-next h2 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.library-next p {
  font-size: 15px;
}
.library-capabilities {
  border-left: 1px solid var(--line);
  padding-left: 36px;
}
.library-capabilities h3 {
  margin-top: 0;
  font-size: 19px;
}
.library-capabilities strong {
  color: var(--ink);
  font-weight: 500;
}
@media (max-width: 900px) {
  .library-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .library-collection-intro {
    grid-template-columns: 1fr;
  }
  .library-collection-intro figure {
    max-width: 600px;
  }
  .library-next {
    gap: 32px;
  }
}
@media (max-width: 600px) {
  .library-directory {
    padding: 24px 18px 48px;
  }
  .library-heading {
    margin: 30px 0 40px;
  }
  .library-heading > p {
    font-size: 18px;
  }
  .library-section-label {
    display: block;
  }
  .library-section-label > span {
    display: block;
    margin-top: 8px;
  }
  .library-collection-intro,
  .library-starting-points,
  .library-scope {
    padding: 24px 20px;
  }
  .library-design-grid,
  .library-next {
    grid-template-columns: 1fr;
  }
  .library-next {
    padding-top: 40px;
  }
  .library-capabilities {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
.library-nav {
  gap: 24px;
}
.library-nav > .wordmark {
  flex-shrink: 0;
  white-space: nowrap;
}
.library-nav > .nav-cta {
  flex-shrink: 0;
  white-space: nowrap;
}
.library-nav .public-mobile-menu {
  z-index: 2;
}
@media (max-width: 600px) {
  .library-nav {
    padding: 0 12px;
    gap: 8px;
    height: 68px;
  }
  .library-nav .wordmark {
    font-size: 22px;
    letter-spacing: -1px;
  }
  .library-nav .brand-house {
    width: 23px;
    height: 23px;
  }
  .library-nav .nav-cta {
    padding: 10px;
    gap: 6px;
    font-size: 10px;
    margin-left: 0;
  }
}

/* The planned families: named, with their status, and no box implying they can be opened. */
/* The families this page cannot draw yet: a register, not five unfinished cards.

A card is mostly its picture, so a card without one is a title and a line of grey inside a box the
size of a photograph. Five of those crowded out the four families a visitor can actually look at,
and the grid ended on a half-empty row. These rows carry the same name, the same status word and
the same link, in the shape the content actually has. */
.catalog-list {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.catalog-list a {
  display: grid;
  grid-template-columns: 118px minmax(0, 21ch) minmax(0, 1fr) max-content 16px;
  align-items: center;
  gap: 22px;
  padding: 17px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.catalog-list a:hover {
  background: var(--concrete);
}
.catalog-list-index {
  font: 10px var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.catalog-list b {
  font: 600 16px/1.3 var(--font-body);
}
.catalog-list-what {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.catalog-list-refuses {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
}
.catalog-list .brand-arrow {
  width: 15px;
  height: 15px;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .catalog-list a {
    /* A status like "Sized from a published guide" is as wide as the name beside it on a phone,
       so the row becomes four lines rather than two columns fighting for 350px. */
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 18px 4px;
  }
  .catalog-list b,
  .catalog-list-what,
  .catalog-list .pill {
    grid-column: 1;
  }
  .catalog-list .pill {
    justify-self: start;
  }
  .catalog-list .brand-arrow {
    display: none;
  }
}
.catalog-planned {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.catalog-planned h3 {
  font: 600 10px var(--font-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.catalog-planned ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 32px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.catalog-planned li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.catalog-planned li b {
  font-size: 14px;
  font-weight: 600;
}
.catalog-planned li span {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-2);
}
.catalog-planned > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--amber, #c8862b);
  padding-bottom: 2px;
}
.catalog-planned > a:hover {
  color: var(--amber-ink);
}

/* One door to the engine page, where the three-part explainer that stood here now lives alone. */
.package-engine-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--amber, #c8862b);
  padding-bottom: 3px;
}
.package-engine-link:hover {
  color: var(--amber-ink);
}

/* The gallery's two exits: the whole library, and the projects you already have. */
.gallery-policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 14px;
}

/* A drawn family figure sits in the illustration's place, in the card's own paper tone. */
.catalog-figure {
  padding: 20px 24px;
  background: var(--surface-2);
}

/* The engine page, drawn (LIV-270).
The three things that page explained in prose — one generation, the six check classes, and what a
result may say — are a flow, a grid and a set of chips. Colour means one thing throughout: green is
a pass and red is a failure, and every other state is deliberately neutral, because a state that is
neither should not look like either. */
.engine-glyph {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--ink-2);
}

/* One generation, on one line, with the wall between proposing and producing drawn. */
.engine-flow {
  margin: 32px 0 8px;
}
.engine-flow-line {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.engine-stage {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 18px 0;
  border-top: 3px solid var(--ink);
  font-size: 13px;
}
.engine-stage b {
  font: 600 15px/1.3 var(--font-display);
}
.engine-stage span {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* What a model may touch is drawn lighter than what a result can be reproduced from. */
.engine-stage-proposes {
  border-top-style: dashed;
  border-top-color: var(--ink-2);
}
.engine-pinned {
  font: 10px/1.6 var(--font-mono);
  color: var(--ink-2);
  border-top: 1px dotted var(--line);
  padding-top: 6px;
}
.engine-wall {
  flex: 0 0 auto;
  width: 26px;
  position: relative;
  border-top: 3px solid transparent;
}
.engine-wall::before {
  content: '';
  position: absolute;
  top: -3px;
  bottom: 12px;
  left: 12px;
  border-left: 2px solid var(--ink);
}
.engine-wall span {
  position: absolute;
  top: 6px;
  left: 12px;
  transform: rotate(90deg);
  transform-origin: 0 0;
  white-space: nowrap;
  font: 10px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.engine-flow figcaption,
.engine-flow-note {
  margin: 20px 0 0;
  max-width: 90ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* The six classes, each carrying the states it is allowed to emit. */
.engine-classes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 28px 0 8px;
}
.engine-class {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.engine-class-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.engine-class h3 {
  margin: 0;
  font: 600 17px/1.3 var(--font-body);
  letter-spacing: -0.006em;
}
.engine-determinism {
  margin: 2px 0 0;
  font: 10px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.engine-reads {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.engine-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.engine-pill {
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font: 600 11px/1.4 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: var(--surface);
  white-space: nowrap;
}
.engine-pass {
  color: var(--level);
  border-color: var(--level);
  background: var(--level-soft);
}
.engine-fail {
  color: var(--redline);
  border-color: var(--redline);
  background: var(--redline-soft);
}
.engine-stale {
  border-style: dashed;
}
.engine-none {
  border-style: dotted;
}
.engine-example {
  margin: 0;
  font-size: 12px;
  color: var(--ink-2);
}
.engine-example code {
  font-size: 12px;
}

/* What a result can say: the chip, who may say it, and what it means. */
.engine-states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 28px 0 8px;
}
.engine-state {
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.engine-state .engine-pill {
  display: inline-block;
}
.engine-state-who {
  margin: 10px 0 0;
  font: 10px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.engine-state-means {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

/* From a published source to a result someone stands behind. The steps not yet walked are outlined. */
.engine-path ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.engine-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
  border-top: 3px solid var(--ink);
  background: var(--surface);
}
.engine-step b {
  font: 600 15px/1.3 var(--font-display);
}
.engine-step-n {
  font: 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.engine-step-what {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* Not reached: nothing is qualified anywhere yet, and the drawing says so rather than implying it. */
.engine-step-ahead {
  border-top-style: dashed;
  border-top-color: var(--ink-2);
  background: none;
  opacity: 0.72;
}
@media (max-width: 860px) {
  .engine-flow-line {
    display: block;
  }
  .engine-stage {
    border-top-width: 2px;
    padding-right: 0;
  }
  .engine-wall {
    width: auto;
    height: 34px;
  }
  .engine-wall span {
    transform: none;
    left: 0;
  }
  .engine-wall::before {
    left: 0;
    top: 0;
    bottom: 0;
  }
}

/* What a catalog card's status pill means, said in words under the tagline. Quieter than the
   tagline, because it is a limit rather than an invitation, and never quieter than legible. */
.catalog-limit {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}
.card.featured .catalog-limit {
  color: var(--ink-2);
}
/* The family's own first limit on its card (CNM-16), and how many more the registry states. */
.catalog-refuses {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}
.catalog-refuses b {
  color: var(--ink);
  font-weight: 600;
}
.catalog-refuses small {
  display: block;
  margin-top: 2px;
}

/* The two doors in the hero, and the sections the founders' stance of 12 September 2026 added.

The hero used to end in a brief box, which addressed the person designing their own house. These
are the two markets the product is sold to: the kit maker and the engineer who signs. A door is a
card with a job in it, not a button, because each one is a claim the reader has to weigh. */
.hero-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0 26px;
}
.hero-door {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.hero-door:hover {
  border-color: var(--ink);
  background: var(--concrete);
}
.hero-door b {
  font: 600 19px/1.25 var(--font-display);
}
.hero-door small {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.hero-door .brand-arrow {
  width: 15px;
  height: 15px;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .hero-doors {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The brief box in its own section, below the catalog, under a heading that says who it is for. */
.maker-start {
  padding: 96px 5%;
  border-top: 1px solid var(--line);
}
.maker-start > .brief-entry {
  max-width: 640px;
}
.maker-start .composer-signup {
  margin-top: 18px;
}
/* The three systems that come first. A card here is a claim about order, so it carries the family's
   own status pill and names the kit behind it; the registry decides both. */
.first-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  counter-reset: first-package;
}
.first-packages a {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.first-packages a:hover {
  border-color: var(--ink);
}
.first-packages h3 {
  margin: 0;
  font: 600 22px/1.15 var(--font-display);
}
.first-packages .pill {
  justify-self: start;
}
.first-packages p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.first-package-behind {
  font: 10px/1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .first-packages {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* What is actually sold: two licences, side by side, above the individual ladder. */
.licence-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0 12px;
}
.licence-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.licence-card h3 {
  margin: 16px 0 0;
  font: 600 26px/1.1 var(--font-display);
}
.pricing .licence-card p {
  margin: 12px 0 0;
  max-width: none;
  font-size: 14px;
}
.licence-card ul {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 18px 0 22px;
  font-size: 14px;
  line-height: 1.6;
}
.licence-card li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.licence-card .button {
  justify-content: center;
  margin: 0;
}
/* The four doors that replaced the pricing panels on the landing page: one line each, with the
   page that owns the subject behind it. */
.pricing-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.pricing-doors li {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.pricing-doors b {
  font: 600 19px/1.2 var(--font-display);
  margin-bottom: 16px;
}
.pricing-doors a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  align-self: flex-start;
}
.pricing-ladder-top {
  margin-top: 74px;
}
.pricing-ladder-top h3 {
  margin: 6px 0 0;
  font: 600 32px/1.05 var(--font-display);
  letter-spacing: -0.02em;
}
/* How a company's balance is shaped. No price, for the reason the note gives. */
.company-pool {
  margin: 34px 0 0;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--concrete);
}
.company-pool h3 {
  margin: 12px 0 0;
  font: 600 26px/1.1 var(--font-display);
}
.pricing .company-pool p {
  max-width: 78ch;
}
.pricing .company-pool .pool-note {
  font-size: 13px;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .licence-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The expert section with nobody verified in it: no filters, and the candidates named as such. */
.expert-pilot {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.expert-pilot h3 {
  margin: 0;
  font: 600 24px/1.15 var(--font-display);
}
.expert-pilot > p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.expert-pilot-label {
  margin: 24px 0 12px;
  font: 600 11px/1.4 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Public editorial artwork stays distinct from geometry-derived product previews. */
.editorial-image { display:block; width:100%; height:auto; border-radius:var(--radius-card); }
.audience-illustration { max-width:1000px; margin:48px auto 64px; }
.system-illustration { margin:0 0 8px; }
.system-illustration figcaption, .image-caption, .roadmap-intro figcaption { font-size:11px; line-height:1.5; color:var(--ink-2); margin-top:8px; }
.first-packages a { grid-template-rows:auto auto auto 1fr auto; }
.roadmap-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,360px); gap:40px; align-items:center; margin-bottom:28px; }
.roadmap-intro h3 { font-size:26px; margin:0 0 12px; }
.roadmap-intro p { color:var(--ink-2); max-width:540px; }
.roadmap-intro figure { margin:0; }
.roadmap-intro .editorial-image { aspect-ratio:3/2; object-fit:cover; }
@media(max-width:720px) { .roadmap-intro { grid-template-columns:minmax(0,1fr); gap:16px; } .roadmap-intro figure { max-width:420px; } }

/* Secondary reference material opens on demand; existing section links remain available. */
.landing-details { margin: 24px 0; }
.landing-details > summary { cursor: pointer; padding: 20px 0; font-size: 20px; font-weight: 600; border-block: 1px solid var(--line); }
.landing-details[open] > summary { margin-bottom: 24px; }
.landing-details:not([open]) { padding-block: 0; }

[id^="catalog-"] { scroll-margin-top: 120px; }

/* The prompt is the first action, beside the model and before audience links. */
.hero .hero-copy { padding-top: 40px; padding-bottom: 36px; }
.hero .hero-copy > p { margin-bottom: 20px; }
.hero .hero-brief { margin: 22px 0; width: 100%; box-sizing: border-box; border: 2px solid var(--ink); background: var(--surface); box-shadow: 0 8px 28px #0000000a; }
.hero .hero-brief textarea { min-height: 100px; font-size: 17px; }
.hero .hero-brief .hint { font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.hero .hero-doors { margin-top: 20px; }
.hero .hero-doors .hero-door { padding: 12px; }

/* Nordform application: quiet paper, forest anchors and lighter editorial type. */
.hero-copy, .catalog-more, .roadmap-phase > .upcoming-grid { background-image: none; }
.hero h1, .hero h1 em, .enterprise-page h1, .library-heading h1 { font-weight: 500; }
h2, .enterprise-page h2 { font-weight: 500; }
.site-footer { background-color: var(--forest); background-image: none; }
.site-footer a:hover, .site-footer .footer-column a:hover { color: var(--sage); }
.site-footer .footer-brand p, .site-footer .footer-column h3, .site-footer .footer-bottom { color: #c2cfc0; }
.enterprise-plan, .enterprise-dark { background: var(--forest); }
.enterprise-plan .button { background: var(--sage); color: var(--forest); }
.enterprise-plan .button:hover { background: #d3dec5; }
.enterprise-contact, .factory-preview { background: var(--action-soft); }
.consumer-layers input { accent-color: var(--action); }

/* Closer to Nordform: the canonical forest is a surface, not only an accent. */
.landing-nav, .landing-nav.is-scrolled {
  top: 0; left: 0; width: 100%; border-radius: 0; margin: 0;
  background: var(--bg); border: 0; border-bottom: 1px solid var(--line);
  box-shadow: none; backdrop-filter: none;
}
.landing-nav-space { height: 76px; }
.hero, .hero-copy { background: var(--forest); }
.hero-copy { color: var(--surface); }
.hero h1 { color: var(--surface); font-weight: 400; }
.hero h1 em { color: var(--sage); font-weight: 400; }
.hero-copy > p, .hero-copy > .eyebrow { color: #D7DFD3; }
.hero-copy > .eyebrow > span { background: var(--sage); }
.hero-deliverables { color: #D7DFD3; }
.hero-deliverables span { border-color: #688274; }
.hero-copy > .brief-entry { color: var(--ink); box-shadow: none; }
.hero-copy .brief-entry p { color: var(--ink-2); }
.hero-copy .brief-entry .attachment-notice { color: var(--redline); }
.hero-copy > .composer-signup { color: var(--sage); }
.hero-copy > .composer-signup:hover { color: var(--surface); }
.hero-model { border: 0; border-radius: 12px; }
.ticker { background: var(--sage); color: var(--forest); border: 0; }
@media(max-width:699px) { .landing-nav-space { height: 68px; } }

/* Current main also has audience cards and measured results below the brief. */
.hero .hero-copy > p, .hero .hero-package-link, .hero .hero-third-audience { color: #d7dfd3; }
.hero .hero-third-audience a, .hero .hero-package-link .brand-arrow { color: var(--sage); }
.hero .hero-measure, .hero .hero-measure-empty { color: var(--surface); }
.hero .hero-measure small, .hero .hero-measure-empty small { color: #d7dfd3; }
.hero .hero-brief { border-color: var(--line); }

/* Shared Nordform family: paper, forest, deliberate headings and a quieter path into the work. */
.hero h1 { font-weight:600; letter-spacing:-.045em; line-height:1.08; }
.hero-copy > p { max-width:36rem; }
.hero-brief { border-radius:10px; box-shadow:none; }
.workspace-journey { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; max-width:1440px; margin:0 auto; padding:64px 5%; border-bottom:1px solid var(--line); }
.workspace-journey article { border-top:1px solid var(--line); padding-top:18px; }
.workspace-journey article > span { color:var(--ink-2); font:12px var(--font-mono); }
.workspace-journey h2 { font-size:23px; font-weight:600; letter-spacing:-.025em; margin:14px 0; }
.workspace-journey p { color:var(--ink-2); line-height:1.65; max-width:34em; }
@media(max-width:760px) { .workspace-journey {grid-template-columns:1fr; gap:22px; padding:36px 6%;} }

/* Pro's charcoal desk, as the workspace draws it: the preview promises the room you step into. */
.workspace-preview-bar { position:absolute; z-index:2; inset:0 0 auto; height:48px; display:flex; align-items:center; gap:18px; padding:0 20px; border-bottom:1px solid #41433c; background:#20211f; color:#eeeee9; font:12px var(--font-body); }
.workspace-preview-bar > span:not(.workspace-preview-mode) { color:#b1b3aa; }
.workspace-preview-bar .buildable-lockup { font-size:16px; }
.workspace-preview-mode {margin-left:auto;border:1px solid #41433c;border-radius:5px;padding:4px 8px;color:#d6dfcf;}
.hero-model .viewer {top:48px;height:calc(100% - 48px);}
.hero-model .model-tag {top:64px;}
/* Generated pages: the wider Nordform Group lockup must not push the navigation onto two lines. */
body > header > .wordmark { font-size: 24px; }
/* The Nordform Group lockup is wider than the old wordmark: keep the workspace button on a phone. */
@media (max-width: 520px) {
  .landing-nav .wordmark, .landing-nav.is-scrolled .wordmark, .public-nav .wordmark, body > header > .wordmark { font-size: 17px; letter-spacing: 0; }
  .landing-nav .buildable-lockup > .brand-house, .public-nav .buildable-lockup > .brand-house, body > header .buildable-lockup > .brand-house { width: 1.2em; height: 1.2em; margin-right: 0; }
  .landing-nav > .nav-cta, .public-nav > .nav-cta, body > header > .nav-cta { padding: 0 10px; font-size: 12px; gap: 5px; }
}

.disclosure-heading { margin: 0 0 12px; font: inherit; font-weight: 600; line-height: 1.5; }

/* Customer continuity: a service ambition, tested through scoped assignments. */
.nf-continuity { padding: clamp(64px, 9vw, 144px) max(24px, 6vw); background: #f0eee8; color: #171819; }
.nf-continuity h2 { max-width: 1000px; font-size: clamp(36px, 5.5vw, 78px); line-height: 1.08; letter-spacing: -.04em; }
.nf-continuity-lead { font-size: clamp(20px, 2vw, 28px); margin: 28px 0 48px; }
.nf-continuity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin: 40px 0; }
.nf-continuity-grid article { border-top: 1px solid #aaa89f; padding-top: 20px; }
.nf-continuity-grid span { font-size: 11px; letter-spacing: .12em; }
.nf-continuity-grid h3 { font-size: 25px; margin: 22px 0 12px; }
.nf-continuity-grid p, .nf-continuity-note { max-width: 660px; line-height: 1.65; }
.nf-continuity-note { margin-bottom: 28px; }
.nf-pace { background: #fbfaf7; }
.nf-pace .nf-continuity-lead { max-width: 900px; line-height: 1.5; }
@media (max-width: 720px) { .nf-continuity-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Connect, drawn (packages/ui/src/connect-flow.mjs), on the line sheet (brand book 8.2): hairlines,
   mono labels, a rail that is dashed where something is proposed and solid where it is kept or
   accepted, and copper only on the one step that changes a design. One column at every width, so
   nothing is shrunk to fit a phone; the record each step leaves moves under it below 720 px. */
.cflow {
  --cflow-ink: #30383d;
  --cflow-pencil: #606970;
  --cflow-mist: #8a9297;
  --cflow-hair: rgba(48, 56, 61, 0.14);
  --cflow-copper: #c77745;
  margin: 36px 0 40px;
  padding-top: 18px;
  border-top: 1px solid var(--cflow-hair);
}
.cflow-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cflow-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 190px;
  gap: 0 20px;
  padding: 0 0 26px;
}
/* The rail: one segment per step, from its index down to the next one; the last runs beside its
   own text, so the accepted, copper end of the drawing is drawn and not only implied. */
.cflow-step::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 2px;
  border-left: 1px solid var(--cflow-mist);
}
.cflow-step:last-child::before {
  bottom: 26px;
}
.cflow-proposed::before {
  border-left-style: dashed;
}
.cflow-accepted::before {
  border-left: 1.5px solid var(--cflow-ink);
}
.cflow-change::before {
  border-left-color: var(--cflow-copper);
}
.cflow-index {
  font: 400 11px/26px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--cflow-pencil);
}
.cflow-change .cflow-index {
  color: var(--cflow-copper);
}
.cflow-body {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: start;
}
.cflow-body > b {
  font: 500 17px/26px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--cflow-ink);
}
.cflow-body > span,
.cflow-body > ul,
.cflow-body > .cflow-planned {
  grid-column: 2;
}
.cflow-body > b:first-child {
  grid-column: 1 / -1;
}
.cflow-body > span {
  font-size: 15px;
  line-height: 1.6;
  color: var(--cflow-pencil);
}
.cflow-glyph {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--cflow-pencil);
}
.cflow-change .cflow-glyph {
  color: var(--cflow-copper);
}
.cflow-record {
  font: 400 11px/26px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cflow-pencil);
  border-top: 1px solid var(--cflow-hair);
  align-self: start;
}
.cflow-change .cflow-record {
  color: var(--cflow-ink);
  border-top-color: var(--cflow-copper);
}
.cflow-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cflow-branches {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cflow-pencil);
}
.cflow-branches li {
  padding: 6px 0 6px 18px;
  border-top: 1px dashed var(--cflow-hair);
  position: relative;
}
.cflow-branches li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 10px;
  border-top: 1px dashed var(--cflow-mist);
}
.cflow-branches b {
  font-weight: 500;
  color: var(--cflow-ink);
}
/* The other firm's three answers: one frosted grid of hairline cells that share their borders. */
.cflow-fork {
  grid-template-columns: 44px minmax(0, 1fr);
}
.cflow-answers {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cflow-hair);
  border-left: 1px solid var(--cflow-hair);
}
.cflow-answer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
  border-right: 1px solid var(--cflow-hair);
  border-bottom: 1px solid var(--cflow-hair);
  background: rgba(250, 250, 247, 0.58);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.cflow-answer > b {
  font: 500 16px/1.3 var(--font-display);
  color: var(--cflow-ink);
  padding-top: 8px;
  border-top: 1px dashed var(--cflow-mist);
}
.cflow-answer.cflow-accepted > b {
  border-top: 1.5px solid var(--cflow-ink);
}
.cflow-answer > span:not(.cflow-record) {
  font-size: 14px;
  line-height: 1.55;
  color: var(--cflow-pencil);
}
.cflow-answer .cflow-record {
  margin-top: auto;
  border-top: 0;
}
.cflow-planned {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--cflow-mist);
  font-size: 14px;
  line-height: 1.55;
  color: var(--cflow-pencil);
}
.cflow-planned-tag {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cflow-ink);
  margin-right: 6px;
}
.cflow-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 4px 0 0 64px;
  font: 400 11px/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cflow-pencil);
}
.cflow-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  white-space: nowrap;
}
.cflow-key {
  display: inline-block;
  width: 22px;
  border-top: 1px solid var(--cflow-mist);
}
.cflow-key-proposed {
  border-top-style: dashed;
}
.cflow-key-accepted {
  border-top: 1.5px solid var(--cflow-ink);
}
.cflow-key-change {
  border-top: 1.5px solid var(--cflow-copper);
}
.cflow figcaption {
  margin: 14px 0 0 64px;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cflow-pencil);
}
@media (max-width: 720px) {
  .cflow-step {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 12px;
  }
  .cflow-step > .cflow-record {
    grid-column: 2;
    margin: 10px 0 0 34px;
  }
  .cflow-answers {
    grid-template-columns: minmax(0, 1fr);
  }
  .cflow-legend,
  .cflow figcaption {
    margin-left: 44px;
  }
}
@media (max-width: 420px) {
  .cflow-legend,
  .cflow figcaption {
    margin-left: 0;
  }
}

/* The same drawing on How we work and the product page (packages/ui/src/work-flows.mjs). */
.hw-flow {
  margin-top: 56px;
}
.hw-flow .cflow {
  margin-top: 14px;
}
.studio-week-flow .cflow {
  margin-bottom: 0;
}

/* Security page: one shield banner, a grid of large protection stamps, and open certification stamps. */
.security-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 8px 0 40px;
  padding: 28px 28px;
  border-radius: 10px;
  background: var(--ground, #141517);
  color: var(--on-ground, #fff);
}
.security-hero .stamp-glyph {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  color: #f47752;
}
.security-hero p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.45;
  color: inherit;
}
.security-stamps,
.cert-stamps {
  list-style: none;
  margin: 24px 0 40px;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.security-stamp {
  margin: 0;
  padding: 24px 20px 20px;
  border: 1px solid var(--line, #e0e1df);
  border-radius: 10px;
  background: var(--surface, #fff);
  text-align: center;
}
.security-stamp h3 {
  margin: 16px 0 6px;
  font-size: 1.05rem;
}
.security-stamp p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2, #686b6e);
}
/* The seal itself: a double ring with the icon and a short mark, set at a slight angle like a rubber stamp. */
.stamp-seal {
  width: 164px;
  height: 164px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid currentColor;
  box-shadow:
    inset 0 0 0 5px var(--surface, #fff),
    inset 0 0 0 7px currentColor;
  color: var(--action-ink, #a4381d);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transform: rotate(-6deg);
}
.stamp-seal .stamp-glyph {
  width: 52px;
  height: 52px;
}
.stamp-seal b {
  max-width: 124px;
  font-size: 0.95rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.cert-stamp {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px dashed var(--line, #e0e1df);
  border-radius: 10px;
}
.cert-stamp > span:last-child {
  color: var(--ink-2, #686b6e);
}
/* A programme, not a certificate: dashed ring, ink colour, the state written on its face. */
.stamp-seal-open {
  flex: 0 0 auto;
  border: 4px dashed var(--ink, #171819);
  box-shadow: none;
  color: var(--ink, #171819);
  transform: rotate(4deg);
}
.stamp-seal-open i {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--ink, #171819);
  color: var(--surface, #fff);
}
@media (max-width: 560px) {
  .security-hero {
    flex-direction: column;
    text-align: center;
  }
  .cert-stamp {
    flex-direction: column;
    text-align: center;
  }
}

/* Nordform: monochrome foundations, one deliberate signal. */
:root {
  --bg: #fff;
  --surface: #fff;
  --surface-2: #f1f2f0;
  --concrete: #f4f4f2;
  --ink: #171819;
  --ink-2: #686b6e;
  --line: #e0e1df;
  --action: #f47752;
  --action-hover: #ea6742;
  --on-action: #171819;
  --action-ink: #a4381d;
  --action-soft: #fff0ea;
  --ground: #141517;
  --on-ground: #fff;
  --on-ground-2: #b9bdc0;
  --ground-hair: #36383b;
}
.landing-nav,
.landing-nav.is-scrolled {
  background: #fff;
  border-bottom: 1px solid #eceeed;
  height: 80px;
  padding-inline: 4%;
}
.landing-nav-space {
  height: 80px;
}
.landing-nav .nav-cta {
  background: #171819;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 14px 19px;
}
.landing-nav .nav-cta:hover {
  background: #36383b;
}
.nord-intro {
  padding: 80px 6% 0;
  text-align: center;
  background: #fff;
}
.nord-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: 11px var(--font-mono);
  letter-spacing: 0.12em;
  margin: 0 0 28px;
  color: #5f6265;
}
.nord-kicker > span {
  width: 6px;
  height: 6px;
  background: #171819;
  border-radius: 50%;
}
.nord-intro h1 {
  font: 500 clamp(60px, 7.4vw, 112px)/0.98 var(--font-display);
  letter-spacing: -0.065em;
  margin: 0;
}
.nord-intro h1 span {
  color: #898c8d;
}
.nord-lead {
  font-size: 18px;
  line-height: 1.55;
  color: #63676a;
  margin: 30px auto;
}
.nord-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.nord-primary {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  background: #f47752;
  color: #171819;
  border-radius: 6px;
  padding: 16px 21px;
  font-size: 14px;
  font-weight: 600;
}
.nord-primary:hover {
  background: #ea6742;
  color: #171819;
}
.nord-primary svg {
  width: 20px;
  height: 20px;
}
.nord-text-link {
  font-size: 14px;
  color: #343638;
  display: flex;
  gap: 16px;
  align-items: center;
}
.nord-intro-foot {
  display: flex;
  justify-content: space-between;
  padding: 70px 0 20px;
  font: 10px var(--font-mono);
  letter-spacing: 0.08em;
  color: #777b7c;
}
.nord-spatial {
  height: 360vh;
  background: #111214;
  scroll-margin-top: 80px;
}
.nord-spatial-sticky {
  position: sticky;
  top: 80px;
  height: calc(100svh - 80px);
  min-height: 480px;
  overflow: hidden;
  color: white;
}
.nord-corridor {
  position: absolute;
  inset: 0;
}
.nord-corridor canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.nord-corridor-fallback {
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(
    ellipse at 60% 45%,
    #181b1e 0 30px,
    #474c4e 31px 33px,
    #181b1e 34px 65px
  );
}
.nord-spatial-sticky::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #090a0d55, transparent 25%, #090a0d00 45%, #090a0dcc 100%);
}
.nord-stage-top,
.nord-stage-bottom {
  position: absolute;
  left: 4%;
  right: 4%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font: 10px var(--font-mono);
  letter-spacing: 0.06em;
}
.nord-stage-top {
  top: 26px;
}
.nord-stage-top > div {
  display: flex;
  gap: 24px;
  align-items: center;
}
.nord-stage-top button {
  font: inherit;
  color: #fff;
  border: 0;
  background: transparent;
  padding: 8px 0;
  box-shadow: none;
  border-radius: 0;
}
.nord-stage-top a {
  color: #fff;
}
.nord-stage-caption {
  position: absolute;
  left: 6%;
  bottom: 95px;
  z-index: 1;
}
.nord-index {
  font: 11px var(--font-mono);
  color: #f47752;
}
.nord-stage-caption h2 {
  font: 500 clamp(36px, 4.8vw, 72px)/1.05 var(--font-display);
  letter-spacing: -0.045em;
  color: #fff;
  margin: 20px 0 14px;
}
.nord-stage-caption p {
  font-size: 16px;
  color: #c6c9cc;
  margin: 0;
}
.nord-stage-bottom {
  bottom: 28px;
  color: #b1b5b8;
  letter-spacing: 0;
}
.nord-stage-bottom > div {
  display: flex;
  gap: 5px;
}
.nord-stage-bottom i {
  width: 35px;
  height: 2px;
  background: #606469;
}
.nord-stage-bottom i.active {
  background: #f47752;
}
.hero {
  background: #f5f5f3;
  padding: 100px 6%;
  gap: 6%;
  grid-template-columns: 44% 50%;
}
.hero .hero-copy {
  background: transparent;
  padding: 0;
  color: #171819;
}
.hero .hero-copy > .eyebrow {
  color: #686b6e;
}
.hero .hero-copy > .eyebrow > span {
  background: #171819;
}
.hero .hero-copy h2 {
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 20px 0;
}
.hero .hero-copy > p {
  color: #686b6e;
  font-size: 16px;
  line-height: 1.6;
}
.hero .hero-brief {
  border: 1px solid #d4d6d3;
  box-shadow: none;
  border-radius: 8px;
  padding: 20px;
}
.hero .hero-brief textarea {
  font-size: 15px;
  min-height: 90px;
}
.hero .hero-brief .button {
  background: #171819;
  color: #fff;
  border-radius: 5px;
}
.hero .hero-model {
  margin: 0;
  min-height: 550px;
  border: 1px solid #d7d9d6;
  border-radius: 8px;
}
.hero .hero-door {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #d4d6d3 !important;
  border-radius: 0;
  color: #171819 !important;
}
.hero .hero-door :is(.eyebrow, small) {
  color: #686b6e !important;
}
.hero .hero-package-link {
  color: #343638;
}
.hero-third-audience {
  display: none;
}
.workspace-journey {
  background: #fff;
  padding: 70px 6%;
}
.workspace-journey article {
  border-radius: 0;
  box-shadow: none;
}
.site-footer {
  background: #141517;
  color: #fff;
}
.site-footer :is(.wordmark, h2, .footer-column a) {
  color: #fff;
}
.site-footer :is(.footer-brand p, .footer-column h3, .footer-bottom) {
  color: #a4a9ac;
}
.card,
.design-card,
.package-file,
.hero-door {
  box-shadow: none;
  border-radius: 8px;
}
:where(a, button):focus-visible {
  outline: 2px solid #687abf;
  outline-offset: 5px;
}
#start {
  scroll-margin-top: 120px;
}
@media (max-width: 760px) {
  .landing-nav,
  .landing-nav-space {
    height: 68px;
  }
  .nord-intro {
    padding: 60px 22px 0;
  }
  .nord-intro h1 {
    font-size: clamp(48px, 10vw, 68px);
  }
  .nord-lead {
    font-size: 16px;
  }
  .nord-intro-foot {
    padding-top: 56px;
    font-size: 8px;
  }
  .nord-actions {
    gap: 20px;
  }
  .nord-primary {
    gap: 20px;
  }
  .nord-spatial {
    height: 300vh;
  }
  .nord-spatial-sticky {
    top: 68px;
    height: calc(100svh - 68px);
  }
  .nord-stage-top {
    font-size: 8px;
    left: 20px;
    right: 20px;
  }
  .nord-stage-top > div {
    gap: 14px;
  }
  .nord-stage-caption {
    left: 24px;
    right: 24px;
    bottom: 100px;
  }
  .nord-stage-caption h2 {
    font-size: 42px;
  }
  .nord-stage-caption p {
    font-size: 14px;
  }
  .nord-stage-bottom {
    left: 24px;
    right: 24px;
    font-size: 8px;
  }
  .nord-stage-bottom > span {
    max-width: 210px;
  }
  .hero {
    padding: 60px 22px;
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .hero .hero-model {
    min-height: 400px;
  }
  .hero .hero-copy > .eyebrow {
    font-size: 9px;
  }
  .workspace-journey {
    padding: 40px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nord-spatial {
    height: auto;
  }
  .nord-spatial-sticky {
    position: relative;
    top: 0;
    height: 620px;
  }
  .nord-intro * {
    animation: none !important;
  }
  .nord-stage-top button {
    display: none;
  }
}

.nord-stage-caption p {
  max-width: 500px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .nord-stage-caption h2 {
    font-size: 36px;
  }
  .nord-stage-bottom i {
    width: 20px;
  }
}

/* Every scale can also be inspected without scrolling or motion. */
.nord-stage-bottom button {
  display: grid;
  place-items: center;
  width: 35px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.nord-stage-bottom button span {
  display: block;
  width: 100%;
  height: 2px;
  background: #606469;
}
.nord-stage-bottom button[aria-pressed='true'] span {
  background: #f47752;
}
@media (max-width: 760px) {
  .nord-stage-bottom button {
    width: 20px;
    height: 32px;
  }
}

/* Shared public system: editorial space, quiet depth, deliberate signals. */
:root {
  --amber: var(--action);
  --on-amber: var(--on-action);
  --amber-ink: var(--action-ink);
  --amber-soft: var(--action-soft);
  --radius-card: 16px;
  --nord-shadow-1: 0 2px 4px #17181904, 0 8px 24px #17181906;
  --nord-shadow-2: 0 2px 6px #17181908, 0 20px 60px #17181912;
  --nord-shadow-3: 0 8px 24px #17181912, 0 32px 96px #17181924;
}
.nord-architecture-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  pointer-events: none;
}
.nord-corridor-fallback {
  background: #171819 url('/images/nordform/data-center-exterior.jpg') 60% center / cover;
}
.nordform-pattern {
  height: clamp(64px, 10vw, 150px);
  color: #73797b;
  margin: 0 0 clamp(48px, 7vw, 96px);
  overflow: hidden;
}
.nordform-pattern svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.nordform-pattern svg path:nth-last-child(2) {
  fill: #f47752;
}
body > header {
  background: #fff;
  border-bottom: 1px solid #eceeed;
  box-shadow: none;
  min-height: 80px;
  padding-inline: 4%;
}
body > header .nav-cta {
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
}
main.editorial {
  max-width: 1100px;
  padding: clamp(64px, 8vw, 112px) max(24px, 4vw) clamp(88px, 10vw, 144px);
  font-size: 17px;
  line-height: 1.8;
}
main.editorial > :is(p, ul, ol, blockquote) {
  max-width: 72ch;
}
main.editorial h1,
main.enterprise-page h1 {
  font: 500 clamp(40px, 5.3vw, 76px)/1.04 var(--font-display);
  letter-spacing: -0.05em;
  margin: 0 0 32px;
  max-width: 20ch;
}
main.editorial h2 {
  margin: 72px 0 24px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
main.editorial h3 {
  margin-top: 36px;
}
main.editorial > p {
  margin-block: 24px;
}
main.editorial .lead {
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.6;
  margin-bottom: 52px;
  color: var(--ink-2);
}
main.editorial :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 22px 18px;
  vertical-align: top;
}
main.editorial th {
  background: var(--surface-2);
  font-weight: 600;
}
main.editorial .cta {
  margin-top: 48px;
  padding: 16px 24px;
  border-radius: 8px;
}
main.enterprise-page {
  max-width: 1320px;
  padding: clamp(64px, 8vw, 112px) 5% 128px;
}
main.enterprise-page .enterprise-hero {
  gap: clamp(32px, 6vw, 88px);
}
main.enterprise-page .enterprise-hero .lead a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
main.enterprise-page .enterprise-section {
  margin-top: clamp(72px, 9vw, 128px);
}
main.enterprise-page .enterprise-grid {
  gap: 28px;
}
main.enterprise-page .enterprise-grid article {
  border: 0;
  background: #f5f6f4;
  padding: 36px;
  border-radius: 16px;
}
main.enterprise-page :is(.enterprise-dark, .enterprise-contact, .factory-preview) {
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px;
}
main.enterprise-page .button {
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
}
main :is(.design-illustration, .audience-illustration) {
  margin: 64px 0;
}
main .design-illustration img {
  border: 0;
  border-radius: 24px;
}
.site-footer {
  padding-top: 0;
  background-image: none;
}
.hero .hero-model {
  border-color: #e3e5e1;
  border-radius: 16px;
  box-shadow: var(--nord-shadow-2);
}
.hero .hero-brief {
  border-color: #e3e5e1;
  border-radius: 16px;
  box-shadow: var(--nord-shadow-1);
}
.nord-primary,
.nav-cta,
main.editorial .cta {
  transition:
    background 160ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
@media (hover: hover) {
  .nord-primary:hover,
  main.editorial .cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--nord-shadow-1);
  }
}
.nord-primary:active,
main.editorial .cta:active {
  transform: translateY(0);
  box-shadow: none;
}
@media (max-width: 760px) {
  body > header {
    min-height: 68px;
  }
  main.editorial h1,
  main.enterprise-page h1 {
    font-size: clamp(36px, 9vw, 52px);
  }
  main.editorial h2 {
    margin-top: 52px;
  }
  main.enterprise-page {
    padding-inline: 24px;
    padding-bottom: 80px;
  }
  main.editorial :is(th, td) {
    padding: 14px 0;
  }
  main.enterprise-page .enterprise-grid article {
    padding: 24px;
  }
  main :is(.design-illustration, .audience-illustration) {
    margin-block: 40px;
  }
  .nord-stage-bottom {
    flex-wrap: wrap;
    gap: 10px;
  }
  .nord-stage-bottom button {
    width: 28px;
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nord-primary,
  .nav-cta,
  main.editorial .cta {
    transition: none;
    transform: none;
  }
}

/* Homepage collections and standalone public React views share the same rhythm. */
main > :is(.catalog, .maker-start, .package, .pricing, .experts) {
  padding-block: clamp(64px, 7vw, 112px);
}
main :is(.section-top, .library-section-label) {
  margin-bottom: 40px;
  gap: 32px;
}
main :is(.catalog-grid, .design-grid, .library-design-grid) {
  gap: 28px;
}
main :is(.library-heading, .public-design-top) {
  margin-block: 48px;
}
main :is(.library-heading h1, .public-design-top h1),
main.expert-landing h1 {
  font: 500 clamp(36px, 5vw, 68px)/1.06 var(--font-display);
  letter-spacing: -0.045em;
}
main.expert-landing {
  padding-top: 80px;
  padding-bottom: 100px;
}
main .roadmap-phase {
  margin-top: 80px;
}
main .roadmap-intro {
  gap: 48px;
  margin-bottom: 40px;
}
main .upcoming-grid {
  gap: 24px;
}
main.enterprise-page .factory-preview {
  background: #f5f6f4;
}
main.editorial .journal-card {
  border: 0;
  background: #f5f6f4;
}
main.editorial .journal-card-copy {
  padding: 36px;
}
main.editorial .journal-card h2 {
  margin: 16px 0;
  font-size: 30px;
}
main.editorial .journal-section h2 {
  margin: 0;
}
@media (max-width: 760px) {
  main :is(.section-top, .library-section-label) {
    gap: 20px;
    margin-bottom: 28px;
  }
  main :is(.catalog-grid, .design-grid, .library-design-grid) {
    gap: 20px;
  }
  main :is(.library-heading, .public-design-top) {
    margin-block: 32px;
  }
  main.expert-landing {
    padding-top: 48px;
  }
  main.editorial .journal-card-copy {
    padding: 24px;
  }
}
.public-nav {
  background: #fff;
  border-bottom: 1px solid #eceeed;
  box-shadow: none;
}
.public-nav .nav-cta {
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
}
@media (max-width: 760px) {
  .nord-stage-caption {
    bottom: 145px;
  }
  .nord-stage-bottom > span {
    max-width: 100%;
    width: 100%;
    font-size: 10px;
    line-height: 1.4;
  }
  .nord-stage-top {
    font-size: 9px;
  }
}

/* One continuous architectural language, from introduction to contact. */
.nord-spatial-sticky {
  isolation: isolate;
  background: #111214;
  min-height: 0;
}
.nord-corridor {
  z-index: 0;
  opacity: 0;
}
.nord-architecture-photo {
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  background: #111214 url('/images/nordform/data-center-exterior.jpg') 60% center / cover no-repeat;
  transform: none;
}
.nord-spatial-sticky::after {
  z-index: 2;
}
.nord-stage-top,
.nord-stage-bottom,
.nord-stage-caption {
  z-index: 3;
}
.nord-stage-top,
.nord-stage-bottom {
  font-size: 11px;
}
.nord-intro h1 {
  font-size: clamp(48px, 6.8vw, 100px);
}
.nord-lead {
  max-width: 760px;
}
.nord-practice {
  background: #141517;
  color: #fff;
}
.nord-practice .nordform-pattern {
  margin: 0;
}
.nord-practice-content {
  padding: clamp(64px, 8vw, 112px) 6%;
}
.nord-practice h2 {
  font: 500 clamp(36px, 5vw, 72px)/1.06 var(--font-display);
  letter-spacing: -0.045em;
  margin: 24px 0 32px;
}
.nord-practice h2 span {
  color: #a4a9ac;
}
.nord-practice-lead {
  max-width: 720px;
  font-size: 20px;
  line-height: 1.65;
  color: #b9bdc0;
}
.nord-practice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-top: 64px;
}
.nord-practice-grid article {
  border-top: 1px solid #36383b;
  padding-top: 28px;
}
.nord-practice-grid article > span {
  font: 11px var(--font-mono);
  color: #f47752;
}
.nord-practice-grid h3 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 24px 0 20px;
}
.nord-practice-grid p {
  font-size: 16px;
  line-height: 1.65;
  color: #b9bdc0;
}
.nord-practice-grid a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: 14px;
  margin-top: 24px;
}
.nord-practice-grid svg {
  width: 18px;
  height: 18px;
}
.nord-practice-note {
  margin: 56px 0 0;
  color: #a4a9ac;
  font-size: 13px;
  max-width: 760px;
  line-height: 1.6;
}
.site-footer {
  padding-inline: 0;
}
.site-footer > :is(.footer-top, .footer-bottom) {
  margin-inline: 5%;
}
.site-footer > .nordform-pattern {
  width: 100%;
}
.nord-contact {
  padding: 88px 6%;
  gap: 48px;
  scroll-margin-top: 100px;
}
.nord-contact h2 {
  font: 500 clamp(36px, 4.5vw, 64px)/1.05 var(--font-display);
  letter-spacing: -0.04em;
  margin: 20px 0;
}
.nord-contact p {
  color: #686b6e;
  line-height: 1.6;
}
.nord-contact .button {
  white-space: nowrap;
  border-radius: 8px;
}
@media (max-width: 900px) {
  .nord-practice-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .nord-practice-grid article {
    max-width: 650px;
  }
}
@media (max-width: 760px) {
  .nord-practice-content {
    padding-inline: 24px;
  }
  .nord-kicker {
    font-size: 9px;
    letter-spacing: 0.07em;
  }
  .nord-actions {
    flex-wrap: wrap;
  }
  .nord-stage-top {
    font-size: 9px;
  }
  .nord-stage-top > div {
    gap: 10px;
  }
  .nord-contact {
    display: block;
    padding: 64px 24px;
  }
  .nord-contact .button {
    margin-top: 24px;
  }
}

/* The software demonstration is secondary to the customer service journey. */
#studio-workspace > summary {
  margin-inline: 6%;
  padding-block: 32px;
  font-weight: 500;
}

/* Shared with the Pro portal: functional type beneath editorial headlines. */
:root {
  --font-body: 'IBM Plex Sans', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', Menlo, monospace;
}
.buildable-lockup { font-family: 'Instrument Sans', Arial, sans-serif; }
.buildable-lockup > .buildable-name small { font-family: 'Geist Mono', Menlo, monospace; }
.product-story { padding: 112px 6%; background: var(--surface); }
.product-story-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9%; align-items: end; margin-bottom: 48px; }
.product-story-heading h2 { font: 500 clamp(36px,4.8vw,68px)/1.02 var(--font-display); letter-spacing: -.055em; margin: 18px 0 0; }
.product-story-heading p:not(.nord-index) { color: var(--ink-2); font-size: 20px; line-height: 1.55; margin: 0 0 24px; max-width: 440px; }
.product-story a:not(.nord-primary) { display: inline-flex; gap: 14px; align-items: center; font-weight: 500; color: var(--ink); text-decoration: none; }
.product-story a:not(.nord-primary):hover { color: var(--action-ink); }
.product-stage { background: #161819; color: #f8f8f5; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px #17181912, 0 2px 8px #1718190a; }
.product-stage-bar { display: flex; justify-content: space-between; gap: 20px; padding: 20px 28px; border-bottom: 1px solid #343637; font: 12px var(--font-mono); color: #b8bdbe; }
.product-stage-body { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 480px; }
.product-example-brief { padding: 42px 32px; }
.product-micro { font: 11px var(--font-mono); letter-spacing: .07em; color: #b8bdbe; }
.product-prompt { margin: 22px 0 34px; font-size: clamp(22px,2.3vw,32px); line-height: 1.32; letter-spacing: -.02em; }
.product-change { border-top: 1px solid #343637; padding-top: 24px; }
.product-change p { margin: 10px 0 22px; font-size: 20px; }
.product-variants { display: flex; gap: 8px; flex-wrap: wrap; }
.product-variants button { border: 1px solid #55595c; border-radius: 7px; padding: 12px 16px; background: transparent; color: #f8f8f5; font: 500 14px var(--font-body); cursor: pointer; transition: background .18s ease, color .18s ease; }
.product-variants button[aria-pressed='true'] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.product-variants button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.product-example-note { margin: 22px 0 0; color: #b8bdbe; font-size: 12px; line-height: 1.6; max-width: 330px; }
.product-model { min-width: 0; position: relative; background: #f3f3f0; height: 560px; min-height: 480px; }
.product-model > .viewer, .product-model .viewer { height: 100%; min-height: 480px; border: 0; border-radius: 0; }
.product-model-loading { padding: 40px; color: var(--ink); }
.product-model-meta { position: absolute; bottom: 16px; left: 18px; right: 18px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; background: #fff; color: #171819; padding: 14px 18px; border-radius: 8px; pointer-events: none; font: 11px var(--font-mono); }
.product-model-meta b { font: 500 17px var(--font-body); }
.product-stage-caption { margin: 0; padding: 16px 28px; font: 11px/1.6 var(--font-mono); color: #b8bdbe; }
.nord-practice-grid h3 { font-family: var(--font-body); }
@media (max-width: 760px) {
  .product-story { padding-block: 72px; }
  .product-story-heading, .product-stage-body { grid-template-columns: 1fr; }
  .product-story-heading { gap: 28px; }
  .product-story-heading p:not(.nord-index) { font-size: 18px; }
  .product-stage-bar { padding: 18px 20px; font-size: 10px; }
  .product-example-brief { padding: 28px 24px; }
  .product-prompt { font-size: 26px; }
  .product-model, .product-model .viewer { min-height: 350px; height: 350px; }
  .product-model-meta { gap: 8px 12px; }
  .product-stage-caption { padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) { .product-variants button { transition: none; } }

/* Editorial rhythm: separate display and reading sizes, with aligned generous space. */
.nord-intro h1 { font-size: clamp(48px, 5vw, 80px); line-height: 1.02; letter-spacing: -.03em; }
.nord-lead { max-width: 640px; margin-inline: auto; }
.nord-practice h2, .product-story-heading h2 { letter-spacing: -.035em; }
.nord-primary { border-radius: 8px; }
main.design-system-page { max-width: none; width: 100%; margin: 0; padding: 0; }
.design-system { background: #fff; color: #171819; }
.design-system .ds-eyebrow { display: block; font: 400 11px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.design-system .ds-hero { background: #101213; color: #fff; text-align: center; padding: 112px 6% 0; overflow: hidden; }
.design-system .ds-hero h1 { max-width: 960px; margin: 32px auto 28px; font: 500 clamp(46px,5vw,80px)/1.02 var(--font-display); letter-spacing: -.03em; }
.design-system .ds-hero > p:not(.ds-eyebrow) { max-width: 580px; margin: 0 auto 32px; font-size: 18px; line-height: 1.6; color: #b9bdc0; }
.design-system .ds-hero .nord-primary { display: inline-flex; color: #171819; background: #f47752; }
.ds-hero-rule { margin: 96px -7% 0; height: 64px; background: repeating-linear-gradient(0deg,transparent 0 6px,#44484b 6px 8px); position: relative; }
.ds-hero-rule i { position: absolute; inset: 27px 0 auto; height: 8px; background: #f47752; }
.ds-index { display: flex; gap: 24px; flex-wrap: wrap; padding: 24px 6%; border-bottom: 1px solid var(--line); }
.ds-index a { color: #171819; font-size: 14px; text-decoration: none; }
.ds-index a:hover { color: var(--action-ink); }
.design-system .ds-section { padding: 112px 6%; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.ds-section-head { display: grid; grid-template-columns: 1fr 2fr 1.7fr; gap: 40px; align-items: start; margin-bottom: 64px; }
.design-system .ds-section h2 { font: 500 clamp(34px,3.6vw,52px)/1.06 var(--font-display); letter-spacing: -.025em; margin: 0; }
.ds-section-head > p { font-size: 17px; line-height: 1.65; margin: 0; color: #686b6e; max-width: 60ch; }
.ds-type-display { padding: 48px; background: #f1f2f0; border-radius: 16px; }
.ds-type-display > p { font: 500 clamp(38px,4.6vw,64px)/1.02 var(--font-display); letter-spacing: -.03em; margin: 32px 0; }
.design-system small { font-size: 12px; line-height: 1.6; color: #686b6e; display: block; }
.ds-two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 48px; }
.design-system h3 { font: 500 28px/1.2 var(--font-body); letter-spacing: -.02em; margin: 22px 0 16px; }
.ds-type-body > p, .ds-copy-example p, .ds-example-card p, .ds-component-rules p { font-size: 17px; line-height: 1.65; max-width: 60ch; }
.ds-type-mono > p { font: 400 24px/1.7 var(--font-mono); margin: 24px 0; }
.ds-swatches { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.ds-swatch { padding: 24px; min-height: 220px; border-radius: 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.ds-swatch b { font-size: 24px; font-weight: 500; }
.ds-swatch span { font: 12px var(--font-mono); margin: 12px 0; }
.ds-white { background: #fff; box-shadow: inset 0 0 0 1px #e0e1df; }
.ds-graphite { background: #171819; color: #fff; }
.design-system .ds-graphite small { color: #b9bdc0; }
.ds-vermilion { background: #f47752; }
.design-system .ds-vermilion small { color: #171819; }
.ds-soft { background: #f1f2f0; }
.ds-note { margin-top: 32px; font-size: 14px; line-height: 1.65; max-width: 80ch; color: #686b6e; }
.ds-space-scale { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 20px; }
.ds-space-scale > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font: 12px var(--font-mono); }
.ds-space-scale i { height: 48px; background: #f47752; max-width: 100%; }
.ds-rule-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; margin-top: 48px; }
.ds-rule-grid p { border-top: 1px solid var(--line); padding-top: 24px; margin: 0; line-height: 1.65; }
.ds-rule-grid b, .ds-rule-grid span { display: block; }
.ds-rule-grid b { font-weight: 500; font-size: 18px; margin-bottom: 12px; }
.ds-rule-grid span { font-size: 15px; color: #686b6e; }
.ds-component-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 40px; background: #f1f2f0; border-radius: 16px; }
.ds-component-stage a { font: 500 16px var(--font-body); text-decoration: none; }
.ds-secondary { background: #171819; color: #fff; border-radius: 8px; padding: 16px 24px; }
.ds-secondary:hover { background: #36383b; }
.ds-text-action { color: #171819; }
.ds-example-card { background: #fff; border-radius: 16px; padding: 40px; box-shadow: 0 24px 70px #17181912,0 2px 8px #1718190a; }
.ds-example-card a { color: #a4381d; font-weight: 500; }
.ds-component-rules p { font-size: 15px; color: #686b6e; }
.ds-component-rules b { color: #171819; font-weight: 500; }
.ds-image-band { position: relative; background: #171819; color: #fff; }
.ds-image-band img { width: 100%; height: 540px; object-fit: cover; display: block; }
.ds-image-band > div { padding: 64px 6%; display: grid; grid-template-columns: 1fr 2fr 1.7fr; gap: 32px 40px; }
.design-system .ds-image-band h2 { margin: 0; font: 500 clamp(34px,3.6vw,52px)/1.06 var(--font-display); letter-spacing: -.025em; }
.ds-image-band p { margin: 0; font-size: 17px; line-height: 1.65; color: #b9bdc0; }
.design-system .ds-image-band small { grid-column: 2/-1; color: #b9bdc0; }
.ds-motion-example { background: #f1f2f0; border-radius: 16px; padding: 48px; }
.ds-motion-example > div { background: #171819; color: #fff; border-radius: 12px; padding: 32px; max-width: 440px; transition: transform 240ms ease,box-shadow 240ms ease; }
.ds-motion-example:hover > div, .ds-motion-example:focus-visible > div { transform: translateY(-6px); box-shadow: 0 24px 70px #17181920; }
.ds-motion-example p { font-size: 14px; color: #b9bdc0; }
.ds-copy-example { border-top: 1px solid var(--line); padding-top: 24px; }
.ds-copy-example h3 { font-family: var(--font-display); font-size: 36px; }
@media(max-width:760px) {
 .design-system .ds-hero { padding-top: 72px; }
 .design-system .ds-section { padding-block: 72px; }
 .ds-section-head, .ds-two, .ds-rule-grid, .ds-image-band > div { grid-template-columns: 1fr; gap: 28px; }
 .ds-section-head { margin-bottom: 40px; }
 .ds-type-display, .ds-component-stage, .ds-example-card, .ds-motion-example { padding: 24px; }
 .ds-swatches { grid-template-columns: 1fr 1fr; }
 .ds-swatch { padding: 20px; min-height: 180px; }
 .ds-space-scale { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 16px; }
 .design-system .ds-image-band small { grid-column: 1; }
 .ds-image-band img { height: 340px; }
}
@media(prefers-reduced-motion:reduce) { .ds-motion-example > div { transition: none; } .ds-motion-example:hover > div, .ds-motion-example:focus-visible > div { transform: none; } }

/* Small labels on the white canvas use the accessible text accent. */
.product-story .nord-index { color: #a4381d; }
/* The fixed menu floats over the page on a frosted ground bar, so its ink never depends on what scrolls beneath it. */
.landing-nav,
.landing-nav.is-scrolled,
.public-nav,
body > header {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.landing-nav,
.landing-nav.is-scrolled {
  background: rgba(20, 21, 23, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: #fff;
}
.landing-nav :is(.wordmark, .buildable-lockup, .public-desktop-nav a, .public-mobile-menu summary) { color: #fff; }
.landing-nav .nav-cta { background: #fff; color: #000; }
.landing-nav .nav-cta:hover { background: #ddd; }
.landing-nav:where(:has(.public-mobile-menu[open])) { color: #171819; }
.landing-nav:where(:has(.public-mobile-menu[open])) :is(.wordmark, .buildable-lockup, .public-mobile-menu summary) { color: #171819; }
.landing-nav:where(:has(.public-mobile-menu[open])) .nav-cta { background: #171819; color: #fff; }

/* Industry pages: visual areas of work, concise copy and distinct project cards. */
.industry-page { background: #fff; color: #171819; }
.industry-page .nord-index { color: #a4381d; }
.industry-page a { text-decoration: none; }
.industry-page .nord-primary { display: inline-flex; color: #171819; }
.industry-hero { padding: 100px 6% 88px; text-align: center; }
.industry-hero h1,.industry-contact h2 { font: 500 clamp(48px,6vw,88px)/1.03 var(--font-display); letter-spacing: -.035em; margin: 28px 0; }
.industry-hero > p:not(.nord-index) { font-size: 21px; color: #686b6e; margin: 0 0 32px; }
.industry-index { display: flex; justify-content: space-between; gap: 24px; padding: 28px 6%; border-block: 1px solid #e0e1df; font: 12px var(--font-mono); }
.industry-index a { color: inherit; }
.industry-area { display: grid; grid-template-columns: 1.1fr 1fr; gap: 9%; align-items: center; padding: 104px 6%; scroll-margin-top: 32px; }
.industry-area-reverse { background: #f1f2f0; }
.industry-area-reverse figure { grid-column: 2; grid-row: 1; }
.industry-area-reverse .industry-area-copy { grid-column: 1; grid-row: 1; }
.industry-page figure { margin: 0; }
.industry-area img { width: 100%; height: auto; display: block; border-radius: 16px; }
.industry-page figcaption { font: 11px/1.5 var(--font-mono); color: #686b6e; margin-top: 12px; }
.industry-page h2 { font: 500 clamp(38px,4.6vw,64px)/1.06 var(--font-display); letter-spacing: -.03em; margin: 24px 0; }
.industry-area-copy > p:not(.nord-index),.industry-section-heading p:not(.nord-index),.industry-pilot p { font-size: 19px; line-height: 1.6; color: #686b6e; }
.industry-area-copy > a,.industry-pilot a { display: inline-block; margin-top: 30px; color: #171819; font-weight: 500; }
.industry-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.industry-tags span { border: 1px solid #d7dad5; padding: 8px 12px; border-radius: 6px; font-size: 12px; }
.industry-facilities { padding: 112px 6%; scroll-margin-top: 32px; }
.industry-section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: center; margin-bottom: 48px; }
.industry-section-heading h3 { font: 500 26px var(--font-body); margin: 0 0 20px; }
.industry-facility-image img { width: 100%; height: clamp(300px,42vw,600px); object-fit: cover; display: block; border-radius: 16px; }
.industry-work-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; }
.industry-work-cards article { padding: 32px; background: #f1f2f0; border: 1px solid #e5e6e3; border-radius: 12px; }
.industry-work-cards article > span { font: 11px var(--font-mono); color: #686b6e; }
.industry-work-cards h3 { font: 500 26px/1.2 var(--font-display); letter-spacing: -.02em; margin: 28px 0 16px; }
.industry-work-cards p { font-size: 17px; line-height: 1.6; color: #686b6e; margin: 0; }
.industry-section-close { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 40px; }
.industry-section-close p { max-width: 570px; color: #686b6e; font-size: 14px; line-height: 1.6; }
.industry-pilot { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 9%; background: #171819; color: #fff; padding: 112px 6%; }
.industry-pilot .nord-index { color: #f47752; }
.industry-pilot p { color: #b9bdc0; }
.industry-pilot a { color: #fff; }
.industry-pilot-panel { border: 1px solid #414445; border-radius: 16px; padding: 40px; }
.industry-pilot-panel h3 { font: 500 clamp(28px,3vw,42px)/1.25 var(--font-display); letter-spacing: -.02em; margin: 24px 0; }
.industry-pilot details { grid-column: 1/-1; border-top: 1px solid #414445; padding-top: 24px; }
.industry-pilot summary { cursor: pointer; }
.industry-pilot details p { max-width: 850px; font-size: 16px; }
.industry-contact { text-align: center; padding: 112px 6%; }
.industry-contact p:not(.nord-index) { font-size: 20px; line-height: 1.6; color: #686b6e; margin-bottom: 32px; }
.industry-contact small { display: block; font-size: 12px; color: #686b6e; max-width: 600px; margin: 28px auto 0; line-height: 1.6; }
/* Company page: links inside prose and cards stay recognisable as links. */
.company-people .industry-work-cards { grid-template-columns: repeat(2,1fr); }
.company-page :is(.industry-work-cards p, .industry-section-heading p) a { text-decoration: underline; text-underline-offset: 3px; color: #171819; }
.industry-page :is(a,summary):focus-visible { outline: 2px solid #a4381d; outline-offset: 5px; }
@media(max-width:760px) {
 .industry-hero,.industry-area,.industry-facilities,.industry-pilot,.industry-contact { padding: 72px 6%; }
 .industry-area,.industry-section-heading,.industry-work-cards,.company-people .industry-work-cards,.industry-pilot { grid-template-columns: 1fr; gap: 32px; }
 .industry-area-reverse figure,.industry-area-reverse .industry-area-copy { grid-column: auto; grid-row: auto; }
 .industry-area-copy { grid-row: 1; }
 .industry-area-reverse .industry-area-copy { grid-row: 1; }
 .industry-index { flex-wrap: wrap; font-size: 11px; }
 .industry-work-cards article { padding: 28px; }
 .industry-section-close { flex-direction: column; align-items: flex-start; gap: 12px; }
 .industry-pilot-panel { padding: 28px; }
}
/* Let the intro image continue underneath the transparent fixed navigation. */
.nord-spatial { scroll-margin-top: 0; }
.nord-spatial-sticky { top: 0; height: 100svh; }
.nord-stage-top { top: 112px; }
@media(max-width:760px) { .nord-stage-top { top: 96px; } }
/* Public actions keep one silhouette in every interaction state. */
body :is(.button,.secondary-button,.nav-cta,.nord-primary,.cta),
body main.enterprise-page :is(.button,.secondary-button):is(:hover,:focus-visible,:active) {
  border-radius: 8px;
  transform: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
body :is(.button,.secondary-button,.nav-cta,.nord-primary,.cta):is(:hover,:focus-visible,:active) { transform: none; }
body main.enterprise-page .button:hover { background: #36383b; color: #fff; }
body main.enterprise-page .secondary-button:hover { background: #f1f2f0; color: #171819; }
.landing-nav:where(:has(.public-mobile-menu[open])) { background: #fff; }
.enterprise-actions :is(.button,.secondary-button) { box-sizing: border-box; min-height: 48px; height: 48px; padding: 0 22px; margin: 0; }

/* Areas of work as interactive cards: the brand material study carries the area, the copy and link rise on hover
   or focus, and the link's hit area covers the whole card. Touch screens and reduced motion get everything shown, still.
   Layers are separated by surface and a quiet border, not a coloured outline (BRAND.md, dark UI). */
.nord-practice-grid {
  gap: 20px;
}
.nord-practice-grid .nord-practice-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 460px;
  padding: 0;
  border: 1px solid #36383b;
  border-radius: 16px;
  background: #1c1d1f;
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1), border-color 240ms ease, box-shadow 420ms ease;
}
.nord-practice-card :is(img, video) {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1), filter 420ms ease;
}
.nord-practice-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 21, 23, 0) 30%, rgba(20, 21, 23, .78) 62%, #141517 100%);
}
.nord-practice-card-caption {
  position: absolute;
  top: 16px;
  left: 18px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(20, 21, 23, .62);
  color: #d5d8da;
  font: 10px var(--font-mono);
  letter-spacing: .04em;
}
.nord-practice-card-body {
  width: 100%;
  padding: 28px;
}
.nord-practice-card-body > span {
  font: 11px var(--font-mono);
  color: #f47752;
}
.nord-practice-card-body h3 {
  margin: 14px 0 0;
}
.nord-practice-card-body p,
.nord-practice-card-body a {
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: max-height 420ms ease, opacity 320ms ease, transform 420ms cubic-bezier(.2, .7, .2, 1), margin 420ms ease;
}
.nord-practice-card-body a {
  position: static;
}
.nord-practice-card-body a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.nord-practice-card:is(:hover, :focus-within) {
  transform: translateY(-6px);
  border-color: #5b5e61;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.nord-practice-card:is(:hover, :focus-within) :is(img, video) {
  transform: scale(1.05);
}
.nord-practice-card:is(:hover, :focus-within) :is(p, a) {
  max-height: 120px;
  opacity: 1;
  transform: none;
}
.nord-practice-card:is(:hover, :focus-within) p {
  margin-top: 14px;
}
.nord-practice-card:is(:hover, :focus-within) a {
  margin-top: 20px;
}
.nord-practice-card a:focus-visible {
  outline: none;
}
.nord-practice-card:has(a:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (hover: none), (max-width: 900px), (prefers-reduced-motion: reduce) {
  .nord-practice-card-body :is(p, a) {
    max-height: none;
    opacity: 1;
    transform: none;
  }
  .nord-practice-card-body p { margin-top: 14px; }
  .nord-practice-card-body a { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .nord-practice-grid .nord-practice-card,
  .nord-practice-card img,
  .nord-practice-card-body :is(p, a) {
    transition: none;
    transform: none;
  }
}
@media (max-width: 900px) {
  .nord-practice-grid .nord-practice-card {
    min-height: 340px;
    max-width: none;
  }
  .nord-practice-card::before {
    background: linear-gradient(180deg, rgba(20, 21, 23, 0) 5%, rgba(20, 21, 23, .88) 42%, #141517 100%);
  }
}

/* Floating navigation: full-width at the top of the page, a detached pill once the page has scrolled. */
@media (min-width: 761px) {
  .landing-nav {
    transition: margin 360ms cubic-bezier(.2, .7, .2, 1), border-radius 360ms ease, height 360ms ease,
      box-shadow 360ms ease;
  }
  .landing-nav.is-scrolled {
    left: 0;
    right: 0;
    margin: 12px auto 0;
    width: min(1180px, 94%);
    height: 64px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    padding-inline: 28px 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  }
  .landing-nav.is-scrolled .nav-cta {
    border-radius: 999px;
  }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
  .landing-nav { transition: none; }
}

/* /industry/: the area index as interactive picture cards, matching the landing page's areas of work. Each card
   jumps to its section; the section pictures below zoom slowly on hover. The step cards and pilot panel do not
   link anywhere, so they stay still: a lift would promise a click that goes nowhere. */
.industry-page .industry-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 0 6% 24px;
  border: 0;
}
.industry-index-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  border: 1px solid #36383b;
  border-radius: 16px;
  background: #1c1d1f;
  color: #fff;
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1), border-color 240ms ease, box-shadow 420ms ease;
}
.industry-page .industry-index-card { color: #fff; }
.industry-index-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}
.industry-index-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 21, 23, 0) 25%, rgba(20, 21, 23, .8) 65%, #141517 100%);
}
.industry-index-card > small {
  position: absolute;
  top: 14px;
  left: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(20, 21, 23, .62);
  color: #d5d8da;
  font: 10px var(--font-mono);
  letter-spacing: .04em;
}
.industry-index-card-body {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 24px;
}
.industry-page .industry-index-card .nord-index {
  font: 11px var(--font-mono);
  color: #f47752;
}
.industry-index-card strong {
  font: 500 24px/1.2 var(--font-body);
  letter-spacing: -.02em;
}
.industry-index-jump {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font: 14px var(--font-body);
  transform: translateY(8px);
  transition: max-height 420ms ease, opacity 320ms ease, transform 420ms cubic-bezier(.2, .7, .2, 1);
}
.industry-index-card:is(:hover, :focus-visible) {
  transform: translateY(-6px);
  border-color: #5b5e61;
  box-shadow: 0 18px 40px rgba(23, 24, 25, .18);
}
.industry-index-card:is(:hover, :focus-visible) img,
.industry-area:hover figure img,
.industry-facilities:hover .industry-facility-image img {
  transform: scale(1.04);
}
.industry-index-card:is(:hover, :focus-visible) .industry-index-jump {
  max-height: 40px;
  opacity: 1;
  transform: none;
}
.industry-page .industry-index-card:focus-visible {
  outline: 2px solid #171819;
  outline-offset: 3px;
}
.industry-area figure,
.industry-facility-image {
  position: relative;
}
.industry-area figure img,
.industry-facility-image img {
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}
.industry-area figure:has(img),
.industry-facility-image {
  overflow: hidden;
  border-radius: 16px;
}
.industry-page .industry-area figcaption,
.industry-page .industry-facility-image figcaption {
  position: absolute;
  top: 14px;
  left: 16px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(20, 21, 23, .62);
  color: #d5d8da;
  font-size: 10px;
}
.industry-work-cards article {
  border-radius: 16px;
}
@media (hover: none), (max-width: 900px), (prefers-reduced-motion: reduce) {
  .industry-index-jump {
    max-height: none;
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 900px) {
  .industry-page .industry-index {
    grid-template-columns: 1fr;
  }
  .industry-index-card {
    min-height: 220px;
  }
  .industry-index-card::before {
    background: linear-gradient(180deg, rgba(20, 21, 23, 0) 5%, rgba(20, 21, 23, .88) 45%, #141517 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .industry-index-card,
  .industry-index-card img,
  .industry-index-jump,
  .industry-area figure img,
  .industry-facility-image img {
    transition: none;
    transform: none !important;
  }
}

/* Industrial scale study: legible chapter navigation and restrained camera drift. */
.nord-architecture-photo {
  transform-origin: 65% 45%;
  will-change: transform, opacity;
}
.nord-stage-bottom button {
  width: 76px;
  height: 44px;
  gap: 8px;
  color: #d2d8de;
  cursor: pointer;
}
.nord-stage-bottom button small {
  font: 9px var(--font-mono);
  white-space: nowrap;
}
.nord-stage-bottom button[aria-pressed='true'] {
  color: #fff;
}
.nord-stage-bottom button:focus-visible {
  outline: 2px solid #f47752;
  outline-offset: 4px;
}
@media (max-width: 760px) {
  .nord-stage-bottom {
    flex-wrap: wrap;
    gap: 10px;
  }
  .nord-stage-bottom > span {
    max-width: none;
    width: 100%;
  }
  .nord-stage-bottom button {
    width: 52px;
  }
  .nord-stage-bottom button small {
    font-size: 8px;
  }
  .nord-stage-caption {
    bottom: 134px;
  }
  .nord-stage-top {
    font-size: 8px;
    gap: 10px;
  }
  .nord-stage-top > div {
    gap: 14px;
  }
}

/* Shared header proportions across landing, product and generated editorial pages. */
:is(.landing-nav, .public-nav, body > header) > .wordmark { font-size: 24px; letter-spacing: 0; flex-shrink: 0; }
:is(.landing-nav, .public-nav, body > header) > .wordmark .buildable-lockup { font-size: inherit; }
:is(.public-nav, body > header) { min-height: 80px; padding-inline: 4%; box-sizing: border-box; }
@media (max-width: 520px) {
  :is(.landing-nav, .public-nav, body > header) > .wordmark { font-size: 17px; }
}
/* Peer choices use neutral surfaces. Orange remains the primary action signal. */
.product-story .product-variants,
.studio-product-page .revision-controls {
  display: flex; gap: 3px; padding: 3px; border: 1px solid #363b40;
  border-radius: 10px; background: #111315; width: fit-content; max-width: 100%;
}
.studio-product-page .revision-controls { margin: 20px 24px; width: auto; }
.product-story .product-variants button,
.studio-product-page .revision-controls button {
  flex: 1; min-height: 36px; padding: 8px 12px; border: 1px solid transparent;
  border-radius: 7px; background: transparent; color: #b9bdc0;
  font: 500 13px/1.4 var(--font-body); transition: background 160ms, color 160ms;
}
.product-story .product-variants button { flex: 1 0 auto; white-space: nowrap; }
.product-story .product-variants button:hover,
.studio-product-page .revision-controls button:hover { background: #24282c; color: #fff; }
.product-story .product-variants button[aria-pressed='true'],
.studio-product-page .revision-controls button[aria-pressed='true'] {
  background: #24282c; border-color: #41474d; color: #fff; box-shadow: 0 1px 3px #0002;
}
:is(.product-variants, .revision-controls) button:focus-visible { outline: 2px solid #8fa6ff; outline-offset: -2px; }
/* The component specimens are native controls, usable with keyboard and without JavaScript. */
.ds-state-example { --sample-bg:#f5f5f3; --sample-surface:#fff; --sample-ink:#171819; --sample-muted:#686b6e; --sample-line:#d6d8d5; --sample-hover:#ecedeb; --sample-focus:#2f4fd1; padding:24px; border:1px solid var(--sample-line); border-radius:16px; background:var(--sample-bg); color:var(--sample-ink); }
.ds-state-example.ds-state-dark { --sample-bg:#111315; --sample-surface:#1a1d20; --sample-ink:#fff; --sample-muted:#b9bdc0; --sample-line:#41474d; --sample-hover:#24282c; --sample-focus:#8fa6ff; }
.ds-state-example h3 { margin:0 0 8px; color:var(--sample-ink); }
.ds-state-example p { font-size:14px; color:var(--sample-muted); }
.ds-state-switch { display:flex; gap:3px; padding:3px; margin:20px 0; border:1px solid var(--sample-line); border-radius:10px; }
.ds-state-switch label { flex:1; position:relative; cursor:pointer; }
.ds-state-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.ds-state-switch span { display:block; text-align:center; padding:7px 10px; border:1px solid transparent; border-radius:7px; font:500 13px/1.4 var(--font-body); color:var(--sample-muted); }
.ds-state-switch label:hover span { background:var(--sample-hover); color:var(--sample-ink); }
.ds-state-switch input:checked + span { background:var(--sample-surface); border-color:var(--sample-line); color:var(--sample-ink); box-shadow:0 1px 3px #0001; }
.ds-state-switch input:focus-visible + span { outline:2px solid var(--sample-focus); outline-offset:-2px; }
.ds-state-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ds-state-actions button { min-height:40px; padding:8px 12px; border:1px solid var(--sample-line); border-radius:8px; font:500 13px var(--font-body); background:var(--sample-surface); color:var(--sample-ink); }
.ds-state-actions button:not(:disabled):hover { background:var(--sample-hover); }
.ds-state-actions button:focus-visible { outline:2px solid var(--sample-focus); outline-offset:3px; }
.ds-state-actions button:disabled { opacity:.5; cursor:not-allowed; }
.ds-state-loading { display:inline-flex; align-items:center; gap:8px; padding:8px 0; font-size:13px; }
.ds-state-loading i { width:12px; height:12px; border:2px solid var(--sample-line); border-top-color:var(--sample-ink); border-radius:50%; animation:ds-state-spin 1s linear infinite; }
@keyframes ds-state-spin { to { transform:rotate(360deg); } }
.studio-live-view { padding:80px 6%; background:#f5f5f3; }
.studio-live-view h2 { font:500 clamp(32px,4vw,52px)/1.08 var(--font-display); letter-spacing:-.035em; margin:16px 0; }
.studio-live-view > p { max-width:640px; color:#686b6e; line-height:1.6; }
.studio-live-view figure { margin:32px 0 0; }
.studio-live-view img { display:block; width:100%; height:auto; border:1px solid #d6d8d5; border-radius:16px; }
.studio-live-view figcaption { margin-top:12px; font-size:12px; color:#686b6e; line-height:1.5; }
@media (pointer:coarse) { .ds-state-switch span { min-height:44px; display:grid; place-items:center; } :is(.product-variants, .revision-controls) button { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { .ds-state-loading i { animation:none; } .product-story .product-variants button, .studio-product-page .revision-controls button { transition:none; } }

/* The page ends on this band; the footer lines continue its colour. */
body:has(main > .industry-page:last-child) {
  --page-end: #fff;
}

/* Industries band on /industry/: the seven sectors the footer links to. */
.industry-sectors { padding: 112px 6%; border-top: 1px solid #e0e1df; }
.industry-sector-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); column-gap: 9%; }
.industry-sector-list li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; padding: 28px 0; border-top: 1px solid #e0e1df; scroll-margin-top: 32px; }
.industry-sector-list .nord-index { grid-row: 1 / span 2; font: 12px var(--font-mono); padding-top: 6px; }
.industry-sector-list h3 { font: 500 24px/1.25 var(--font-display); letter-spacing: -.02em; margin: 0 0 8px; }
.industry-sector-list p { margin: 0; font-size: 16px; line-height: 1.6; color: #686b6e; }
.industry-sector-list li:target h3 { color: #a4381d; }
@media (max-width: 760px) {
  .industry-sectors { padding: 72px 6%; }
  .industry-sector-list { grid-template-columns: 1fr; }
}

/* "Expertise is human." on the frosted field (brand book 8.1): a quiet Chalk break between the dark sections. */
.nf-frosted {
  position: relative;
  overflow: hidden;
  min-height: min(78svh, 760px);
  display: flex;
  align-items: flex-end;
  background: radial-gradient(120% 80% at 70% 30%, #fbfbf8 0, #e4e6e1 55%, #d3d7d2 100%);
  color: #30383d;
}
.nf-frosted canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1);
}
.nf-frosted canvas.is-ready { opacity: 1; }
.nf-frosted-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 6vw clamp(48px, 9vh, 96px);
}
.nf-frosted-copy .eyebrow { color: #606970; }
.nf-frosted-copy h2 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(52px, 8vw, 132px);
  line-height: .96;
  letter-spacing: -.06em;
  color: #30383d;
}
.nf-frosted-copy p:not(.eyebrow) {
  max-width: 44ch;
  margin: 24px 0 0;
  color: #606970;
  font-size: 18px;
  line-height: 1.6;
}
@media (max-width: 600px) { .nf-frosted-copy { padding-inline: 24px; } }
@media (prefers-reduced-motion: reduce) { .nf-frosted canvas { transition: none; } }

/* OEM segment introduction: connect recurring order changes to product rules. */
.industry-oem-principle {
  margin: 0 0 64px;
  padding: clamp(24px, 4vw, 48px);
  border-left: 3px solid #c77745;
  background: #e9eae5;
}
.industry-oem-principle h2 {
  max-width: 850px;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.industry-oem-principle > p:not(.nord-index) {
  max-width: 800px;
  line-height: 1.7;
}
.industry-oem-principle a {
  display: inline-block;
  margin-top: 12px;
  color: #263f61;
}
/* The equipment-makers page (content/public/equipment-makers.md) on the industry components. */
.industry-area-copy > a:not(:last-child) { margin-right: 24px; }
.oem-page .oem-gates{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.oem-page .oem-gates article{border-top:1px solid var(--line);padding-top:20px}
.oem-page .oem-gates h3{margin:10px 0 8px}
.oem-page .oem-evidence{margin-top:40px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-card);max-width:760px}
.oem-page .oem-evidence p{margin:0 0 10px}
.oem-page .oem-source{font-size:14px;color:var(--ink-2)}
.oem-page .oem-stays{padding:8px 0}
.oem-page .oem-stays ul{list-style:none;padding:0;margin:20px 0}
.oem-page .oem-stays li{border-top:1px solid var(--line);padding:12px 0}
.oem-page .oem-steps{padding-left:20px;margin:16px 0 0}
.oem-page .oem-steps li{margin-bottom:10px}
@media(max-width:760px){.oem-page .oem-gates{grid-template-columns:1fr}}
/* Keep decorative line-field glyphs inside the industry opening. */
.industry-hero { overflow: clip; }

/* Nordform company expression. Workspace sizing is intentionally separate. */
:root {
  --bg: #f3f3ef;
  --surface: #fafaf7;
  --surface-2: #e6e8e7;
  --ink: #30383d;
  --ink-2: #606970;
  --line: #cdd1d2;
  --action: #263f61;
  --action-hover: #1c304b;
  --action-ink: #263f61;
  --on-action: #f3f3ef;
  --action-soft: #e4e9ef;
}
.landing-nav,
.landing-nav.is-scrolled,
.nord-intro {
  background: #f3f3ef;
}
.nord-intro h1,
.hero h1,
.editorial h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(52px, 8.5vw, 128px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.nord-intro h1 {
  max-width: 1200px;
  margin-inline: auto;
}
.nord-practices h2,
.nord-intro + section h2 {
  font: 400 clamp(40px, 5.5vw, 88px)/1.06 var(--font-display);
  letter-spacing: -0.035em;
}
h3 {
  font-weight: 600;
}

.nord-intro .brand-pattern {
  display: none;
}
footer .brand-pattern {
  display: none;
}
.nf-photography {
  background: #f3f3ef;
  padding: 80px 6vw;
}
.nf-photography h2 {
  font: 400 clamp(40px, 5.5vw, 88px)/1.06 var(--font-display);
  letter-spacing: -0.035em;
  max-width: 900px;
}
.nf-photography figure {
  margin: 32px 0 0;
}
.nf-photography img {
  display: block;
  width: 100%;
  height: auto;
}
.nf-photography figcaption {
  font: 12px/1.6 var(--font-mono);
  color: #606970;
  margin-top: 12px;
}
@media (prefers-reduced-motion: no-preference) {
  .nord-intro h1 {
    animation: nf-arrive 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@keyframes nf-gesture {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes nf-arrive {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  .nord-intro {
    padding-top: 48px;
  }
  .nf-photography {
    padding: 48px 24px;
  }
}

.landing-nav :is(.wordmark, .buildable-lockup, .public-desktop-nav a, .public-mobile-menu summary) {
  color: #30383d;
}
.landing-nav .nav-cta {
  background: #263f61;
  color: #f3f3ef;
}
.nord-primary {
  background: #263f61;
  color: #f3f3ef;
}
.nord-primary:hover {
  background: #1c304b;
  color: #f3f3ef;
}
.nord-intro h1 span {
  color: #263f61;
}

.nord-intro {
  overflow: hidden;
}

/* Header hierarchy: wordmark leads; workspace access stays secondary. */
:is(.landing-nav, .public-nav, body > header) .nordform-wordmark {
  width: 190px;
  max-width: none;
}
:is(.landing-nav, .public-nav, body > header) .nav-cta,
.landing-nav:where(:has(.public-mobile-menu[open])) .nav-cta {
  background: transparent;
  color: #30383d;
  border: 1px solid #b4bbc0;
  border-radius: 4px;
  padding: 10px 14px;
  min-height: 44px;
  font-weight: 500;
  box-shadow: none;
}
:is(.landing-nav, .public-nav, body > header) .nav-cta:hover,
.landing-nav:where(:has(.public-mobile-menu[open])) .nav-cta:hover {
  background: #e6e8e7;
  color: #263f61;
  border-color: #858f96;
}
:is(.landing-nav, .public-nav, body > header) .nav-cta:focus-visible {
  outline: 2px solid #263f61;
  outline-offset: 4px;
}
.nord-primary {
  font-weight: 500;
  padding: 14px 22px;
  border-radius: 4px;
}
@media (max-width: 600px) {
  :is(.landing-nav, .public-nav, body > header) .nordform-wordmark {
    width: 148px;
  }
  :is(.landing-nav, .public-nav, body > header) .nav-cta {
    padding: 10px 12px;
    font-size: 13px;
  }
}
@media (max-width: 380px) {
  :is(.landing-nav, .public-nav, body > header) .nordform-wordmark {
    width: 126px;
  }
  :is(.landing-nav, .public-nav, body > header) .nav-cta svg {
    display: none;
  }
}
:is(.landing-nav, .public-nav, body > header) .nordform-lockup > .nordform-wordmark {
  width: 190px;
  max-width: none;
}
@media (max-width: 600px) {
  :is(.landing-nav, .public-nav, body > header) .nordform-lockup > .nordform-wordmark {
    width: 148px;
  }
}
@media (max-width: 440px) {
  :is(.landing-nav, .public-nav, body > header) .nordform-lockup > .nordform-wordmark {
    width: 128px;
  }
  :is(.landing-nav, .public-nav, body > header) .nav-cta {
    padding-inline: 10px;
  }
}

/* A quiet glass surface keeps navigation readable over photography and motion. */
.landing-nav.is-scrolled {
  background: rgba(243, 243, 239, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  border-bottom: 1px solid rgba(48, 56, 61, 0.12);
  box-shadow: 0 4px 24px rgba(20, 28, 34, 0.05);
}
.landing-nav .nordform-wordmark {
  transition: color 240ms ease;
}
.landing-nav.is-scrolled .nordform-wordmark {
  color: #263f61;
}
.landing-nav:where(:has(.public-mobile-menu[open])) {
  background: #f3f3ef;
}
@supports not (backdrop-filter: blur(1px)) {
  .landing-nav.is-scrolled {
    background: #f3f3ef;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-nav .nordform-wordmark {
    transition: none;
  }
}

.ds-white {
  background: #f3f3ef;
  color: #30383d;
}
.ds-graphite {
  background: #30383d;
  color: #f3f3ef;
}
.ds-vermilion {
  background: #c77745;
  color: #fff;
}
.ds-soft {
  background: #cdd1d2;
  color: #30383d;
}
.ds-type-display > p {
  font-size: clamp(52px, 8vw, 128px);
  font-weight: 500;
}

/* One spacious public header, without the compressed floating pill. */
:is(.landing-nav, .landing-nav.is-scrolled, .public-nav, body > header) {
  width: 100%;
  margin: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  padding-inline: 4%;
  min-height: 88px;
  height: 88px;
  gap: 32px;
  box-sizing: border-box;
}
:is(.landing-nav, .public-nav, body > header) > .public-desktop-nav {
  margin-left: auto;
  gap: 28px;
  flex: 0 1 auto;
}
:is(.landing-nav, .public-nav, body > header) > .nav-cta {
  margin-left: 0;
}
@media (max-width: 1200px) {
  :is(.landing-nav, .public-nav, body > header) > .public-desktop-nav {
    display: none;
  }
  :is(.landing-nav, .public-nav, body > header) > .public-mobile-menu {
    display: block;
    margin-left: auto;
  }
}
@media (max-width: 600px) {
  :is(.landing-nav, .landing-nav.is-scrolled, .public-nav, body > header) {
    height: 72px;
    min-height: 72px;
    padding-inline: 16px;
    gap: 14px;
  }
}
/* The gesture belongs to the cover edge; it no longer occupies its own section. */
.nord-intro {
  position: relative;
  padding: 44px 6% 84px;
}
.nord-intro h1 {
  font-size: clamp(52px, 7.8vw, 112px);
}
.nord-intro-foot {
  padding-top: 36px;
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .nord-intro {
    padding: 32px 22px 56px;
  }

  .nord-intro-foot {
    padding-top: 30px;
  }
}
/* Shared company expression, loaded after each page's structural styles. */
body,
.ep,
.studio-product-page {
  background: #f3f3ef;
  color: #30383d;
}
.ep {
  --green: #263f61;
  --lime: #c77745;
  --muted: #606970;
  --line: #cdd1d2;
}
main.editorial {
  max-width: 1120px;
  padding: 72px 6% 96px;
}
main.editorial h1,
.industry-hero h1,
.studio-product-hero h1,
.design-system .ds-hero h1 {
  font: 500 clamp(52px, 7.5vw, 112px)/1.04 var(--font-display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.ep .ep-hero h1 {
  font: 500 clamp(48px, 5.6vw, 88px)/1.04 var(--font-display);
  letter-spacing: -0.04em;
}
main.editorial h2 {
  font: 400 clamp(32px, 4.2vw, 56px)/1.1 var(--font-display);
  letter-spacing: -0.025em;
}
.ep .ep-hero h1 > span,
.studio-product-hero h1 span {
  color: #263f61;
}
.design-system .ds-hero {
  background: #30383d;
}
.design-system .ds-hero .nord-primary,
main.editorial .cta,
.ep .ep-button {
  background: #263f61;
  color: #f3f3ef;
  border-radius: 4px;
  font-weight: 500;
}
.ds-hero-rule i {
  background: #c77745;
}
.studio-product-hero .nord-index,
.studio-feature:not(.studio-feature-dark) .nord-index,
.studio-product-scope .nord-index,
.studio-product-cta .nord-index {
  color: #606970;
}
.ep .ep-button:hover {
  background: #1c304b;
}
.ep :is(a, button):focus-visible {
  outline-color: #263f61;
}

.nord-intro {
  text-align: left;
  padding-top: 36px;
  padding-bottom: 40px;
  isolation: isolate;
}
.nord-intro > * {
  position: relative;
  z-index: 1;
}
.nord-intro .nord-kicker,
.nord-intro .nord-actions {
  justify-content: flex-start;
}
.nord-intro h1 {
  max-width: 73%;
  margin: 0;
  font-size: clamp(56px, 7vw, 104px);
  text-wrap: initial;
}
.nord-intro .nord-lead {
  max-width: 570px;
  margin: 24px 0;
}
.nord-intro .nord-intro-foot {
  padding-top: 36px;
  max-width: 65%;
}

@media (max-width: 900px) {
  .nord-intro h1 {
    max-width: 90%;
    font-size: clamp(52px, 8vw, 72px);
  }

  .nord-intro .nord-lead {
    max-width: 80%;
  }
}
@media (max-width: 600px) {
  .nord-intro {
    padding: 28px 22px 82px;
  }
  .nord-intro h1 {
    max-width: 100%;
    font-size: clamp(48px, 12.5vw, 64px);
  }
  .nord-intro .nord-kicker {
    font-size: 9px;
    letter-spacing: 0.06em;
  }
  .nord-intro .nord-lead {
    max-width: 100%;
  }
  .nord-intro .nord-actions {
    align-items: flex-start;
  }
  .nord-intro .nord-intro-foot {
    max-width: 100%;
    gap: 20px;
  }
}

/* Softer public actions, shared by the landing and company pages. */
:is(.landing-nav, .landing-nav.is-scrolled, .public-nav, body > header) .nav-cta,
.landing-nav:where(:has(.public-mobile-menu[open])) .nav-cta,
.nord-primary,
.design-system .ds-hero .nord-primary,
main.editorial .cta,
.ep .ep-button,
.ds-secondary {
  border-radius: 999px;
}
body :is(.nord-primary, .cta, .ds-secondary),
body main.enterprise-page :is(.button, .secondary-button):is(:hover, :focus-visible, :active),
body main.enterprise-page :is(.button, .secondary-button) {
  border-radius: 999px;
}

@media (min-width: 901px) {
  .nord-intro h1 {
    max-width: 70%;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
}
@media (max-width: 600px) {
  .nord-intro {
    padding-bottom: 174px;
  }
}

/* Framed photography shares the softer public visual language. */
:root {
  --nf-image-radius: 24px;
}
.nf-photography img,
.editorial-image,
.design-illustration img,
main.editorial img,
.industry-index-card,
.nord-practices article,
.studio-live-view img,
.industry-area img,
.industry-facilities img,
.design-system .ds-image-band {
  border-radius: var(--nf-image-radius);
}
.industry-index-card,
.nord-practices article,
.design-system .ds-image-band {
  overflow: hidden;
}
@media (max-width: 600px) {
  :root {
    --nf-image-radius: 18px;
  }
}
@media (min-width: 901px) {
  .nord-intro .nord-intro-foot {
    max-width: 54%;
  }
}

/* Scrolled navigation reverses to graphite with light controls. */
.landing-nav.is-scrolled {
  background: rgba(48, 56, 61, 0.94);
  color: #f3f3ef;
  border-bottom-color: rgba(243, 243, 239, 0.16);
}
.landing-nav.is-scrolled
  :is(
    .wordmark,
    .buildable-lockup,
    .nordform-wordmark,
    .public-desktop-nav a,
    .public-mobile-menu summary
  ) {
  color: #f3f3ef;
}
.landing-nav.is-scrolled .nav-cta {
  color: #f3f3ef;
  background: transparent;
  border-color: rgba(243, 243, 239, 0.45);
}
.landing-nav.is-scrolled .nav-cta:hover {
  color: #fff;
  background: rgba(243, 243, 239, 0.1);
  border-color: #f3f3ef;
}
/* The generic header hover paints a light pill; on graphite the links stay light, so darken the pill instead. */
.landing-nav.is-scrolled .public-desktop-nav a:hover {
  color: #fff;
  background: rgba(243, 243, 239, 0.1);
}
.landing-nav.is-scrolled :is(a, summary):focus-visible {
  outline: 2px solid #cdd1d2;
  outline-offset: 4px;
}
.landing-nav.is-scrolled:where(:has(.public-mobile-menu[open])),
.landing-nav.is-scrolled .public-mobile-menu[open] nav {
  background: #30383d;
  color: #f3f3ef;
}
.landing-nav.is-scrolled .public-mobile-menu[open] nav a {
  color: #f3f3ef;
}
.landing-nav.is-scrolled:where(:has(.public-mobile-menu[open])) .nav-cta {
  color: #f3f3ef;
  background: transparent;
  border-color: rgba(243, 243, 239, 0.45);
}
@supports not (backdrop-filter: blur(1px)) {
  .landing-nav.is-scrolled {
    background: #30383d;
  }
}

/* Filled ink actions always carry chalk labels, regardless of page link styles. */
body :is(.nord-primary, .editorial .cta, .ep .ep-button),
body
  :is(.nord-primary, .editorial .cta, .ep .ep-button):is(:visited, :hover, :focus-visible, :active),
body .industry-page a.nord-primary,
body .design-system .ds-hero a.nord-primary {
  background: #263f61;
  color: #f3f3ef;
}
body :is(.nord-primary, .editorial .cta, .ep .ep-button):hover {
  background: #1c304b;
}
.landing-nav.is-scrolled:where(:has(.public-mobile-menu[open]))
  :is(.wordmark, .buildable-lockup, .nordform-wordmark, .public-mobile-menu summary) {
  color: #f3f3ef;
}

/* Brand book 2.1: company expression. Quiet working pages use the same foundation. */
.nord-intro {
  padding: 48px max(24px, 5vw) 32px;
  min-height: 0;
}
.nord-intro::after {
  content: none;
}
.nord-intro h1 {
  max-width: 1100px;
  margin: 0;
  font-weight: 600;
  font-size: clamp(52px, 7.5vw, 112px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.nord-intro h1 span {
  color: #30383d;
}
.nord-intro .nord-lead {
  max-width: 620px;
  font-size: 18px;
  line-height: 28px;
}
/* The signature runs edge to edge: its side margins cancel the intro's padding. */
.nord-signature {
  margin: 40px calc(-1 * max(24px, 5vw)) 24px;
}
.nord-signature .taking-form {
  width: 100%;
}
.nord-intro .nord-intro-foot {
  max-width: none;
  margin-top: 24px;
}
.nord-kicker,
.nord-index {
  color: #606970;
  font-size: 12px;
}
.nord-kicker > span {
  background: #c77745;
  border-radius: 0;
  width: 24px;
  height: 2px;
}
body
  :is(
    .editorial h1,
    .ep h1,
    .industry-page h1,
    .design-system h1,
    .product-page h1,
    .how-we-work h1
  ) {
  font-weight: 600;
}
body :is(.nf-photography h2, .nord-practice h2, .ds-section h2, .ep h2) {
  font-weight: 500;
}
body
  :is(
    .nf-photography img,
    .editorial-image,
    .design-illustration img,
    main.editorial img,
    .industry-area img,
    .industry-facilities img,
    .ds-image-band img
  ) {
  height: auto;
  border: 0;
  box-shadow: none;
}
/* No clipping on technical drawings; photographic corners are measured by photography.mjs. */
body :is(.nf-photography figure, .design-illustration, .ds-image-band) {
  container-type: inline-size;
}
body
  :is(
    .nf-photography img,
    .editorial-image,
    .design-illustration img,
    main.editorial img,
    .industry-area img,
    .industry-facilities img,
    .ds-image-band img
  ) {
  clip-path: none;
  border-radius: 3.1% / 5.5%;
}
body .ds-image-band {
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.nord-practice-card {
  border: 0;
  box-shadow: none;
}
.nord-practice-card :is(img, video) {
  border-radius: 3.1% / 5.5%;
}
.nf-family-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.nf-family-grid .taking-form {
  margin-block: 24px;
}
@media (max-width: 760px) {
  .nf-family-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .nord-intro {
    padding: 40px 24px 28px;
  }
  .nord-intro h1 {
    max-width: none;
    font-size: clamp(52px, 10vw, 64px);
  }
  .nord-signature {
    margin: 32px -24px 24px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .nord-intro h1 {
    animation: nf-arrive 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@keyframes nf-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.design-system .ds-hero {
  text-align: left;
  padding-inline: max(24px, 5vw);
}
.design-system .ds-hero h1 {
  margin-left: 0;
  max-width: 1050px;
}
.design-system .ds-hero p {
  margin-left: 0;
}
.design-system .ds-hero .taking-form {
  color: #cdd1d2;
  margin-top: 48px;
}
/* Grey carries the identity; ink and orange-copper are restrained accents. */
.nord-intro {
  background: #30383d;
  color: #f3f3ef;
}
.nord-intro h1,
.nord-intro h1 span {
  color: #f3f3ef;
  animation: none;
}
.nord-intro :is(.nord-lead, .nord-intro-foot, .nord-kicker, .nord-index) {
  color: #cdd1d2;
}
.nord-intro .nord-intro-foot {
  border-color: #606970;
}
.nord-intro .taking-form {
  color: #cdd1d2;
}
body .nord-intro .nord-primary {
  background: #f3f3ef;
  color: #30383d;
}
body .nord-intro .nord-primary:hover {
  background: #cdd1d2;
}
.nord-intro a:not(.nord-primary) {
  color: #f3f3ef;
}
.nord-intro a:focus-visible {
  outline-color: #f3f3ef;
}
main.editorial img[src$='.svg'],
.design-illustration img[src$='.svg'] {
  border-radius: 0;
}

body .nord-intro a.nord-primary,
body .nord-intro a.nord-primary:visited {
  background: #f3f3ef;
  color: #30383d;
  box-shadow: none;
}
body .nord-intro a.nord-primary:hover {
  background: #cdd1d2;
  color: #30383d;
}
.hero-copy > *,
.expert-landing > h1 {
  animation: none;
}
.ds-vermilion {
  color: #171819;
}

body .design-system .ds-hero p {
  margin-left: 0;
  margin-right: auto;
}

/* The Lift paths shape the light-to-graphite boundary above the closing wordmark. */
body .site-footer {
  padding-top: 0;
  background: #30383d;
}
.site-footer .footer-signature {
  width: 100%;
  margin: 0 0 64px;
  overflow: hidden;
}
.site-footer .footer-signature .footer-field {
  fill: #30383d;
}
.site-footer .footer-signature .taking-form {
  color: #858f96;
}
.site-footer .footer-brand .wordmark {
  display: inline-flex;
  margin-bottom: 40px;
}
.site-footer .footer-brand h2 {
  margin-top: 0;
}
.site-footer .footer-top {
  column-gap: 40px;
  row-gap: 56px;
}
@media (max-width: 600px) {
  .site-footer .footer-signature {
    margin-bottom: 48px;
  }
  .site-footer .footer-brand .wordmark {
    margin-bottom: 32px;
  }
}
/* One action shape across the public site, including editorial and contact CTAs. */
body
  :is(
    button:not([role='tab']),
    [role='button'],
    .button,
    .secondary-button,
    .cta,
    .nav-cta,
    .nord-primary,
    .ep-button,
    .ds-secondary,
    .nord-contact a
  ) {
  border-radius: 999px !important;
}

/* Studio features in the footer: the name, then one quiet line saying what it does. */
.site-footer .footer-column a.footer-feature small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: #a4a9ac;
}
.site-footer .footer-column a.footer-feature:hover small {
  color: inherit;
}

/* Links on dark bands: the site-wide navy hover would vanish into the background. */
.nord-stage-top a:hover,
.industry-pilot a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Landing: the cover shows only the mark, top right. The navigation slides in after the cover and
   away again over the footer. It stays focusable while away, and focus brings it back. */
.landing-nav {
  transition:
    transform 240ms ease,
    opacity 240ms ease,
    background-color 240ms ease,
    box-shadow 240ms ease;
}
.landing-nav.is-away:not(:focus-within) {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.landing-intro-mark {
  position: fixed;
  z-index: 101;
  top: 0;
  right: 4%;
  height: 88px;
  display: flex;
  align-items: center;
  color: #263f61;
  transition:
    transform 240ms ease,
    opacity 240ms ease;
}
.landing-intro-mark .nordform-wordmark {
  width: 190px;
  max-width: none;
}
.landing-intro-mark.is-away {
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 600px) {
  .landing-intro-mark {
    right: 16px;
    height: 72px;
  }
  .landing-intro-mark .nordform-wordmark {
    width: 128px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-nav,
  .landing-intro-mark {
    transition: opacity 120ms linear;
  }
  .landing-nav.is-away:not(:focus-within),
  .landing-intro-mark.is-away {
    transform: none;
  }
}

/* The intro is graphite to the top edge; its twin of the header shows the symbol alone, in paper ink. */
.landing-nav-space {
  background: #30383d;
}
.landing-intro-mark {
  color: #f3f3ef;
}
.landing-intro-mark .nordform-lockup > :is(.nordform-wordmark, .nordform-descriptor) {
  display: none;
}
.landing-intro-mark .nordform-mark {
  width: 40px;
  height: 40px;
}
@media (max-width: 600px) {
  .landing-intro-mark .nordform-mark {
    width: 32px;
    height: 32px;
  }
}

/* Short reading paths; detailed scope stays available and deep-linkable. */
.public-detail { border-top: 1px solid var(--line); padding: 20px 0; scroll-margin-top: 96px; }
.public-detail > summary { cursor: pointer; font-size: 18px; font-weight: 500; line-height: 1.5; }
.public-detail > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.public-detail > p { max-width: 72ch; }
.page-jumps { display: flex; flex-wrap: wrap; gap: 14px 26px; padding: 20px 0; border-block: 1px solid var(--line); }
.workflow-facts { margin: 24px 0; }
.workflow-facts dt { font-size: 12px; font-weight: 600; margin-top: 16px; }
.workflow-facts dd { margin: 5px 0 0; font-size: 16px; line-height: 1.6; max-width: 48ch; }

/* Line system for the public sites (nordformgroup.com, nordform.ai), brand book 2.2.
   A drawing sheet: rails at the gutters, open hairline section rules, hairline Taking form
   fields, drafting-mark particles, big-word tables and a title block. Colours follow currentColor so
   every piece reads on Chalk, Paper and Graphite alike. Markup comes from packages/ui/src/lines.mjs. */
:root {
  --nf-copper: #c77745;
  --nf-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
.nf-sheet {
  position: relative;
}
.nf-rails {
  position: absolute;
  inset: 0 var(--nf-gutter, max(24px, 6vw));
  border-inline: 1px solid rgba(138, 146, 151, 0.3);
  pointer-events: none;
  z-index: 1;
}

/* A section rule: one open hairline from rail to rail, with nothing on its ends (founder, 15 October). */
.nf-rule {
  --nf-hair: color-mix(in srgb, currentColor 22%, transparent);
  position: relative;
  height: 1px;
}
.nf-rule::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--nf-hair);
  transform-origin: left center;
}
.nf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
}
.nf-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 400 11px/1.6 var(--nf-mono, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nf-label::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--nf-copper, #c77745);
}
.nf-index {
  flex: none;
  white-space: nowrap;
  font: 400 11px/1.6 var(--nf-mono, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Hero field: full-bleed hairlines, a copper signal, drafting marks. */
.nf-field {
  position: relative;
  height: clamp(140px, 16vw, 220px);
}
.nf-field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.nf-field path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.nf-field .nf-signal {
  display: none;
  stroke: var(--nf-copper, #c77745);
  stroke-width: 1.6;
  vector-effect: none;
  stroke-dasharray: 0.05 1.2;
  stroke-dashoffset: 1.05;
}
.nf-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nf-pt {
  position: absolute;
  font: 400 10px/1 var(--nf-mono, monospace);
  transform: translate(-50%, -50%);
  opacity: var(--o);
}
.nf-pt-copper {
  color: var(--nf-copper, #c77745);
}

/* A card's line study and the grid of hairline cells it sits in. */
.nf-cell-lines {
  display: block;
  width: 100%;
  height: 96px;
}
.nf-cell-lines path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Big words drawn from a sentence on the page; the sentence carries the meaning. */
.nf-words {
  --nf-hair: color-mix(in srgb, currentColor 18%, transparent);
  display: grid;
  border-top: 1px solid var(--nf-hair);
  border-left: 1px solid var(--nf-hair);
}
.nf-words > * {
  position: relative;
  border-right: 1px solid var(--nf-hair);
  border-bottom: 1px solid var(--nf-hair);
  padding: 22px 20px 12px;
}
.nf-words > .nf-fill {
  padding: 0;
}
.nf-words small {
  position: absolute;
  top: 14px;
  right: 14px;
  font: 400 10px/1 var(--nf-mono, monospace);
  letter-spacing: 0.14em;
  opacity: 0.72;
}
.nf-word {
  display: block;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

/* Dashed is proposed, solid is accepted: the solid line grows over the dashed one. */
.nf-timeline {
  position: relative;
  border-left: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
}
.nf-timeline::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, currentColor 45%, transparent);
  transform-origin: top;
}

/* The footer's title block, as on a drawing sheet. */
.nf-titleblock {
  --nf-hair: color-mix(in srgb, currentColor 18%, transparent);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--nf-hair);
  border-left: 1px solid var(--nf-hair);
}
.nf-titleblock > div {
  padding: 14px 16px 16px;
  border-right: 1px solid var(--nf-hair);
  border-bottom: 1px solid var(--nf-hair);
}
.nf-titleblock small {
  display: block;
  font: 400 9px/1.4 var(--nf-mono, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.nf-titleblock span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .nf-pt:nth-child(3n) {
    display: none;
  }
}
@media (max-width: 760px) {
  .nf-titleblock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nf-words {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .nf-words > .nf-fill {
    display: none;
  }
}

/* Motion: everything plays once and then holds still, so nothing on the sheet needs a pause control
   (WCAG 2.2.2 covers motion that runs on past five seconds). The copper signal crosses once. */
@media (prefers-reduced-motion: no-preference) {
  .nf-rule::before {
    animation: nf-rule 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .nf-draw path {
    animation: nf-draw 2125ms cubic-bezier(0.25, 0.6, 0.2, 1) both;
    animation-delay: calc(var(--i) * 90ms + 200ms);
  }
  .nf-field .nf-signal {
    display: inline;
    animation: nf-signal 4.2s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: var(--d);
  }
  .nf-pt {
    animation: nf-pt 2600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--t);
  }
  .nf-rise {
    animation: nf-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .nf-rise-2 {
    display: inline-block;
    animation: nf-rise 700ms 140ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .nf-rise-3 {
    animation: nf-rise 700ms 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  @supports (animation-timeline: view()) {
    .nf-rule::before {
      animation: nf-rule linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 14%;
    }
    .nf-cell-lines path {
      animation: nf-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .nf-timeline::before {
      animation: nf-grow linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 65%;
    }
    .nf-word {
      animation: nf-word linear both;
      animation-timeline: view();
      animation-range: cover 20% cover 45%;
    }
    .nf-cell {
      animation: nf-cell linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}
@keyframes nf-rule {
  from {
    transform: scaleX(0);
  }
}
/* A clip reveal, not a dash: the fields stretch to any width, which a normalised dash cannot follow. */
@keyframes nf-draw {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes nf-signal {
  from {
    stroke-dashoffset: 1.05;
  }
  to {
    stroke-dashoffset: -0.05;
  }
}
@keyframes nf-pt {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
  }
  35% {
    opacity: 0.75;
  }
  100% {
    opacity: var(--o);
    transform: translate(-50%, -50%);
  }
}
@keyframes nf-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes nf-grow {
  from {
    transform: scaleY(0);
  }
}
@keyframes nf-word {
  from {
    color: #c3c8cb;
  }
}
@keyframes nf-cell {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
@media print {
  .nf-particles,
  .nf-signal {
    display: none !important;
  }
}

/* nordform.ai on the shared line system (packages/ui/nordform/lines.css), brand book 2.2.
   Loaded after identity.css: the hero, the areas of work, the "Expertise is human." words and the
   footer title block use the same drawing sheet as nordformgroup.com. */

/* Opening: Chalk, left aligned, the grey second clause, a full-bleed Lift field. */
body .nord-intro.nf-hero {
  --nf-gutter: max(24px, 5vw);
  background: #f3f3ef;
  color: #30383d;
  text-align: left;
  min-height: 0;
  padding: 24px var(--nf-gutter) 0;
}
/* The spacer under the fixed navigation takes the opening's Chalk, not the old Graphite cover. */
body:has(.nf-hero) .landing-nav-space {
  background: #f3f3ef;
}
body .nord-intro.nf-hero::after {
  content: none;
}
.nf-hero .nf-label {
  color: #30383d;
}
.nf-hero .nf-index {
  color: #606970;
}
.nf-hero-over {
  margin: 88px 0 0;
  font: 400 12px/1.6 var(--nf-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #606970;
}
body .nord-intro.nf-hero h1 {
  max-width: 11.5ch;
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(52px, 8.4vw, 128px);
  line-height: 0.94;
  letter-spacing: -0.05em;
  color: #30383d;
  text-wrap: balance;
}
body .nord-intro.nf-hero h1 span {
  color: #8a9297;
}
.nf-hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  margin-top: 56px;
}
body .nord-intro.nf-hero .nord-lead {
  max-width: 420px;
  margin: 0;
  color: #606970;
  font-size: 18px;
  line-height: 1.5;
}
.nf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}
body .nord-intro.nf-hero a.nf-text-link {
  color: #30383d;
  font-size: 15px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.24s ease-out;
}
body .nord-intro.nf-hero a.nf-text-link:hover {
  background-size: 100% 1px;
}
body .nord-intro.nf-hero a.nord-primary,
body .nord-intro.nf-hero a.nord-primary:visited {
  background: #263f61;
  color: #fafaf7;
}
body .nord-intro.nf-hero a.nord-primary:hover {
  background: #1c304b;
  color: #fafaf7;
}
.nf-hero-field {
  margin: 72px calc(-1 * var(--nf-gutter)) 0;
  color: #30383d;
}
.nf-hero-cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 28px;
  font: 400 10px/1.6 var(--nf-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #606970;
}
@media (max-width: 760px) {
  body .nord-intro.nf-hero {
    padding-top: 16px;
  }
  .nf-hero-over {
    margin-top: 48px;
  }
  .nf-hero-foot {
    grid-template-columns: minmax(0, 1fr);
  }
  .nf-hero-actions {
    justify-content: flex-start;
  }
  .nf-hero-cap span:last-child {
    display: none;
  }
}

/* Areas of work: a grid of hairline cells on Graphite, each with its line study. */
body .nord-practice.nf-dark {
  background: #30383d;
  color: #f3f3ef;
}
.nf-dark .nord-practice-lead,
.nf-dark .nord-practice-note {
  color: #b9bfc1;
}
.nf-areas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 1px solid rgba(250, 250, 247, 0.18);
  border-left: 1px solid rgba(250, 250, 247, 0.18);
}
body a.nf-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 400px;
  padding: 24px 24px 28px;
  border-right: 1px solid rgba(250, 250, 247, 0.18);
  border-bottom: 1px solid rgba(250, 250, 247, 0.18);
  color: #f3f3ef;
  text-decoration: none;
}
.nf-area-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 400 11px/1.6 var(--nf-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b9bfc1;
}
.nf-area-lines {
  flex: 1;
  display: flex;
  align-items: center;
  color: #8f989d;
  transition: color 0.24s ease-out;
}
.nf-area:hover .nf-area-lines {
  color: #c77745;
}
.nf-area h3 {
  margin: 0;
  font: 400 22px/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: #f3f3ef;
}
.nf-area-body > span {
  display: block;
  margin-top: 8px;
  color: #b9bfc1;
  font-size: 15px;
  line-height: 1.5;
}
body .nf-area-body > .nf-area-action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: #f3f3ef;
  font-size: 14px;
}
.nf-area-action svg {
  width: 16px;
  height: 16px;
  transition: transform 0.16s ease-out;
}
.nf-area:hover .nf-area-action svg {
  transform: translate(2px, -2px);
}
@media (max-width: 1100px) {
  .nf-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .nf-areas {
    grid-template-columns: minmax(0, 1fr);
  }
  body a.nf-area {
    min-height: 0;
  }
}

/* "Expertise is human.": the sentence, then its four verbs as big words. */
.nf-frosted-copy .nf-words {
  grid-template-columns:
    minmax(0, 3.2fr) minmax(0, 2.4fr) minmax(0, 2.6fr) minmax(0, 1.8fr)
    repeat(4, 14px);
  margin-top: 56px;
  color: #30383d;
}
.nf-frosted-copy .nf-word {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 92px);
}

/* Footer title block, between the link columns and the legal line. */
.site-footer > .footer-sheet {
  margin: 8px 5% 0;
  color: #f3f3ef;
}
.footer-sheet .nf-titleblock {
  margin-top: 24px;
}
.footer-sheet .nf-titleblock small {
  color: #b9bfc1;
  opacity: 1;
}
.footer-sheet .nf-titleblock a {
  color: inherit;
}
.footer-sheet .nf-titleblock a:hover {
  text-decoration: underline;
}

/* The footer ends on the lockup drawn across the page, faint as a watermark: the mark and the
   wordmark at full width, fading out towards the bottom edge. Decorative; the legal line above
   carries the name. */
.site-footer > .footer-watermark {
  display: flex;
  align-items: center;
  gap: 2.2vw;
  margin: 72px 5% 0;
  padding-bottom: 3vw;
  color: #f3f3ef;
  opacity: 0.09;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 105%);
  mask-image: linear-gradient(180deg, #000 35%, transparent 105%);
  pointer-events: none;
  user-select: none;
}
.footer-watermark .nordform-mark {
  flex: none;
  width: 16.5vw;
  height: auto;
}
.footer-watermark .nordform-wordmark {
  flex: 1;
  width: auto;
  height: auto;
  min-width: 0;
}
@media (max-width: 600px) {
  .site-footer > .footer-watermark {
    margin-top: 48px;
  }
}

/* Editorial opening: the work is visible beside the proposition. */
.nf-hero-editorial {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 5vw;
  align-items: center;
  padding: 56px 0 48px;
}
.nf-hero-copy {
  min-width: 0;
}
.nf-hero-over {
  margin: 0 0 28px;
  font-size: 10px;
}
body .nord-intro.nf-hero h1 {
  font-size: clamp(56px, 6.7vw, 104px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin: 0;
  max-width: 11.5ch;
}
body .nord-intro.nf-hero h1 span {
  color: #606970;
}
.nf-hero-foot {
  display: block;
  margin-top: 32px;
}
body .nord-intro.nf-hero .nord-lead {
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.65;
}
.nf-hero-actions {
  justify-content: flex-start;
  flex-direction: row-reverse;
  width: fit-content;
  gap: 20px;
  margin-top: 28px;
}
.nf-hero-image {
  position: relative;
  margin: 0;
  align-self: stretch;
  min-height: 460px;
  background: #e6e8e7;
  border-radius: 24px;
  overflow: hidden;
}
.nf-hero-image img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}
.nf-hero-image figcaption {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 48px 24px 22px;
  color: #fafaf7;
  background: linear-gradient(transparent, rgba(20, 27, 32, 0.82));
  font: 10px/1.5 var(--nf-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.nf-hero-field {
  margin-top: 0;
}
.nf-hero-field .nf-field {
  height: 110px;
}
.nf-hero-cap {
  padding-bottom: 24px;
}
.nf-areas {
  gap: 0;
}
body a.nf-area {
  padding: 30px;
  transition: background 0.18s ease;
}
body a.nf-area:hover,
body a.nf-area:focus-visible {
  background: #39434b;
}
.nf-area h3 {
  font-weight: 500;
  font-size: 26px;
}
.nf-area-lines {
  color: #cdd1d2;
}
@media (min-width: 1600px) {
  .nf-hero-editorial {
    max-width: 1600px;
    margin-inline: auto;
  }
}
@media (max-width: 1050px) {
  .nf-hero-editorial {
    gap: 32px;
  }
  .nf-hero-actions {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}
@media (max-width: 820px) {
  .nf-hero-editorial {
    grid-template-columns: 1fr;
    padding: 36px 0 28px;
    gap: 32px;
  }
  body .nord-intro.nf-hero h1 {
    font-size: clamp(48px, 10vw, 76px);
    max-width: 13ch;
  }
  .nf-hero-over {
    margin-bottom: 20px;
  }
  .nf-hero-foot {
    margin-top: 24px;
  }
  .nf-hero-actions {
    flex-direction: row-reverse;
    gap: 20px;
  }
  .nf-hero-image {
    min-height: 0;
    height: 360px;
    border-radius: 20px;
  }
  .nf-hero-field .nf-field {
    height: 90px;
  }
}
@media (max-width: 420px) {
  .nf-hero-actions {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .nf-hero-image {
    height: 280px;
  }
  .nf-hero .nf-label {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
}
@media (prefers-reduced-motion: reduce) {
  body a.nf-area {
    transition: none;
  }
}
/* Keep the real navigation available against the light opening. */
body:has(.nf-hero) .landing-nav.is-away {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
body:has(.nf-hero) .landing-intro-mark {
  display: none;
}
body .nord-intro.nf-hero .nf-hero-idea {
  max-width: 44ch;
  margin: 18px 0 0;
  padding-left: 16px;
  border-left: 2px solid #c77745;
  color: #30383d;
  font-size: 15px;
  line-height: 1.65;
}
body .nord-intro.nf-hero h1 {
  font-size: clamp(48px, 5.8vw, 88px);
  max-width: 13ch;
}

/* The inquiry form (packages/ui/src/inquiry-form.mjs): the enterprise contact section and /book.
   Drawn in the quiet register: ink on paper, one filled action, states as words. */
.inquiry-form {
  display: block;
  max-width: 560px;
  background: var(--surface, #fafaf7);
  border: 1px solid var(--line, #cdd1d2);
  border-radius: var(--radius-card, 12px);
  padding: 26px 26px 24px;
  text-align: left;
  color: var(--ink, #30383d);
  font-size: 15px;
  line-height: 1.5;
}
.inquiry-heading {
  margin: 0 0 16px;
  font: 500 22px/1.2 var(--font-body, inherit);
  letter-spacing: -0.01em;
}
.enterprise-page .inquiry-heading {
  font-size: 22px;
}
.inquiry-form [hidden] {
  display: none;
}
.inquiry-fields:not([hidden]) {
  display: grid;
  gap: 12px;
}
.inquiry-field {
  display: grid;
  gap: 5px;
  font-size: 13px;
  color: var(--ink-2, #606970);
}
.inquiry-label {
  display: block;
}
.inquiry-field-note {
  font-style: normal;
}
.inquiry-field.is-refused,
.inquiry-consent.is-refused {
  color: var(--danger, #b3261e);
}
.inquiry-field.is-refused input,
.inquiry-field.is-refused textarea {
  border-color: var(--danger, #b3261e);
}
.inquiry-field input,
.inquiry-field select,
.inquiry-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line, #cdd1d2);
  border-radius: var(--radius-input, 8px);
  background: #fff;
  color: var(--ink, #30383d);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
}
.inquiry-field textarea {
  min-height: 96px;
  resize: vertical;
}
.inquiry-field input:focus-visible,
.inquiry-field select:focus-visible,
.inquiry-field textarea:focus-visible {
  outline: 2px solid var(--chalk, #263f61);
  outline-offset: 1px;
}
/* The hidden field. A person never sees it; a bot that fills it is answered and nothing is recorded. */
.inquiry-website {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.inquiry-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2, #606970);
  margin-top: 2px;
}
.inquiry-consent input {
  margin: 3px 0 0;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--chalk, #263f61);
}
.inquiry-send {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  margin-top: 4px;
  border: 1px solid var(--ink, #30383d);
  border-radius: 999px;
  background: var(--ink, #30383d);
  color: var(--bg, #f3f3ef);
  font: 600 13px/1.2 var(--font-body, inherit);
  cursor: pointer;
}
.inquiry-send:disabled {
  background: var(--line, #cdd1d2);
  border-color: var(--line, #cdd1d2);
  color: var(--ink-2, #606970);
  cursor: default;
}
.inquiry-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2, #606970);
}
.inquiry-note a {
  color: var(--ink, #30383d);
}
.inquiry-notice {
  font-size: 14px;
  line-height: 1.45;
  color: var(--danger, #b3261e);
}
.inquiry-notice:not(:empty) {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #f0c2bd;
  border-radius: var(--radius-input, 8px);
  background: #f9e1dd;
}
.inquiry-recorded:not([hidden]) {
  display: grid;
  gap: 10px;
}
.inquiry-ok {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #bcd9cb;
  border-radius: var(--radius-input, 8px);
  background: #fff;
  font-size: 15px;
  line-height: 1.5;
  outline: none;
}
.inquiry-ok b {
  font-weight: 500;
  color: #3e8266;
}
@media (max-width: 640px) {
  .inquiry-form {
    padding: 20px 16px;
  }
}