/* Shared styles for the Infera pages (homepage keeps its own copy inline).
   Periodic + Anthrogen structure; the app's hand-drawn instruments carry the personality. */
:root {
  --paper: #f4f4f2;
  --ink: #1a1a2e;
  --text: #26262c;
  --muted: #66666d;
  --faint: #6c6c72; /* 4.74:1 on --paper; #76767c was 4.10:1, under AA for body text */
  --rule: #dadad6;
  --indigo: #5854D4;
  --indigo-soft: #e9e8fa;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --col: 38rem;
  --t-meta: 14px; --t-nav: 15px; --t-body: 17px; --t-intro: 20px; --t-pull: 22px; --t-h2: 26px;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* width/height attributes on an <img> only reserve its shape while it loads; CSS still sizes it (zero specificity, so any rule that sets a height wins) */
:where(img[width][height]) { height: auto; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 var(--t-body)/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
/* selection reads like a highlighter pass over a printout, not a block of brand colour */
::selection { background: #d9d7f6; color: var(--ink); }
.ending-band ::selection { background: rgba(255,255,255,.22); color: #fff; }
/* links: a thin indigo-grey rule that firms up to indigo under the pointer */
a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(88,84,212,.38); text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-skip-ink: auto; transition: text-decoration-color .15s, text-decoration-thickness .15s, color .15s; }
a:hover { text-decoration-color: var(--indigo); text-decoration-thickness: 1.5px; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 3px; }
p { margin: 0 0 14px; }
code { font: .86em var(--mono); background: #ebebe8; padding: .1em .35em; border-radius: 4px; }

.col { max-width: var(--col); margin: 0 auto; padding-block: 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wide { max-width: 52rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Backed-by-YC banner, carried over from the live site */

/* header */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 24px 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: calc(60rem + 32px); margin: 0 auto; }
.top img { height: 20px; display: block; }
.top > a:first-child { text-decoration: none; border-radius: 4px; }
.top nav { display: flex; gap: 24px; flex-wrap: wrap; justify-content: flex-end; }
.top nav a { position: relative; padding-block: 4px 7px; font: 400 var(--t-nav) var(--sans); text-decoration: none; color: var(--muted); transition: color .15s; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }
/* the page you're on gets a short pen stroke under it, the same hand as the headline swoosh */
.top nav a::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3.6 C 20 1.6, 42 4.8, 62 3 S 88 2.2, 98 3.8' stroke='%235854D4' stroke-width='1.8' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%; opacity: 0; transition: opacity .2s; }
.top nav a:hover::after { opacity: .35; }
.top nav a[aria-current="page"]::after { opacity: 1; }

/* type */
/* eyebrow: set like the label on a tube rack, mono and quiet, with a short pen tick */
.eyebrow { display: flex; align-items: center; gap: 9px; width: fit-content; font: 500 13px/1.4 var(--mono); letter-spacing: .01em; color: var(--muted); margin-bottom: 12px; }
.eyebrow::before { content: ""; flex: none; width: 16px; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M1.5 3.8 C 5 2.2, 9 4.2, 14.5 2.4' stroke='%235854D4' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
h1 { margin: 0 0 20px; font-size: clamp(34px, 4.8vw, 48px); line-height: 1.08; font-weight: 500; color: var(--ink); letter-spacing: -.02em; text-wrap: balance; }
h1 em { font-style: normal; position: relative; white-space: nowrap; }
h2 { font-size: clamp(24px, 2.4vw, 29px); line-height: 1.18; font-weight: 500; color: var(--ink); margin: 0 0 16px; letter-spacing: -.022em; text-wrap: balance; }
.swoosh { position: absolute; left: 2%; bottom: -.28em; width: 96%; height: .32em; overflow: visible; color: var(--indigo); }
.lead { font-size: clamp(19px, 1.7vw, 21px); line-height: 1.5; color: #55555d; letter-spacing: -.008em; max-width: 34rem; text-wrap: pretty; hanging-punctuation: first; }
.lead b, .lead strong { color: var(--ink); font-weight: 500; }
.actions { display: flex; gap: 12px 26px; align-items: center; flex-wrap: wrap; margin-top: 28px; font-size: var(--t-nav); }
/* the primary action: a pressed-key button, squarer than a pill, with a little weight at the bottom edge */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 19px 1px; font: 500 var(--t-nav) var(--sans); letter-spacing: -.003em; color: #fff; background: var(--ink); border-radius: 9px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); text-decoration: none; transition: background .15s, transform .1s, box-shadow .1s; }
.pill:hover { background: var(--indigo); text-decoration: none; }
.pill:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.28); }
.pill:focus-visible { outline-offset: 3px; border-radius: 9px; }
/* the second action is a plain link with a hand-drawn arrow, so the two never compete */
.actions > a:not(.pill) { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 500; text-decoration-color: rgba(88,84,212,.38); }
.actions > a:not(.pill)::after { content: ""; flex: none; width: 19px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'%3E%3Cpath d='M1.5 5.4 C 6 4.4, 11 5.6, 16.6 4.8 M12.6 1.6 C 14.4 2.9, 15.8 4, 17.2 4.9 C 15.6 6, 14.2 7.1, 12.9 8.5' stroke='black' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'%3E%3Cpath d='M1.5 5.4 C 6 4.4, 11 5.6, 16.6 4.8 M12.6 1.6 C 14.4 2.9, 15.8 4, 17.2 4.9 C 15.6 6, 14.2 7.1, 12.9 8.5' stroke='black' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; color: var(--indigo); transition: transform .2s ease; }
.actions > a:not(.pill):hover::after { transform: translateX(3px); }
.ending-band .actions > a:not(.pill)::after { color: #b9b7f3; }

.page-hero { padding: 48px 0 8px; }
section { margin-top: 96px; }

/* numbered steps (a real sequence) */
ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--ink); }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
/* each step number sits in a pen loop, the way you'd circle a step on a printed protocol */
ol.steps li::before { content: counter(s); display: grid; place-items: center; width: 27px; height: 27px; margin-top: 1px; padding-left: 1px; font: 500 13px/1 var(--mono); color: var(--indigo); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M15.2 3 C 21.6 3.4, 25.4 8.2, 24.9 14.4 C 24.4 20.8, 19.6 25, 13.4 24.6 C 7.2 24.2, 3 19.6, 3.3 13.4 C 3.6 7.6, 7.6 3.4, 13.2 3.1 C 14.6 3, 16.4 3.3, 17.6 3.9' stroke='%235854D4' stroke-width='1.5' fill='none' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") no-repeat center / contain; }
ol.steps b { color: var(--ink); font-weight: 600; }

ul.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
ul.list li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
/* a short pen dash for a marker, drawn at a slight angle like a margin tick */
ul.list li::before { content: ""; width: 14px; height: 8px; margin-top: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1.6 5.2 C 4.4 3.9, 8 4.6, 12.4 2.8' stroke='%235854D4' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
ul.list b { color: var(--ink); font-weight: 600; }

/* an aside in the margin of the text: a touch smaller, set off by a short indigo bracket */
.note { position: relative; color: var(--muted); font-size: 15.5px; line-height: 1.55; padding-left: 14px; max-width: 34rem; text-wrap: pretty; }
.note::before { content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 2px; border-radius: 1px; background: rgba(88,84,212,.45); }
.note a { color: var(--text); }
.pull { font-size: var(--t-pull); line-height: 1.4; font-weight: 500; color: var(--ink); margin: 28px 0 0; letter-spacing: -.01em; }

/* questions: one line each until opened */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 14px 0; min-height: 44px; font-weight: 500; color: var(--ink); transition: color .15s; }
.faq summary:hover { color: var(--indigo); }
.faq summary::-webkit-details-marker { display: none; }
/* a hand-drawn plus that turns to a cross when the answer is open */
.faq summary::after { content: ""; flex: none; align-self: center; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7.2 1.8 C 6.9 5.2, 7.1 8.8, 6.8 12.2 M1.8 6.9 C 5.2 7.2, 8.8 6.8, 12.2 7.1' stroke='%235854D4' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.faq details p { margin: -4px 0 18px; max-width: 36rem; color: var(--text); text-wrap: pretty; }

/* a section waiting on sign-off */
.draft { position: relative; outline: 1.5px dashed var(--indigo); outline-offset: 18px; border-radius: 2px; }
.draft-tag { display: inline-block; margin-bottom: 10px; font: 500 13px var(--sans); color: var(--indigo); background: var(--indigo-soft); border-radius: 999px; padding: 3px 10px; }

/* a drawing beside its section on wide screens, above it on narrow ones */
.artfig { margin: 0; }
.with-art .artfig { width: 210px; margin: 0 0 20px; }
@media (min-width: 1000px) {
  .with-art { position: relative; }
  .with-art .artfig { position: absolute; top: 0; margin: 0; }
  .with-art.l .artfig { right: calc(100% + 40px); }
  .with-art.r .artfig { left: calc(100% + 40px); }
}
.hero-art { width: 280px; margin: 0 auto 28px; }
.art { position: relative; display: block; width: 100%; cursor: pointer; border-radius: 6px; outline-offset: 6px; -webkit-tap-highlight-color: transparent; }
.art:focus-visible { outline: 2px solid var(--indigo); }
.art img, .art canvas { display: block; width: 100%; height: auto; }
.art .agent { position: absolute; transform-origin: 50% 100%; }
.art > canvas:not(.agent) { transition: opacity .5s ease; }
.art .agent { transition: filter .5s ease; }
.art.go > canvas:not(.agent) { opacity: .22; }
.art.go .agent { filter: drop-shadow(0 0 5px rgba(88,84,212,.55)); }
@keyframes hop  { from { transform: translateY(0); } to { transform: translateY(-22%); } }
@keyframes sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes swim { from { transform: translate(-14%, 4%) rotate(-7deg); } to { transform: translate(14%, -4%) rotate(7deg); } }
.cap { margin: 12px 0 0; font-size: var(--t-meta); line-height: 1.5; color: var(--text); border-left: 2px solid var(--indigo); padding: 2px 0 2px 10px; text-wrap: pretty; }
/* under a drawing the caption is a note pencilled in the margin: upright, indigo, with a little arrow up to the drawing */
.artfig .cap { position: relative; border-left: 0; padding: 4px 0 0 28px; color: var(--indigo); font-weight: 500; max-width: 17rem; }
.artfig .cap::before { content: ""; position: absolute; left: 2px; top: -6px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M17.5 16.5 C 12 16.4, 6.6 12.6, 5 3.6 M2.2 7.4 C 3.2 6, 4.2 4.6, 5 3.4 C 6.2 4.6, 7.4 5.6, 8.8 6.6' stroke='%235854D4' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
/* captions read like a paper's: a bold lead-in (Fig. 2, a file name), then the plain description */
.cap b:first-child, figure.shot figcaption b:first-child { color: var(--ink); font-weight: 600; margin-right: .3em; }
.cap code, figure.shot figcaption code { font-size: .92em; background: none; padding: 0; color: var(--ink); }

.rise { animation: rise .9s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* figures (screenshots, post images) */
figure.shot { margin: 28px 0; }
figure.shot img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--rule); background: #fff; }
figure.shot figcaption { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); max-width: 40rem; font-size: var(--t-meta); line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* footer */
footer { margin-top: 100px; border-top: 1px solid var(--rule); padding-block: 32px 48px; }
footer .col { position: relative; display: flex; justify-content: space-between; gap: 24px; }
/* links in two short columns (the products, then the company) instead of one long stack */
footer nav { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: max-content; gap: 8px 40px; font: 14px var(--sans); }
footer nav a { color: var(--muted); width: fit-content; text-decoration-color: transparent; }
footer nav a:hover { color: var(--ink); text-decoration-color: var(--indigo); }
footer .team { margin: 0; font-size: 14px; color: var(--muted); }
footer .team a { color: var(--ink); }
footer .meta { text-align: right; font: 14px var(--sans); color: var(--muted); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 16px; }
footer .meta a { color: var(--muted); text-decoration-color: transparent; }
footer .meta a:hover { color: var(--ink); text-decoration-color: var(--indigo); }
footer .meta > span:last-child { font: 13px var(--sans); color: var(--muted); }

/* section transitions: a deeper paper band a drawing can bridge, and an ink ending */
body { overflow-x: clip; }
.tint { position: relative; padding-bottom: 88px; }
.tint.with-art { --edge: 0px; padding-top: 72px; }
.tint::before { content: ""; position: absolute; z-index: -2; top: var(--edge, 64px); bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: #e9e9e6; }

.tint.up { --edge: -220px; }
@media (max-width: 760px) { .tint.up { --edge: -96px; } .tint { padding-bottom: 64px; } }
.ending-band { position: relative; margin-top: 120px; background: var(--ink); color: #d9d9e3; overflow: hidden; }
.ending-band .glyph-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.ending-band .col { position: relative; padding-top: 96px; padding-bottom: 104px; }
.ending-band section { margin-top: 0; }
.ending-band h2, .ending-band .pull { color: #fff; }
.ending-band p { color: #c8c8d4; }
.ending-band a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.ending-band a:hover { text-decoration-color: #fff; }
.ending-band .pill { background: #fff; color: var(--ink); text-decoration: none; }
.ending-band .pill:hover { background: var(--indigo); color: #fff; }
.ending-band .pill.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.ending-band .pill.ghost:hover { background: #fff; color: var(--ink); }
.ending-band ul.dl { border-top-color: rgba(255,255,255,.6); }
.ending-band ul.dl li { border-bottom-color: rgba(255,255,255,.14); }
.ending-band ul.dl b { color: #fff; }
.ending-band ul.dl span { color: #b4b4c4; }
.ending-band + footer { margin-top: 0; }
@media (max-width: 760px) { .ending-band { margin-top: 88px; } .ending-band .col { padding-top: 72px; padding-bottom: 80px; } }

/* product pages: a wider page, headings in a left column beside the text, drawings beside their section */
@media (min-width: 900px) {
  .page main.col, .page main > .col, .page .wide, .page .ending-band .col, .page footer .col { max-width: calc(60rem + 32px); }
  .page .page-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 64px; align-items: center; padding-top: 64px; }
  .page .page-hero > * { grid-column: 1; }
  .page .page-hero .hero-art { grid-column: 2; grid-row: 1 / span 4; width: 100%; max-width: 340px; justify-self: end; margin: 0; }
  .page section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 64px; }
  .page section > * { grid-column: 2; }
  .page section:not(:has(> h2)) > * { grid-column: 1 / -1; }
  .page section > h2 { grid-column: 1; grid-row: 1 / span 30; align-self: start; position: sticky; top: 32px; margin: 0; }
  .page section.with-art > .artfig { grid-column: 1; grid-row: 1; position: static; width: 100%; max-width: 260px; margin: 0; }
  .page section.with-art > div { grid-column: 2; grid-row: 1; }
  .page section.with-art.r { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .page section.with-art.r > div { grid-column: 1; }
  .page section.with-art.r > .artfig { grid-column: 2; justify-self: end; }
}

/* section definition: a hairline that draws in across the page above each section */
.page main { counter-reset: sec; }
.page main section:has(h2):not(.tint) { position: relative; padding-top: 36px; }
.page main section:has(h2):not(.tint)::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; }
.js .page main section.reveal:has(h2):not(.tint)::after { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.65,0,.2,1); }
.js .page main section.reveal.in:has(h2):not(.tint)::after { transform: none; }
.page main section:has(h2) { counter-increment: sec; }
.page .tint:not(.with-art) { padding-top: 0; }
.col.page-hero { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (prefers-reduced-motion: reduce) { .js .page main section.reveal:has(h2):not(.tint)::after { transform: none; transition: none; } }
@media (min-width: 900px) {
  .page main section:has(h2):not(.tint) { padding-top: 40px; }
  .page .feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 48px; align-items: end; }
  .page .feature .body { margin-top: 0; }
  .page .later { max-width: calc(60rem + 32px); }
}

a:focus-visible, button:focus-visible, summary:focus-visible, .art:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; }
.artfig > img { display: block; width: 100%; height: auto; }
/* the download rows read as one list, not squeezed into the section grid */
.page section#download { display: block; margin-top: 0; scroll-margin-top: 24px; }
.page section#download > h2 { position: static; margin-bottom: 16px; }
@media (max-width: 899px) { ul.dl li { grid-template-columns: 1fr; } }

/* type: Inter (with optical sizes) for reading and small text, Inter Tight only for display headings,
   Geist Mono for labels and data. Inter Tight is a display cut and gets cramped below ~20px. */
h1, h2, h3, .pull, .solo .line, .posts .t, .feature .t { font-family: var(--display); }
code, kbd, samp, pre { font-family: var(--mono); }
body { font-feature-settings: "cv11", "ss01"; }

/* fixes */
.page .handoff { display: none; }
body:not(.page) .top { max-width: var(--col); }
@media (min-width: 641px) { body:not(.page) .top nav { gap: 16px; } }  /* narrow pages: header on the same column as the text */                       /* the pen arrow pointed into an empty margin on product pages */
table.plans td[colspan] { text-align: right; }
@media (max-width: 640px) {
  .top { flex-wrap: wrap; row-gap: 10px; }
  .top nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none; justify-content: flex-start; }
  .top nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 640px) {
  .top { padding-block: 18px 0; }
  .top nav { gap: 14px; }
  .top nav a { font-size: 14px; }
  .hero-art { width: 230px; }
  footer .col { flex-direction: column; }
  footer .meta { align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } .art > canvas, .art .agent { transition: none; } }

/* ---- system rules (cohesion pass) ----
   One frame, one rule between sections, the pen only in the drawings, the nav stroke and the homepage h1. */
.eyebrow::before, .actions > a:not(.pill)::after, .artfig .cap::before, .note::before { display: none; }
.note { padding-left: 0; }
ol.steps li::before { content: counter(s) "."; display: block; width: auto; height: auto; margin: 0; padding: 0; background: none; border: 0; font: 600 var(--t-body)/1.65 var(--sans); color: var(--indigo); }
ul.list li::before { content: ""; width: 5px; height: 5px; margin-top: 11px; background: var(--indigo); border-radius: 0; -webkit-mask: none; mask: none; }
.faq summary::after { content: "+"; width: auto; height: auto; background: none; font: 400 20px/1 var(--sans); color: var(--indigo); transition: transform .2s; }
.page ol.steps, .page ul.list, .page .faq { border-top: 0; }
.tint::before { display: none; }
.ending-band .glyph-bg { display: none; }

/* ================= HOMEPAGE SYSTEM ON THE PRODUCT PAGES =================
   Same frame, type, rhythm and edges as the homepage: one 60rem frame, text in a 36rem column on the
   left edge, drawings against the right edge, headings above their text, space (not rules) between
   sections, the app's navy for the ending, one easing for motion. */
.page { --frame: 60rem; --text: 36rem; --art: 300px; --sec: 80px; --navy: #13131f; --hair: 1px solid var(--rule); }
@media (max-width: 1100px) { .page { --sec: 64px; } }
@media (max-width: 600px) { .page { --sec: 56px; } }
html { overflow-x: clip; }

/* header: same frame, hairline across, like the homepage */
.page .top { box-sizing: border-box; max-width: 60rem !important; margin: 0 auto; padding: 21px 16px !important; position: relative; }
.page .top::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; transform: translateX(-50%); border-bottom: 1px solid var(--rule); }
.page main.col, .page .ending-band .col, .page footer .col { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 60rem !important; padding-left: 16px !important; padding-right: 16px !important; }

/* type: Inter Tight 500, same sizes and tracking as the homepage */
.page h1 { font: 500 clamp(36px, 3vw, 42px)/1.08 var(--display) !important; letter-spacing: -.018em !important; margin: 0 0 28px !important; }
.page h2 { font: 500 clamp(24px, 2.4vw, 30px)/1.2 var(--display) !important; letter-spacing: -.01em !important; margin: 0 0 16px !important; }
.page .lead { font-size: 18px !important; color: var(--text) !important; max-width: var(--text); }
.page main p { line-height: 1.6; text-wrap: pretty; }
.page .ending-band .pull { font: 500 22px/1.4 var(--display) !important; letter-spacing: -.005em !important; }
.page .pill { border-radius: 8px !important; font-size: 15px !important; box-shadow: none !important; }

/* hero: text left, drawing against the right edge */
.page .page-hero { padding: 72px 0 var(--sec) !important; }
.page .page-hero .actions { margin-top: 36px; }
@media (min-width: 900px) {
  .page .page-hero { display: grid !important; grid-template-columns: minmax(0, var(--text)) var(--art) !important; justify-content: space-between; column-gap: 48px !important; align-items: center !important; }
  .page .page-hero > * { grid-column: 1 !important; }
  .page .page-hero .hero-art { grid-column: 2 !important; grid-row: 1 / span 4 !important; width: auto !important; max-width: var(--art) !important; max-height: 280px; justify-self: end !important; margin: 0 !important; }
  .page .page-hero .hero-art img, .page .page-hero .hero-art .art canvas { max-height: 280px; width: auto; max-width: 100%; }
}

/* sections: heading above its text in the 36rem column; drawings to the right; no rules between */
.page main section { margin: 0 !important; padding: 0 0 var(--sec) !important; }
.page main section::after { display: none !important; }
.page main section:has(h2):not(.tint) { padding-top: 0 !important; }
@media (min-width: 900px) {
  .page main section { display: grid !important; grid-template-columns: minmax(0, var(--text)) var(--art) !important; justify-content: space-between; column-gap: 48px !important; grid-template-rows: none !important; align-items: start; }
  .page main section > * { grid-column: 1 !important; }
  .page main section > h2 { grid-column: 1 !important; grid-row: auto !important; position: static !important; }
  .page main section > .artfig, .page main section.pio-has-art > .pio-art, .page main section.with-art > .artfig { grid-column: 2 !important; grid-row: 1 / span 30 !important; align-self: center !important; justify-self: end !important; width: auto !important; max-width: var(--art) !important; margin: 0 !important; }
  .page main section > .artfig img, .page main section > .artfig .art canvas:not(.agent) { max-height: 240px; width: auto; max-width: 100%; }
  .page main section.pio-has-art > .pio-body { grid-column: 1 !important; grid-row: auto !important; }
  /* screenshots and wide tables run the full frame under the text */
  .page main section > figure.shot, .page main section > table.plans { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
@media (max-width: 899px) {
  .page main section > .artfig, .page main section > .pio-art { width: min(100%, 220px) !important; margin: 0 0 24px !important; }
}

/* lists inside sections: hairlines only between items, not heavy ink rules */
.page ol.steps, .page ul.list, .page .faq, .page .pio-spec, .page ul.dl { border-top: 0 !important; }
.page .faq details, .page ol.steps li, .page ul.dl li { border-bottom: var(--hair) !important; }

/* ending band and footer: the homepage's navy and quiet footer */
.page .ending-band { background: var(--navy) !important; margin-top: 0 !important; clip-path: none !important; }
.page .ending-band .col { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
.page .ending-band .actions { margin-top: 24px; }
.page footer { border-top: 0 !important; padding: 64px 0 56px !important; margin-top: 0 !important; }
.page footer nav a, .page footer .meta a, .page footer .team a { color: var(--muted); text-decoration-color: transparent; }
.page footer nav a:hover, .page footer .meta a:hover, .page footer .team a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* phone header: one line that scrolls */
@media (max-width: 600px) {
  .page .top { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 14px !important; }
  .page .top nav { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; width: 100%; gap: 18px !important; justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .page .top nav::-webkit-scrollbar { display: none; }
  .page .top nav a { flex: none; white-space: nowrap; }
  .page .page-hero { padding-top: 32px !important; }
}

/* motion: one easing, one 12px rise, no blur, masks or clip reveals */
.page { --ease: cubic-bezier(.22,1,.36,1); }
.js .page .reveal, .page.js .reveal, .js .reveal { filter: none !important; transition: opacity .7s var(--ease, cubic-bezier(.22,1,.36,1)), transform .7s var(--ease, cubic-bezier(.22,1,.36,1)) !important; transition-delay: var(--rd, 0s); }
.js .reveal:not(.in) { transform: translateY(12px) !important; }
.js .reveal > h2, .js .reveal > div > h2, .js .reveal > .ending > h2 { clip-path: none !important; transform: none !important; transition: none !important; }
.js .reveal .artfig { transform: none !important; transition: opacity .7s cubic-bezier(.22,1,.36,1) !important; }
.js .reveal figure.shot img, .js .reveal .cover img, .js .reveal .cover video { clip-path: none !important; transform: none !important; }

/* ===== NAV: DRAWN CARD ===== */
/* ===== NAV TRIAL (shared) ===== */
.nv { position: relative; z-index: 50; font: 400 15px/1 var(--sans); }
.nv-in { max-width: var(--frame, 60rem); margin: 0 auto; padding: 0 16px; height: 64px; display: flex; align-items: center; gap: 18px; }
.nv-logo img { height: 20px; width: auto; display: block; }
.nv-links { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nv-links a, .nv-trig { color: var(--muted); text-decoration: none; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; transition: color .2s; }
.nv-links a:hover, .nv-trig:hover, .nv-trig[aria-expanded="true"] { color: var(--ink); }
.nv-trig { display: inline-flex; align-items: center; gap: 6px; }
.nv-chev { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .35s var(--ease); }
.nv-trig[aria-expanded="true"] .nv-chev { transform: rotate(180deg); }
.nv-a { position: relative; }
.nv-sw { position: absolute; left: 0; right: 0; bottom: -7px; width: 100%; height: 6px; fill: none; stroke: #5854D4; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset .5s var(--ease); }
.nv-a:hover .nv-sw { stroke-dashoffset: 0; }
.nv-links .nv-cta { color: #fff !important; background: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 500 !important; transition: transform .25s var(--ease), background .2s !important; }
.nv-links .nv-cta:hover { background: #5854D4; }
.nv-prod { position: relative; }
.nv-panel { position: absolute; top: calc(100% + 14px); left: 50%; width: 400px; padding: 8px; background: var(--paper, #f4f4f2); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 24px 48px -24px rgba(26,26,46,.28), 0 8px 16px -12px rgba(26,26,46,.12);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px) scale(.98); transform-origin: 50% 0; transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.nv-prod.open .nv-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.nv-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nv-panel a { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 9px; color: var(--ink) !important; transition: background .2s; }
.nv-panel a:hover { background: rgba(88,84,212,.07); }
.nv-panel img { width: 64px; height: 48px; object-fit: contain; flex: none; transition: transform .4s var(--ease); }
.nv-panel a:hover img { transform: translateY(-2px) rotate(-2deg); }
.nv-panel b { display: block; font: 500 15px/1.3 var(--display); margin-bottom: 3px; }
.nv-panel i { display: block; font: 400 13.5px/1.4 var(--sans); color: var(--muted); font-style: normal; }
.nv-panel a > span { opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.nv-prod.open .nv-panel a > span { opacity: 1; transform: none; }
.nv-prod.open .nv-panel a:nth-child(2) > span { transition-delay: .04s; } .nv-prod.open .nv-panel a:nth-child(3) > span { transition-delay: .08s; }
.nv-yc { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-size: 13px; }
.nv-y { width: 18px; height: 18px; border-radius: 3px; background: #FB651E; color: #fff; font: 600 12px/18px var(--sans); text-align: center; }
.nv-yc:hover { color: var(--ink); }
@media (max-width: 640px) {
  .nv-in { gap: 12px; height: 58px; }
  .nv-links { gap: 16px; }
  .nv-yct { display: none; }
  .nv-cta { padding: 8px 12px; }
  .nv-panel { position: fixed; left: 12px; right: 12px; width: auto; top: 64px; transform: translate(0, 6px) scale(.98); }
  .nv-prod.open .nv-panel { transform: none; }
}

.nv.card { padding-top: 14px; }
.nv.card .nv-in { height: 58px; border: 1.5px solid var(--ink); border-radius: 12px; padding: 0 8px 0 18px; background: #fbfbf9; box-shadow: 3px 3px 0 var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.nv.card .nv-yc { font-size: 12.5px; }
.nv.card .nv-links { gap: 6px; }
.nv.card .nv-links > a, .nv.card .nv-trig { padding: 9px 12px; border-radius: 8px; }
.nv.card .nv-links > a:hover, .nv.card .nv-trig:hover, .nv.card .nv-trig[aria-expanded="true"] { background: rgba(88,84,212,.08); color: var(--ink); }
.nv.card .nv-a .nv-sw { display: none; }
.nv.card .nv-links .nv-cta { border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); background: #5854D4; transition: transform .15s, box-shadow .15s, background .2s !important; }
.nv.card .nv-links .nv-cta:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); background: #4b47c4; }
.nv.card .nv-cta:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.nv.card .nv-in { position: relative; } .nv.card .nv-prod { position: static; }
.nv.card .nv-panel { left: auto; right: 0; top: calc(100% + 10px); transform: translateY(6px) scale(.98); transform-origin: 85% 0; }
.nv.card .nv-prod.open .nv-panel { transform: none; }
.nv.card .nv-panel { border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #fbfbf9; width: 600px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.nv.card .nv-panel a { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
.nv.card .nv-panel img { width: 100%; height: 84px; }
@media (max-width: 640px) { .nv.card .nv-panel { width: auto; grid-template-columns: 1fr; } .nv.card .nv-panel a { flex-direction: row; } .nv.card .nv-panel img { width: 64px; height: 48px; } .nv.card .nv-in { margin: 0 10px; } }

@media (max-width: 520px) {
  .nv.card .nv-in { padding: 0 6px 0 14px; gap: 8px; }
  .nv.card .nv-logo img { height: 17px; }
  .nv.card .nv-yc, .nv.card .nv-a { display: none; }
  .nv.card .nv-links { gap: 2px; }
  .nv.card .nv-links > a, .nv.card .nv-trig { padding: 8px 9px; font-size: 14.5px; }
  .nv.card .nv-panel { position: fixed; left: 10px; right: 10px; top: 76px; }
}
.nv-panel a[aria-current] { background: rgba(88,84,212,.08); }
.nv-a[aria-current] { color: var(--ink) !important; }

/* ===== BUTTONS: the same drawn card as the nav. Outline + hard ink shadow = "you can click this" ===== */
.btn, .page .pill { background: #5854D4 !important; color: #fff !important; border: 1.5px solid #1a1a2e !important; border-radius: 8px !important;
  box-shadow: 2px 2px 0 #1a1a2e !important; transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .2s !important; }
.btn:hover, .page .pill:hover { background: #4b47c4 !important; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1a1a2e !important; }
.btn:active, .page .pill:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #1a1a2e !important; }
.ending-band .btn-light, .page .ending-band .pill { background: #fff !important; color: #1a1a2e !important; border-color: #fff !important; box-shadow: 3px 3px 0 #5854D4 !important; }
.ending-band .btn-light:hover, .page .ending-band .pill:hover { background: #fff !important; box-shadow: 4px 4px 0 #5854D4 !important; }
.ending-band .btn-light:active, .page .ending-band .pill:active { box-shadow: 0 0 0 #5854D4 !important; }

/* card nav, tidied: even breathing room around the button, a lighter shadow, a bit more space under the card */
.nv.card .nv-in { height: 60px !important; padding: 0 11px 0 20px !important; box-shadow: 2.5px 2.5px 0 var(--ink) !important; }
.nv.card .nv-links .nv-cta { padding: 9px 15px !important; line-height: 1 !important; box-shadow: 1.5px 1.5px 0 #1a1a2e !important; }
.nv.card .nv-links .nv-cta:hover { box-shadow: 2.5px 2.5px 0 #1a1a2e !important; }
@media (max-width: 520px) {
  .nv.card { padding: 12px 0 0; }
  .nv.card .nv-in { height: 54px !important; margin: 0 12px !important; padding: 0 9px 0 15px !important; border-radius: 11px !important; box-shadow: 2px 2px 0 var(--ink) !important; }
  .nv.card .nv-links .nv-cta { padding: 8px 12px !important; font-size: 14.5px !important; }
  .nv.card + main .hero-grid, .nv.card ~ main .page-hero { padding-top: 36px !important; }
}

/* rounder cards */
.nv.card .nv-in { border-radius: 18px !important; }
.nv.card .nv-panel { border-radius: 18px !important; }
.nv.card .nv-panel a { border-radius: 12px !important; }
.nv.card .nv-links > a, .nv.card .nv-trig { border-radius: 10px !important; }
.nv.card .nv-links .nv-cta, .btn, .page .pill { border-radius: 11px !important; }
@media (max-width: 520px) { .nv.card .nv-in { border-radius: 16px !important; } }

/* Phones: Research and Careers do not fit in the bar, so the trigger reads "Menu" and its panel carries them under the products. */
.nv-lbl-m, .nv-panel .nv-more { display: none; }
@media (max-width: 640px) {
  .nv.card .nv-links > .nv-a { display: none; }
  .nv-lbl-d { display: none; }
  .nv-lbl-m { display: inline; }
  .nv.card .nv-panel .nv-more { display: flex; padding: 13px 14px; }
  .nv.card .nv-panel .nv-more b { margin: 0; }
  .nv.card .nv-panel a + .nv-more { position: relative; margin-top: 9px; }
  .nv.card .nv-panel a + .nv-more::before { content: ""; position: absolute; left: 10px; right: 10px; top: -5px; border-top: 1px solid var(--rule, rgba(26,26,46,.14)); }
  .nv.card .nv-panel .nv-more + .nv-more { margin-top: 0; }
  .nv.card .nv-panel .nv-more + .nv-more::before { content: none; }
}
/* the panel hangs off the card at every width; pinned to the viewport it sat over the bar wherever the strip above the card was taller */
@media (max-width: 520px) { .nv.card .nv-panel { position: absolute; left: 0; right: 0; top: calc(100% + 10px); } }

/* ================= PRODUCT PAGES =================
   Same as the homepage: heading above its words in one left column, a drawing in the right column. */
@media (min-width: 1000px) {
  /* the hero: text and drawing balanced across the frame */
  .page .page-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 340px) !important; column-gap: 64px !important; }
  .page .page-hero .hero-art { justify-self: center !important; }
  .page .page-hero .hero-art img { max-height: 300px; }
  .page .page-hero > h1, .page .page-hero > .lead { max-width: 34rem; }
}

/* product pages: every section carries a drawing on the right, top-aligned with its heading */
@media (min-width: 900px) {
  .page main section > .artfig, .page main section.pio-has-art > .pio-art, .page main section.with-art > .artfig { align-self: start !important; justify-self: center !important; margin-top: 6px !important; }
  .page main section > .artfig img { max-height: 230px; }
  .page main section > .faq { grid-column: 1 / -1 !important; }
  .page .ending-band section { display: grid; grid-template-columns: minmax(0, var(--text)) var(--art); column-gap: 48px; justify-content: space-between; align-items: start; }
  .page .ending-band section > * { grid-column: 1; }
  .page .ending-band section > .end-art { grid-column: 2; grid-row: 1 / span 6; align-self: center; justify-self: center; margin: 0; }
  .page .ending-band .end-art img { display: block; width: auto; max-width: 100%; max-height: 220px; filter: invert(1) hue-rotate(180deg) brightness(1.08); opacity: .92; }
}
@media (max-width: 899px) { .page main section > .artfig.fill, .page .ending-band .end-art { display: none !important; } }
@media (min-width: 900px) { .page .ending-band section { grid-template-rows: repeat(5, auto) 1fr; } }
/* ending band: words stay stacked on the left; the drawing sits out of the flow on the right so it can't stretch the rows */
@media (min-width: 900px) {
  .page .ending-band section { display: block !important; position: relative; min-height: 220px; }
  .page .ending-band section > *:not(.end-art) { max-width: var(--text); }
  .page .ending-band section > .end-art { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: var(--art); display: flex; justify-content: center; margin: 0; }
}

/* questions: the rows keep to the reading column so each answer ends where its rule and its + do */
@media (min-width: 900px) { .page main section > .faq { grid-column: 1 !important; } }
.faq details p { max-width: none; padding-right: 44px; }
.faq details[open] summary { padding-bottom: 10px; }

/* Backed-by-YC strip, as on the live infera.bio homepage */
.ycbar { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px max(16px, env(safe-area-inset-right, 0px)) 9px max(16px, env(safe-area-inset-left, 0px)); background: var(--ink); color: #fff; font: 600 13px var(--sans); text-decoration: none; letter-spacing: .005em; }
.ycbar:focus-visible { outline-offset: -4px; border-radius: 0; }
.ycbar__more > span { display: inline-block; transition: transform .2s ease; }
.ycbar:hover .ycbar__more > span { transform: translateX(2px); }
.ycbar__txt { color: rgba(255,255,255,.7); }
.ycbar__yc { display: inline-flex; align-items: center; gap: 6px; }
.ycbar__word { color: #FB651E; font-size: 14px; letter-spacing: -.005em; }
.yclogo { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 3px; background: #FB651E; color: #fff; font-weight: 700; font-size: 12px; line-height: 1; }
.ycbar__more { display: inline-flex; align-items: center; gap: 5px; margin-left: 3px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.7); font-weight: 500; transition: color .15s; }
.ycbar:hover .ycbar__more { color: #fff; }
/* drawings in the ink ending: screen-blend so their white occlusion fills, inverted to black, sink into the band */
.page .ending-band .end-art img { mix-blend-mode: screen; }
/* YC strip, quiet: transparent, muted text, matching the homepage */
.ycbar { background: transparent; color: var(--muted); padding: 14px 16px 6px; gap: 7px; font: 500 13px/16px var(--sans); letter-spacing: 0; }
.ycbar__txt { color: var(--muted); }
.ycbar__yc { gap: 5px; }
.ycbar .yclogo { width: 16px; height: 16px; border-radius: 4px; font-size: 11px; line-height: 16px; }
.ycbar__word { color: var(--ink); font-size: 13px; font-weight: 600; }
.ycbar__more { border-left: 0; padding-left: 0; margin-left: 0; gap: 4px; color: var(--muted); }
.ycbar__more::before { content: ""; width: 1px; height: 12px; margin: 0 9px 0 5px; background: var(--rule); }
.ycbar:hover .ycbar__more { color: var(--ink); }
.ycbar:hover .ycbar__more > span { transform: translateX(3px); }

/* inner pages, motion pared back: content only fades in once, quickly. No rise, no stagger, no drawn rules, no opening band, no scroll snapping */
.js .page .reveal { transform: none !important; transition: opacity .35s ease !important; transition-delay: 0s !important; }
.js .page .reveal .artfig { opacity: 1 !important; transition: none !important; }
.js .page main section.reveal:has(h2):not(.tint)::after { transform: none !important; transition: none !important; }
.js .page .tint::before, .js .page .solo-band::before { opacity: 1 !important; transform: none !important; transition: none !important; }
.page .ending-band { clip-path: none !important; transition: none !important; }


/* ================= PRODUCT PAGES, SCANNABLE =================
   The whole page readable at a glance, with no scroll choreography. Three patterns:
   .flow   a heading beside its drawing, then the steps or facts as one strip across the frame
   .pgrid  sections side by side, each under its own drawing
   .split  the heading on the left, a table or the questions on the right */
.page main .flow-head > :last-child, .page main .flow-notes > p { margin-bottom: 0; }
.page main .flow-notes { margin-top: 28px; }
.page main .flow-notes > p + p { margin-top: 12px; }
.page main .pgrid { display: grid; gap: 48px; padding-bottom: var(--sec); }
.page main .pgrid > section { display: block !important; padding: 0 !important; }
.page main .pgrid > section > h2 { font-size: 22px !important; line-height: 1.25 !important; margin-bottom: 10px !important; text-wrap: balance; }
.page main .pgrid > section > p, .page main .pgrid > section li, .page main .pgrid > section dd, .page main .pgrid > section dt { font-size: 16px; }
.page main .pgrid > section > :last-child { margin-bottom: 0; }
.page main .pgrid > section > .artfig { display: block !important; justify-self: start !important; width: fit-content !important; max-width: 100% !important; margin: 0 0 22px !important; }
.page main .pgrid > section > .artfig img, .page main .pgrid > section > .artfig .art canvas:not(.agent) { height: 150px !important; max-height: none !important; width: auto !important; max-width: 100%; }
.page main .pgrid > figure.shot { margin: 0; }
@media (min-width: 900px) {
  .page main section.flow { align-items: end; }
  .page main section.flow > .flow-head { grid-column: 1 !important; grid-row: 1 !important; align-self: end; }
  .page main section.flow > .artfig { grid-row: 1 !important; align-self: end !important; justify-self: center !important; margin: 0 !important; }
  .page main section.flow > .row { grid-column: 1 / -1 !important; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: 28px; margin: 36px 0 0 !important; padding: 0; }
  .page main section.flow > .row > li { display: block !important; padding: 13px 0 0 !important; border-top: 1px solid var(--ink); border-bottom: 0 !important; font-size: 15px; line-height: 1.55; }
  .page main section.flow > ol.row > li::before { display: block; font-size: 15px; line-height: 1.5; margin-bottom: 2px; }
  .page main section.flow > ul.row > li::before { display: none; }
  .page main section.flow > .row > li b { display: block; margin-bottom: 3px; }
  .page main section.flow > .row > li.pio-human { border-top-color: var(--indigo); box-shadow: 0 -1px 0 var(--indigo); }
  .page main section.flow > .flow-notes { grid-column: 1 / -1 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; font-size: 16px; }
  .page main section.flow > .flow-notes > p + p { margin-top: 0; }
  .page main section.flow > .flow-notes.one { display: block; max-width: var(--text); }
  .page main section.flow > figure.shot { margin: 40px 0 0; }
  .page main .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .page main .pgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  .page main .pgrid > figure.shot { grid-column: 1 / -1; }
  .page main section.split { grid-template-columns: minmax(0, 1fr) minmax(0, var(--text)) !important; }
  .page main section.split > .split-head { grid-column: 1 !important; grid-row: 1 !important; }
  .page main section.split > :not(.split-head) { grid-column: 2 !important; grid-row: 1 !important; margin-top: 0 !important; }
}

/* the top bar's "Send us a note" steps aside on phones, where the bar only has room for the button */
@media (max-width: 760px) { .nv-links .nv-note { display: none; } }
/* Careers steps aside on narrow screens, where it would push the button out of the card; it stays in the footer */
@media (max-width: 640px) { .nv-links .nv-a[href="/careers"] { display: none; } }

/* mobile chrome pass */
/* Shared chrome only (YC strip, nav card, Products panel, footer, safe-area gutters), phones and tablets only. Desktop (900px and up) is untouched. */
@media (max-width: 899px) {
  /* the YC strip is a 44px tap target; the nav card gives the height back so nothing moves */
  .ycbar { padding-top: 14px; padding-bottom: 14px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .ycbar + .nv.card { padding-top: 6px; }
  /* nav items keep their drawn size; an invisible pad takes each one past 44px tall */
  .nv.card .nv-links > a, .nv.card .nv-trig { position: relative; white-space: nowrap; }
  .nv.card .nv-links > a::after, .nv.card .nv-trig::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
  .nv.card .nv-logo { position: relative; }
  .nv.card .nv-logo::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  .nv.card .nv-in { margin-left: max(16px, env(safe-area-inset-left, 0px)) !important; margin-right: max(16px, env(safe-area-inset-right, 0px)) !important; }
  /* gutters: 16px, or the notch inset when the phone is on its side */
  .page main.col, .page .ending-band .col, .page footer .col { padding-left: max(16px, env(safe-area-inset-left, 0px)) !important; padding-right: max(16px, env(safe-area-inset-right, 0px)) !important; }
  /* footer: every link is a 44px row, still two short columns on the left edge */
  .page footer { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
  .page footer nav { row-gap: 0; }
  .page footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .page footer .meta a { padding-block: 14px; }
}
@media (max-width: 640px) {
  .page footer { padding-top: 44px !important; }
  .page footer .col { gap: 26px; }
  .page footer nav { column-gap: 56px; font-size: 15px; }
  .page footer .meta { gap: 14px; font-size: 15px; }
  /* Products panel: hangs from the card and scrolls with it (it was pinned to the screen and sat on top of the card) */
  .nv.card .nv-panel { position: absolute; left: -1.5px; right: -1.5px; top: calc(100% + 10px); width: auto; transform-origin: 50% 0; }
  .nv.card .nv-panel a { align-items: center; gap: 14px; padding: 12px; }
}
@media (max-width: 520px) {
  .ycbar + .nv.card { padding-top: 4px; }
  .nv.card .nv-in { height: 58px !important; margin-left: max(12px, env(safe-area-inset-left, 0px)) !important; margin-right: max(12px, env(safe-area-inset-right, 0px)) !important; padding: 0 8px 0 15px !important; }
  .nv.card .nv-links > a, .nv.card .nv-trig { padding: 12px 10px; }
  .nv.card .nv-links .nv-cta { padding: 12px 14px !important; }
}
/* the smallest phones (320 to 359 wide): the same bar, drawn a little tighter so nothing clips */
@media (max-width: 359px) {
  .ycbar { gap: 6px; }
  .ycbar__more::before { margin: 0 6px 0 2px; }
  .nv.card .nv-in { gap: 4px; margin-left: max(8px, env(safe-area-inset-left, 0px)) !important; margin-right: max(8px, env(safe-area-inset-right, 0px)) !important; padding: 0 7px 0 12px !important; }
  .nv.card .nv-logo img { height: 14.5px; }
  .nv.card .nv-links > a, .nv.card .nv-trig { padding: 12px 7px; font-size: 14px; }
  .nv.card .nv-links .nv-cta { padding: 12px 10px !important; font-size: 14px !important; }
}

/* keyboard users can jump past the header; the link stays off-screen until it has focus */
.skip { position: absolute; left: 16px; top: -200px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: var(--ink); color: #fff; font: 500 15px/1.2 var(--sans); text-decoration: none; }
.skip:focus { top: 12px; outline: 2px solid var(--indigo); outline-offset: 2px; }