/* NextFlow: design system "Calçada".
   Limestone ground, basalt sections, grout grey, survey-marking pink as the one active colour.
   The cube is the unit. Hand-written; there is no CSS build step. */

@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Regular.woff2") format("woff2"), url("../fonts/Satoshi-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Medium.woff2") format("woff2"), url("../fonts/Satoshi-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk/hanken-grotesk-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo/archivo-latin-wdth.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks: the system font is scaled to the web font's width and vertical metrics (computed from the font files,
   measured against Arial), so the swap does not move the text. */
@font-face { font-family: "Satoshi Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 98.58%; ascent-override: 102.46%; descent-override: 24.35%; line-gap-override: 10.14%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 100.85%; ascent-override: 99.16%; descent-override: 30.04%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 102.71%; ascent-override: 85.48%; descent-override: 20.45%; line-gap-override: 0%; }

:root {
  --stone: #e8eae6;
  --stone-2: #dcdfd9;
  --basalt: #15171a;
  --basalt-2: #22252a;
  --grout: #9aa0a3;
  --ink-2: #3d4247;      /* secondary text on stone, 8:1 */
  --on-basalt-2: #b9bec2; /* secondary text on basalt, 9:1 */
  --mark: #ff4d8d;        /* survey-marking pink: graphic and button fill, never body text on stone */

  --display: "Archivo", "Archivo Fallback", sans-serif;
  --text: "Satoshi", "Satoshi Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1: "Hanken Grotesk", "Hanken Fallback", system-ui, sans-serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 80rem;
  --cube: 1.25rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--basalt) var(--stone); }
body {
  margin: 0;
  background: var(--stone);
  color: var(--basalt);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--mark);
}
::selection { background: var(--mark); color: var(--basalt); }
img, svg { display: block; max-width: 100%; }
html { background: var(--stone); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 0.09em; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--basalt); outline-offset: 3px; }
.nf-on-basalt :focus-visible, .nf-panel :focus-visible, .nf-footer :focus-visible { outline-color: var(--mark); }

.nf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nf-skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--basalt); color: var(--stone); padding: 0.75rem 1rem; }
.nf-skip:focus { top: 0.75rem; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--display); text-wrap: balance; color: inherit; }
h1 { font-family: var(--h1); font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.1; font-weight: 300; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.45rem, 2.5vw, 2.05rem); line-height: 1.2; font-weight: 600; font-stretch: 100%; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; font-weight: 700; font-stretch: 100%; letter-spacing: -0.01em; }
p { max-width: 62ch; text-wrap: pretty; }
.nf-lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.nf-on-basalt .nf-lead, .nf-on-basalt p { color: var(--on-basalt-2); }
.nf-on-basalt h1, .nf-on-basalt h2, .nf-on-basalt h3 { color: var(--stone); }
.nf-small { font-size: 0.9375rem; color: var(--ink-2); }
.nf-on-basalt .nf-small { color: var(--on-basalt-2); }
.nf-num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Layout ---------- */
.nf-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.nf-section { padding-block: clamp(4rem, 9vw, 8rem); }
.nf-section--tight { padding-block: clamp(2.25rem, 5vw, 4rem); }
.nf-on-basalt { background: var(--basalt); color: var(--stone); }
.nf-on-stone-2 { background: var(--stone-2); }
.nf-stack > * + * { margin-top: var(--gap, 1.25rem); }
.nf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 1rem 1.5rem); }

/* A row of hand-set cubes as the divider between sections. Decorative. */
.nf-band {
  height: calc(var(--cube) * 1.6);
  background-color: var(--stone);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='32' viewBox='0 0 160 32'%3E%3Cg fill='%2315171a'%3E%3Crect x='0.9' y='1.2' width='14.7' height='14.7' rx='1.5' transform='rotate(-0.3 8 8)'/%3E%3Crect x='33.0' y='1.3' width='13.5' height='13.5' rx='1.5' transform='rotate(0.1 40 8)'/%3E%3Crect x='65.4' y='1.9' width='13.4' height='13.4' rx='1.5' transform='rotate(-1.6 72 8)'/%3E%3Crect x='95.8' y='1.9' width='14.3' height='14.3' rx='1.5' transform='rotate(-3.7 104 8)'/%3E%3Crect x='130.4' y='2.4' width='14.2' height='14.2' rx='1.5' transform='rotate(0.9 136 8)'/%3E%3Crect x='16.0' y='15.5' width='14.0' height='14.0' rx='1.5' transform='rotate(-3.5 24 24)'/%3E%3Crect x='48.1' y='16.2' width='13.2' height='13.2' rx='1.5' transform='rotate(-0.3 56 24)'/%3E%3Crect x='80.8' y='18.0' width='14.0' height='14.0' rx='1.5' transform='rotate(1.1 88 24)'/%3E%3Crect x='113.0' y='17.5' width='13.9' height='13.9' rx='1.5' transform='rotate(-1.8 120 24)'/%3E%3Crect x='146.5' y='18.5' width='14.5' height='14.5' rx='1.5' transform='rotate(1.7 152 24)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 32px;
  background-repeat: repeat-x;
  background-position: center;
}
.nf-on-basalt + .nf-band, .nf-band--on-basalt { background-color: var(--basalt); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='32' viewBox='0 0 160 32'%3E%3Cg fill='%23e8eae6'%3E%3Crect x='0.4' y='0.2' width='13.7' height='13.7' rx='1.5' transform='rotate(-3.4 8 8)'/%3E%3Crect x='33.8' y='0.7' width='14.6' height='14.6' rx='1.5' transform='rotate(-0.9 40 8)'/%3E%3Crect x='66.4' y='2.0' width='13.2' height='13.2' rx='1.5' transform='rotate(-2.3 72 8)'/%3E%3Crect x='98.2' y='0.9' width='14.8' height='14.8' rx='1.5' transform='rotate(-0.8 104 8)'/%3E%3Crect x='127.7' y='1.4' width='14.4' height='14.4' rx='1.5' transform='rotate(-1.8 136 8)'/%3E%3Crect x='15.8' y='16.5' width='14.7' height='14.7' rx='1.5' transform='rotate(2.1 24 24)'/%3E%3Crect x='47.9' y='16.2' width='13.4' height='13.4' rx='1.5' transform='rotate(-3.5 56 24)'/%3E%3Crect x='81.9' y='16.0' width='14.1' height='14.1' rx='1.5' transform='rotate(-0.4 88 24)'/%3E%3Crect x='112.1' y='17.7' width='13.4' height='13.4' rx='1.5' transform='rotate(1.1 120 24)'/%3E%3Crect x='143.8' y='16.8' width='13.5' height='13.5' rx='1.5' transform='rotate(-1.8 152 24)'/%3E%3C/g%3E%3C/svg%3E"); }

/* ---------- Buttons and links ---------- */
.nf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0.8rem 1.6rem;
  font-family: var(--display); font-weight: 700; font-stretch: 105%; font-size: 1rem; letter-spacing: -0.005em; line-height: 1.1;
  text-decoration: none; border: 2px solid var(--basalt);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nf-btn--primary { background: var(--mark); color: var(--basalt); }
.nf-btn--primary:hover { background: var(--basalt); color: var(--mark); border-color: var(--basalt); }
.nf-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.nf-btn--ghost:hover { background: var(--basalt); color: var(--stone); border-color: var(--basalt); }
.nf-on-basalt .nf-btn--primary { border-color: var(--mark); }
.nf-on-basalt .nf-btn--primary:hover { background: var(--stone); color: var(--basalt); border-color: var(--stone); }
.nf-on-basalt .nf-btn--ghost:hover { background: var(--stone); color: var(--basalt); border-color: var(--stone); }
.nf-btn:active { transform: translateY(1px); }
.nf-arrow::after {
  content: ""; flex: none; display: inline-block; width: 1em; height: 0.72em; margin-left: 0.45em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M0.5 5h12M8.5 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M0.5 5h12M8.5 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s var(--ease);
}
.nf-btn.nf-arrow::after, .nf-link.nf-arrow::after { margin-left: 0; }
.nf-arrow:hover::after { transform: translateX(0.25rem); }
.nf-link { font-weight: 500; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; }

/* ---------- Header ---------- */
.nf-header { view-transition-name: nf-header; position: sticky; top: 0; z-index: 50; background: var(--stone); border-bottom: 2px solid var(--basalt); }
.nf-header .nf-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; }
.nf-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; min-height: 2.75rem; color: var(--basalt); }
.nf-panel .nf-brand, .nf-footer .nf-brand { color: var(--stone); }
.nf-brand svg { width: 2rem; height: 2rem; flex: none; }
.nf-brand-name { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1; }
.nf-nav { display: none; align-items: center; gap: 0.25rem; }
.nf-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem; text-decoration: none; font-weight: 500; font-size: 1rem; }
.nf-nav a { white-space: nowrap; }
.nf-nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
@media (min-width: 62rem) and (max-width: 74.99rem) { .nf-nav a { padding: 0 0.6rem; } .nf-header .nf-wrap { gap: 1rem; } }
.nf-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.16em; text-decoration-color: var(--basalt); text-underline-offset: 0.3em; }
.nf-dd { position: relative; }
.nf-dd-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.85rem; font-weight: 500; font-size: 1rem; white-space: nowrap; }
.nf-dd-btn::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); transition: transform 0.2s var(--ease); }
.nf-dd-btn[aria-expanded="true"]::after { transform: translateY(0.1rem) rotate(-135deg); }
.nf-dd-btn:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.nf-dd-btn.is-current { text-decoration: underline; text-decoration-thickness: 0.16em; text-decoration-color: var(--basalt); text-underline-offset: 0.3em; }
.nf-dd-list { position: absolute; top: calc(100% + 0.25rem); left: 0; min-width: 13rem; margin: 0; padding: 0.25rem 0; list-style: none; background: var(--stone); border: 2px solid var(--basalt); z-index: 60; }
.nf-dd-list[hidden] { display: none; }
.nf-dd-list a { display: flex; width: 100%; padding: 0 1rem; }
.nf-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.nf-header-actions .nf-btn { min-height: 2.75rem; padding: 0.5rem 1.15rem; font-size: 0.9375rem; }
.nf-header-cta { display: none; }
.nf-lang { display: none; }
.nf-lang a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; justify-content: center; padding: 0 0.5rem; font-weight: 500; text-decoration: none; }
.nf-lang a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 0.16em; text-decoration-color: var(--basalt); text-underline-offset: 0.3em; }
.nf-footer .nf-lang a[aria-current="true"], .nf-panel .nf-lang a[aria-current="true"] { text-decoration-color: var(--mark); }
.nf-menu-btn { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.9rem; border: 2px solid var(--basalt); font-weight: 500; }
.nf-menu-btn .nf-menu-icon { width: 1.1rem; height: 0.8rem; background: linear-gradient(var(--basalt) 0 2px, transparent 2px calc(50% - 1px), var(--basalt) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(100% - 2px), var(--basalt) calc(100% - 2px)); }

@media (min-width: 62rem) {
  .nf-nav { display: flex; }
  .nf-header-cta { display: inline-flex; }
  .nf-lang { display: flex; }
  .nf-menu-btn { display: none; }
}

/* Mobile menu panel */
.nf-panel { position: fixed; inset: 0; z-index: 100; background: var(--basalt); color: var(--stone); overflow-y: auto; padding: 1rem var(--gutter) 2.5rem; }
.nf-panel[hidden] { display: none; }
.nf-panel-top { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; }
.nf-panel .nf-brand-name { color: var(--stone); }
.nf-panel-close { min-height: 2.75rem; padding: 0 0.9rem; border: 2px solid var(--stone); font-weight: 500; }
.nf-panel nav { margin-top: 2rem; }
.nf-panel nav a { display: flex; align-items: center; min-height: 3.5rem; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 1.75rem; letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid var(--basalt-2); }
.nf-panel nav a[aria-current="page"] { color: var(--mark); }
.nf-panel .nf-btn { margin-top: 2rem; width: 100%; }
.nf-panel .nf-lang { display: flex; margin-top: 1.5rem; gap: 0.5rem; }
.nf-panel .nf-lang a { padding: 0 0.75rem 0 0; }

/* ---------- Hero ---------- */
.nf-hero { padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem); }
.nf-hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.nf-hero h1 { max-width: 22ch; }
.nf-hero .nf-lead { margin-top: 1.5rem; }
.nf-hero .nf-cluster { margin-top: 2.25rem; }
.nf-price-note { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--ink-2); max-width: 46ch; }
@media (min-width: 62rem) {
  .nf-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* The plot, paved in cubes */
.nf-plot-fig { position: relative; }
.nf-plot { width: 100%; height: auto; overflow: visible; }
.nf-plot .b { fill: var(--basalt); }
.nf-plot .g { fill: #c3c8c2; }
.nf-plot .l { fill: #f7f8f5; }
.nf-plot .m { fill: var(--mark); }
.nf-plot .lead-halo { fill: none; stroke: var(--stone); stroke-width: 7; }
.nf-plot .lead-line { fill: none; stroke: var(--basalt); stroke-width: 2; stroke-dasharray: 4 4; }
.nf-plot .tag rect { fill: var(--basalt); }
.nf-plot .tag text { fill: var(--stone); font-family: var(--display); font-weight: 800; font-size: 24px; text-anchor: middle; dominant-baseline: central; }
.nf-plot-cap { margin-top: 1rem; font-size: 0.875rem; color: var(--ink-2); max-width: 52ch; }
.nf-legend { margin-top: 1.25rem; display: grid; gap: 0.1rem; border-top: 2px solid var(--basalt); counter-reset: nf; }
.nf-legend li { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: 0.75rem; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--grout); counter-increment: nf; font-size: 0.9375rem; }
.nf-legend li::before { content: counter(nf); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; background: var(--basalt); color: var(--stone); font-family: var(--display); font-weight: 800; font-size: 0.8rem; align-self: center; }
.nf-legend .v { font-weight: 500; }
.nf-legend .src { color: var(--ink-2); font-size: 0.8125rem; text-align: right; }
@media (max-width: 40rem) { .nf-legend li { grid-template-columns: 2.25rem 1fr; } .nf-legend .src { grid-column: 2; text-align: left; } }

/* Paving: rows of cubes lay in one after another */
.js .nf-plot g[data-r] { opacity: 0; transition: opacity 0.35s ease; transition-delay: calc(var(--r) * 26ms); }
.js .nf-plot.is-still g[data-r], .js .nf-plot.is-still .lead-halo, .js .nf-plot.is-still .lead-line, .js .nf-plot.is-still .tag { transition: none; }
.js .nf-plot.is-in g[data-r] { opacity: 1; }
.js .nf-plot .lead-halo, .js .nf-plot .lead-line, .js .nf-plot .tag { opacity: 0; transition: opacity 0.5s ease 0.9s; }
.js .nf-plot.is-in .lead-halo, .js .nf-plot.is-in .lead-line, .js .nf-plot.is-in .tag { opacity: 1; }

/* ---------- Product sections ---------- */
.nf-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 62rem) { .nf-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .nf-two--wide-right { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.nf-section h2 { max-width: 22ch; }
.nf-section h2 + p { margin-top: 1.25rem; }

/* Price ladder */
.nf-ladder { border-top: 2px solid currentColor; }
.nf-ladder > div { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--grout); align-items: baseline; }
.nf-ladder dt { font-family: var(--display); font-weight: 700; font-stretch: 100%; font-size: 1.15rem; letter-spacing: -0.01em; }
.nf-ladder dd.price { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: 1.35rem; text-align: right; white-space: nowrap; }
.nf-ladder dd.note { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--ink-2); max-width: 54ch; }
.nf-on-basalt .nf-ladder dd.note { color: var(--on-basalt-2); }
.nf-tag-soon { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border: 1.5px solid currentColor; font-family: var(--text); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.02em; vertical-align: 0.15em; }

/* File states table (CoreBIM) */
.nf-files-wrap { overflow-x: auto; }
.nf-files { width: 100%; border-collapse: collapse; min-width: 26rem; font-size: 0.9375rem; }
.nf-files caption { text-align: left; padding-bottom: 0.9rem; font-size: 0.875rem; color: var(--on-basalt-2); }
.nf-files th, .nf-files td { text-align: left; padding: 0.85rem 0.75rem 0.85rem 0; border-bottom: 1px solid var(--basalt-2); vertical-align: baseline; }
.nf-files thead th { font-weight: 500; font-size: 0.8125rem; color: var(--on-basalt-2); border-bottom: 2px solid var(--stone); }
.nf-files td:first-child { font-weight: 500; color: var(--stone); }
.nf-state { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; color: var(--stone); }
.nf-state::before { content: ""; width: 0.9rem; height: 0.9rem; border: 2px solid var(--stone); flex: none; }
.nf-state--warn::before { background: transparent; }
.nf-state--ok::before { background: var(--mark); border-color: var(--mark); }
.nf-facts { margin-top: 2rem; display: grid; gap: 0.9rem; }
.nf-facts li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.9rem; align-items: start; font-size: 1rem; }
.nf-facts li::before { content: ""; width: 0.8rem; height: 0.8rem; margin-top: 0.4rem; background: var(--stone); transform: rotate(-1.5deg); }
.nf-facts li:nth-child(2n)::before { transform: rotate(1.4deg); background: var(--grout); }

/* Coverage strip (rendered only when the figures are configured) */
.nf-coverage { display: grid; gap: 1.5rem; align-items: end; border-top: 2px solid var(--basalt); padding-top: 1.75rem; }
.nf-coverage .big { font-family: var(--display); font-weight: 800; font-stretch: 118%; font-size: clamp(3rem, 8vw, 6rem); line-height: 1; letter-spacing: -0.04em; }
@media (min-width: 48rem) { .nf-coverage { grid-template-columns: auto 1fr; gap: 3rem; } }

/* Product screenshots (rendered only when the files exist) */
.nf-shot { border: 2px solid var(--basalt); background: var(--stone-2); }
.nf-shot img { width: 100%; height: auto; }

/* Posts */
.nf-posts { border-top: 2px solid var(--basalt); }
.nf-posts li { border-bottom: 1px solid var(--grout); }
.nf-posts a { display: grid; gap: 0.35rem 2rem; padding: 1.35rem 0; text-decoration: none; }
.nf-posts a:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; }
.nf-posts time { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nf-posts h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 600; }
.nf-posts p { color: var(--ink-2); font-size: 1rem; }
.nf-posts li:first-child time::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.6rem; background: var(--basalt); }
@media (min-width: 48rem) { .nf-posts a { grid-template-columns: 11rem 1fr; } .nf-posts time { padding-top: 0.5rem; } }

/* Closing call */
.nf-close h2 { max-width: 16ch; }
.nf-close .nf-cluster { margin-top: 2rem; }

/* ---------- Footer ---------- */
.nf-footer { background: var(--basalt); color: var(--stone); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.nf-footer a { text-decoration: none; }
.nf-footer a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.nf-footer-grid { display: grid; gap: 2.5rem; }
.nf-footer h2 { font-size: 0.8125rem; font-weight: 500; font-family: var(--text); font-stretch: 100%; letter-spacing: 0.04em; text-transform: none; color: var(--on-basalt-2); margin-bottom: 0.75rem; }
.nf-footer li a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; }
.nf-footer .nf-small { color: var(--on-basalt-2); }
.nf-footer address { font-style: normal; color: var(--on-basalt-2); line-height: 1.7; }
.nf-footer address a { color: var(--stone); display: inline-block; padding-block: 0.6rem; }
.nf-footer .nf-brand-name { color: var(--stone); font-size: 1.6rem; }
.nf-footer .nf-legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--basalt-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--on-basalt-2); }
.nf-footer .nf-lang { display: flex; }
.nf-footer .nf-lang a { color: var(--stone); }
@media (min-width: 48rem) { .nf-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; } }

/* ---------- Reveal ---------- */
.js .nf-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .nf-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js .nf-reveal, .js .nf-plot g[data-r], .js .nf-plot .lead-halo, .js .nf-plot .lead-line, .js .nf-plot .tag { opacity: 1; transform: none; }
}

/* ---------- Page head (inner pages) ---------- */
.nf-pagehead { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
.nf-pagehead h1 { max-width: 24ch; }
.nf-pagehead .nf-lead { margin-top: 1.5rem; }
.nf-pagehead .nf-cluster { margin-top: 2rem; }
.nf-meta { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Facts list on a light ground */
.nf-facts--ink li::before { background: var(--basalt); }
.nf-facts--ink li:nth-child(2n)::before { background: var(--grout); }
.nf-facts--wide { margin-top: 0; gap: 1.1rem; }

/* ---------- Forms ---------- */
.nf-form { display: grid; gap: 1.5rem; max-width: 40rem; }
.nf-field label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
.nf-field input, .nf-field textarea {
  width: 100%; min-height: 3.25rem; padding: 0.85rem 1rem; border: 2px solid var(--basalt); border-radius: 0;
  background: #f7f8f5; color: var(--basalt); font: inherit; line-height: 1.4;
}
.nf-field textarea { min-height: 9rem; resize: vertical; }
.nf-field input::placeholder, .nf-field textarea::placeholder { color: #5b6166; }
.nf-field input:focus-visible, .nf-field textarea:focus-visible { outline: 3px solid var(--basalt); outline-offset: 2px; background: #fff; }
.nf-field [aria-invalid="true"], .nf-field .input-validation-error { border-color: #a4002b; }
.nf-error, .field-validation-error { display: block; margin-top: 0.4rem; color: #a4002b; font-size: 0.9375rem; }
.nf-alert { padding: 1rem 1.25rem; border: 2px solid var(--basalt); background: #f7f8f5; font-weight: 500; max-width: 40rem; }
.nf-alert--ok { border-color: var(--basalt); }
.nf-alert--err { border-color: #a4002b; color: #7a0020; }
.nf-contact-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 62rem) { .nf-contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; } }
.nf-contact-list { border-top: 2px solid var(--basalt); }
.nf-contact-list > div { padding: 1.1rem 0; border-bottom: 1px solid var(--grout); }
.nf-contact-list dt { font-size: 0.875rem; color: var(--ink-2); }
.nf-contact-list dd { margin-top: 0.15rem; font-weight: 500; }
.nf-contact-list a { display: inline-block; padding-block: 0.25rem; }
.nf-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(21, 23, 26, 0.88); color: var(--stone); font-weight: 500; text-align: center; padding: 2rem; }
.nf-overlay.is-on { display: flex; }

/* ---------- Prose (blog articles, privacy) ---------- */
.nf-prose { max-width: 68ch; }
.nf-prose > * + * { margin-top: 1.15rem; }
.nf-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: 2.75rem; max-width: none; }
.nf-prose h3 { font-size: 1.25rem; margin-top: 2.25rem; }
.nf-prose p, .nf-prose li { max-width: none; font-size: 1.0625rem; line-height: 1.7; }
.nf-prose ul { display: grid; gap: 0.5rem; }
.nf-prose ul > li { position: relative; padding-left: 1.6rem; }
.nf-prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 0.6rem; background: var(--basalt); transform: rotate(-1.5deg); }
.nf-prose ol { padding-left: 1.4rem; list-style: decimal; display: grid; gap: 0.5rem; }
.nf-prose a { font-weight: 500; }
.nf-prose img { width: 100%; height: auto; margin-block: 1.5rem; }
.nf-prose blockquote { padding: 1.25rem 0 0; border-top: 2px solid var(--basalt); font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.3; }
.nf-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.nf-prose th, .nf-prose td { text-align: left; padding: 0.6rem 0.9rem 0.6rem 0; border-bottom: 1px solid var(--grout); }
.nf-prose pre { background: var(--basalt); color: var(--stone); padding: 1rem 1.25rem; overflow-x: auto; font-size: 0.9375rem; }
.nf-prose code { font-size: 0.92em; }

/* ---------- Blog ---------- */
.nf-postlist { border-top: 2px solid var(--basalt); }
.nf-postlist > li { border-bottom: 1px solid var(--grout); }
.nf-postlist a { display: grid; gap: 1rem 2rem; padding: 1.75rem 0; text-decoration: none; }
.nf-postlist a:hover h2 { text-decoration: underline; text-underline-offset: 0.2em; }
.nf-postlist h2 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); max-width: none; }
.nf-postlist p { color: var(--ink-2); margin-top: 0.5rem; }
.nf-postlist time { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nf-postlist .nf-thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid var(--basalt); }
@media (min-width: 48rem) { .nf-postlist a { grid-template-columns: 11rem minmax(0, 1fr) 14rem; align-items: start; } .nf-postlist a:not(:has(.nf-thumb)) { grid-template-columns: 11rem minmax(0, 1fr); } }
.nf-pager { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nf-pager a { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--basalt); font-family: var(--display); font-weight: 700; text-decoration: none; }
.nf-pager a:hover { background: var(--basalt); color: var(--stone); }
.nf-pager a[aria-current="page"] { background: var(--basalt); color: var(--stone); }

.nf-article-grid { display: grid; gap: 2.5rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
@media (min-width: 62rem) { .nf-article-grid { grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; align-items: start; } }
.nf-aside { position: sticky; top: 6rem; display: grid; gap: 2rem; align-self: start; }
.nf-aside h2 { font-size: 0.875rem; font-weight: 500; font-family: var(--text); font-stretch: 100%; letter-spacing: 0.02em; color: var(--ink-2); margin-bottom: 0.6rem; }
.nf-toc li a, .nf-share li a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; }
.nf-share { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.nf-cover { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 34rem; object-fit: cover; background: var(--stone-2); border: 2px solid var(--basalt); margin-bottom: clamp(2rem, 4vw, 3rem); }
.nf-related h2 { margin-bottom: 1.5rem; }

/* ---------- 404 ---------- */
.nf-notfound { padding-block: clamp(4rem, 12vw, 9rem); }
.nf-rule { border-top: 2px solid currentColor; padding-top: 1.25rem; }
.nf-rule h3 a { text-decoration: none; }
.nf-rule h3 a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.nf-rule p { margin-top: 0.75rem; }
.nf-rule .nf-link { margin-top: 0.5rem; }

/* Tap targets on inner pages */
address a { display: inline-block; padding-block: 0.6rem; }
.nf-rule h3 a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.nf-contact-list a { padding-block: 0.6rem; }
/* ---------- Contact form ---------- */
.nf-form-title { font-size: 1.5rem; margin-bottom: 0.75rem; }
.nf-form-note { color: var(--ink-2); }
.nf-form-title + .nf-form-note { margin-bottom: 1.5rem; }

/* ---------- Page changes: a short cross-fade instead of a hard repaint (browsers without support just navigate) ---------- */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 0.16s; }
::view-transition-group(nf-header) { animation: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* The reCAPTCHA badge covers the footer; Google allows hiding it when the notice is shown next to the form. */
.grecaptcha-badge { visibility: hidden; }

/* Files table on narrow screens: let the diagnostic wrap instead of clipping it. */
@media (max-width: 40rem) {
  .nf-files { min-width: 0; }
  .nf-state { white-space: normal; align-items: flex-start; }
  .nf-state::before { margin-top: 0.2em; }
}
/* Links inside form notes stay inline (the reCAPTCHA notice must read as one sentence). */
.nf-form-note a { display: inline; min-height: 0; }

/* ---------- Sign in ---------- */
.nf-auth { max-width: 32rem; }
.nf-check { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; cursor: pointer; }
.nf-check input { width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--basalt); flex: none; }
.nf-linkbtn { background: none; border: 0; padding: 0; margin-top: 0.4rem; min-height: 2.75rem; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* ---------- Cookie consent (shown only until the visitor chooses; both answers carry the same weight) ---------- */
.nf-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--basalt); color: var(--stone); border-top: 2px solid var(--stone); padding-block: 1rem; }
.nf-consent[hidden] { display: none; }
.nf-consent-in { display: grid; gap: 1rem; align-items: center; }
.nf-consent p { max-width: 64ch; font-size: 0.9375rem; }
.nf-consent a { color: inherit; text-underline-offset: 0.2em; }
.nf-consent .nf-btn { min-height: 2.75rem; padding: 0.5rem 1.25rem; color: var(--stone); border-color: var(--stone); }
.nf-consent .nf-btn:hover { background: var(--stone); color: var(--basalt); border-color: var(--stone); }
.nf-consent :focus-visible { outline-color: var(--mark); }
@media (min-width: 48rem) { .nf-consent-in { grid-template-columns: 1fr auto; gap: 2rem; } }
.nf-footer .nf-footer-btn { color: inherit; display: inline-flex; align-items: center; margin-top: 0; font-weight: 500; text-decoration: none; }
.nf-footer .nf-footer-btn:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Choice chips (radio group, e.g. what a contact message is about) ---------- */
.nf-choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.nf-choices legend { padding: 0; margin-bottom: 0.5rem; font-weight: 500; }
.nf-choices-list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.nf-choice { position: relative; }
.nf-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nf-choice span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1.1rem; border: 2px solid var(--basalt); background: #f7f8f5; font-weight: 500; cursor: pointer; }
.nf-choice:hover span { background: var(--stone-2); }
.nf-choice input:checked + span { background: var(--basalt); color: var(--stone); }
.nf-choice input:focus-visible + span { outline: 3px solid var(--basalt); outline-offset: 2px; }