/* Fernmark: concept demo. Fonts load from Google Fonts only; local fallbacks keep it self-contained. */
:root {
  --ink: #0e1f18;
  --ink-2: #43524b;
  --fern: #1f6f50;
  --fern-d: #134a35;
  --deep: #0f2a20;
  --mist: #eaf2ee;
  --paper: #f7faf8;
  --card: #ffffff;
  --line: #d3dfd8;
  --ice: #d8ebf2;
  --alert: #b93a26;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --studio-banner-h: 36px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--studio-banner-h) + 84px); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: var(--studio-banner-h); background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -80px; background: var(--deep); color: #fff; padding: 10px 14px; z-index: 1100; border-radius: 6px; }
.skip:focus { top: calc(var(--studio-banner-h) + 12px); }
:focus-visible { outline: 2px solid var(--fern); outline-offset: 3px; }

.studio-banner { position: fixed; inset: 0 0 auto; z-index: 1000; min-height: var(--studio-banner-h); display: grid; place-items: center; padding: 6px 16px; background: #0c0d0e; color: #e8e6e1; font: 12px/1.4 system-ui, sans-serif; text-align: center; }
.studio-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* header */
.site-header { position: sticky; top: var(--studio-banner-h); z-index: 50; background: rgba(247, 250, 248, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.brand svg { width: 30px; height: 30px; }
.brand rect { fill: var(--deep); }
.brand path { fill: none; stroke: #7fd1ad; stroke-width: 1.8; stroke-linecap: round; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--ink-2); padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); border-color: var(--fern); }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; padding: 0; position: relative; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, top .2s; }
.menu-btn span:first-child { top: 17px; }
.menu-btn span:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 8px; font: 600 1rem var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-solid { background: var(--fern); color: #fff; }
.btn-solid:hover { background: var(--fern-d); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-small { min-height: 40px; padding: 0 16px; font-size: .94rem; }

/* typography */
.eyebrow, .kicker { font: 500 .78rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fern-d); }
.kicker { margin-bottom: 14px; }
.kicker-light { color: #8fd9b6; }
h1 { font-size: clamp(2.3rem, 4.1vw, 3.7rem); line-height: 1.04; letter-spacing: -.03em; font-weight: 650; margin-top: 18px; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 650; max-width: 22ch; }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.012em; font-weight: 650; }
.lede { margin-top: 22px; font-size: 1.15rem; color: var(--ink-2); max-width: 46ch; }
.sub { margin-top: 14px; color: var(--ink-2); max-width: 62ch; }
.sample-label { display: inline-block; width: fit-content; margin-right: 8px; padding: 1px 7px; border: 1px dashed currentColor; font: 500 .72rem/1.5 var(--mono); letter-spacing: .04em; vertical-align: 1px; }
.sample-light { margin: 8px 0 0 12px; }

/* hero */
.hero { padding: 56px 0 72px; background: linear-gradient(180deg, var(--mist), var(--paper) 78%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 34px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); }
.facts dt { font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { font-weight: 650; font-size: 1.02rem; margin-top: 2px; }

/* figure block */
.fig-wrap { min-width: 0; }
.fig-wrap .iso-figure { margin: 0; }
.fig-wrap .iso-plate { padding: 44px 14px 46px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -22px rgba(14, 31, 24, .35); }
.fig-wrap .iso-plate-corners { inset: 16px 18px; }
.fig-wrap .iso-legend { margin-top: 12px; }
.explain { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: start; margin-top: 14px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
/* Every part text is stacked invisibly in the same cell (script.js), so the card is always as tall as its longest text and nothing beside or below it moves. */
.ex-text { display: grid; }
.ex-text > * { grid-area: 1 / 1; }
.ex-ghost { visibility: hidden; }
.ex-kicker { font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fern-d); }
.ex-title { font-size: 1.12rem; line-height: 1.25; margin-top: 4px; max-width: none; letter-spacing: -.01em; }
.ex-body { margin-top: 6px; color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.ex-status { display: inline-flex; width: 31ch; gap: 8px; align-items: flex-start; font: 500 .8rem/1.45 var(--mono); color: var(--ink); max-width: 31ch; }
.ex-status .dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #2a9d6c; }
[data-alert="1"] .ex-status .dot { background: var(--alert); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 .92rem var(--sans); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.chip:hover { border-color: var(--fern); }
.chip[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }

/* sections */
section { scroll-margin-top: 90px; }
.how, .for, .pricing, .contact { padding: 84px 0; }
.how { background: var(--paper); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; counter-reset: s; }
.step { position: relative; padding: 28px 26px 30px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.glyph { width: 54px; height: 54px; margin-bottom: 18px; fill: none; stroke: var(--fern); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glyph circle { fill: var(--fern); stroke: none; }
.step-no { position: absolute; top: 24px; right: 24px; font: 500 .8rem var(--mono); color: var(--ink-2); }
.step h3 { margin-bottom: 10px; }
.step p:last-child { color: var(--ink-2); font-size: 1rem; }

.for { background: var(--mist); }
.for-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.for-card { padding: 28px 26px; background: var(--card); border-radius: 12px; border: 1px solid var(--line); }
.tag { display: inline-block; font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fern-d); background: var(--mist); padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; }
.for-card h3 { margin-bottom: 16px; }
.for-card li, .plan li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--line); font-size: 1rem; color: var(--ink-2); }
.for-card li::before, .plan li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--fern); }

.pricing { background: var(--paper); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; align-items: stretch; }
.plan { position: relative; padding: 28px 26px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.plan-main { border: 2px solid var(--fern); }
.badge { position: absolute; top: -13px; left: 24px; padding: 3px 12px; border-radius: 999px; background: var(--fern); color: #fff; font: 500 .72rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.plan-for { color: var(--ink-2); margin-top: 4px; font-size: .98rem; }
.price { margin: 20px 0 18px; font-size: 1rem; color: var(--ink-2); }
.price span { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.price span + span, .price span:last-child { font-size: 1.3rem; }

.review { background: var(--deep); color: #e6f1ec; padding: 84px 0; }
.review-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.review-copy { max-width: 760px; }
.review blockquote p { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.35; letter-spacing: -.015em; font-weight: 500; }
.review footer { margin-top: 22px; color: #bcd5c8; font-size: 1rem; }
.review footer strong { color: #fff; }

.contact { background: var(--mist); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.contact p { margin-top: 16px; color: var(--ink-2); max-width: 52ch; }
address { margin-top: 22px; font-style: normal; line-height: 1.8; }
.form { padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
label { font-weight: 600; font-size: .95rem; }
input, select { width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid #9db0a6; border-radius: 8px; background: #fff; color: var(--ink); font: 400 1rem var(--sans); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--fern); outline-offset: 1px; border-color: var(--fern); }
.form-msg { margin: 0 !important; min-height: 1.4em; font-weight: 600; color: var(--fern-d) !important; }
.form-msg.error { color: var(--alert) !important; }

.site-footer { background: var(--ink); color: #c4d6cc; padding: 28px 0; font-size: .92rem; }
.footer-row { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.demo-note { font-family: var(--mono); font-size: .78rem; }

/* photos */
.photo { overflow: hidden; background: var(--mist); }
.photo img { display: block; width: 100%; height: auto; }
.photo-card { margin: -28px -26px 22px; border-radius: 11px 11px 0 0; border-bottom: 1px solid var(--line); }
.pricing-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 48px; align-items: end; }
.photo-hw { border: 1px solid var(--line); border-radius: 12px; }
.photo-alert { border-radius: 12px; border: 1px solid rgba(188, 213, 200, .28); }

/* tablet and phone */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-copy { max-width: 640px; }
  .steps, .for-grid, .plans { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .review-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 640px; }
}
@media (max-width: 760px) {
  .menu-btn { display: block; }
  .header-cta { display: none; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px 24px 16px; background: var(--paper); border-bottom: 1px solid var(--line); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .hero { padding: 36px 0 56px; }
  .pricing-head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .photo-hw { max-width: 420px; }
}
@media (max-width: 600px) {
  :root { --studio-banner-h: 52px; }
  .wrap { width: calc(100% - 32px); }
  .how, .for, .pricing, .contact, .review { padding: 60px 0; }
  .facts { grid-template-columns: repeat(2, auto); }
  .explain { grid-template-columns: minmax(0, 1fr); }
  .ex-status { max-width: none; width: auto; }
  .fig-wrap .iso-plate { padding: 40px 6px 62px; }
  .form { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- anatomy kit base ---- */
.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}

/* ---- Fernmark figure (anatomy kit tokens, tuned to the site palette) ---- */
.fig-wrap.iso{
  --anatomy-page:#f4f8f6;--anatomy-card:#fbfdfc;--anatomy-text:#43524b;--anatomy-strong:#10201a;--anatomy-muted:#53635b;
  --anatomy-paper:#fbfdfc;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#d3ddd8;--anatomy-shade-1:#dfe8e3;--anatomy-shade-2:#e9f0ec;--anatomy-shade-3:#f2f7f4;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#e9f0ec;
  --anatomy-hi:#1d2b26;--anatomy-mid:#76877f;--anatomy-lo:#aebcb5;--anatomy-faint:#d3ddd8;--anatomy-lit:#0d5c3e;
  --anatomy-halo:#6f8078;--anatomy-halo-opacity:.3;--anatomy-dot:#2b3a34;
  --anatomy-red:#cf3f2b;--anatomy-green:#2a9d6c;--anatomy-blue:#3a78c2;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #fff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.fm-disc{fill:var(--anatomy-faint);stroke:var(--anatomy-lo);stroke-width:.5;vector-effect:non-scaling-stroke}
.fm-disc[data-on="ok"]{fill:var(--anatomy-green)}
.fm-disc[data-on="warn"]{fill:var(--anatomy-red)}
.fm-disc[data-on="idle"]{fill:var(--anatomy-paper)}
.fm-screen{fill:#f6faf8;stroke:var(--anatomy-lo);stroke-width:.5;vector-effect:non-scaling-stroke}
.fm-banner{fill:#cdeadc;stroke:none}
.fm-banner-text{fill:#0f3a28;letter-spacing:.06em}
[data-alert="1"] .fm-banner{fill:var(--anatomy-red)}
[data-alert="1"] .fm-banner-text{fill:#fff}
[data-alert="1"] [data-live="phone-temp"]{fill:var(--anatomy-red)}
.fm-live{font-weight:600}
.fm-route{opacity:.9}
.fm-pulse{fill:none;stroke:var(--anatomy-lit);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:0}
.fm-pulse[data-hot]{stroke:var(--anatomy-red)}
.fm-ring{opacity:0}
.fm-air,.fm-warm{pointer-events:none}
.fm-warm{opacity:0}
.fm-part{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.fm-hl{fill:transparent;stroke:transparent;stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:all}
.fm-part:hover .fm-hl,.fm-part[data-on] .fm-hl{fill:rgba(31,111,80,.07);stroke:#1f6f50;stroke-dasharray:3 3}
.fm-part:focus-visible .fm-hl{fill:rgba(31,111,80,.1);stroke:#134a35;stroke-width:2;stroke-dasharray:none}
@media (prefers-reduced-motion:reduce){.fm-part[data-on] .fm-hl{stroke-dasharray:none}}