/* nativesense: a light theme. White and soft grey surfaces, black for text and structure, one teal accent. */

:root {
  --black: #08090a;
  --black-2: #111314;
  --black-3: #1a1d1f;
  --white: #ffffff;
  --paper: #f6f7f7;
  --ink: #0b0c0d;
  --ink-2: #30353a;
  --ink-3: #6b7377;
  --line: #e3e6e7;
  --line-dark: #d6dbdd;
  --line-2: #cfd5d7;
  --teal: #2dd4bf;          /* bright accent: fills and selection only */
  --teal-deep: #0f766e;     /* on white: 5.4:1 */
  --teal-soft: rgba(15, 118, 110, .07);
  --f-display: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  --f-body: "Raleway", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Raleway", "Avenir Next", "Helvetica Neue", Arial, sans-serif;   /* labels: Raleway capitals, widely tracked */
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.65 var(--f-body); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; }
img { height: auto; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; }
h1, h2 { font-family: var(--f-display); font-weight: 400; letter-spacing: -.01em; line-height: 1.06; }
h3, h4 { font-family: var(--f-body); font-weight: 600; letter-spacing: -.012em; line-height: 1.2; }
.serif { font-family: var(--f-display); font-weight: 400; letter-spacing: -.01em; }
p { margin: 0; }
::selection { background: var(--teal); color: var(--black); }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--teal); color: var(--black); padding: 8px 14px; z-index: 100; font-weight: 600; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.paper { background: var(--paper); }
section { position: relative; }
.pad { padding: clamp(72px, 11vw, 140px) 0; }

.eyebrow { font: 600 12px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--teal-deep); display: inline-flex; align-items: center; gap: 10px; }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 640px; }
.mono { font-family: var(--f-mono); }
.muted { color: var(--ink-3); }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); color: var(--ink); }
.site-head .wrap { display: flex; align-items: center; height: 68px; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 600 18px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.logo svg.mark { width: 58px; height: auto; flex: none; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a { text-decoration: none; font-size: 14.5px; color: var(--ink-2); transition: color .15s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--teal-deep); padding: 6px 0; }
.nav a.btn, .nav a.btn:hover { color: var(--white); box-shadow: none; padding: 10px 16px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); color: var(--ink); width: 42px; height: 42px; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: currentColor; margin: 4px auto; transition: transform .2s, opacity .2s; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font: 600 15px/1 var(--f-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; border-radius: var(--radius); white-space: nowrap; }
.btn svg { width: 16px; height: 16px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { background: var(--teal-deep); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--black); color: var(--white); }
.btn-ink { background: var(--black); color: var(--white); }
.btn-ink:hover { background: var(--teal-deep); }
.btn-sm { padding: 10px 16px; font-size: 14px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--white); }
.hero > .wrap { position: relative; }
.hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(48px, 7vw, 88px); padding-bottom: 56px; }
.hero h1 { font-size: clamp(44px, 5.4vw, 78px); margin: 20px 0 24px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.hero-art { position: relative; width: 100%; max-width: 620px; justify-self: end; }
.hero-art img { width: 100%; height: auto; }
.grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#eef0f1 1px, transparent 1px), linear-gradient(90deg, #eef0f1 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 20%, transparent 75%); }
.hero .field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; mask-image: radial-gradient(ellipse 80% 75% at 62% 45%, #000 35%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse 80% 75% at 62% 45%, #000 35%, transparent 85%); }

.meta-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 44px; font: 600 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.meta-row span { display: inline-flex; align-items: center; gap: 8px; }
.meta-row span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-deep); }

/* ---------- audiences (hero foot) ---------- */
.audiences { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.audience { position: relative; display: flex; flex-direction: column; padding: 30px 96px 34px 0; text-decoration: none; }
.audience + .audience { padding-left: 32px; padding-right: 64px; border-left: 1px solid var(--line-dark); }
.audience .who { font: 600 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); }
.audience h2 { font-size: clamp(28px, 3vw, 38px); margin-top: 12px; }
.audience p { color: var(--ink-2); font-size: 15.5px; margin-top: 8px; }
.audience .kw { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font: 600 12px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); }
.audience .kw span::before { content: "+ "; color: var(--teal-deep); }
.audience .arrow { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 1px solid var(--line-dark); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.audience .arrow svg { width: 18px; }
.audience:hover .arrow { background: var(--black); border-color: var(--black); color: var(--white); }
.audience:hover h2 { color: var(--teal-deep); }
.audience h2 { transition: color .2s; }

/* ---------- connects-to strip ---------- */
.strip { border-bottom: 1px solid var(--line); background: var(--white); }
.strip .wrap { display: flex; align-items: center; gap: 18px 40px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; }
.strip .label { font: 600 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); flex: 0 1 auto; max-width: 220px; }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; flex: 1; }
.strip li { font: 500 16px/1 var(--f-body); letter-spacing: -.01em; color: #4a5155; }

/* ---------- the gap ---------- */
.gap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.gap h2 { font-size: clamp(42px, 5.6vw, 72px); margin: 18px 0 28px; }
.gap .prose p { font-size: 18.5px; }
.gap .art { border: 1px solid var(--line); background: var(--white); padding: clamp(16px, 3vw, 36px); }
.gap .art img { width: 100%; height: auto; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--line); }
.trio div { padding: 22px 20px 0 0; }
.trio div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.trio b { display: block; font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 10px; }
.trio span { font-size: 15px; color: var(--ink-2); }

/* ---------- product groups ---------- */
.group + .group { margin-top: clamp(48px, 7vw, 80px); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 0; border-bottom: 2px solid var(--black); }
.group-head h3 { font: 400 clamp(28px, 3vw, 38px)/1 var(--f-display); letter-spacing: -.01em; }
.group-head span { font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.products.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.products.one { grid-template-columns: minmax(0, 1fr); }
.products.one .product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; min-height: 0; }
.products.one .product .glyph { grid-column: 2; grid-row: 1 / span 8; height: 100%; min-height: 240px; margin: 0; }
.products.one .product .num { margin-bottom: 20px; }
.products { border-top: 0; }

/* ---------- products, told as situations ---------- */
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.story:first-of-type { border-top: 0; padding-top: 0; }
.story.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.story.flip .story-text { order: 2; }
.story-title { font: 400 clamp(34px, 4vw, 52px)/1.05 var(--f-display); letter-spacing: -.01em; margin: 16px 0 8px; }
.story-art { position: sticky; top: 104px; margin: 0; border: 1px solid var(--line); background: var(--white); padding: clamp(8px, 1.2vw, 16px); }
.story-art img { width: 100%; }
.story-art figcaption { margin-top: 14px; font: 600 11px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.story .go { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.story .go svg { width: 16px; transition: transform .2s; }
.story .go:hover svg { transform: translateX(4px); }
.beats { display: grid; gap: 0; }
p.beat { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin-top: 16px; }
.story-text p.beat:first-of-type { margin-top: 22px; font-size: 18.5px; color: var(--ink); }
.beats p.beat:first-child { margin-top: 0; font-size: 18.5px; color: var(--ink); }
.outcome { margin-top: 26px; padding: 20px 22px; border-left: 2px solid var(--teal-deep); background: var(--teal-soft); }
.beat-label { display: block; font: 600 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 10px; }
.outcome p { font-size: 16.5px; color: var(--ink); }

.next { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 72px); padding: 32px 34px; border: 1.5px dashed var(--line-2); background: var(--paper); }
.next > div { max-width: 640px; }
.next-title { font: 400 clamp(28px, 3vw, 38px)/1.1 var(--f-display); letter-spacing: -.005em; margin: 12px 0 10px; }
.next p { color: var(--ink-2); font-size: 16.5px; }
.site-foot li.soon { color: var(--ink-3); font-style: normal; }
.other a.soon { border-right-style: dashed; border-bottom-style: dashed; border-color: var(--line-2); background: var(--paper); }
.other a.soon h3 { color: var(--ink-2); }

/* ---------- partnership ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pillar { padding: 32px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.pillar h3 { font: 400 28px/1.1 var(--f-display); letter-spacing: -.005em; }
.pillar p { color: var(--ink-2); font-size: 16px; margin-top: 12px; }

/* ---------- engagement ---------- */
.engage { margin-top: clamp(56px, 8vw, 96px); }
.engage h3.sub-h { font: 400 clamp(30px, 3.4vw, 44px)/1.05 var(--f-display); letter-spacing: -.01em; margin-bottom: 28px; }

/* ---------- scenarios ---------- */
.scenarios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.scenario { padding: 32px 30px 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); display: flex; flex-direction: column; gap: 12px; }
.scenario .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.scenario .tags span { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border: 1px solid var(--line); color: var(--ink-3); }
.scenario .tags span.p { border-color: var(--teal-deep); color: var(--teal-deep); }
.scenario h3 { font-size: 23px; letter-spacing: -.015em; margin-top: 6px; }
.scenario p { color: var(--ink-2); font-size: 16px; }
.scenario .out { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 14.5px; color: var(--ink); }
.scenario .out b { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); display: block; margin-bottom: 8px; }
.note-honest { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }

/* ---------- closing ---------- */
.closing h2 { font-size: clamp(38px, 4.8vw, 64px); max-width: 900px; }
.closing .lede { margin-top: 24px; }
.signoff { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 36px 0; border-top: 1px solid var(--line-dark); }
.signoff b { font: 400 clamp(28px, 3.2vw, 42px)/1.05 var(--f-display); letter-spacing: -.01em; }

/* ---------- section heads ---------- */
.s-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.s-head h2 { font-size: clamp(40px, 5.2vw, 68px); margin-top: 18px; }
.s-head .lede { justify-self: end; }

/* ---------- product cards ---------- */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.product { position: relative; display: flex; flex-direction: column; padding: 36px 32px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; background: var(--white); transition: background .2s; min-height: 520px; }
.product:hover { background: var(--paper); }
.product .num { font: 600 12px/1 var(--f-mono); color: var(--ink-3); letter-spacing: .1em; }
.product .glyph { width: 100%; height: 170px; margin: 28px 0 30px; }
.product h3 { font: 400 40px/1 var(--f-display); letter-spacing: -.01em; }
.product .tag { font: 600 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--teal-deep); margin-top: 10px; }
.product p { color: var(--ink-2); margin-top: 16px; font-size: 16px; }
.product ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.product li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; }
.product li::before { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--teal-deep); border-bottom: 2px solid var(--teal-deep); transform: rotate(-45deg) translateY(-2px); }
.product .go { margin-top: auto; padding-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.product .go svg { width: 16px; transition: transform .2s; }
.product:hover .go svg { transform: translateX(4px); }

/* ---------- principles ---------- */
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-dark); }
.principle { padding: 34px 28px 10px 0; border-right: 1px solid var(--line-dark); }
.principle + .principle { padding-left: 28px; }
.principle:last-child { border-right: 0; }
.principle .shape { width: 44px; height: 44px; margin-bottom: 28px; }
.principle h3 { font-size: 21px; letter-spacing: -.015em; }
.principle p { color: var(--ink-2); font-size: 15.5px; margin-top: 12px; }

/* ---------- glimpse (architecture) ---------- */
.glimpse-tabs { display: flex; gap: 0; border: 1px solid var(--line); width: max-content; max-width: 100%; overflow-x: auto; margin-bottom: 28px; }
.glimpse-tabs button { background: none; border: 0; border-right: 1px solid var(--line); padding: 13px 22px; font: 500 14px/1 var(--f-body); color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.glimpse-tabs button:last-child { border-right: 0; }
.glimpse-tabs button[aria-selected="true"] { background: var(--black); color: var(--white); }
.glimpse { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); border: 1px solid var(--line); background: var(--white); }
.glimpse .stage { background: var(--white); border-right: 1px solid var(--line); padding: clamp(20px, 3vw, 40px); display: grid; place-items: center; min-height: 420px; }
.glimpse .stage img { width: 100%; height: auto; }
.glimpse .notes { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 22px; }
.glimpse .notes h3 { font: 400 32px/1.05 var(--f-display); letter-spacing: -.01em; }
.glimpse ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: g; }
.glimpse li { counter-increment: g; display: grid; grid-template-columns: 34px 1fr; gap: 8px; font-size: 15px; color: var(--ink-2); }
.glimpse li::before { content: counter(g, decimal-leading-zero); font: 600 12px/1.9 var(--f-mono); color: var(--teal-deep); }
.glimpse li b { color: var(--ink); font-weight: 600; }
.glimpse[hidden] { display: none; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about h2 { font-size: clamp(40px, 5.2vw, 68px); margin: 18px 0 24px; }
.about p + p { margin-top: 16px; }
.about .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.about .fact { padding: 26px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about .fact b { display: block; font: 400 36px/1.05 var(--f-display); letter-spacing: -.005em; }
.about .fact span { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-3); }

/* ---------- demo form ---------- */
.demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.demo h2 { font-size: clamp(34px, 4.6vw, 60px); margin: 18px 0 22px; }
.demo .direct { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-3); }
.demo .direct a { color: var(--teal-deep); text-decoration: none; font-family: var(--f-mono); font-size: 16px; }
.demo .direct a:hover { text-decoration: underline; }
form.demo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label, .field legend { font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea, .field select { width: 100%; background: var(--white); border: 1px solid var(--line-2); color: var(--ink); padding: 14px 14px; font: 400 16px/1.4 var(--f-body); border-radius: var(--radius); transition: border-color .15s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.field input::placeholder, .field textarea::placeholder { color: #9aa3a7; }
.field textarea { min-height: 120px; resize: vertical; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.field .chip { position: relative; font: 500 14.5px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid var(--line-2); background: var(--white); font-size: 14.5px; color: var(--ink-2); transition: all .15s; }
.chip span::before { content: ""; width: 14px; height: 14px; border: 1.5px solid #9aa3a7; border-radius: 3px; background: var(--white) center / 10px no-repeat; transition: all .15s; }
.chip input:checked + span { border-color: var(--teal-deep); color: var(--ink); background: var(--teal-soft); }
.chip input:checked + span::before { background-color: var(--teal-deep); border-color: var(--teal-deep); background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M3.5 8.2l3 3 6-6.2%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); }
.chip input:focus-visible + span { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.form-foot p { font-size: 13.5px; color: var(--ink-3); max-width: 360px; }
.form-msg { grid-column: 1 / -1; font-size: 14px; color: var(--teal-deep); min-height: 20px; }
.form-msg a { color: inherit; }
.form-msg.err { color: #b42318; }

/* ---------- product pages ---------- */
.p-hero .wrap { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.p-hero h1 { font-size: clamp(56px, 8vw, 112px); margin: 18px 0 18px; }
.p-hero .sub { font: 400 clamp(24px, 2.8vw, 34px)/1.2 var(--f-display); letter-spacing: -.005em; color: var(--ink); max-width: 900px; }
.p-hero .lede { margin-top: 22px; }
.p-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.p-arch { margin: clamp(48px, 7vw, 80px) 0 0; border: 1px solid var(--line); background: var(--white); padding: clamp(16px, 3vw, 44px); }
.p-arch img { width: 100%; max-width: 980px; height: auto; margin: 0 auto; }
.p-arch figcaption { margin-top: 18px; font: 600 12px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.split h2 { font-size: clamp(38px, 4.8vw, 62px); margin-top: 18px; }
.split .lede { margin-top: 20px; }
.prose p { color: var(--ink-2); font-size: 18px; }
.prose p + p { margin-top: 18px; }
.prose strong { color: var(--ink); }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature { padding: 34px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.feature .shape { width: 36px; height: 36px; margin-bottom: 22px; }
.feature h3 { font-size: 22px; letter-spacing: -.015em; }
.feature p { color: var(--ink-2); font-size: 16px; margin-top: 10px; }

.steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--line-dark); counter-reset: s; }
.step { counter-increment: s; padding: 30px 24px 8px 0; border-right: 1px solid var(--line-dark); position: relative; }
.step + .step { padding-left: 24px; }
.step:last-child { border-right: 0; }
.step::before { content: counter(s, decimal-leading-zero); display: block; font: 600 13px/1 var(--f-mono); color: var(--teal-deep); margin-bottom: 22px; }
.step h3 { font-size: 20px; letter-spacing: -.015em; }
.step p { color: var(--ink-2); font-size: 15px; margin-top: 10px; }
.step .gate { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); }
.step .gate::before { content: ""; width: 15px; height: 15px; border-radius: 50%; background: var(--teal-deep) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M4.5 8.2l2.3 2.3 4.7-4.8%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 15px no-repeat; }

.fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.fit div { padding: 28px 24px 0 0; }
.fit div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.fit h3 { font-size: 19px; letter-spacing: -.01em; }
.fit p { color: var(--ink-2); font-size: 15.5px; margin-top: 10px; }

.demo-band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.demo-band h2 { font-size: clamp(38px, 4.8vw, 62px); margin: 18px 0 28px; }
.see { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.see li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line-dark); font-size: 16px; color: var(--ink-2); }
.see li::before { content: ""; width: 10px; height: 5px; margin-top: 8px; border-left: 2px solid var(--teal-deep); border-bottom: 2px solid var(--teal-deep); transform: rotate(-45deg); }
.demo-cta { border: 1px solid var(--line-dark); background: var(--white); padding: 30px; display: grid; gap: 18px; justify-items: start; }
.demo-cta p { font-size: 17px; color: var(--ink-2); }
.demo-cta .mail { font: 600 14px/1 var(--f-mono); color: var(--teal-deep); text-decoration: none; }
.demo-cta .mail:hover { text-decoration: underline; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(28px, 3.6vw, 46px); max-width: 680px; }

.other { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.other a { display: grid; grid-template-columns: 72px 1fr auto; gap: 22px; align-items: center; padding: 26px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; transition: background .2s; }
.other a:hover { background: var(--paper); }
.other svg.mini { width: 72px; height: 52px; }
.other h3 { font: 400 30px/1 var(--f-display); letter-spacing: -.01em; }
.other p { font-size: 14.5px; color: var(--ink-3); margin-top: 4px; }
.other .arrow { width: 18px; transition: transform .2s; }
.other a:hover .arrow { transform: translateX(4px); }

/* ---------- footer ---------- */
.site-foot { background: var(--white); color: var(--ink-2); border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 14.5px; }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-foot h4 { font: 600 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--teal-deep); }
.site-foot .logo { color: var(--ink); margin-bottom: 14px; }
.site-foot .base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

/* ---------- Memphis accents ---------- */
.deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.deco img { position: absolute; height: auto; }
section > .wrap { position: relative; z-index: 1; }
/* decorations live in the side margins, so they only show when the margins are wide enough */
@media (max-width: 1360px) { .deco img { display: none; } .hero .deco img:nth-child(1) { display: block; } }
@media (max-width: 860px) { .hero .deco img { display: none !important; } }

/* ---------- motion ---------- */
.flow { stroke-dasharray: 4 10; animation: flow 1.6s linear infinite; }
.flow-slow { stroke-dasharray: 2 12; animation: flow 3.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.pulse { animation: pulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.spin { animation: spin 60s linear infinite; transform-box: view-box; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.blink { animation: blink 4s steps(1) infinite; }
@keyframes blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow, .flow-slow, .pulse, .spin, .blink { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .other { grid-template-columns: minmax(0, 1fr); }
  .story, .story.flip { grid-template-columns: minmax(0, 1fr); }
  .story.flip .story-text { order: 0; }
  .story-art { position: static; }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .steps[style*="--n: 5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products, .products.two { grid-template-columns: minmax(0, 1fr); }
  .products.one .product { grid-template-columns: minmax(0, 1fr); }
  .products.one .product .glyph { grid-column: 1; grid-row: auto; height: 170px; min-height: 0; margin: 28px 0 30px; }
  .gap { grid-template-columns: minmax(0, 1fr); }
  .product { min-height: 0; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principle:nth-child(2) { border-right: 0; }
  .principle:nth-child(3) { padding-left: 0; border-top: 1px solid var(--line-dark); }
  .principle:nth-child(4) { border-top: 1px solid var(--line-dark); }
  .glimpse { grid-template-columns: minmax(0, 1fr); }
  .glimpse .stage { min-height: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2n) { border-right: 0; }
  .step:nth-child(2n+1) { padding-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; box-shadow: 0 12px 24px rgba(8, 9, 10, .06); }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav a[aria-current="page"] { box-shadow: none; padding: 14px 0; color: var(--teal-deep); }
  .nav .btn { margin-top: 16px; justify-content: center; border-bottom: 0; }
  .nav-toggle { display: block; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .hero .hero-grid { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .hero-art { justify-self: center; max-width: 360px; }
  .s-head, .about, .demo, .split, .demo-band { grid-template-columns: minmax(0, 1fr); }
  .s-head .lede { justify-self: start; }
  .features, .other { grid-template-columns: minmax(0, 1fr); }
  .fit { grid-template-columns: minmax(0, 1fr); }
  .audiences, .scenarios { grid-template-columns: minmax(0, 1fr); }
  .audience + .audience { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-dark); }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 20px; }
  .fit div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 24px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .glimpse-tabs { width: 100%; flex-wrap: wrap; overflow: visible; }
  .glimpse-tabs button { flex: 1 1 auto; border-bottom: 1px solid var(--line); }
  .principles, .steps { grid-template-columns: minmax(0, 1fr); }
  .principle, .principle + .principle, .step, .step + .step { padding-left: 0; padding-right: 0; border-right: 0; }
  .principle + .principle, .step + .step { border-top: 1px solid var(--line-dark); }
  form.demo-form, .see { grid-template-columns: minmax(0, 1fr); }
  .product { padding: 28px 22px; }
  .feature { padding: 28px 22px; }
  .scenario { padding: 26px 22px; }
  .audience, .audience + .audience { padding-right: 64px; }
  .audience .arrow { right: 0; }
  .strip .label { max-width: none; }
  .other a { grid-template-columns: 56px 1fr auto; padding: 22px; gap: 16px; }
  .other svg.mini { width: 56px; }
  .about .fact b { font-size: 28px; }
  .site-foot .cols { grid-template-columns: minmax(0, 1fr); }
  .hero .actions .btn, .p-hero .actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- questions ---------- */
.faq-list { max-width: 920px; border-top: 1px solid var(--line-dark); }
.faq-list details { border-bottom: 1px solid var(--line-dark); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font: 500 clamp(17px, 1.6vw, 19px)/1.4 var(--f-body); color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--teal-deep); }
.faq-list summary:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 4px; }
.faq-list summary svg { width: 18px; height: 18px; flex: none; color: var(--teal-deep); transition: transform .2s; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { max-width: 760px; padding: 0 48px 26px 0; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .faq-list summary svg { transition: none; } }
@media (max-width: 640px) { .faq-list details p { padding-right: 0; } }

/* pen:start */
/* hand-drawn lines, generated by brand/pen_css.py: do not edit by hand */
:root {
  --pen-line-0: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M1.32 4.12Q49.77 1.87 98.21 3.8M95.78 3.42Q97.05 50.4 96.29 97.37M96.11 96.31Q49.56 96.1 3 96.17M4.22 98.41Q4.74 50.03 4.31 1.65%22 fill=%22none%22 stroke=%22%23e3e6e7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-line-1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M1.65 4.02Q50.17 2.93 98.7 4.08M95.88 3.03Q94.53 49.94 96.39 96.86M97.12 95.77Q50.07 95.97 3.01 96.1M3.7 97.05Q2.01 49.47 4.15 1.88%22 fill=%22none%22 stroke=%22%23e3e6e7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-line-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M2.75 4.01Q50.1 5.13 97.45 3.98M95.82 3.55Q95.32 49.83 96 96.12M98.26 96.17Q50.86 95.3 3.47 95.6M4.12 97.79Q5.27 50.75 3.99 3.72%22 fill=%22none%22 stroke=%22%23e3e6e7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-line-3: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.34 4.11Q50.67 5.39 98 4.09M95.8 3.18Q95.44 49.9 95.91 96.62M96.52 95.95Q50.02 94.6 3.53 95.66M3.83 96.83Q4.27 49.81 3.87 2.79%22 fill=%22none%22 stroke=%22%23e3e6e7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-dark-0: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M2.47 3.85Q49.51 2.37 96.55 4.27M96.13 2.72Q98.36 51.11 96.25 99.5M96.97 95.71Q50.22 94.46 3.46 95.73M3.88 96.46Q1.88 49.81 3.63 3.16%22 fill=%22none%22 stroke=%22%23d6dbdd%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-dark-1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.8 4.33Q50.06 5.75 96.32 3.87M96.34 2.17Q98.07 49.67 96.34 97.18M97.92 96.23Q50.74 96.05 3.56 95.97M4.06 96.47Q5.32 49.19 4.08 1.9%22 fill=%22none%22 stroke=%22%23d6dbdd%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-dark-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M4.12 3.82Q51.21 4.79 98.3 3.8M95.82 3.09Q95.68 51.27 95.66 99.45M96.6 95.8Q50.13 97.86 3.66 95.9M3.65 98.52Q3.73 51.2 4.3 3.88%22 fill=%22none%22 stroke=%22%23d6dbdd%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-dark-3: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.77 3.88Q50.47 2.37 97.16 3.78M96.01 3.01Q97.44 51.1 95.62 99.19M96.51 96.27Q49.16 96.38 1.82 96M4.31 96.78Q2.94 49.62 3.63 2.46%22 fill=%22none%22 stroke=%22%23d6dbdd%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-mid-0: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M1.06 3.92Q49.38 2.91 97.69 3.92M96.31 3.64Q94.66 49.94 96.17 96.23M96.77 95.8Q49.19 95.23 1.6 96.37M4 96.58Q5.12 49.77 4.11 2.95%22 fill=%22none%22 stroke=%22%23cfd5d7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-mid-1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.35 3.75Q50.73 5.85 98.11 4.03M95.63 1.88Q97.56 49.42 95.68 96.96M98 96Q50.51 97.46 3.02 96.37M4.14 97.91Q2.35 50.77 3.78 3.62%22 fill=%22none%22 stroke=%22%23cfd5d7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-mid-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M2.68 4.04Q50.12 4.52 97.57 3.75M95.67 2.69Q95.74 50.36 96.23 98.02M97.43 96.29Q49.94 94.36 2.44 96.35M4.15 97.5Q5.09 49.12 3.61 0.73%22 fill=%22none%22 stroke=%22%23cfd5d7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-mid-3: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M2.94 4.22Q49.79 3.4 96.63 3.86M95.76 2.76Q97.43 50.12 95.89 97.48M98.72 96.19Q51.09 93.91 3.45 95.99M3.78 97.49Q4.87 50.28 4.3 3.06%22 fill=%22none%22 stroke=%22%23cfd5d7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-ink-0: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M1.93 3.73Q50.11 5.6 98.29 3.87M96.11 2.23Q95.22 49.55 95.99 96.87M96.65 96.22Q49.94 93.89 3.23 95.69M4 96.63Q4.67 49.88 3.76 3.13%22 fill=%22none%22 stroke=%22%230b0c0d%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-ink-1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.62 3.61Q50.02 5.97 96.41 3.88M95.89 1.52Q96.26 49.48 96.32 97.44M97.73 95.72Q50.26 94.55 2.8 96.04M3.71 98.18Q2.31 50.44 4.22 2.71%22 fill=%22none%22 stroke=%22%230b0c0d%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-ink-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M1.87 4.29Q49.51 3.79 97.14 4.05M96.34 2.47Q95.95 49.74 95.92 97.02M96.32 96.27Q48.76 95.12 1.21 95.64M4.28 97.57Q3.94 50.39 3.99 3.21%22 fill=%22none%22 stroke=%22%230b0c0d%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-ink-3: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.96 3.9Q50.98 4.9 98 3.96M95.66 3.4Q97.24 50.15 96.11 96.9M97.67 96.07Q50.62 94.22 3.57 96.17M4.09 98.55Q4.96 50.97 4.27 3.38%22 fill=%22none%22 stroke=%22%230b0c0d%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-teal-0: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M2.3 4.33Q49.61 4.33 96.91 4.09M95.9 2.57Q95.02 50.67 95.94 98.76M96.76 95.6Q50.2 94.59 3.63 95.96M4.24 97.86Q5.69 50.28 3.72 2.69%22 fill=%22none%22 stroke=%22%230f766e%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-teal-1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.03 3.65Q50.37 3.83 97.72 3.63M96.16 2.69Q94.3 50.02 95.69 97.35M98.19 95.6Q50.82 97.81 3.45 95.88M4.01 96.99Q3.78 49.5 3.63 2.02%22 fill=%22none%22 stroke=%22%230f766e%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-teal-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M2.92 4.29Q50.62 4.11 98.31 4.32M95.68 0.95Q95.19 49.59 95.77 98.23M100.06 96.33Q51.88 98.01 3.7 95.98M4.08 95.95Q4.73 49.22 3.84 2.49%22 fill=%22none%22 stroke=%22%230f766e%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-teal-3: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.17 3.82Q50.3 1.82 97.43 4.29M96.19 1.86Q96.7 49.56 95.87 97.26M97.33 96Q50.23 97.31 3.12 95.62M3.72 96.4Q6.19 50.05 4.14 3.69%22 fill=%22none%22 stroke=%22%230f766e%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --pen-dash-0: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.45 3.88Q50.8 4.21 98.15 3.85M95.89 1.57Q97.82 50.36 96.04 99.15M97.5 96.39Q49.1 97.8 0.71 96.07M3.69 99.36Q4.52 49.99 4.39 0.62%22 fill=%22none%22 stroke=%22%23cfd5d7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 stroke-dasharray=%224 4%22/%3E%3C/svg%3E");
  --pen-dash-1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M2.43 3.73Q49.54 2.87 96.65 4.3M96.17 3.16Q94.81 49.73 96.16 96.3M96.1 95.65Q48.4 96.74 0.71 96.08M3.67 96.34Q4.87 49.69 4.04 3.03%22 fill=%22none%22 stroke=%22%23cfd5d7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 stroke-dasharray=%224 4%22/%3E%3C/svg%3E");
  --pen-dash-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M2.77 4.1Q50.01 4.28 97.25 4.32M95.85 3.05Q95.54 49.76 96.32 96.47M100.05 96.01Q51.65 94.64 3.25 95.76M3.71 97.12Q5.71 50.11 3.61 3.1%22 fill=%22none%22 stroke=%22%23cfd5d7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 stroke-dasharray=%224 4%22/%3E%3C/svg%3E");
  --pen-dash-3: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.56 4.11Q50.27 6.03 96.98 4.19M96.31 2.22Q94 49.65 95.9 97.08M96.89 95.85Q50.23 94.56 3.57 96.07M4.02 97.37Q3.14 50.18 4.14 3%22 fill=%22none%22 stroke=%22%23cfd5d7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 stroke-dasharray=%224 4%22/%3E%3C/svg%3E");
  --pen-dash-line-0: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M4.03 4.34Q51.31 3.8 98.59 3.7M95.74 0.46Q96.84 48.75 95.7 97.03M97.55 95.62Q50.84 93.77 4.13 96.04M3.94 95.98Q2.23 48.71 3.97 1.44%22 fill=%22none%22 stroke=%22%23e3e6e7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 stroke-dasharray=%224 4%22/%3E%3C/svg%3E");
  --pen-dash-line-1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M2.89 3.93Q49.61 3.25 96.34 3.67M96.39 1.33Q98.53 49.81 96.15 98.29M95.95 95.81Q49.44 93.96 2.92 96.15M4.35 96.82Q2.98 50.13 3.96 3.44%22 fill=%22none%22 stroke=%22%23e3e6e7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 stroke-dasharray=%224 4%22/%3E%3C/svg%3E");
  --pen-dash-line-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M1.39 3.89Q49.51 5.68 97.62 4.33M96.28 2.26Q95.96 50.05 96.09 97.84M96.9 96.33Q49.7 97.68 2.51 96.23M3.91 96.61Q3.13 49.52 4.22 2.43%22 fill=%22none%22 stroke=%22%23e3e6e7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 stroke-dasharray=%224 4%22/%3E%3C/svg%3E");
  --pen-dash-line-3: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 width=%22100%22 height=%22100%22%3E%3Cpath d=%22M3.7 3.74Q50.34 3.68 96.98 4.18M95.9 0.92Q96.96 48.76 96.07 96.6M99.36 96.36Q50.8 97.6 2.24 96.09M3.77 96.27Q5.38 49.53 3.97 2.79%22 fill=%22none%22 stroke=%22%23e3e6e7%22 stroke-width=%221.1%22 stroke-linecap=%22round%22 stroke-dasharray=%224 4%22/%3E%3C/svg%3E");
}
.site-head, .hero, .strip, .gap .art, .trio, .trio div, .story, .story-art, .pillars, .pillar, .scenarios, .scenario, .scenario .tags span, .products, .product, .glimpse-tabs, .glimpse-tabs button, .glimpse, .glimpse .stage, .about .facts, .about .fact, .demo .direct, .p-arch, .features, .feature, .fit, .fit div, .other, .other a, .site-foot, .site-foot .base, .nav a { border-image: var(--pen-line-0) 8 / 8 / 4 stretch; }
.site-head:nth-child(4n+2), .hero:nth-child(4n+2), .strip:nth-child(4n+2), .gap .art:nth-child(4n+2), .trio:nth-child(4n+2), .trio div:nth-child(4n+2), .story:nth-child(4n+2), .story-art:nth-child(4n+2), .pillars:nth-child(4n+2), .pillar:nth-child(4n+2), .scenarios:nth-child(4n+2), .scenario:nth-child(4n+2), .scenario .tags span:nth-child(4n+2), .products:nth-child(4n+2), .product:nth-child(4n+2), .glimpse-tabs:nth-child(4n+2), .glimpse-tabs button:nth-child(4n+2), .glimpse:nth-child(4n+2), .glimpse .stage:nth-child(4n+2), .about .facts:nth-child(4n+2), .about .fact:nth-child(4n+2), .demo .direct:nth-child(4n+2), .p-arch:nth-child(4n+2), .features:nth-child(4n+2), .feature:nth-child(4n+2), .fit:nth-child(4n+2), .fit div:nth-child(4n+2), .other:nth-child(4n+2), .other a:nth-child(4n+2), .site-foot:nth-child(4n+2), .site-foot .base:nth-child(4n+2), .nav a:nth-child(4n+2) { border-image-source: var(--pen-line-1); }
.site-head:nth-child(4n+3), .hero:nth-child(4n+3), .strip:nth-child(4n+3), .gap .art:nth-child(4n+3), .trio:nth-child(4n+3), .trio div:nth-child(4n+3), .story:nth-child(4n+3), .story-art:nth-child(4n+3), .pillars:nth-child(4n+3), .pillar:nth-child(4n+3), .scenarios:nth-child(4n+3), .scenario:nth-child(4n+3), .scenario .tags span:nth-child(4n+3), .products:nth-child(4n+3), .product:nth-child(4n+3), .glimpse-tabs:nth-child(4n+3), .glimpse-tabs button:nth-child(4n+3), .glimpse:nth-child(4n+3), .glimpse .stage:nth-child(4n+3), .about .facts:nth-child(4n+3), .about .fact:nth-child(4n+3), .demo .direct:nth-child(4n+3), .p-arch:nth-child(4n+3), .features:nth-child(4n+3), .feature:nth-child(4n+3), .fit:nth-child(4n+3), .fit div:nth-child(4n+3), .other:nth-child(4n+3), .other a:nth-child(4n+3), .site-foot:nth-child(4n+3), .site-foot .base:nth-child(4n+3), .nav a:nth-child(4n+3) { border-image-source: var(--pen-line-2); }
.site-head:nth-child(4n+4), .hero:nth-child(4n+4), .strip:nth-child(4n+4), .gap .art:nth-child(4n+4), .trio:nth-child(4n+4), .trio div:nth-child(4n+4), .story:nth-child(4n+4), .story-art:nth-child(4n+4), .pillars:nth-child(4n+4), .pillar:nth-child(4n+4), .scenarios:nth-child(4n+4), .scenario:nth-child(4n+4), .scenario .tags span:nth-child(4n+4), .products:nth-child(4n+4), .product:nth-child(4n+4), .glimpse-tabs:nth-child(4n+4), .glimpse-tabs button:nth-child(4n+4), .glimpse:nth-child(4n+4), .glimpse .stage:nth-child(4n+4), .about .facts:nth-child(4n+4), .about .fact:nth-child(4n+4), .demo .direct:nth-child(4n+4), .p-arch:nth-child(4n+4), .features:nth-child(4n+4), .feature:nth-child(4n+4), .fit:nth-child(4n+4), .fit div:nth-child(4n+4), .other:nth-child(4n+4), .other a:nth-child(4n+4), .site-foot:nth-child(4n+4), .site-foot .base:nth-child(4n+4), .nav a:nth-child(4n+4) { border-image-source: var(--pen-line-3); }
.audiences, .audience, .audience .arrow, .signoff, .principles, .principle, .steps, .step, .see, .see li, .demo-cta, .faq-list, .faq-list details { border-image: var(--pen-dark-0) 8 / 8 / 4 stretch; }
.audiences:nth-child(4n+2), .audience:nth-child(4n+2), .audience .arrow:nth-child(4n+2), .signoff:nth-child(4n+2), .principles:nth-child(4n+2), .principle:nth-child(4n+2), .steps:nth-child(4n+2), .step:nth-child(4n+2), .see:nth-child(4n+2), .see li:nth-child(4n+2), .demo-cta:nth-child(4n+2), .faq-list:nth-child(4n+2), .faq-list details:nth-child(4n+2) { border-image-source: var(--pen-dark-1); }
.audiences:nth-child(4n+3), .audience:nth-child(4n+3), .audience .arrow:nth-child(4n+3), .signoff:nth-child(4n+3), .principles:nth-child(4n+3), .principle:nth-child(4n+3), .steps:nth-child(4n+3), .step:nth-child(4n+3), .see:nth-child(4n+3), .see li:nth-child(4n+3), .demo-cta:nth-child(4n+3), .faq-list:nth-child(4n+3), .faq-list details:nth-child(4n+3) { border-image-source: var(--pen-dark-2); }
.audiences:nth-child(4n+4), .audience:nth-child(4n+4), .audience .arrow:nth-child(4n+4), .signoff:nth-child(4n+4), .principles:nth-child(4n+4), .principle:nth-child(4n+4), .steps:nth-child(4n+4), .step:nth-child(4n+4), .see:nth-child(4n+4), .see li:nth-child(4n+4), .demo-cta:nth-child(4n+4), .faq-list:nth-child(4n+4), .faq-list details:nth-child(4n+4) { border-image-source: var(--pen-dark-3); }
.chip span, .field input, .field textarea, .field select, .nav-toggle { border-image: var(--pen-mid-0) 8 / 8 / 4 stretch; }
.chip span:nth-child(4n+2), .field input:nth-child(4n+2), .field textarea:nth-child(4n+2), .field select:nth-child(4n+2), .nav-toggle:nth-child(4n+2) { border-image-source: var(--pen-mid-1); }
.chip span:nth-child(4n+3), .field input:nth-child(4n+3), .field textarea:nth-child(4n+3), .field select:nth-child(4n+3), .nav-toggle:nth-child(4n+3) { border-image-source: var(--pen-mid-2); }
.chip span:nth-child(4n+4), .field input:nth-child(4n+4), .field textarea:nth-child(4n+4), .field select:nth-child(4n+4), .nav-toggle:nth-child(4n+4) { border-image-source: var(--pen-mid-3); }
.btn, .story .go, .group-head, .audience:hover .arrow { border-image: var(--pen-ink-0) 8 / 8 / 4 stretch; }
.btn:nth-child(4n+2), .story .go:nth-child(4n+2), .group-head:nth-child(4n+2), .audience:hover .arrow:nth-child(4n+2) { border-image-source: var(--pen-ink-1); }
.btn:nth-child(4n+3), .story .go:nth-child(4n+3), .group-head:nth-child(4n+3), .audience:hover .arrow:nth-child(4n+3) { border-image-source: var(--pen-ink-2); }
.btn:nth-child(4n+4), .story .go:nth-child(4n+4), .group-head:nth-child(4n+4), .audience:hover .arrow:nth-child(4n+4) { border-image-source: var(--pen-ink-3); }
.outcome, .chip input:checked + span, .field input:focus, .field textarea:focus, .scenario .tags span.p { border-image: var(--pen-teal-0) 8 / 8 / 4 stretch; }
.outcome:nth-child(4n+2), .chip input:checked + span:nth-child(4n+2), .field input:focus:nth-child(4n+2), .field textarea:focus:nth-child(4n+2), .scenario .tags span.p:nth-child(4n+2) { border-image-source: var(--pen-teal-1); }
.outcome:nth-child(4n+3), .chip input:checked + span:nth-child(4n+3), .field input:focus:nth-child(4n+3), .field textarea:focus:nth-child(4n+3), .scenario .tags span.p:nth-child(4n+3) { border-image-source: var(--pen-teal-2); }
.outcome:nth-child(4n+4), .chip input:checked + span:nth-child(4n+4), .field input:focus:nth-child(4n+4), .field textarea:focus:nth-child(4n+4), .scenario .tags span.p:nth-child(4n+4) { border-image-source: var(--pen-teal-3); }
.next, .other a.soon { border-image: var(--pen-dash-0) 8 / 8 / 4 stretch; }
.next:nth-child(4n+2), .other a.soon:nth-child(4n+2) { border-image-source: var(--pen-dash-1); }
.next:nth-child(4n+3), .other a.soon:nth-child(4n+3) { border-image-source: var(--pen-dash-2); }
.next:nth-child(4n+4), .other a.soon:nth-child(4n+4) { border-image-source: var(--pen-dash-3); }
.scenario .out { border-image: var(--pen-dash-line-0) 8 / 8 / 4 stretch; }
.scenario .out:nth-child(4n+2) { border-image-source: var(--pen-dash-line-1); }
.scenario .out:nth-child(4n+3) { border-image-source: var(--pen-dash-line-2); }
.scenario .out:nth-child(4n+4) { border-image-source: var(--pen-dash-line-3); }
.audience:hover .arrow { border-color: var(--black); }
.product li::before, .see li::before { width: 14px; height: 14px; border: 0; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 width=%2216%22 height=%2216%22%3E%3Cpath fill=%22none%22 stroke=%22%230f766e%22 stroke-width=%222.1%22 stroke-linecap=%22round%22 d=%22M2.05 8.23Q4.11 10.27 6.35 12.11M5.35 12.69Q9.67 8.09 14.02 3.53%22 /%3E%3C/svg%3E") center / contain no-repeat; }
.product li::before { align-self: start; margin-top: 2px; }
.see li::before { margin-top: 4px; }
.chip span::before { border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 width=%2216%22 height=%2216%22%3E%3Cpath fill=%22%23ffffff%22 stroke=%22none%22 d=%22M1.33 1.33L14.39 1.47L14.44 14.53L1.42 14.39L1.32 1.66Z%22 transform=%22translate%280.28 0.2%29%22 /%3E%3Cpath fill=%22none%22 stroke=%22%239aa3a7%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 d=%22M0.96 1.65Q7.77 1.85 14.58 1.58M14.56 1.19Q14.78 7.95 14.55 14.7M14.97 14.51Q7.94 14.58 0.9 14.41M1.49 14.87Q1.44 7.99 1.67 1.1%22 /%3E%3C/svg%3E") center / 14px no-repeat; }
.chip input:checked + span::before { border: 0; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 width=%2216%22 height=%2216%22%3E%3Cpath fill=%22%230f766e%22 stroke=%22none%22 d=%22M1.33 1.53L14.67 1.47L14.33 14.48L1.45 14.46L1.36 1.66Z%22 transform=%22translate%280.28 0.2%29%22 /%3E%3Cpath fill=%22none%22 stroke=%22%230f766e%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 d=%22M-0.1 1.54Q7.27 1.64 14.64 1.62M14.56 1.27Q14.51 8.05 14.54 14.83M15.07 14.5Q7.82 14.59 0.58 14.32M1.6 14.79Q1.49 7.79 1.34 0.8%22 /%3E%3Cpath fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 d=%22M4.09 8.16Q5.64 9.52 7.12 10.95M6.53 11.13Q9.37 8.23 12.07 5.19%22 /%3E%3C/svg%3E") center / 14px no-repeat; }
.step .gate::before { border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 width=%2216%22 height=%2216%22%3E%3Cpath fill=%22%230f766e%22 d=%22M14.65 10.1C14.26 10.66 13.39 12.64 12.31 13.47C11.22 14.3 9.54 15 8.15 15.06C6.76 15.12 5.12 14.63 3.96 13.84C2.8 13.05 1.66 11.64 1.19 10.32C0.72 9 0.73 7.27 1.16 5.94C1.59 4.62 2.67 3.18 3.78 2.37C4.9 1.56 6.5 1.13 7.85 1.08C9.21 1.04 10.8 1.37 11.92 2.13C13.03 2.89 14.1 4.31 14.56 5.63C15.01 6.96 15.03 8.79 14.65 10.1C14.28 11.4 13.39 12.64 12.31 13.47C11.22 14.3 8.84 14.8 8.15 15.06Z%22 /%3E%3Cpath fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 d=%22M4.36 8.27Q5.75 9.68 7.21 11.02M6.04 11.57Q9.08 8.44 12.11 5.3%22 /%3E%3C/svg%3E") center / 15px no-repeat; }
/* pen:end */