/* EnCad v3, after plinthai.xyz
   Layout concept: white ground, warm-neutral surfaces and hairlines, Inter set light and tight, Geist Mono caps
   for labels, prices and numerals. Color lives in procedural grain-gradient and dot-field textures (grain.js),
   used full-bleed in the hero, the callouts and the closing CTA. Cobalt is the one strong accent per surface.
   Radius rule: controls 10px, containers 16px, hero/callout panels 24px. Light theme only (requested). */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f4f4f1;
  --surface-2: #ececE6;
  --line: #e6e6e1;
  --line-2: #d6d6cf;
  --ink: #181815;
  --ink-2: #3a3a36;
  --muted: #6e6e68;
  --accent: #1f3bff;
  --accent-ink: #1a31d6;
  --accent-soft: #ebeeff;
  --peri: #8aa2ff;
  --dark: #181815;
  --on-dark: #f5f5f2;
  --on-dark-2: #c4c6d0;

  --f-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: var(--f-sans);

  --r-ctl: 6px; --r: 10px; --r-panel: 14px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --t-press: 140ms; --t-ui: 200ms;
  --shadow: 0 1px 2px rgba(25, 25, 26, .04), 0 8px 24px -12px rgba(25, 25, 26, .12);
  --shadow-lg: 0 1px 2px rgba(25, 25, 26, .05), 0 24px 56px -24px rgba(25, 25, 26, .22);
  /* z-index scale: header 40, mobile menu 45 */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) var(--bg); accent-color: var(--accent); caret-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-sans); font-size: 17px; line-height: 1.6; font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, canvas, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
::selection { background: #d3dbff; color: var(--ink); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow > * { max-width: 780px; }

h1, h2, h3, h4 { font-family: var(--f-sans); font-weight: 400; letter-spacing: -.025em; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.1rem); line-height: 1.03; letter-spacing: -.03em; }
h2 { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.08; letter-spacing: -.025em; }
h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.h3x { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: clamp(1.05rem, 1rem + .25vw, 1.18rem); color: var(--ink-2); max-width: 60ch; line-height: 1.6; }
.body { color: var(--ink-2); max-width: 65ch; }
.mono, code { font-family: var(--f-mono); font-size: .88em; letter-spacing: -.01em; }
.label { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; line-height: 1.2; letter-spacing: -.005em; text-transform: none; color: var(--muted); }
.ic { width: 16px; height: 16px; display: block; flex: none; }
body { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
  font: 500 .95rem/1 var(--f-sans); letter-spacing: -.01em; text-decoration: none;
  padding: 14px 18px; border-radius: var(--r-ctl); border: 1px solid transparent; cursor: pointer;
  transition: transform var(--t-press) var(--ease), background-color var(--t-ui) ease, color var(--t-ui) ease, border-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}
.arr { display: inline-flex; transition: transform var(--t-ui) var(--ease); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 2px rgba(20, 30, 90, .25); }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--line-2); }
.btn-sm { padding: 10px 14px; font-size: .88rem; }
.btn-light { background: var(--on-dark); color: var(--dark); }
.btn-ghost-light { color: var(--on-dark); border-color: rgba(245, 245, 242, .38); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arr, .link-arrow:hover .arr { transform: translateX(3px); }
  .btn-primary:hover { background: var(--accent-ink); }
  .btn-secondary:hover { border-color: var(--ink); }
  .btn-light:hover { background: #fff; }
  .btn-ghost-light:hover { border-color: var(--on-dark); background: rgba(255,255,255,.06); }
}
.link-arrow { color: var(--accent-ink); font-weight: 500; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; font-size: .97rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color var(--t-ui) ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { height: 64px; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; flex: none; }
.logo-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); position: relative; }
.logo-mark::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 5px; height: 9px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.logo .sub { font-weight: 400; color: var(--muted); }
.nav-links { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-links > li { position: relative; }
.nav-links a, .nav-links button { font: 400 .92rem/1 var(--f-sans); color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 10px 10px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: color 150ms ease, background-color 150ms ease; }
.nav-links a:hover, .nav-links button:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--surface); }
.nav-links .chev { width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-ui) var(--ease); }
.has-menu:hover .chev, .has-menu:focus-within .chev { transform: translateY(1px) rotate(225deg); }
.menu {
  position: absolute; top: calc(100% + 8px); left: -8px; min-width: 260px; padding: 6px; list-style: none; margin: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(4px) scale(.98); transform-origin: top left;
  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
}
.menu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.has-menu:hover .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), visibility 0s; }
.menu a { display: block; padding: 10px 12px; border-radius: 10px; width: 100%; }
.menu a small { display: block; font-size: .8rem; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.nav-right { display: flex; align-items: center; gap: 6px; flex: none; }
.nav-right .login { font: 400 .92rem/1 var(--f-sans); color: var(--ink-2); text-decoration: none; padding: 10px 12px; }
.menu-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-ctl); border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; position: relative; }
.menu-toggle span, .menu-toggle span::before { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: transform var(--t-ui) var(--ease); }
.menu-toggle span { top: 17px; }
.menu-toggle span::before { content: ""; left: 0; right: 0; top: 6px; }
.nav-open .menu-toggle span { transform: translateY(3px) rotate(45deg); }
.nav-open .menu-toggle span::before { transform: translateY(-6px) rotate(-90deg); }
.nav-links .mobile-only { display: none; }
@media (max-width: 1120px) {
  .nav { gap: 12px; }
  .nav-links { display: none; }
  .nav-right .login { display: none; }
  .menu-toggle { display: inline-block; }
  .nav-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; position: absolute; z-index: 45; top: 64px; left: 0; right: 0;
    max-height: calc(100dvh - 64px); overflow-y: auto; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 24px; box-shadow: var(--shadow-lg);
  }
  .nav-open .nav-links a, .nav-open .nav-links button { width: 100%; justify-content: space-between; padding: 14px 8px; font-size: 1.02rem; }
  .nav-open .menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 6px 10px; min-width: 0; }
  .nav-open .menu a small, .nav-open .chev { display: none; }
  .nav-open .nav-links .mobile-only { display: block; }
}
@media (max-width: 520px) { .nav-right .btn { display: none; } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 9vw, 128px); }
.section-tight { padding-block: clamp(40px, 5vw, 72px); }
.section-surface { background: var(--surface); border-block: 1px solid var(--line); }
.stack { display: grid; gap: 20px; }
.stack-lg { display: grid; gap: 28px; }
.stack-xl { display: grid; gap: clamp(64px, 9vw, 120px); }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 56px; }

/* ---------- Grain textures ---------- */
.grain { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: linear-gradient(135deg, #fff 30%, #e9edff 70%, #9fb2ff); }
.grain[data-tone="dark"] { background: linear-gradient(135deg, var(--dark) 20%, #1a2bb8 70%, #2f56ff); }
.grain-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* ---------- Hero ---------- */
.hero { padding: 12px var(--gutter-panel, 12px) 0; }
.hero-panel { position: relative; isolation: isolate; border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 860px) {
  .hero-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.78) 30%, rgba(255,255,255,.4) 70%, rgba(255,255,255,0) 100%); }
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(56px, 7vw, 104px); }
.hero-copy { display: grid; gap: 24px; min-width: 0; justify-items: start; }
.hero-copy .lede { max-width: 52ch; }
.hero-simple .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-simple .hero-copy { max-width: 820px; }
.badge-new { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid var(--line); text-decoration: none; font-size: .86rem; color: var(--ink-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color var(--t-ui) ease; }
.badge-new span { font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: #fff; background: var(--accent); padding: 4px 8px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .badge-new:hover { border-color: var(--line-2); } }
.proof { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.proof li { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.proof li::before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; }
.hero-visual { min-width: 0; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Product card (real 3D render in an EnCad window) ---------- */
.pcard { position: relative; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; min-width: 0; }
.pcard-head, .pcard-foot { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 12px 16px; }
.pcard-head { justify-content: space-between; border-bottom: 1px solid var(--line); }
.pcard-foot { border-top: 1px solid var(--line); background: var(--surface); }
.pcard-title { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; }
.pcard-title i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.tag { font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--accent-ink); background: var(--accent-soft); padding: 4px 8px; border-radius: 6px; }
.stage-wrap { position: relative; }
.stage { position: relative; aspect-ratio: 4 / 3; width: 100%; background: radial-gradient(70% 60% at 50% 55%, #fff, var(--surface)); }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.query { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-ctl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); font-family: var(--f-mono); font-size: .84rem; color: var(--ink); min-width: 0; }
.query .q-icon { width: 14px; height: 14px; flex: none; border: 1.5px solid var(--accent); border-radius: 50%; position: relative; }
.query .q-icon::after { content: ""; position: absolute; width: 5px; height: 1.5px; background: var(--accent); right: -4px; bottom: -2px; transform: rotate(45deg); }
.query .q-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.query .caret { width: 1.5px; height: 1.05em; background: var(--accent); flex: none; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Systems strip ---------- */
.systems { padding-block: 40px 8px; }
.systems p { text-align: center; margin-bottom: 18px; font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--muted); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; align-items: center; }
@media (prefers-reduced-motion: no-preference) { .marquee-track { animation: marquee 40s linear infinite; } }
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(calc(-50% - 28px)); } }
.sys { white-space: nowrap; font-size: 1.35rem; font-weight: 500; letter-spacing: -.025em; color: var(--ink); }
.sys.muted { font-size: 1rem; font-weight: 400; color: var(--muted); letter-spacing: -.01em; }

/* ---------- Problem ---------- */
.problem { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.cost { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 28px; display: grid; gap: 12px; }
.cost .big { font-weight: 400; font-size: clamp(3rem, 2rem + 3.6vw, 5rem); line-height: 1; letter-spacing: -.04em; color: var(--accent); }
.cost .cap { color: var(--muted); font-size: .92rem; max-width: 34ch; }
@media (max-width: 860px) { .problem { grid-template-columns: 1fr; } }

/* ---------- Feature blocks with data cards ---------- */
.fblock { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.fblock.flip .fcopy { order: 2; }
.fcopy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
@media (max-width: 860px) { .fblock { grid-template-columns: 1fr; } .fblock.flip .fcopy { order: 0; } }
.vcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; min-width: 0; }
.vcard-head { padding: 10px 12px 12px; }
.match { background: #fff; border: 1px solid var(--line); border-radius: 12px; display: grid; }
.match .q { display: grid; gap: 8px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.match code { font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.verdict { display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-weight: 500; color: var(--accent-ink); }
.dotc { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.schema { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 0; display: grid; }
.schema div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); align-items: baseline; }
.schema div:last-child { border-bottom: 0; }
.schema dt { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--ink); }
.schema dd { margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 520px) { .schema div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Flow (numbered sequence) ---------- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.flow li { display: grid; gap: 12px; align-content: start; padding: 28px 28px 8px 0; position: relative; }
.flow li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.flow .num { font-family: var(--f-mono); font-weight: 500; font-size: .8rem; color: var(--accent-ink); }
.flow p { color: var(--ink-2); }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } .flow li, .flow li + li { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); } }

/* ---------- Callouts ---------- */
.callout { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-panel); padding: clamp(36px, 6vw, 80px); border: 1px solid var(--line); }
.callout::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.6) 45%, rgba(255,255,255,0) 75%); }
.callout-deep, .callout-dark { border: 0; color: var(--on-dark); }
.callout-deep::after, .callout-dark::after { background: linear-gradient(90deg, rgba(20,20,22,.72) 0%, rgba(20,20,22,.35) 50%, rgba(20,20,22,0) 80%); }
.callout-dark::after { background: linear-gradient(90deg, rgba(20,20,22,.94) 0%, rgba(20,20,22,.86) 48%, rgba(20,20,22,0) 82%); }
.callout-deep h2, .callout-deep h3, .callout-dark h2, .callout-dark h3 { color: var(--on-dark); }
.callout-deep .lede, .callout-deep .body, .callout-dark .lede, .callout-dark .body { color: var(--on-dark-2); }
.callout-deep .label, .callout-dark .label { color: var(--peri); }
@media (max-width: 700px) {
  .callout::after { background: rgba(255,255,255,.72); }
  .callout-deep::after, .callout-dark::after { background: rgba(20,20,22,.55); }
  .callout-dark::after { background: rgba(20,20,22,.84); }
}

/* ---------- Stats, quote, security band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat { padding: 22px; display: grid; gap: 28px; align-content: space-between; min-height: 150px; background: var(--bg); }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .num.pending { font-family: var(--f-mono); font-size: .78rem; font-weight: 500; color: var(--muted); padding: 6px 10px; border: 1px dashed var(--line-2); border-radius: 8px; justify-self: start; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }
.quote { margin: 0; display: grid; gap: 14px; }
.quote blockquote { margin: 0; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); letter-spacing: -.02em; line-height: 1.3; color: var(--muted); max-width: 40ch; }
.placeholder { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 28px; color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(25,25,26,.02) 12px 24px); }
.placeholder strong { color: var(--ink); font-weight: 500; display: block; margin-bottom: 4px; }
.sec-band { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; justify-content: space-between; padding: 22px 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.labels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.labels li { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--ink-2); }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--ink-2); }
@media (max-width: 640px) { .chip { white-space: normal; } }

/* ---------- Feature rows ---------- */
.features { display: grid; }
.feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 5vw, 80px); padding-block: 32px; border-top: 1px solid var(--line); }
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); font-weight: 400; letter-spacing: -.025em; }
.feature h3 small { display: block; font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--muted); margin-top: 8px; }
.feature p { color: var(--ink-2); max-width: 60ch; }
.feature .tagline { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--accent-ink); margin-top: 12px; }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Generic grid/card ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 12px; align-content: start; min-width: 0; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color var(--t-ui) ease; }
@media (hover: hover) and (pointer: fine) { a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); } }

.check { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.check li { position: relative; padding-left: 26px; color: var(--ink-2); }
.check li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }
.check-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
@media (max-width: 760px) { .check-2 { grid-template-columns: 1fr; } }
.check strong { color: var(--ink); font-weight: 500; }

/* ---------- Integrations / security components ---------- */
.ways { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.way { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); padding: clamp(22px, 3vw, 32px); display: grid; gap: 12px; align-content: start; background: var(--surface); border: 1px solid var(--line); }
.way p { color: var(--ink-2); max-width: 56ch; }
.way-0 { grid-row: span 2; align-content: end; min-height: 320px; background: var(--dark); border: 0; }
.way-0 h3 { color: var(--on-dark); font-size: 1.6rem; font-weight: 400; letter-spacing: -.025em; }
.way-0 p { color: var(--on-dark-2); }
.way-0::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 85% 10%, #2f56ff, transparent 70%), radial-gradient(40% 50% at 100% 60%, #9fb2ff55, transparent 70%); }
@media (max-width: 860px) { .ways { grid-template-columns: 1fr; } .way-0 { grid-row: auto; min-height: 240px; } }
.spectrum { list-style: none; margin: 8px 0 0; padding: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; }
.spectrum .track { position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--peri), var(--accent) 55%, var(--dark)); }
.spectrum::after { content: "More isolation"; position: absolute; right: 0; top: 14px; font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--ink-2); }
.spectrum li { display: grid; gap: 10px; align-content: start; position: relative; padding-top: 18px; }
.spectrum li::before { content: ""; position: absolute; top: -45px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
.spectrum p { color: var(--ink-2); }
@media (max-width: 860px) {
  .spectrum { grid-template-columns: 1fr; padding: 0 0 0 32px; }
  .spectrum .track { left: 5px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; background: linear-gradient(180deg, var(--peri), var(--accent) 55%, var(--dark)); }
  .spectrum::after { display: none; }
  .spectrum li { padding-top: 0; }
  .spectrum li::before { top: 4px; left: -36px; }
}
.pains { list-style: none; margin: 0; padding: 0; display: grid; }
.pains li { font-size: clamp(1.4rem, 1rem + 1.3vw, 2.1rem); line-height: 1.18; letter-spacing: -.028em; padding-block: 22px; border-top: 1px solid var(--line-2); text-wrap: balance; }
.pains li:last-child { border-bottom: 1px solid var(--line-2); }
.defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin: 0; }
.defs div { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid rgba(25, 25, 26, .14); }
.defs dt { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; }
.defs dd { margin: 0; color: var(--ink-2); max-width: 46ch; }
@media (max-width: 760px) { .defs { grid-template-columns: 1fr; } }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 6vw, 96px); }
.pair > div { display: grid; gap: 12px; align-content: start; }
.pair p { color: var(--ink-2); max-width: 52ch; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* ---------- Steps (vertical sequence on product pages) ---------- */
.steps-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.steps-head { position: sticky; top: 110px; display: grid; gap: 18px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; position: relative; border-top: 1px solid var(--line-2); }
.steps .rail { display: none; }
.step { counter-increment: step; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--f-mono); font-weight: 500; font-size: .8rem; color: var(--muted); padding-top: .3em; transition: color 300ms ease; }
.step.in::before { color: var(--accent-ink); }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--ink-2); max-width: 58ch; }
@media (max-width: 860px) { .steps-wrap { grid-template-columns: 1fr; } .steps-head { position: static; } }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; align-items: stretch; }
.plan { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; display: grid; gap: 18px; grid-template-rows: auto auto 1fr auto; min-width: 0; }
.plan h3 { font-size: 1.5rem; font-weight: 400; letter-spacing: -.025em; }
.plan .for { color: var(--ink-2); }
.plan .inc { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--muted); margin-bottom: 14px; }
.plan .check { gap: 10px; font-size: .95rem; }
.plan-feature { border: 0; color: var(--on-dark); box-shadow: var(--shadow-lg); }
.plan-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,20,22,.2), rgba(20,20,22,.7) 45%, rgba(20,20,22,.88)); }
.plan-feature h3 { color: var(--on-dark); }
.plan-feature .for, .plan-feature .check li { color: var(--on-dark-2); }
.plan-feature .inc { color: var(--peri); }
.plan-feature .check li::before { border-color: var(--peri); }
.badge { justify-self: start; font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; padding: 5px 9px; border-radius: 6px; background: var(--peri); color: var(--dark); }
.plan .btn { justify-self: start; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } }
.faq { display: grid; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-size: 1.12rem; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(var(--ink), var(--ink)) center/12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.5px 12px no-repeat; transition: transform var(--t-ui) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 44px 24px 0; color: var(--ink-2); max-width: 70ch; }
@media (prefers-reduced-motion: no-preference) { .faq details[open] .ans { animation: fadeUp 240ms var(--ease); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(25,25,26,.15); }
.timeline .bar { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) { .timeline:not(.in) .bar { transform: scaleX(0); } .timeline .bar { transition: transform 1.8s var(--ease); } }
.timeline li { position: relative; padding: 40px 18px 0 0; display: grid; gap: 8px; align-content: start; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.timeline .when { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--accent-ink); }
.timeline h3 { font-size: 1.05rem; }
@media (max-width: 860px) {
  .timeline { grid-template-columns: 1fr; padding-left: 8px; }
  .timeline::before, .timeline .bar { left: 15px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; }
  @media (prefers-reduced-motion: no-preference) { .timeline:not(.in) .bar { transform: scaleY(0); } }
  .timeline li { padding: 0 0 28px 40px; }
  .timeline li::before { left: 0; top: 2px; }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field .label-text { font-weight: 500; font-size: .92rem; color: var(--ink); }
.field .help { font-size: .84rem; color: var(--muted); }
.field .err { font-size: .84rem; color: #b42318; }
.input, select.input { width: 100%; font: 400 1rem/1.4 var(--f-sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: 12px 14px; transition: border-color 150ms ease, box-shadow 150ms ease; }
.input::placeholder { color: #75756e; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(31, 59, 255, .14); }
.input[aria-invalid="true"] { border-color: #b42318; }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .row-2 { grid-template-columns: 1fr; } }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.radios label { cursor: pointer; }
.radios input { position: absolute; opacity: 0; pointer-events: none; }
.radios span { display: inline-block; padding: 10px 14px; border-radius: var(--r-ctl); border: 1px solid var(--line-2); background: var(--bg); font-weight: 500; font-size: .92rem; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.radios input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.radios input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.notice { border-radius: var(--r-ctl); padding: 12px 14px; background: var(--accent-soft); color: var(--accent-ink); font-size: .93rem; }
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow); min-width: 0; }

/* ---------- ROI ---------- */
.roi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .roi { grid-template-columns: 1fr; } }
.range { display: grid; gap: 8px; }
.range-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.range-top output { font-family: var(--f-mono); font-size: .95rem; color: var(--accent-ink); }
input[type="range"] { width: 100%; }
.tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); font: 500 .7rem/1 var(--f-mono); color: var(--muted); cursor: help; vertical-align: 2px; margin-left: 4px; }
.tip span { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); width: 240px; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: #eeeeea; font: 400 .82rem/1.45 var(--f-sans); opacity: 0; visibility: hidden; transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s; text-align: left; }
.tip:hover span, .tip:focus span { opacity: 1; visibility: visible; transform: translateX(-50%); }
.result { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.16); display: grid; gap: 6px; }
.result:first-child { padding-top: 0; }
.result .v { font-weight: 400; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -.04em; line-height: 1; }
.result .l { color: var(--on-dark-2); font-size: .95rem; }
.result .f { font-family: var(--f-mono); font-size: .74rem; color: var(--peri); }

/* ---------- Resources ---------- */
.res { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.res .card { grid-column: span 2; }
.res .card:nth-child(-n+2) { grid-column: span 3; }
.res .thumb { aspect-ratio: 16 / 8; border-radius: 10px; position: relative; overflow: hidden; isolation: isolate; background: var(--surface); }
.res .type { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--accent-ink); }
.res .card h3 { font-weight: 400; font-size: 1.3rem; letter-spacing: -.02em; }
.res .card[hidden] { display: none; }
@media (max-width: 860px) { .res { grid-template-columns: 1fr; } .res .card, .res .card:nth-child(-n+2) { grid-column: auto; } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .lab { font-family: var(--f-mono); font-weight: 500; font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--muted); margin-right: 6px; min-width: 64px; }
.filters button { font: 500 .88rem/1 var(--f-sans); padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform var(--t-press) var(--ease); }
.filters button:active, .radios span:active { transform: scale(.97); }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); background: var(--surface); padding-block: 64px 32px; font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: 32px; }
.foot-grid h4 { font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--muted); margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { text-decoration: none; color: var(--ink-2); }
.foot-grid a:hover { color: var(--ink); }
.foot-brand p { color: var(--muted); margin-top: 14px; max-width: 30ch; }
.foot-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; color: var(--muted); }
.foot-bottom a { color: var(--muted); text-decoration: none; }
.foot-bottom a:hover { color: var(--ink); }
.foot-bottom .soc { border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; font-family: var(--f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; color: var(--ink-2); }
.foot-bottom .grow { flex: 1; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Layout helpers ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.split-wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
@media (max-width: 860px) { .split, .split-wide { grid-template-columns: 1fr; } }

/* ---------- Motion ----------
   One authored moment per page: the hero copy arrives in sequence while the product card settles in from blur.
   On scroll, only textured callouts open (clip-path). Everything is visible without JS. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { animation: rise 700ms var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
  .js .hero-visual { animation: settle 1000ms var(--ease) both; animation-delay: 260ms; }
  .js .callout.reveal { clip-path: inset(8% 5% round 24px); opacity: .5; transition: clip-path 900ms var(--ease), opacity 600ms ease-out; }
  .js .callout.reveal.in { clip-path: inset(0 0 round 24px); opacity: 1; }
  .js [data-stagger] > * { animation: rise 600ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); animation-play-state: paused; }
  .js [data-stagger].in > * { animation-play-state: running; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(10px) scale(.98); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- v4: enterprise pass ----------
   Calmer surfaces, medium-weight headings, tighter radii, a blueprint grid in the hero,
   hairline section rules with mono labels, and trust signals directly under the hero. */
.hero-grid { z-index: 1; }
.badge-new, .badge-new span { border-radius: var(--r-ctl); }
.badge-new { padding: 4px 12px 4px 4px; }
.badge-new span { padding: 4px 7px; border-radius: 4px; }

.shead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--ink); margin-bottom: clamp(28px, 4vw, 48px); }
.section-surface .shead, .stack-lg > .shead, .stack-xl > .shead { margin-bottom: 0; }
.shead .label { color: var(--ink); }
.shead .link-arrow { font-size: .9rem; }

.trust { padding-block: 28px 0; }
.trust .wrap { display: grid; }
.trust-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--line); }
.trust-row:first-child { border-top: 1px solid var(--line); }
.trust-row > .label { color: var(--ink); }
.trust-row .link-arrow { font-size: .9rem; white-space: nowrap; }
.sys-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; grid-column: 2 / -1; }
.sys-grid li { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.sys-grid li.muted { font-size: .9rem; font-weight: 400; color: var(--muted); letter-spacing: -.005em; white-space: normal; }
@media (max-width: 760px) {
  .trust-row { grid-template-columns: minmax(0, 1fr); }
  .sys-grid { grid-column: auto; gap: 6px 20px; }
}

.pcard, .vcard, .cost { box-shadow: 0 1px 2px rgba(25,25,26,.05), 0 12px 32px -20px rgba(25,25,26,.25); }
.callout-deep, .callout-dark { box-shadow: none; }
.stat { min-height: 128px; }

/* ---------- v5: closest match to plinthai.xyz ----------
   Exact Plinth tokens (#1F3BFF, #181815, #F4F4F1, #E6E6E1, #6E6E68, #8AA2FF), Inter 400 display,
   full-bleed hero texture, prompt-box product card, numbered feature labels, textured footer band. */
.hero { padding: 0; }
.hero-panel { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.hero-grid { padding-block: clamp(72px, 9vw, 136px); }

.fnum { display: inline-flex; gap: 10px; color: var(--ink); }
.fnum b { font-weight: 500; color: var(--accent); }
.fcopy { align-content: center; }

.pcard-composer .stage-wrap { border-bottom: 0; }
.composer { margin: 0 12px 12px; padding: 14px 14px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: grid; gap: 12px; box-shadow: 0 1px 2px rgba(24,24,21,.04); }
.composer p { display: flex; align-items: center; gap: 2px; min-width: 0; font-size: .95rem; color: var(--ink); }
.composer .q-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.composer .caret { width: 1.5px; height: 1.1em; background: var(--accent); flex: none; animation: blink 1s steps(2) infinite; }
.composer-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.composer .attach { font-size: .8rem; color: var(--muted); padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.composer .tag-sys { margin-left: auto; color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.composer .send { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.composer .send svg { width: 14px; height: 14px; transform: rotate(-90deg); }
@media (max-width: 420px) { .composer .attach { display: none; } }

.site-footer { padding-bottom: 0; background: var(--bg); }
.foot-bottom { margin-bottom: 32px; }
.foot-band { position: relative; isolation: isolate; overflow: hidden; height: clamp(160px, 22vw, 300px); display: flex; align-items: flex-end; padding-inline: var(--gutter); background: var(--dark); }
.foot-band .grain { position: absolute; inset: 0; z-index: -1; }
.foot-word { font-size: clamp(4rem, 15vw, 13rem); line-height: 1; letter-spacing: -.055em; color: rgba(255,255,255,.9); white-space: nowrap; padding-bottom: clamp(16px, 2.4vw, 36px); }

/* ---------- v6: robotic 3D (Physna-inspired, light) ---------- */
.stage { background:
  radial-gradient(60% 55% at 50% 45%, #ffffff 0%, rgba(255,255,255,0) 70%),
  linear-gradient(180deg, #f7f8fa 0%, #eceef2 100%); overflow: hidden; }
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; font-family: var(--f-mono); }
.hud-tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0; white-space: nowrap; will-change: transform; }
.hud-tag i { position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(31,59,255,.14); }
.hud-tag span { position: absolute; left: 10px; top: 0; transform: translateY(-50%); font-size: 0.8rem; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--ink); background: rgba(255,255,255,.88); border: 1px solid var(--line); border-left: 2px solid var(--accent); padding: 5px 8px; border-radius: 4px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hud-tag.hud-l span { left: auto; right: 10px; border-left: 1px solid var(--line); border-right: 2px solid var(--accent); }
.hud-read { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 2px; padding: 8px 10px; background: rgba(255,255,255,.82); border: 1px solid var(--line); border-radius: 6px; font-size: .64rem; letter-spacing: .06em; color: var(--muted); min-width: 108px; }
.hud-read div { display: flex; justify-content: space-between; gap: 12px; }
.hud-read b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.hud-compact .hud-read { display: none; }
.hud-compact .hud-tag span { font-size: .58rem; padding: 4px 6px; }

/* Scroll story (How it works): steps left, sticky 3D stage right */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.story-copy h2 { margin-top: clamp(28px, 4vw, 48px); }
.story-steps { list-style: none; margin: 0; padding: 0; }
.story-step { min-height: 62vh; display: grid; align-content: center; gap: 14px; opacity: .32; transition: opacity 300ms ease-out; }
.story-step.on { opacity: 1; }
.story-step:last-child { min-height: 100vh; padding-bottom: 36vh; }
.story-stage { position: sticky; top: 88px; height: calc(100vh - 128px); min-height: 420px; max-height: 760px; }
.story-stage .stage { aspect-ratio: auto; height: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.hud-tag { transition: opacity 400ms ease-out; }
@media (max-width: 860px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story-stage { order: -1; top: 64px; height: 44vh; min-height: 280px; z-index: 2; }
  .story-step { min-height: 56vh; }
}
@media (prefers-reduced-motion: reduce) { .story-step { opacity: 1; } }
.hero .pcard .stage { aspect-ratio: 1 / 1; }
@media (max-width: 860px) { .hero .pcard .stage { aspect-ratio: 4 / 3.4; } }

/* ---------- v7: Higgsfield hero render + code-drawn mm dimensions ----------
   The render and its dimension layer share one 16:9 box, so the overlay stays registered at every width.
   The panel takes the render's own background (#f7f4ec) so the box edges disappear. */
.hero-media .hero-panel { background: #f7f4ec; }
.hero-media .grain { display: none; }
.hero-img { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-art { position: absolute; right: 0; top: 50%; width: 80%; aspect-ratio: 16 / 9; transform: translateY(-50%); }
.hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-media .hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-height: min(82vh, 760px); }
.hero-media .hero-copy { position: relative; z-index: 3; }

.measure { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--f-mono); }
.m-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-svg line { stroke: var(--accent); stroke-width: 1.25; vector-effect: non-scaling-stroke; fill: none; }
.m-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(31,59,255,.14); }
.m-tag { position: absolute; transform: translate(0, -50%); white-space: nowrap; font-size: .7rem; font-weight: 500; letter-spacing: .04em; color: var(--accent-ink); background: rgba(255,255,255,.94); border: 1px solid rgba(31,59,255,.35); padding: 4px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.m-tag.m-left { transform: translate(-100%, -50%); }
.m-tag.m-center { transform: translate(-50%, -50%); }
.m-scan { position: absolute; top: 4%; bottom: 4%; width: 2px; left: 0; background: var(--accent); box-shadow: 0 0 18px 6px rgba(31,59,255,.22); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .m-line { opacity: 0; animation: m-in 600ms var(--ease) forwards; animation-delay: calc(900ms + var(--d) * 150ms); }
  .js .m-dot, .js .m-tag { opacity: 0; animation: m-in 420ms var(--ease) forwards; animation-delay: calc(1150ms + var(--d) * 150ms); }
  .js .m-scan { animation: m-scan 1900ms cubic-bezier(.65,0,.35,1) 500ms 1 forwards; }
}
@keyframes m-in { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@keyframes m-scan { 0% { left: 33%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 97%; opacity: 0; } }

@media (max-width: 1100px) { .hero-art { width: 84%; } }
@media (max-width: 860px) {
  .hero-media .hero-panel { display: flex; flex-direction: column; }
  .hero-media .hero-grid { order: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
  .hero-img { position: relative; order: 2; inset: auto; height: auto; aspect-ratio: 16 / 12.6; }
  .hero-art { width: 140%; right: auto; left: -45%; top: 50%; }
  .m-tag { font-size: .58rem; padding: 3px 6px; }
  .hero-art-hero-gearbox .m-i2, .hero-art-hero-gearbox .m-i4 { display: none; }
}

/* ---------- v8: one Product page, gradient highlight sections, Higgsfield art cards ---------- */
.hero-plain { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(40px, 5vw, 72px); }
.anchor { scroll-margin-top: 72px; }
.mt-l { margin-top: clamp(40px, 5vw, 64px); }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 28px 0; }
.subnav a { font-family: var(--f-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: -.005em; text-transform: none; text-decoration: none; color: var(--ink-2); padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: border-color var(--t-ui) ease, color var(--t-ui) ease; }
@media (hover: hover) and (pointer: fine) { .subnav a:hover { border-color: var(--accent); color: var(--accent-ink); } }

/* Gradient highlight band: warm white into soft cobalt and periwinkle pools */
.section-grad { position: relative; isolation: isolate; background:
  radial-gradient(60% 70% at 92% 8%, rgba(31,59,255,.16), transparent 70%),
  radial-gradient(50% 60% at 4% 96%, rgba(138,162,255,.22), transparent 70%),
  linear-gradient(180deg, #f7f4ec 0%, #eef0fb 55%, #f7f4ec 100%);
  border-block: 1px solid var(--line); }
.section-grad .fblock .art-card, .section-grad .pcard { box-shadow: 0 1px 2px rgba(24,24,21,.05), 0 24px 48px -28px rgba(31,59,255,.35); }

.art-card { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: #f7f4ec; border: 1px solid var(--line); aspect-ratio: 4 / 3; box-shadow: 0 1px 2px rgba(24,24,21,.05), 0 12px 32px -20px rgba(24,24,21,.25); }
.art-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-card .measure { position: absolute; inset: 0; }

.audit-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .audit-grid { grid-template-columns: minmax(0, 1fr); } }

/* v9: inner-page heroes carry a matching Higgsfield render */
.hero-media.hero-simple .hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-height: min(68vh, 620px); }
.hero-media.hero-simple .hero-copy { max-width: 560px; }
@media (max-width: 860px) { .hero-media.hero-simple .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; } }
/* blend every render into the warm-white ground so no image edge shows */
.hero-art img, .art-card img { mix-blend-mode: multiply; }
.hero-media.hero-simple .hero-art img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 92%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 22%, #000 92%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }

/* ---------- v10: inspectable renders. Blurred at rest; hover (or scroll into view on touch) sharpens the
   image, tilts it toward the cursor, reveals the tags, and lifts the nearest part under a lens. ---------- */
.hero-media .hero-grid { pointer-events: none; }
.hero-media .hero-copy { pointer-events: auto; }
.inspect { cursor: crosshair; outline: none; --rx: 0deg; --ry: 0deg; }
.inspect > img { filter: blur(5px) saturate(.8); transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.015);
  transition: filter 700ms var(--ease), transform 500ms var(--ease); will-change: transform; }
.inspect.on > img { filter: none; }
.inspect.on.has-hot > img { filter: saturate(.55); }
.inspect .measure { transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(36px); transition: transform 500ms var(--ease); }
.inspect .m-line, .inspect .m-dot, .inspect .m-tag { animation: none !important; opacity: 0;
  transition: opacity 360ms var(--ease) calc(var(--d) * 90ms), background-color 200ms, color 200ms, scale 260ms var(--ease); }
.inspect.on .m-line, .inspect.on .m-dot, .inspect.on .m-tag { opacity: 1; }
.inspect.on.has-hot .m-line:not(.hot), .inspect.on.has-hot .m-dot:not(.hot), .inspect.on.has-hot .m-tag:not(.hot) { opacity: .22; transition-delay: 0ms; }
.inspect .m-tag.hot { background: var(--accent); color: #fff; border-color: var(--accent); scale: 1.08; transition-delay: 0ms; }
.inspect .m-dot.hot { box-shadow: 0 0 0 6px rgba(31,59,255,.22), 0 0 0 14px rgba(31,59,255,.08); }
.inspect .m-scan { animation: none !important; }
.inspect.on .m-scan { animation: m-sweep 1100ms cubic-bezier(.65,0,.35,1) 1 forwards !important; }
@keyframes m-sweep { 0% { left: 2%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 98%; opacity: 0; } }

.lens { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 320ms var(--ease);
  filter: drop-shadow(0 18px 26px rgba(24,24,21,.32)); transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(24px); }
.lens img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: var(--x) var(--y); transform: scale(1);
  clip-path: circle(var(--r) at var(--x) var(--y)); transition: transform 420ms var(--ease), transform-origin 420ms var(--ease), clip-path 420ms var(--ease); }
.lens::after { content: ""; position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2.36); height: calc(var(--r) * 2.36); border-radius: 50%;
  transform: translate(-50%, -50%); border: 1.5px solid var(--accent); box-shadow: 0 0 0 6px rgba(31,59,255,.10);
  transition: left 420ms var(--ease), top 420ms var(--ease); }
.inspect.on.has-hot .lens { opacity: 1; }
.inspect.on.has-hot .lens img { transform: scale(1.18); }

.inspect-hint { position: absolute; z-index: 3; left: 50%; bottom: 10%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--ink); white-space: nowrap;
  background: rgba(255,255,255,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px;
  transition: opacity 300ms var(--ease), translate 300ms var(--ease); pointer-events: none; }
.inspect-hint i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(31,59,255,.5); animation: hint-pulse 1.8s ease-out infinite; }
.inspect.on .inspect-hint { opacity: 0; translate: 0 6px; }
.art-card .inspect-hint { bottom: 16px; }
@keyframes hint-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,59,255,.5); } 100% { box-shadow: 0 0 0 10px rgba(31,59,255,0); } }
@media (prefers-reduced-motion: reduce) {
  .inspect > img, .inspect .measure, .lens { transform: none !important; transition-duration: 1ms; }
  .inspect.on .m-scan { animation: none !important; }
  .inspect-hint i { animation: none; }
}

/* v10: each render sits on its own gradient (images multiply onto it, so white grounds take the colour) */
.hero-panel:has(.hero-art-product-hero), .tone-audit-duplicates {
  background: radial-gradient(60% 70% at 78% 30%, rgba(138,162,255,.55), transparent 70%), radial-gradient(50% 60% at 20% 90%, rgba(31,59,255,.16), transparent 70%), linear-gradient(160deg, #f7f6f2 0%, #e9ecfb 100%); }
.hero-panel:has(.hero-art-integrations-hero), .tone-enrich-part {
  background: radial-gradient(55% 65% at 80% 35%, rgba(150,224,205,.55), transparent 70%), radial-gradient(45% 55% at 35% 100%, rgba(138,162,255,.35), transparent 70%), linear-gradient(150deg, #f6f7f3 0%, #e6f1ef 100%); }
.hero-panel:has(.hero-art-security-hero) {
  background: radial-gradient(55% 70% at 82% 40%, rgba(124,108,255,.42), transparent 70%), radial-gradient(40% 50% at 55% 0%, rgba(255,196,170,.40), transparent 70%), linear-gradient(170deg, #f5f3f6 0%, #e7e3f6 100%); }
.tone-search-parts {
  background: radial-gradient(60% 70% at 75% 25%, rgba(255,190,160,.50), transparent 70%), radial-gradient(55% 60% at 15% 85%, rgba(160,150,255,.40), transparent 70%), linear-gradient(140deg, #faf6f1 0%, #f0e9f6 100%); }
/* no stacking context between the render and the panel, so multiply reaches the panel gradient */
.hero-img { z-index: auto; }
.hero-art { transform: none; top: 0; bottom: 0; margin-block: auto; height: auto; }

/* Only the home hero starts blurred; every other render is sharp with its tags showing, and hover still lifts parts */
.inspect:not(.hero-art-hero-gearbox) > img { filter: none; }
.inspect:not(.hero-art-hero-gearbox) .m-line, .inspect:not(.hero-art-hero-gearbox) .m-dot, .inspect:not(.hero-art-hero-gearbox) .m-tag { opacity: 1; }
.inspect:not(.hero-art-hero-gearbox) .inspect-hint { display: none; }
.inspect.on.has-hot:not(.hero-art-hero-gearbox) .m-line:not(.hot), .inspect.on.has-hot:not(.hero-art-hero-gearbox) .m-dot:not(.hot), .inspect.on.has-hot:not(.hero-art-hero-gearbox) .m-tag:not(.hot) { opacity: .22; }
/* centre the 16:9 art without a transform (which would isolate the multiply blend): margin % is of the container width */
.hero-art { top: 50%; bottom: auto; height: auto; margin-block: 0; margin-top: -22.5%; }
@media (max-width: 1100px) { .hero-art { margin-top: -23.625%; } }
@media (max-width: 860px) { .hero-art { margin-top: -39.375%; } }

/* v11: steady magnifying glass. No tilt; the glass is not its own stacking context, so its copy of the
   render multiplies onto the same panel colour, and the original is masked out under it (no double image). */
.inspect > img, .inspect .measure { transform: none !important; }
.inspect.on.has-hot > img { filter: none; }
.inspect.on.has-hot .m-line:not(.hot), .inspect.on.has-hot .m-dot:not(.hot), .inspect.on.has-hot .m-tag:not(.hot),
.inspect.on.has-hot:not(.hero-art-hero-gearbox) .m-line:not(.hot), .inspect.on.has-hot:not(.hero-art-hero-gearbox) .m-dot:not(.hot), .inspect.on.has-hot:not(.hero-art-hero-gearbox) .m-tag:not(.hot) { opacity: .45; }
.lens { position: absolute; inset: 0; z-index: auto; filter: none; transform: none; opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease); }
.lens img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; mix-blend-mode: multiply;
  transform-origin: var(--x) var(--y); transform: scale(var(--zoom)); clip-path: circle(calc(var(--r) / var(--zoom)) at var(--x) var(--y)); transition: none; }
.lens::after { content: ""; position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%;
  transform: translate(-50%, -50%); border: 1.5px solid rgba(31,59,255,.75); transition: none;
  box-shadow: 0 0 0 5px rgba(31,59,255,.08), 0 18px 40px -12px rgba(24,24,21,.35), inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -10px 24px rgba(31,59,255,.08); }
.inspect.lensing .lens, .inspect.on.has-hot .lens { opacity: 1; }
.inspect.on.has-hot .lens img { transform: scale(var(--zoom)); }
.inspect.lensing > img { -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent calc(var(--r) - 1px), #000 var(--r)); mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent calc(var(--r) - 1px), #000 var(--r)); }
.hero-media.hero-simple .inspect.lensing > img {
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent calc(var(--r) - 1px), #000 var(--r)), linear-gradient(90deg, transparent, #000 22%, #000 92%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in, source-in; mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent calc(var(--r) - 1px), #000 var(--r)), linear-gradient(90deg, transparent, #000 22%, #000 92%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
.inspect { cursor: crosshair; }


/* 3D HUD tags: no backdrop blur over the live canvas (it re-samples every frame and flickers in Chrome/Safari);
   tag sets cross-fade instead of popping when the story step changes */
.hud-tag { transition: opacity 380ms var(--ease); }
.hud-tag span { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.96); }
.story-stage .stage, .story-stage canvas { transform: translateZ(0); }

/* v12: centred, roomier nav; navy nav CTA; footer link columns set to the right edge */
@media (min-width: 861px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; }
  .nav-links { flex: none; gap: 10px; justify-content: center; }
  .nav-links a, .nav-links button { padding: 10px 14px; }
  .nav-right { justify-self: end; }
}
.btn-navy { background: #0c1a5b; border-color: #0c1a5b; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px -8px rgba(12,26,91,.6); }
.btn-navy:hover { background: #13257a; border-color: #13257a; }
@media (min-width: 961px) {
  .foot-grid { grid-template-columns: 1fr repeat(3, auto); gap: 72px; }
  .foot-grid > div:not(.foot-brand) { text-align: right; }
}

/* Privacy and Terms */
.legal { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 720px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal-toc { position: sticky; top: 96px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.legal-toc a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: .9rem; border-left: 2px solid transparent; }
.legal-toc a:hover { color: var(--ink); background: var(--surface); }
.legal-body { display: grid; gap: 40px; }
.legal-sec h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin-bottom: 14px; }
.legal-sec p, .legal-sec li { color: var(--ink-2); line-height: 1.7; }
.legal-sec p + p, .legal-sec p + ul, .legal-sec ul + p { margin-top: 12px; }
.legal-sec ul { padding-left: 1.2em; display: grid; gap: 10px; }
.legal-sec a { color: var(--accent); }
.legal-meta { margin-top: 18px; font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: var(--muted); }
@media (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal-toc { position: static; } .legal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.way-art { width: 100%; max-width: 320px; height: auto; color: var(--ink); margin-bottom: 6px; }
.way-art .db, .way-art .rack { color: var(--ink); }
.way-art .faint { stroke: var(--line-2); }
.way-art .wire { stroke: var(--accent); stroke-dasharray: 3 5; }
.way-art .arrow { stroke: var(--accent); }
.way-art .led { fill: var(--line-2); stroke: none; }
.way-art .led.on { fill: var(--accent); }
.way-art text { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .12em; fill: var(--muted); stroke: none; }
@media (prefers-reduced-motion: no-preference) { .way-art .wire { animation: wire-flow 1.6s linear infinite; } }
@keyframes wire-flow { to { stroke-dashoffset: -16; } }
/* multi-dimension callouts on the home hero */
.m-tag.m-card { display: grid; gap: 3px; padding: 6px 9px; line-height: 1.25; }
.m-tag.m-card b { font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.m-specs { display: grid; grid-template-columns: auto auto; gap: 1px 12px; }
.m-specs i { font-style: normal; }
.inspect .m-tag.m-card.hot b { color: #fff; }
@media (max-width: 860px) { .m-tag.m-card { padding: 4px 6px; } .m-specs { grid-template-columns: auto; } .m-specs i:nth-child(n+3) { display: none; } }
.way-0 .way-art, .way-0 .way-art .db, .way-0 .way-art .rack { color: rgba(255,255,255,.92); }
.way-0 .way-art .faint { stroke: rgba(255,255,255,.28); }
.way-0 .way-art .led { fill: rgba(255,255,255,.35); }
.way-0 .way-art .led.on { fill: #8aa2ff; }
.way-0 .way-art .wire, .way-0 .way-art .arrow { stroke: #8aa2ff; }
.way-0 .way-art text { fill: rgba(255,255,255,.6); }
/* semantic search results list */
.results { padding: 14px 8px 8px; }
.results-head { display: flex; justify-content: space-between; padding: 0 12px 8px; }
.results ol { list-style: none; margin: 0; padding: 0; display: grid; }
.results li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "m s"; gap: 3px 16px; align-items: center; padding: 10px 12px; border-radius: 8px; }
.results li + li { border-top: 1px solid var(--line); }
.results li:first-child { background: rgba(31,59,255,.06); border-top: 0; }
.results li:first-child + li { border-top: 0; }
.r-name { grid-area: n; font-family: var(--f-mono); font-size: .9rem; color: var(--ink); overflow-wrap: anywhere; }
.r-meta { grid-area: m; font-size: .8rem; color: var(--muted); }
.r-score { grid-area: s; font-family: var(--f-mono); font-size: .82rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.btn-navy { background: #1f30b0; border-color: #1f30b0; box-shadow: 0 6px 16px -8px rgba(31,48,176,.55); }
.btn-navy:hover { background: #2a3ccc; border-color: #2a3ccc; }
.stat .num { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
/* results with part thumbnails and vault paths */
.results li { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: none; gap: 14px; align-items: center; }
.r-thumb { width: 64px; height: 44px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); }
.r-thumb .thr line { stroke-width: .8; }
.results li:first-child .r-thumb { color: var(--accent-ink); border-color: rgba(31,59,255,.3); background: #fff; }
.r-body { display: grid; gap: 3px; min-width: 0; }
.r-name { grid-area: auto; }
.r-pn { font-size: .8rem; color: var(--ink-2); }
.r-path { font-family: var(--f-mono); font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-score, .r-meta { display: none; }
/* hero callouts: one spec per line, even rhythm */
.m-tag.m-card { gap: 0; padding: 7px 10px 8px; letter-spacing: .01em; line-height: 1.5; }
.m-tag.m-card b { margin-bottom: 2px; }
.m-specs { grid-template-columns: auto; gap: 0; }
/* vendor logo strip */
.sys-grid { align-items: center; gap: 14px 34px; }
.sys-grid li.sys-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.sys-mark { display: block; color: var(--ink-2); flex: none; }
.sys-logo span { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
/* customer quote */
.quote.quote-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-panel); padding: clamp(32px, 5vw, 64px); background: #12142a; color: #fff; gap: 28px; }
.quote-hero .q-mark { width: 40px; height: 30px; color: #8aa2ff; }
.quote-hero blockquote { color: #fff; max-width: 34ch; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.25; letter-spacing: -.025em; }
.quote-hero figcaption { display: grid; gap: 4px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); max-width: 34ch; }
.q-name { font-weight: 600; }
.q-role { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: -.005em; text-transform: none; color: rgba(255,255,255,.62); }
/* labels always sit on a solid card so leader lines never show through; dimming fades the text, not the card */
.m-tag { background: #fbfaf7; }
.inspect.on.has-hot .m-tag:not(.hot), .inspect.on.has-hot:not(.hero-art-hero-gearbox) .m-tag:not(.hot) { opacity: 1; color: rgba(31,59,255,.42); border-color: rgba(31,59,255,.18); }
.inspect.on.has-hot .m-tag.m-card:not(.hot) b { color: rgba(24,24,21,.45); }

/* v13: EnCad logo (navy, matches .btn-navy) */
.logo-mark { width: 24px; height: 24px; border-radius: 0; background: none; color: #1f30b0; display: block; flex: none; }
.logo-mark::after { content: none; }
.logo .sub { color: #1f30b0; font-weight: 500; }
.lede-line { display: block; }
.lede-line + .lede-line { margin-top: .7em; }

/* v14: nav CTA and logo use the main site blue */
.btn-navy { background: var(--accent); border-color: var(--accent); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -8px rgba(31,59,255,.55); }
.btn-navy:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.logo-mark, .logo .sub { color: var(--accent); }

/* v14: SOC 2 / ITAR seals */
.cbadges { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cbadge { display: inline-flex; width: 72px; height: 72px; color: var(--accent); }
.cbadge svg { width: 100%; height: 100%; font-family: Inter, system-ui, sans-serif; }
.cbadges-foot { margin-top: 18px; }
.cbadges-foot .cbadge { width: 58px; height: 58px; }
.hero .cbadges { margin-top: 22px; }
.cbadge { background: #fff; border-radius: 50%; }

/* v15: multi-select interests + custom dropdowns */
.legend-hint { font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: 6px; }
.checks span { display: inline-flex; align-items: center; gap: 8px; }
.checks span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line-2); background: #fff center/10px no-repeat; transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease); }
.checks input:checked + span { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.checks input:checked + span::before { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.2 8 3' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.dd { position: relative; }
.dd select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.dd-btn .dd-val.is-ph { color: var(--muted); }
.dd-btn svg { width: 14px; height: 14px; flex: none; color: var(--muted); transition: transform var(--t-ui) var(--ease); }
.dd.open .dd-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dd.open .dd-btn svg { transform: rotate(180deg); }
.dd-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); max-height: 300px; overflow: auto;
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top center; pointer-events: none; transition: opacity 160ms var(--ease), transform 200ms var(--ease); }
.dd.open .dd-list { opacity: 1; transform: none; pointer-events: auto; }
.dd-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-ctl); font-size: .95rem; color: var(--ink); cursor: pointer; }
.dd-list li.active { background: var(--surface); }
.dd-list li[aria-selected="true"] { color: var(--accent-ink); font-weight: 500; }
.dd-list li[aria-selected="true"]::after { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.2 8 3' fill='none' stroke='%231a31d6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .dd-list, .dd-btn svg { transition: none; } }
/* v18: product hero (landing gear) sits right of centre in its frame, so it keeps the standard hero size at mid widths */

/* v16: mobile pass. Hero render sits in flow at full width; tags appear only for the selected part;
   the scroll story becomes a stage above tappable, auto-advancing steps. */
@media (max-width: 860px) {
  .hero-img { aspect-ratio: auto; height: auto; overflow: visible; }
  .hero-art, .hero-art.hero-art-product-hero { position: relative; width: 100%; left: 0; right: auto; top: 0; margin: 8px 0 0; transform: none; }
  .hero-art-hero-gearbox .m-i2, .hero-art-hero-gearbox .m-i4 { display: block; }
  .inspect .m-tag, .inspect .m-line { opacity: 0 !important; scale: 1; transition: opacity 220ms var(--ease); }
  .inspect .m-tag.hot, .inspect .m-line.hot { opacity: 1 !important; }
  .inspect .m-dot { opacity: 1 !important; }
  .inspect { touch-action: pan-y; }
  .hero-art-hero-gearbox.inspect { touch-action: none; }

  .story { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .story-copy { display: contents; }
  .story-copy > :not(.story-steps) { order: 0; }
  .story-stage { order: 1; position: relative; top: auto; height: 300px; min-height: 0; z-index: auto; }
  .story-steps { order: 2; display: grid; gap: 8px; }
  .story-step, .story-step:last-child { min-height: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.6); cursor: pointer; opacity: .55; gap: 6px; }
  .story-step.on { opacity: 1; border-color: var(--accent); background: #fff; box-shadow: var(--shadow); }
  .story-step .lede { font-size: .95rem; }
}
.inspect-readout { display: none; }
@media (max-width: 860px) {
  .hero-img { overflow-x: clip; overflow-y: visible; }
  .hero-art.hero-art-hero-gearbox { width: 157%; left: -52.6%; margin: -16% 0 -15%; }
  .inspect .m-tag, .inspect .m-line { display: none; }
  .inspect-readout { display: block; position: relative; z-index: 3; margin: 10px 0 0; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.82);
    font-family: var(--f-mono); font-size: .78rem; line-height: 1.5; color: var(--accent-ink); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
  .inspect-readout.is-on { border-color: var(--accent); box-shadow: var(--shadow); }
  .inspect-readout b { display: block; font-family: var(--f-sans); font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
  .inspect-readout .m-specs { display: flex; flex-wrap: wrap; gap: 2px 12px; }
  .inspect-readout i { font-style: normal; }
  .inspect-readout .ro-idle { color: var(--muted); font-family: var(--f-sans); font-size: .9rem; }
  .art-card + .inspect-readout { margin-top: 10px; }
  .hero-art-hero-gearbox .inspect-hint { display: none; }
}
@media (max-width: 860px) {
  .inspect-readout .m-specs i:nth-child(n) { display: inline; }
  .hero-img > .inspect-readout { margin: 10px var(--gutter) 0; }
  .hero-art.hero-art-hero-gearbox { width: 140%; left: -41%; margin: -13% 0 -12%; }
}

/* v17: consistent breathing room under the sticky header on every page and width
   (the claude.ai preview also overlays a toolbar at the top on phones). */
html { scroll-padding-top: 96px; }
.hero-grid { padding-top: clamp(96px, 10vw, 144px); }
.hero-plain { padding-top: clamp(96px, 10vw, 144px); padding-bottom: clamp(48px, 6vw, 80px); }
.section, .anchor { scroll-margin-top: 96px; }
@media (max-width: 860px) {
  .hero-grid { padding-bottom: 56px; }
  .legal-toc { margin-bottom: 8px; }
}
.book-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
@media (max-width: 860px) { .book-split { grid-template-columns: minmax(0, 1fr); } }
.split-faq { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
@media (max-width: 860px) { .split-faq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .form .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .callout .panel.form { padding: 18px; }
  .foot-bottom .grow { flex-basis: 100%; }
}

/* v18: dots follow their parts into the magnifying glass; a part hidden behind the glass rim hides its dot and leader */
.inspect .m-dot.m-under, .inspect .m-line.m-under { opacity: 0 !important; transition: opacity 120ms var(--ease); }

/* v19: Product hero is a compact portrait render (landing gear) instead of a full-width 16:9 one: about a third of the
   paint area for the glass, mask and blend, and no edge-fade mask composite. Callouts sit beside it. */
.hero-art.hero-art-product-hero { aspect-ratio: 4 / 5; width: 28%; right: 18%; margin-top: -17.5%; }
.hero-media.hero-simple .hero-art.hero-art-product-hero img { -webkit-mask-image: linear-gradient(transparent, #000 16%); mask-image: linear-gradient(transparent, #000 16%); }
.hero-media.hero-simple .hero-art.hero-art-product-hero.inspect.lensing > img {
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent calc(var(--r) - 1px), #000 var(--r)); mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), transparent calc(var(--r) - 1px), #000 var(--r)); }
@media (max-width: 1100px) { .hero-art.hero-art-product-hero { width: 32%; right: 22%; margin-top: -20%; } }
@media (max-width: 860px) { .hero-art.hero-art-product-hero, .hero-art.hero-art-hero-gearbox.hero-art-product-hero { width: 64%; left: 18%; margin: 4% 0 0; } }

/* v19: single plan, highlighted in the site blue */
.plans.plans-one { grid-template-columns: 1fr; }
.plan-one { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto; gap: 40px; padding: clamp(28px, 4vw, 48px); background: var(--accent); }
.plan-one::after { background: linear-gradient(135deg, rgba(31,59,255,.55), rgba(18,36,170,.9)); }
.plan-one .plan-main { display: grid; gap: 18px; align-content: start; }
.plan-one h3 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.plan-one .for, .plan-one .check li, .plan-one .pp-cap { color: rgba(255,255,255,.86); }
.plan-one .inc { color: rgba(255,255,255,.7); }
.plan-one .check li::before { border-color: rgba(255,255,255,.75); }
.plan-price { display: grid; gap: 6px; padding: 18px 0; border-block: 1px solid rgba(255,255,255,.22); }
.pp-big { font-size: 1.25rem; letter-spacing: -.01em; color: #fff; }
.pp-cap { font-size: .9rem; }
@media (max-width: 860px) { .plan-one { grid-template-columns: 1fr; gap: 28px; } }
/* Touch: images scroll the page until tapped; once tapped, a finger drag moves the glass instead of scrolling. */
@media (max-width: 860px) { .inspect.was-on { touch-action: none; } }

/* v19: glossary definition list */
.gloss { display: grid; margin: 0; border-top: 1px solid var(--line); }
.gloss-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.gloss dt { font-weight: 500; color: var(--ink); }
.gloss dd { margin: 0; color: var(--ink-2); line-height: 1.65; }
.gloss-row:target { background: linear-gradient(90deg, rgba(31,59,255,.06), transparent); }
@media (max-width: 640px) { .gloss-row { grid-template-columns: 1fr; } }

/* v20: no rules around the Works with strip */
.trust-row, .trust-row:first-child { border-top: 0; border-bottom: 0; }
section:has(+ .trust) .hero-panel { border-bottom: 0; }
.trust + .section-grad { border-top: 0; }
/* v21: hero proof points in the body face, not mono caps (Pradyut, consistency) */
.proof li { font-family: inherit; font-weight: 500; font-size: .9rem; letter-spacing: -.005em; text-transform: none; }
.labels li, .chips li.chip { font-family: inherit; font-size: .9rem; letter-spacing: -.005em; text-transform: none; }
.labels li { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.labels li::before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; }
.plans-sec { padding-top: clamp(48px, 7vw, 88px); }
.way-art text { letter-spacing: 0; font-size: 10px; font-weight: 500; }