/* Develp website: parts the mockup did not have (menus with dropdowns, page heroes with a picture, the short answer,
   Insights, legal pages). Built on tokens.css and develp.css; same drawing language: ink lines, square corners. */

/* ---------- header: dropdowns ---------- */
.dv-header nav { position: relative; }
.nav-drop { position: relative; display: flex; }
.nav-drop__btn { gap: 8px; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; font: inherit; font-size: 15px; cursor: pointer; }
.nav-drop__btn i { width: 7px; height: 7px; border-right: var(--line-thin) solid currentColor; border-bottom: var(--line-thin) solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s var(--ease-fade); }
.nav-drop__btn[aria-expanded="true"] i { transform: translateY(1px) rotate(-135deg); }
.nav-drop[aria-current="true"] > .nav-drop__btn::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 14px; border-top: var(--line-heavy) solid var(--ink); }
.nav-drop__panel { position: absolute; top: 100%; left: -1px; z-index: 60; min-width: 270px; display: grid; background: var(--paper); border: var(--line-thin) solid var(--ink); box-shadow: 6px 6px 0 rgba(14, 14, 14, .08); }
.nav-drop__panel[hidden] { display: none; }
.nav-drop__panel a { display: block; padding: 12px 18px; color: var(--ink); text-decoration: none; font-size: 15px; border-top: var(--line-thin) solid var(--rule); }
.nav-drop__panel a:first-child { border-top: 0; }
.nav-drop__panel a:hover, .nav-drop__panel a:focus-visible { background: var(--ground); }
.nav-drop__panel a[aria-current="page"] { font-weight: 520; box-shadow: inset 3px 0 0 var(--ink); }
.nav-drop__group { padding: 12px 18px 4px; border-top: var(--line-thin) solid var(--ink); font-size: 11px; }
.dv-header__signin { border-left: var(--line-thin) solid var(--ink); }
@media (max-width: 1180px) { .dv-header__link { padding: 0 14px; } .nav-drop[aria-current="true"] > .nav-drop__btn::after { left: 14px; right: 14px; } }
@media (max-width: 980px) { .dv-header__link, .dv-header__cta, .nav-drop { display: none; } .dv-header__menu { display: flex; } }
.menu-sheet nav a { grid-template-columns: minmax(0, 1fr) auto; }
.menu-sheet nav a.is-sub span:first-child { padding-left: 18px; font-size: .86em; }

/* ---------- page hero: words left, the picture right ---------- */
.phero { position: relative; overflow: hidden; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; align-items: center; }
.phero__copy { display: grid; gap: 22px; align-content: center; position: relative; z-index: 1; }
.phero__copy .page-title { max-width: 11em; }
.phero__pic { position: relative; margin: -40px -48px -40px -20px; }
.phero__pic img, .pic img { display: block; width: 100%; height: auto; }
.pic { display: block; }
@media (max-width: 900px) { .phero__grid { grid-template-columns: minmax(0, 1fr); } .phero__pic { margin: 0 -28px -44px; } }
@media (max-width: 520px) { .phero__pic { margin: 0 -18px -32px; } }

/* the short answer under every page heading */
.short-answer { max-width: 40em; }
.md-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.md-row .dv-link { color: var(--graphite); }
.ai-menu { position: relative; }
.ai-menu summary { list-style: none; cursor: pointer; }
.ai-menu summary::-webkit-details-marker { display: none; }
.ai-menu__list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; min-width: 160px; background: var(--paper); border: var(--line-thin) solid var(--ink); }
.ai-menu__list a { padding: 9px 14px; color: var(--ink); text-decoration: none; border-top: var(--line-thin) solid var(--rule); }
.ai-menu__list a:first-child { border-top: 0; }
.ai-menu__list a:hover { background: var(--ground); }
.dv-night .md-row .dv-link { color: var(--night-2); }

/* the proof strip on light pages */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--line-thin) solid var(--ink); background: rgba(247, 248, 248, .85); }
.proof > div { padding: 16px 24px 18px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.proof > div + div { border-left: var(--line-thin) solid var(--rule); }
.proof .figure-s { font-size: 24px; line-height: 30px; }
.hero.is-night .proof, .hero .proof { position: relative; z-index: 1; }
.hero.is-night .proof { background: rgba(14, 14, 14, 0.9); border-top-color: var(--night-2); }
.hero.is-night .proof > div + div { border-color: var(--night-rule); }
.hero.is-night .proof .figure-s { color: var(--ground); }
@media (max-width: 1000px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof > div:nth-child(3) { border-left: 0; } .proof > div:nth-child(n+3) { border-top: var(--line-thin) solid var(--rule); } }
@media (max-width: 520px) { .proof { grid-template-columns: minmax(0, 1fr); } .proof > div + div { border-left: 0; border-top: var(--line-thin) solid var(--rule); } .proof > div { padding: 14px 18px; } }

/* cards that send each visitor to their page */
.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--line-thin) solid var(--ink); border-left: var(--line-thin) solid var(--ink); background: var(--paper); }
.who__title { font-size: 24px; line-height: 28px; font-weight: 330; font-stretch: 102%; letter-spacing: -0.01em; }
.who__text { font-size: 15px; line-height: 23px; color: var(--ink-2); }
.who .dv-arrowlink { margin-top: 6px; }
@media (max-width: 1100px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .who { grid-template-columns: minmax(0, 1fr); } }

/* offers: three columns with a foot */
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.offers .dv-card__body { min-height: 0; }
@media (max-width: 960px) { .offers { grid-template-columns: minmax(0, 1fr); } }

/* a list of points with a rule between them */
.points { display: grid; border-top: var(--line-thin) solid var(--ink); }
.points > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px 32px; padding: 20px 0; border-bottom: var(--line-thin) solid var(--rule); }
.points h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 520; }
.points p { margin: 0; font-size: 17px; line-height: 27px; color: var(--ink-2); max-width: 40em; }
@media (max-width: 800px) { .points > div { grid-template-columns: minmax(0, 1fr); } }

/* three columns: need, holds back, how Develp fits */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--line-thin) solid var(--ink); border-left: var(--line-thin) solid var(--ink); background: var(--paper); }
.trio > div { padding: 22px 22px 24px; border-right: var(--line-thin) solid var(--ink); border-bottom: var(--line-thin) solid var(--ink); display: grid; gap: 12px; align-content: start; }
.trio ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.trio li { font-size: 16px; line-height: 25px; color: var(--ink-2); padding-left: 18px; position: relative; }
.trio li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; border-top: var(--line-thin) solid var(--ink); }
.trio > div.trio__fit { background-color: var(--white); box-shadow: inset 0 0 0 1px var(--ink); }
@media (max-width: 960px) { .trio { grid-template-columns: minmax(0, 1fr); } }

/* the record's figures */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--line-thin) solid var(--ink); border-left: var(--line-thin) solid var(--ink); background: var(--paper); }
.figs > div { padding: 20px 22px 22px; border-right: var(--line-thin) solid var(--ink); border-bottom: var(--line-thin) solid var(--ink); display: grid; gap: 6px; align-content: start; }
@media (max-width: 900px) { .figs { grid-template-columns: minmax(0, 1fr); } }

/* a dated timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; border-left: var(--line-heavy) solid var(--ink); }
.timeline li { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 24px; padding: 14px 0 14px 28px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: var(--line-thin) solid var(--ink); }
.timeline li:last-child::before { background: var(--ink); }
.timeline .data { padding-top: 3px; }
.timeline p { margin: 0; font-size: 17px; line-height: 27px; }
@media (max-width: 600px) { .timeline li { grid-template-columns: minmax(0, 1fr); } }

/* partners */
.partners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--line-thin) solid var(--ink); border-left: var(--line-thin) solid var(--ink); background: var(--paper); }
.partners > div { padding: 24px 22px; border-right: var(--line-thin) solid var(--ink); border-bottom: var(--line-thin) solid var(--ink); display: grid; gap: 14px; align-content: start; }
.partners img { height: 30px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; filter: grayscale(1); }
@media (max-width: 900px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .partners { grid-template-columns: minmax(0, 1fr); } }

/* the closing band */
.closing .endcard { align-items: center; }

/* ---------- Insights ---------- */
.ins-hub { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; align-items: start; }
.ins-cats { position: sticky; top: 88px; display: grid; gap: 12px; }
.ins-cats ul { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--line-thin) solid var(--ink); }
.ins-cats a { display: block; padding: 10px 0; border-bottom: var(--line-thin) solid var(--rule); color: var(--ink); text-decoration: none; font-size: 16px; }
.ins-cats a[aria-current="page"] { font-weight: 520; box-shadow: inset 3px 0 0 var(--ink); padding-left: 12px; }
@media (max-width: 900px) {
  .ins-hub { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ins-cats { position: static; }
  .ins-cats ul { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; }
  .ins-cats a { border: var(--line-thin) solid var(--ink); padding: 7px 12px; font-size: 14px; }
  .ins-cats a[aria-current="page"] { background: var(--ink); color: var(--ground); box-shadow: none; padding-left: 12px; }
}
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.ins-card { display: grid; grid-template-rows: auto 1fr; border: var(--line-thin) solid var(--ink); background: var(--paper); color: var(--ink); text-decoration: none; transition: box-shadow .18s var(--ease-fade); }
.ins-card:hover, .ins-card:focus-visible { box-shadow: 6px 6px 0 rgba(14, 14, 14, .08); }
.ins-card__body { display: grid; gap: 8px; padding: 16px 18px 20px; align-content: start; }
.ins-card__title { font-size: 22px; line-height: 27px; font-weight: 330; font-stretch: 102%; letter-spacing: -0.01em; }
.ins-card__text { font-size: 15px; line-height: 23px; color: var(--ink-2); }
.ins-card__date { color: var(--graphite); margin-left: 10px; }
.ins-card--lg { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto; }
.ins-card--lg .ins-card__title { font-size: 34px; line-height: 38px; }
.ins-card--lg .ins-card__body { padding: 24px 26px; align-content: center; }
@media (max-width: 900px) { .ins-card--lg { grid-template-columns: minmax(0, 1fr); } .ins-card--lg .ins-card__title { font-size: 28px; line-height: 32px; } }
.ins-cover { display: block; border-bottom: var(--line-thin) solid var(--ink); background: var(--ground); aspect-ratio: 16 / 9; overflow: hidden; }
.ins-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-card--lg .ins-cover { border-bottom: 0; border-right: var(--line-thin) solid var(--ink); }
.ins-cover--blank { background-image: radial-gradient(var(--grid) 1px, transparent 1.3px); background-size: 12px 12px; }
.ins-search { display: grid; gap: 8px; max-width: 520px; }
.ins-search input { font: inherit; font-size: 16px; padding: 11px 14px; border: var(--line-thin) solid var(--ink); background: var(--paper); border-radius: 0; }
.ins-search input:focus { outline: var(--line-heavy) solid var(--ink); outline-offset: 0; }
.wrap--article { max-width: 1080px; }
.ins-head { display: grid; gap: 18px; margin-bottom: 32px; }
.ins-head .label a { color: inherit; text-decoration: none; }
.ins-cover--article { border: var(--line-thin) solid var(--ink); margin-bottom: 40px; }
.ins-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.ins-toc { position: sticky; top: 88px; display: grid; gap: 10px; }
.ins-toc ol { margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 14px; line-height: 20px; }
.ins-toc a { color: var(--ink-2); text-decoration: none; }
.ins-toc a:hover { text-decoration: underline; }
@media (max-width: 960px) { .ins-layout { grid-template-columns: minmax(0, 1fr); } .ins-toc { position: static; } }
.ins-sources { padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 23px; }

/* long-form text */
.prose { max-width: 42em; font-size: 18px; line-height: 30px; color: var(--ink); }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: 30px; line-height: 36px; font-weight: 330; font-stretch: 102%; letter-spacing: -0.01em; margin-top: 48px; }
.prose h3 { font-size: 21px; line-height: 28px; font-weight: 520; margin-top: 32px; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose blockquote { margin-left: 0; padding: 4px 0 4px 20px; border-left: var(--line-heavy) solid var(--ink); color: var(--ink-2); }
/* tables in articles (2026-10-23): the brand's ruled table, no sideways scrolling; on a phone each row is a small card
   whose cells carry their column name (build.mjs labelTables) */
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; margin: 6px 0 0; background: var(--white); border: var(--line-thin) solid var(--ink); }
.prose th { font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); font-weight: 400; text-align: left; vertical-align: bottom; padding: 12px 14px 10px; border-bottom: var(--line-thin) solid var(--ink); overflow-wrap: break-word; }
.prose td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: var(--line-thin) solid var(--rule); overflow-wrap: break-word; }
.prose tr:last-child td { border-bottom: 0; }
.prose .tbl-source { margin-top: -12px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--graphite); }
.prose .tbl-source a { color: var(--graphite); }
@media (max-width: 640px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose thead { display: none; }
  .prose tr { padding: 10px 14px; border-bottom: var(--line-thin) solid var(--ink); }
  .prose tr:last-child { border-bottom: 0; }
  .prose td { padding: 3px 0; border: 0; }
  .prose td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 10.5px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
}
.prose img { max-width: 100%; height: auto; border: var(--line-thin) solid var(--ink); }
.faq--plain summary { grid-template-columns: minmax(0, 1fr) 26px; }
.faq--plain details > div { padding-left: 0; }

/* glossary */
.gloss-list { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); border-top: var(--line-thin) solid var(--ink); margin: 0; }
.gloss-list dt, .gloss-list dd { margin: 0; padding: 14px 0; border-bottom: var(--line-thin) solid var(--rule); }
.gloss-list dt a { color: var(--ink); font-weight: 520; }
.gloss-list dd { color: var(--ink-2); padding-left: 24px; }
@media (max-width: 700px) { .gloss-list { grid-template-columns: minmax(0, 1fr); } .gloss-list dt { border-bottom: 0; padding-bottom: 2px; } .gloss-list dd { padding: 0 0 14px; } }

/* legal pages */
.legal { max-width: 46em; }
.legal h2 { font-size: 24px; line-height: 30px; font-weight: 520; margin-top: 40px; }
.legal p, .legal li { font-size: 17px; line-height: 27px; color: var(--ink-2); }

/* the portal preview */
.portal { border: var(--line-thin) solid var(--ink); background: var(--paper); }
.portal__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: var(--line-thin) solid var(--ink); }
.portal__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal__grid > div { padding: 18px; border-right: var(--line-thin) solid var(--rule); border-bottom: var(--line-thin) solid var(--rule); display: grid; gap: 6px; align-content: start; min-height: 120px; }
.portal__grid > div:nth-child(4n) { border-right: 0; }
.portal__wide { grid-column: span 4; min-height: 0 !important; border-bottom: 0 !important; }
/* the portal's "Sample data" tag in ink, so no one takes the figures for real ones (the owner, 2026-10-26: "highlight the Sample
   Data there a bit, maybe with ink bg, make size slightly bigger too") */
.sample-tag { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; background: var(--ink); color: var(--white); justify-self: start; }
@media (max-width: 900px) { .portal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal__grid > div:nth-child(2n) { border-right: 0; } .portal__wide { grid-column: span 2; } }

/* forms: what is sent */
.form-sent { border: var(--line-thin) solid var(--ink); background: var(--paper); padding: 24px; display: grid; gap: 10px; }
.foot-social a { color: var(--ink); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: var(--line-thin) solid var(--rule); }
.foot-social a:hover { border-color: var(--ink); }
.foot-social a svg { display: block; }

/* pictures beside text: the square cut, blended into the film */
.pic.sq { display: block; max-width: 520px; width: 100%; justify-self: center; }
/* the square pictures are transparent PNG renders with their own soft shadow, so they sit on any background as they are */
.placeholder { font-family: var(--font-mono); font-size: .9em; background: var(--ground-2); padding: 0 4px; }

/* the Staking hero loop, in a framed panel on the paper colour it was rendered on (#f7f8f8; the owner chose option 2) */
.loop { aspect-ratio: 16 / 9; border: var(--line-thin) solid var(--ink); background: var(--paper); overflow: hidden; }
.loop__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.phero__pic:has(.pic.sq) { margin: 0; display: grid; justify-items: center; }
.trio h2.label { margin: 0; font-size: 11px; font-weight: 400; }

/* hidden where the layout stacks to one column (the contact picture would push the form down) */
@media (max-width: 960px) { .only-wide { display: none !important; } }

/* a form field people never see; bots fill it in */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* the phone menu: line arrows like everywhere else, and the main call to action always in view below the links */
.menu-sheet nav a svg { display: block; overflow: visible; }
.menu-sheet nav a path { stroke: currentColor; stroke-width: 1.2; fill: none; }
.menu-sheet__cta { margin: 14px 20px 0; justify-content: center; flex-shrink: 0; }

/* the record table: ruled cells, mono labels, figures in the figure style; scrolls inside itself on phones */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--line-thin) solid var(--ink); background: var(--paper); }
.rtable { width: 100%; min-width: 560px; border-collapse: collapse; }
.rtable th { font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; color: var(--graphite); text-align: left; padding: 14px 20px; border-bottom: var(--line-thin) solid var(--ink); }
.rtable td { padding: 18px 20px; font-size: 17px; line-height: 24px; vertical-align: baseline; border-top: var(--line-thin) solid var(--rule); }
.rtable tbody tr:first-child td { border-top: 0; }
.rtable th + th, .rtable td + td { border-left: var(--line-thin) solid var(--rule); }
.rtable td.data { font-family: var(--font-sans); font-size: 30px; line-height: 34px; font-weight: 330; font-stretch: 102%; letter-spacing: -0.01em; }
@media (max-width: 600px) {
  .rtable { min-width: 0; }
  .rtable th { padding: 10px 8px; font-size: 10px; letter-spacing: 0.04em; }
  .rtable td { padding: 12px 8px; font-size: 14px; line-height: 19px; }
  .rtable td.data { font-size: 21px; line-height: 25px; }
}

/* visuals inside an article: a picture or a looping animation with its caption */
.prose .ins-figure { margin: 32px 0; }
.prose .ins-figure img, .prose .ins-figure video { display: block; width: 100%; height: auto; border: var(--line-thin) solid var(--ink); background: var(--paper); }
.prose .ins-figure figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--graphite); }
/* the develp.co tag the site draws over a visual the team uploaded (2026-10-26): the place and size of the studio's dvtag on
   a 1920 px wide figure (the mark 30 px high, the address 24 px, 14 px apart, 112 px from the right, 104 px from the top),
   so it scales with the picture as the studio's does. Dark ink, or white over a dark picture. */
.ins-figure .ins-figmedia { position: relative; container-type: inline-size; }
.ins-figtag { position: absolute; top: 5.417cqw; right: 5.833cqw; display: flex; align-items: center; gap: 0.729cqw; font-family: var(--font-mono); font-size: 1.25cqw; line-height: 1; letter-spacing: 0.04em; color: var(--ink); pointer-events: none; user-select: none; }
.ins-figtag i { display: block; width: 1.452cqw; height: 1.5625cqw; background: currentColor; -webkit-mask: url(/assets/marks/develp-icon-dark.svg) center / contain no-repeat; mask: url(/assets/marks/develp-icon-dark.svg) center / contain no-repeat; }
.ins-figtag--light { color: #fff; }

/* "For AI tools" in the footer: the AI menu opens upward, since it sits at the bottom of the page */
.foot-tools .md-row { gap: 6px 18px; }
.foot-tools .ai-menu__list { top: auto; bottom: calc(100% + 6px); }


/* the portal preview's chart: a small key beside its title instead of a caption */
.portal__charthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 18px; }
.portal__key { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--graphite); }
.portal__key i { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--ink); }
.portal__key i.is-dash { border-top: 1.5px dashed var(--rule-2); margin-left: 8px; }

/* the closing band's mark: its two pieces fly in from outside their box, so nothing cuts them */
.closing .endcard__mark { overflow: visible; }
.closing { overflow: hidden; }

/* figures (drawn diagrams): one frame, a title row, numbered parts that light up their note on hover, and the notes
   take keyboard focus (the parts sit inside role="img", so a focus stop there would announce nothing) */
figure.panel-fig { margin: 0; }
.panel-fig .fig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.panel-fig > svg.svgd { margin-inline: auto; }
@media (min-width: 761px) { .panel-fig:not(.use-narrow) > svg.fig-wide { display: block; } }
.panel-fig .fig-keys { gap: 12px 24px; margin-top: 4px; }
.key p { transition: color .2s; }
.key.is-hl .dv-callout { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.key.is-hl p { color: var(--ink); }
.key[tabindex] { outline: none; }
.key[tabindex]:focus-visible { outline: var(--line-thin) solid var(--ink); outline-offset: 6px; }
.svgd .part.hot { cursor: pointer; }
@media (max-width: 760px) { .panel-fig .fig-keys { grid-template-columns: minmax(0, 1fr); } }
/* between phone and laptop widths a full-width figure shows its narrow drawing with the notes beside it, so the
   panel has no empty bands on both sides */
@media (min-width: 761px) {
  .panel-fig.use-narrow:has(> .fig-keys) { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px 40px; align-items: center; }
  .panel-fig.use-narrow:has(> .fig-keys) > .fig-head { grid-column: 1 / -1; }
  .panel-fig.use-narrow > .fig-keys { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 0; }
}

/* two text columns side by side (the owner, 2026-10-22: "wrap them better and even add a thin divider"): a wider
   gap with a thin rule between the columns and shorter lines; stacked, the rule runs across between them */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.pair > * { min-width: 0; }
.pair > :first-child { padding-right: clamp(32px, 5vw, 72px); }
.pair > :last-child { padding-left: clamp(32px, 5vw, 72px); border-left: var(--line-thin) solid var(--rule-2); }
.pair .lede { max-width: 30em; }
@media (max-width: 860px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair > :first-child { padding-right: 0; padding-bottom: 32px; }
  .pair > :last-child { padding-left: 0; padding-top: 32px; border-left: 0; border-top: var(--line-thin) solid var(--rule-2); }
}
/* the record's two figures side by side: Develp in ink, the network in graphite */
.compare .figure-xl { font-size: clamp(56px, 8vw, 96px); line-height: 1; }
.compare > :last-child .figure-xl { color: var(--graphite); }

/* the record's recorder trace: the line draws at an even pace, the pen rides along with it, and each upgrade
   appears as the pen passes; without motion the pen rests at the latest point */
html.js [data-draw].is-drawn .ln.trace { transition-duration: 4.5s; transition-timing-function: linear; }
html.js [data-draw] .pen { transform: translate(var(--pen-x, 0px), var(--pen-y, 0px)); }
html.js [data-draw].is-drawn .pen { transform: none; transition: transform 4.5s linear; }
@media (prefers-reduced-motion: reduce) { html.js [data-draw] .pen { transition: none !important; transform: none !important; } }

/* the footer's title block: the page's title, a button to the team and the group the company belongs to
   (the owner, 2026-10-22: no company or date cells; "talk to our team" and the IFT line given proper places) */
.dv-titleblock__ift { text-decoration: none; color: var(--ink); grid-column: span 2; align-items: flex-start; }
.dv-titleblock__ift img { height: 20px; width: auto; display: block; margin-top: 4px; }
.dv-titleblock__ift:hover img { opacity: .75; }
.foot-base { grid-template-columns: minmax(0, 1fr) 600px; }
.foot-base .dv-titleblock { grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: auto; }
.foot-base .dv-titleblock__mark { grid-row: auto; }
.foot-base .dv-titleblock__ift { grid-column: auto; }
.dv-titleblock__ift img { height: 24px; }
@media (max-width: 1100px) { .foot-base { grid-template-columns: minmax(0, 1fr); } .foot-base .dv-titleblock { border-left: 0; } }
@media (max-width: 640px) {
  .foot-base .dv-titleblock { grid-template-columns: 136px minmax(0, 1fr); }
  .foot-base .dv-titleblock__mark img { height: 20px; }
  .foot-base .dv-titleblock__mark { grid-row: auto; }
  .foot-base .dv-titleblock__ift { grid-column: auto; padding: 14px 18px; }

}

/* phones: type a little smaller (the owner, 2026-10-22: "on phone, you can decrease the font size just a little") */
@media (max-width: 520px) {
  body { font-size: 16px; }
  .page-title { font-size: 34px; }
  .sec-title { font-size: 28px; }
  .lede, .standfirst { font-size: 17px; line-height: 27px; }
  .points h3 { font-size: 18px; line-height: 24px; }
  .points p { font-size: 16px; line-height: 25px; }
  .faq summary { font-size: 17px; }
  .foot-grid > div { padding: 18px 18px 22px; gap: 10px; }
  .foot-grid ul { font-size: 14px; gap: 7px; }
  .foot-tools { padding: 16px 18px; }
  .foot-base .dv-titleblock__ift { padding: 12px 18px; }
}
/* the phone menu: smaller links (the owner, 2026-10-22: "menu texts can be smaller too - they are big") */
@media (max-width: 520px) {
  .menu-sheet nav a { font-size: 20px; line-height: 26px; padding: 12px 18px; }
  .menu-sheet__cta { margin: 12px 18px 0; }
}
.dv-titleblock__ift .label { white-space: nowrap; }
.check.is-bad .field__err { display: flex; }
.check.is-bad input { box-shadow: inset 0 0 0 1px var(--ink); }

/* Home on phones (the owner, 2026-10-22, "let's go with your suggestion but keep the pictures"): the steps, the reporting
   section and the Insights band live on their own pages; the audience cards keep their label, title and link */
@media (max-width: 640px) {
  .hide-phone { display: none !important; }
  .who__text { display: none; }
}
/* a button at the end of a heading row stays its own size when the row stacks (it stretched into a bar) */
.sec-head--row > :last-child { justify-self: start; }
/* the Staking video panel sits inside the column, like the pictures; on phones it keeps a gap above the proof strip */
.phero__pic.loop { margin: 0; }
@media (max-width: 900px) { .phero__pic.loop { margin-bottom: 28px; } }
/* a figure showing its narrow drawing and no notes beside it keeps a panel the drawing's size */
.panel-fig.use-narrow:not(:has(> .fig-keys)) { max-width: 420px; margin-inline: auto; }
/* the live strip's label stays on one line */
.epoch .label { white-space: nowrap; }
/* small phones: the whole menu scrolls, so the last links never sit hidden under the button */
@media (max-width: 520px) {
  .menu-sheet__frame { overflow-y: auto; }
  .menu-sheet nav { overflow: visible; flex: none; }
  .menu-sheet__cta { margin-bottom: 16px; }
}
/* form fields: a field keeps its own height when the one beside it shows a message (it stretched to the row), and a
   field that needs fixing shows a heavier border and its message, without the hatched strip (it read as a glitch) */
.field { align-content: start; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { background-image: none; }

/* text beside a side picture (the owner, 2026-10-22: "compact text a bit and use a smaller visual"): the picture at
   420 px and centred against the text, the lines wrapping earlier, so the section is as tall as its words */
.split:has(> .pic.sq) { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; column-gap: clamp(40px, 6vw, 96px); }
.split:has(> .pic.sq) > .pic.sq { max-width: 420px; }
.split:has(> .pic.sq) .lede { max-width: 30em; }
@media (max-width: 960px) {
  .split:has(> .pic.sq) { grid-template-columns: minmax(0, 1fr); }
  .split:has(> .pic.sq) > .pic.sq { max-width: 340px; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .split:has(> .pic.sq) { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
  .split:has(> .pic.sq) > .pic.sq { max-width: 320px; }
}
/* Home's record loop (the owner, 2026-10-24: "let's do the record figure too on blender, just one"): the recorder at
   work, 5 s, laid on the band's grey when it was encoded. Video has no transparency, so its edges fade out under a
   mask: a small difference in how a browser decodes the grey can never show as a box. Paused off screen and still for
   visitors who turn motion off (ui.js, [data-loop]) */
.rloop { aspect-ratio: 1; }
.rloop__video { display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect; }

/* a short text beside a side picture (the owner, 2026-10-23, Home's reporting and record sections: "little text but
   wide empty space, so tighten them a bit"): a smaller picture, with the section's tight padding */
.split--short:has(> .pic.sq) { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.split--short:has(> .pic.sq) > .pic.sq { max-width: 320px; }
@media (max-width: 960px) {
  .split--short:has(> .pic.sq) { grid-template-columns: minmax(0, 1fr); }
  .split--short:has(> .pic.sq) > .pic.sq { max-width: 280px; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .split--short:has(> .pic.sq) { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
  .split--short:has(> .pic.sq) > .pic.sq { max-width: 280px; }
}
/* the live strip keeps its place, unseen, until its data has arrived, then fades in once */
[data-live-show] { transition: opacity .6s var(--ease-fade); }
[data-live-state="wait"] { visibility: hidden; opacity: 0; }
/* the slot under way: its outline shows from the start and the hatch fills it over the slot's 12 s (the whole slot
   used to be revealed left to right, so it began as a sliver and read as broken) */
.epoch__slot.is-now i { background-color: var(--paper); background-image: none; border-color: var(--ink); animation: none; overflow: hidden; }
.epoch__slot.is-now i::after { content: ""; position: absolute; inset: 0; background-image: var(--hatch-25); transform-origin: left center; animation: slotfill 12s linear both; animation-delay: inherit; }
.epoch__slot.is-now.is-past i { background-color: var(--ink); }
.epoch__slot.is-now.is-past i::after { display: none; }
@keyframes slotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .epoch__slot.is-now i::after { animation: none !important; transform: none; } }

/* cards as title blocks (the owner, 2026-10-22: titles clearly apart from the text): the label and title on white,
   a thin ink rule, the text below on the page's own tone; titles take two lines so the texts in a row line up */
.who { background: transparent; }
.who__card { position: relative; display: grid; grid-template-rows: auto 1fr; border-right: var(--line-thin) solid var(--ink); border-bottom: var(--line-thin) solid var(--ink); color: var(--ink); }
.who__head { display: grid; gap: 10px; align-content: start; padding: 22px 22px 20px; background: var(--white); border-bottom: var(--line-thin) solid var(--ink); }
.who__title { font-weight: 400; min-height: 56px; }
.who__body { display: grid; grid-template-rows: 1fr auto; gap: 18px; padding: 18px 22px 20px; }
.dv-card { background: transparent; }
.dv-card__body { padding: 0; gap: 0; }
.dv-card__body > .label { padding: 20px 20px 0; background: var(--white); }
.dv-card__title { padding: 10px 20px 20px; background: var(--white); border-bottom: var(--line-thin) solid var(--ink); font-weight: 400; min-height: 98px; }
.dv-card__text { padding: 18px 20px 20px; margin: 0; flex: 1; }
.trio { background: transparent; }
.trio > div { padding: 0; gap: 0; align-content: start; }
.trio h2.label { padding: 18px 22px 16px; background: var(--white); border-bottom: var(--line-thin) solid var(--ink); }
.trio ul { padding: 20px 22px 24px; }
.trio > div.trio__fit { background-color: transparent; }
.trio > div.trio__fit h2.label { background: var(--ink); color: var(--paper); }
@media (max-width: 640px) { .who__title, .dv-card__title { min-height: 0; } }

/* a card's title is its link, and the link's click area covers the card; the arrow line is decoration
   (Inclusive Components, "Cards"); hover underlines the title, keyboard focus outlines the whole card */
.who__title, .dv-card__title { margin: 0; }
.who__title a, .dv-card__title a { color: inherit; text-decoration: none; }
.who__title a::after, .dv-card--link .dv-card__title a::after { content: ""; position: absolute; inset: 0; }
.dv-card--link { position: relative; }
.who__card:hover .who__title a, .dv-card--link:hover .dv-card__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.who__card:hover, .dv-card--link:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.who__title a:focus-visible, .dv-card__title a:focus-visible { outline: none; }
.who__card:has(a:focus-visible), .dv-card--link:has(a:focus-visible) { outline: var(--line-heavy) solid var(--ink); outline-offset: 3px; }
/* the text under a card's title, one step lighter, so the title leads */
.who__text, .dv-card__text, .trio li { color: var(--graphite); }
.ek--ahead { border-color: var(--rule-2); }

/* ======================================================================================================================
   Cards with icons, tiles, drawn steps, the results band (the owner's review, 2026-10-22: "the section underneath Hero
   looks too monotone and text heavy ... a background of a card changes and each card has its own icon"). The plan went
   through the critic first: night hover only on cards that link somewhere; static tiles never react to the pointer;
   icons are fully drawn at rest; motion stays small (one line per section, a quick redraw on hover).
   ====================================================================================================================== */

/* drawn icons (src/icons.mjs): ink lines that take the card's colour; --ico-bg hides what sits behind a shape */
.ico { display: block; width: 64px; height: 64px; flex: none; color: inherit; --ico-bg: var(--white); overflow: visible; }
.ico .s { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: butt; stroke-linejoin: miter; }
.ico .dash { stroke-dasharray: 3 2.5; }
.ico .h { fill: none; stroke: currentColor; stroke-width: .9; vector-effect: non-scaling-stroke; }
.ico .f, .ico .mk path { fill: currentColor; }
.ico .bg { fill: var(--ico-bg); }

/* link cards: a title block (icon, label, title) over one short line; the title is the link and covers the card */
.who, .offers { display: grid; gap: 0; border-top: var(--line-thin) solid var(--ink); border-left: var(--line-thin) solid var(--ink); background: transparent; }
.who { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the cards in a row share their rows, so the title blocks end on one line */
.who, .offers { grid-auto-rows: auto; }
.lcard { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; min-width: 0; border-right: var(--line-thin) solid var(--ink); border-bottom: var(--line-thin) solid var(--ink); color: var(--ink); }
.lcard__head { display: grid; gap: 14px; align-content: start; padding: 24px 24px 22px; background: var(--white); border-bottom: var(--line-thin) solid var(--ink); }
.lcard__head .ico { margin-bottom: 6px; }
.lcard__title { margin: 0; font-size: 24px; line-height: 29px; font-weight: 400; font-stretch: 102%; letter-spacing: -0.01em; text-wrap: balance; }
.lcard__title a { color: inherit; text-decoration: none; }
.lcard__title a::after { content: ""; position: absolute; inset: 0; }
.lcard__title .nw { white-space: nowrap; font-style: normal; }
.lcard__title svg { display: inline-block; vertical-align: middle; margin: -2px 0 0 10px; overflow: visible; }
.lcard__title svg path { stroke: currentColor; stroke-width: 1.2; fill: none; transition: transform .3s var(--ease-out); }
/* the line takes the body text's near-black (the owner, 2026-10-24: in graphite on the grey strip the lines "are dim,
   they dont look sharp"; about 5.4:1, now about 10:1; the owner's pick A of two, the grey strip kept) */
.lcard__text { margin: 0; padding: 18px 24px 22px; font-size: 15px; line-height: 23px; color: var(--ink-2); }
.lcard, .lcard__head, .lcard__title, .lcard .label, .lcard__text, .lcard .ico { transition: background-color .18s, color .18s, border-color .18s; }
.lcard__title a:focus-visible { outline: none; }
/* pointer over the card (devices that hover) or keyboard focus on its link: the card turns night */
@media (hover: hover) {
  .lcard:hover, .lcard:hover .lcard__head { background-color: var(--night); }
  .lcard:hover .lcard__head { border-bottom-color: var(--night-rule); }
  .lcard:hover .lcard__title, .lcard:hover .label.dv-ink { color: var(--white); }
  .lcard:hover .lcard__text { color: var(--night-2); }
  .lcard:hover .ico { color: var(--white); --ico-bg: var(--night); }
  .lcard:hover .lcard__title svg path { transform: translateX(6px); }
}
.lcard:has(a:focus-visible), .lcard:has(a:focus-visible) .lcard__head { background-color: var(--night); }
.lcard:has(a:focus-visible) { outline: var(--line-heavy) solid var(--ink); outline-offset: 3px; }
.lcard:has(a:focus-visible) .lcard__head { border-bottom-color: var(--night-rule); }
.lcard:has(a:focus-visible) .lcard__title, .lcard:has(a:focus-visible) .label.dv-ink { color: var(--white); }
.lcard:has(a:focus-visible) .lcard__text { color: var(--night-2); }
.lcard:has(a:focus-visible) .ico { color: var(--white); --ico-bg: var(--night); }
/* the icon redraws itself, quickly, as the card turns */
@keyframes ico-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lcard:hover .ico .s:not(.dash) { stroke-dasharray: 1; animation: ico-draw .32s var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) { .lcard, .lcard * { transition: none !important; animation: none !important; } }
@media (max-width: 1100px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .offers { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .who { grid-template-columns: minmax(0, 1fr); } }
/* on phones a card is its icon and title in one row (the audience cards drop their line, as before).
   The owner, 2026-10-24: the cards looked "a bit cheap", tapping one seemed to underline its text, and in "Ways to
   start" the line under each title read as if it belonged to the next card. So each card is a box of its own with
   space between the boxes, and its line sits inside it, under the title and past the icon, with no rule between
   (common region: what shares a boundary reads as one thing). A tap tints the card light grey, in place of the
   browser's own tap highlight. */
@media (max-width: 640px) {
  .who, .offers { border: 0; gap: 12px; }
  .lcard { display: block; grid-row: auto; border: var(--line-thin) solid var(--ink); background: var(--white); }
  .lcard__head { grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px 16px; padding: 18px 18px; border-bottom: 0; }
  .lcard__head:has(+ .lcard__text) { padding-bottom: 6px; }
  .lcard__head .ico { width: 44px; height: 44px; margin: 0; grid-row: span 2; }
  .lcard__title { font-size: 20px; line-height: 25px; }
  .lcard__text { padding: 0 18px 18px 78px; }
  .who .lcard__text { display: none; }
  .who .lcard__head { padding-bottom: 18px; }
  .lcard__title a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  /* pressed: the card's ground turns light grey at once and the words keep their ink, so they read in every frame
     (the owner, 2026-10-24: turning night faded through grey, "which makes the text unreadable for couple frames");
     a moment's wait first, so a finger scrolling past does not flash it */
  .lcard:active, .lcard:active .lcard__head { background-color: var(--ground-2); transition: background-color 0s 60ms; }
  .lcard__text { text-wrap: pretty; }
  /* the audience cards have no label: the title and the icon share one row, centred on each other, and a card
     stretched to its neighbour's height keeps them in the middle */
  .who .lcard { display: flex; }
  .who .lcard__head { flex: 1; }
  .who .lcard__head .ico { grid-row: auto; }
}
/* touch screens have no hover: the arrow that slides on a computer slides when the card is pressed, with the pressed
   tint, and otherwise stays still (the owner, 2026-10-24, after trying a nudge on arrival: "the moving arrows - dont
   look good, revert back - when they werent moving - only moved when clicked"). Nothing for visitors who turn motion off */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .lcard:active .lcard__title svg path { transform: translateX(6px); }
}
/* phones held sideways and small tablets (641 to 960 px), where "Ways to start" is one column too: the same boxes,
   each line inside its card (the critic, 2026-10-24: the old strips put each line right above the next card) */
@media (min-width: 641px) and (max-width: 960px) {
  .offers { border: 0; gap: 12px; }
  .offers .lcard { display: block; grid-row: auto; border: var(--line-thin) solid var(--ink); background: var(--white); }
  .offers .lcard__head { border-bottom: 0; padding-bottom: 8px; }
  .offers .lcard__text { padding-top: 0; text-wrap: pretty; }
}

/* static tiles: an icon, a title and a line; they never react to the pointer, since nothing on them links */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--line-thin) solid var(--ink); border-left: var(--line-thin) solid var(--ink); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 24px 24px 26px; background: var(--white); border-right: var(--line-thin) solid var(--ink); border-bottom: var(--line-thin) solid var(--ink); }
.tile .ico { margin-bottom: 8px; }
.tile h3 { margin: 0; font-size: 19px; line-height: 25px; font-weight: 520; text-wrap: balance; }
.tile p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-2); }
.tile .label { margin-bottom: -4px; }
.tile--wide p { font-size: 16px; line-height: 25px; }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1100px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tiles, .tiles--2, .tiles--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .tile { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 18px; }
  .tile .ico { width: 44px; height: 44px; margin: 0; grid-row: span 3; }
}
/* Home's "Why Develp": four tiles, two by two, beside the rack */
#why .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { #why .tiles { grid-template-columns: minmax(0, 1fr); } }

/* Assessment: the scope shown as the written report it ends in */
.report-sheet { position: relative; background: var(--white); border: var(--line-thin) solid var(--ink); padding: 28px 32px 30px; }
.report-sheet::before { content: ""; position: absolute; top: -1px; right: -1px; width: 30px; height: 30px; background: linear-gradient(to bottom left, var(--dv-surface, var(--ground-2)) 50%, transparent 50%); }
.report-sheet::after { content: ""; position: absolute; top: -1px; right: -1px; width: 30px; height: 30px; box-sizing: border-box; border-left: var(--line-thin) solid var(--ink); border-bottom: var(--line-thin) solid var(--ink); background: linear-gradient(to top right, var(--white) calc(50% - 0.5px), var(--ink) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.report-sheet__head { display: flex; align-items: center; gap: 14px; padding: 0 40px 18px 0; border-bottom: var(--line-thin) solid var(--ink); }
.report-sheet__head i { flex: none; width: 64px; height: 10px; background-image: var(--hatch-25); box-shadow: inset 0 0 0 1px var(--ink); }
.report-sheet ol { list-style: none; counter-reset: rs; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.report-sheet li { counter-increment: rs; display: grid; align-content: start; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0; border-bottom: var(--line-thin) solid var(--rule); }
.report-sheet li::before { content: counter(rs, decimal-leading-zero); grid-row: span 2; font-family: var(--font-mono); font-size: 12px; line-height: 23px; color: var(--graphite); }
.report-sheet li b { font-weight: 520; font-size: 17px; line-height: 23px; }
.report-sheet li p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-2); }
.report-sheet li.is-last { grid-column: 1 / -1; border-bottom: 0; }
@media (max-width: 760px) { .report-sheet { padding: 22px 20px 24px; } .report-sheet ol { grid-template-columns: minmax(0, 1fr); } }
.pair .ico { margin-bottom: 18px; }

/* ---- after the critic's review of the build (2026-10-22) ---- */
/* the icon's own ground changes with the card, so nothing flashes while the card turns */
.ico .bg { transition: fill .18s; }
@media (prefers-reduced-motion: reduce) { .ico .bg { transition: none; } }
/* tiles in a row share their rows: icons, titles and lines sit on the same lines across a row */
.tiles { grid-auto-rows: auto; }
.tile { grid-row: span 3; grid-template-rows: subgrid; row-gap: 12px; }
.tile:has(> .label) { grid-row: span 4; }
/* Home's "Why Develp" tiles stay open (icon, title and line on the page), so Home isn't three boxed grids in a row */
#why .tiles { border: 0; gap: 36px 40px; }
#why .tile { background: transparent; border: 0; padding: 0; }
#why .tile h3 { font-size: 20px; line-height: 26px; }
/* Assessment: the foot of the report says what arrives; "No access to keys or funds" stands with its drawing */
.report-sheet__foot { margin: 18px 0 0; padding-top: 16px; border-top: var(--line-thin) solid var(--ink); font-size: 16px; line-height: 25px; color: var(--ink); }
.noaccess { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 56px; align-items: center; }
.noaccess .lede { max-width: 32em; }
.noaccess__fig { display: grid; justify-items: center; }
.noaccess__fig .ico { width: 200px; height: 200px; }
@media (max-width: 760px) { .noaccess { grid-template-columns: minmax(0, 1fr); } .noaccess__fig { justify-items: start; } .noaccess__fig .ico { width: 140px; height: 140px; } }
/* Home's open Why tiles sit closer together on phones */
@media (max-width: 640px) { #why .tiles { gap: 22px; } #why .tile { grid-row: auto; grid-template-rows: none; } }

/* the hero's figure strip, tightened (the owner, 2026-10-23): each note is three or four words and sits beside its
   figure, so a column is two short lines */
.proof > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 20px 14px; }
.proof > div > .label { flex: 0 0 100%; }
/* a note that does not fit beside its figure moves below it whole */
.proof .note { white-space: nowrap; }

/* steps: numbered stations on a line that draws, each with a drawing (the owner's pick, 2026-10-23, option B) */
.steplist { counter-reset: step; list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; }
.steplist--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steplist::before { content: ""; position: absolute; top: 19px; left: 19px; right: calc((100% - 112px) / 5 - 19px); border-top: var(--line-heavy) solid var(--ink); transform-origin: left center; }
.steplist--3::before { right: calc((100% - 56px) / 3 - 19px); }
html.js .steplist[data-draw]::before { transition: transform 1.2s var(--ease-out); }
html.js .steplist[data-draw]:not(.is-drawn)::before { transform: scaleX(0); }
.steplist li { counter-increment: step; position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; }
.steplist li::before { content: counter(step, decimal-leading-zero); position: relative; z-index: 1; width: 38px; height: 38px; box-sizing: border-box; border: var(--line-medium) solid var(--ink); border-radius: 50%; background: var(--white); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink); margin-bottom: 14px; }
.steplist li:last-child::before { background: var(--ink); color: var(--white); }
.steplist .ico { width: 48px; height: 48px; margin: 2px 0 4px; }
.steplist b { font-weight: 520; font-size: 18px; line-height: 24px; }
.steplist p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-2); max-width: 18em; }
@media (max-width: 1100px) {
  .steplist, .steplist--3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steplist::before, .steplist--3::before { top: 19px; bottom: 0; left: 18px; right: auto; border-top: 0; border-left: var(--line-heavy) solid var(--ink); transform-origin: center top; }
  html.js .steplist[data-draw]:not(.is-drawn)::before { transform: scaleY(0); }
  .steplist li { grid-template-columns: 38px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding-bottom: 26px; }
  .steplist li::before { grid-row: span 3; margin: 0; }
  .steplist b { padding-top: 7px; }
  .steplist .ico { display: none; }
  /* the line stops at the last station */
  .steplist li:last-child { padding-bottom: 0; background: linear-gradient(var(--dv-surface, var(--ground)), var(--dv-surface, var(--ground))) no-repeat 17px 38px / 4px calc(100% - 38px); }
}
@media (prefers-reduced-motion: reduce) { html.js .steplist[data-draw]::before { transition: none; transform: none; } }

/* client pages: the need in one line, then each point to plan for (dashed), a drawn arrow, and Develp's answer (solid,
   with the hatched edge that marks Develp's part) - the owner's pick, 2026-10-23, option A; still a table for readers */
.fit { display: block; }
.fit__need { display: grid; gap: 10px; margin-bottom: 36px; }
.fit__need h2.label { margin: 0; font-size: 11px; font-weight: 400; }
.fit__need p { margin: 0; font-size: 26px; line-height: 34px; font-weight: 330; font-stretch: 102%; letter-spacing: -0.01em; color: var(--ink); max-width: 30em; text-wrap: balance; }
.pairs { display: block; width: 100%; }
.pairs thead, .pairs tbody { display: grid; gap: 12px; }
.pairs thead { margin-bottom: 10px; }
.pairs tr { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
.pairs th { text-align: left; padding: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.pairs th + th { grid-column: 3; }
.pairs td { position: relative; display: flex; align-items: center; min-width: 0; padding: 18px 22px; font-size: 17px; line-height: 25px; color: var(--graphite); border: var(--line-thin) dashed var(--rule-2); }
.pairs td + td { grid-column: 3; color: var(--ink); background: var(--white); border: var(--line-thin) solid var(--ink); padding-left: 36px; }
.pairs td + td::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background-image: var(--hatch-25); border-right: var(--line-thin) solid var(--ink); }
.pairs td:first-child::after { content: ""; position: absolute; right: -62px; top: 50%; width: 52px; height: 10px; margin-top: -5px; background: no-repeat center / 52px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='10' viewBox='0 0 52 10'%3E%3Cpath d='M0 5H50M45 1L50 5L45 9' fill='none' stroke='%230E0E0E' stroke-width='1.5'/%3E%3C/svg%3E"); }
@media (max-width: 760px) {
  .fit__need p { font-size: 21px; line-height: 29px; }
  .pairs tr { grid-template-columns: minmax(0, 1fr); }
  .pairs thead tr { row-gap: 4px; }
  .pairs th + th, .pairs td + td { grid-column: 1; }
  .pairs tbody { gap: 22px; }
  .pairs td + td { margin-top: 30px; }
  .pairs td:first-child::after { right: auto; left: 21px; top: 100%; width: 10px; height: 30px; margin: 0; background: no-repeat center / 10px 26px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='26' viewBox='0 0 10 26'%3E%3Cpath d='M5 0V24M1 19L5 24L9 19' fill='none' stroke='%230E0E0E' stroke-width='1.5'/%3E%3C/svg%3E"); }
}

/* the pair labels carry the look of their boxes, so they read right when the rows stack (critic, 2026-10-23) */
.pairs th::before { content: ""; display: inline-block; width: 18px; height: 10px; margin-right: 10px; vertical-align: -1px; box-sizing: border-box; border: var(--line-thin) dashed var(--rule-2); }
.pairs th + th::before { border: var(--line-thin) solid var(--ink); background-image: var(--hatch-25); }
/* the hero strip between 1001 and 1180 px: every note below its figure, so the row stays even */
@media (min-width: 1001px) and (max-width: 1180px) { .proof .note { flex-basis: 100%; } }

/* the Record chart leads with its point: a large 0 and what it counts (the owner, 2026-10-23) */
.panel-fig .rec-head { justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 6px; }
/* a plain zero: the mono face slashes its zero, which could read as a letter at this size */
.rec-head .figure-xl { font-family: var(--font-sans); font-weight: 330; font-size: clamp(64px, 8vw, 104px); line-height: .9; }
.rec-head__text { font-size: 19px; line-height: 27px; max-width: 40em; color: var(--ink); }
@media (max-width: 640px) { .rec-head__text { font-size: 17px; line-height: 25px; } }

/* ---- Home polish (the owner, 2026-10-23) ---- */
/* Home's steps: numbers only, no drawings ("too many icons on home page"); each step's words sit in a box that hangs
   from its station on a short connector. The other pages keep the drawings. */
.steplist--cards li { isolation: isolate; gap: 8px; }
.steplist--cards li::before { margin-bottom: 18px; }
.steplist--cards li::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 56px; bottom: 0; background: var(--white); border: var(--line-thin) solid var(--ink); }
.steplist--cards li { background: linear-gradient(var(--ink), var(--ink)) no-repeat 18px 38px / 2px 18px; }
.steplist--cards b { padding: 18px 20px 0; }
.steplist--cards p { padding: 0 20px 22px; max-width: none; }
.steplist--cards .ico { display: none; }
@media (max-width: 1100px) {
  .steplist--cards li { grid-template-columns: 38px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; padding-bottom: 20px; background: linear-gradient(var(--ink), var(--ink)) no-repeat 38px 18px / 18px 2px; }
  .steplist--cards li::before { margin: 0; }
  .steplist--cards li::after { left: 56px; top: 0; bottom: 20px; }
  .steplist--cards b { padding: 16px 20px 0 20px; }
  .steplist--cards p { padding: 0 20px 18px 20px; }
  .steplist--cards li:last-child { padding-bottom: 0; background: linear-gradient(var(--ink), var(--ink)) no-repeat 38px 18px / 18px 2px, linear-gradient(var(--dv-surface, var(--ground)), var(--dv-surface, var(--ground))) no-repeat 17px 38px / 4px calc(100% - 38px); }
  .steplist--cards li:last-child::after { bottom: 0; }
}

/* Home's "Why Develp": each point is one unit, its drawing beside its title and line, in a 2 by 2 grid divided by thin
   rules (the owner: the gap between drawings and words looked messy; isolate each point without more boxes) */
#why .tiles { gap: 0; border-top: var(--line-thin) solid var(--rule); }
#why .tile { grid-row: auto; grid-template-rows: auto 1fr; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-content: start; padding: 24px 24px 26px 0; border-bottom: var(--line-thin) solid var(--rule); }
#why .tile:nth-child(even) { padding-left: 24px; padding-right: 0; border-left: var(--line-thin) solid var(--rule); }
#why .tile .ico { width: 48px; height: 48px; margin: 0; grid-row: span 2; }
#why .tile h3 { font-size: 19px; line-height: 25px; }
@media (max-width: 760px) {
  #why .tile, #why .tile:nth-child(even) { padding: 20px 0; border-left: 0; }
}
@media (max-width: 640px) { #why .tiles { gap: 0; } #why .tile .ico { width: 44px; height: 44px; } }

/* ---- after the critic, Home polish (2026-10-23) ---- */
.tile .nw { white-space: nowrap; font-style: normal; }
/* beside the rack between 961 and 1100 px the four points stack as ruled rows, so titles never run three lines */
@media (min-width: 961px) and (max-width: 1100px) {
  #why .tiles { grid-template-columns: minmax(0, 1fr); }
  #why .tile:nth-child(even) { padding-left: 0; border-left: 0; }
}
/* Home's step boxes: titles share one row across the boxes, so a wrapped title doesn't push its line down */
@media (min-width: 1101px) {
  .steplist--cards { grid-template-rows: auto auto 1fr; }
  .steplist--cards li { grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; }
}
/* vertical, the boxes keep a readable width */
@media (max-width: 1100px) { .steplist--cards li { max-width: 720px; } }

/* ---- audit fixes (2026-10-23) ---- */
/* the keyboard focus ring shows on night bands too (it was ink on ink) */
.dv-night, .sec--night, .is-night { --focus: var(--ground); }
/* the skip link focuses main, which needs no ring of its own */
main:focus { outline: none; }
/* the consent message now sits after its label (ui.js), so screen readers don't read it as the box's name */
.check.is-bad + .check__err { display: flex; }
.check__err { margin-top: -10px; }
/* the closing band's mark waits hidden from the first paint until its motion starts (site.js adds .is-live), so it
   never shows whole and then snaps away, even when site.js arrives late */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html.js .closing .endcard__mark:not(.is-live) .s1, html.js .closing .endcard__mark:not(.is-live) .s2, html.js .closing .endcard__mark:not(.is-live) ~ .word { opacity: 0; }
}
@media print { .closing .endcard__mark .s1, .closing .endcard__mark .s2, .closing .endcard__mark ~ .word { opacity: 1 !important; } }

/* ---- audit fixes, visual and motion (2026-10-23) ---- */
/* the live strip: its space is held while it waits for its first answers; without scripts it stays out */
html.js [data-live-show][data-live-wait] { visibility: hidden; }
html:not(.js) [data-live-show] { display: none; }
/* the hero's drawing fades in on its first frame */
html.js canvas[data-hero] { opacity: 0; transition: opacity .7s var(--ease-fade); }
html.js canvas[data-hero].is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.js canvas[data-hero] { transition: none; } }
/* arrow links are as wide as their words (a grid stretched them across the column) */
.stack > .dv-arrowlink { justify-self: start; }
/* hover states you can see */
.dv-header__link:hover, .nav-drop__btn:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.dv-night .dv-button:not(.dv-button--primary):hover, .sec--night .dv-button:not(.dv-button--primary):hover { background: rgba(235, 237, 237, .14); }
.faq summary:hover > span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* no lone word on a lede's last line */
.lede { text-wrap: pretty; }

/* final critic round (2026-10-23) */
.sec-head > .dv-arrowlink { justify-self: start; }
.check__err { margin-top: -20px; }

/* ---- links that read as links (the owner, 2026-10-25: the arrow links were "not easily identifiable, not distinct from
   the rest of the text"; of three styles tried on the local preview, the owner picked B on 2026-10-26, an outline button
   with the arrow inside, at the site's secondary-button size, and the large size beside a large button) ---- */
.dv-arrowlink { gap: 12px; padding: 12px 19px; border: var(--line-thin) solid currentColor; line-height: 1.3; transition: background .18s var(--ease-fade); }
.dv-arrowlink:hover { background: var(--paper); }
.dv-night .dv-arrowlink:hover, .sec--night .dv-arrowlink:hover, .hero.is-night .dv-arrowlink:hover { background: rgba(235, 237, 237, .14); }
.dv-button--large ~ .dv-arrowlink { padding: 14px 21px; font-size: 16px; } /* the border makes up the difference: as tall as the large button beside it */
@media (hover: none) {
  .dv-arrowlink:active { background: var(--paper); }
  .dv-night .dv-arrowlink:active, .sec--night .dv-arrowlink:active, .hero.is-night .dv-arrowlink:active { background: rgba(235, 237, 237, .14); }
  .dv-arrowlink:active path { transform: translateX(6px); }
}
/* the Home hero's is solid night, so the dot grid does not show through it (the owner, 2026-10-26: "because it's
   transparent - doesnt look good") */
.hero.is-night .dv-arrowlink { background: var(--night); }
.hero.is-night .dv-arrowlink:hover { background: #262626; }
@media (hover: none) { .hero.is-night .dv-arrowlink:active { background: #262626; } }
/* a light button on night darkens on hover, so the change shows (white on night barely did; the owner, 2026-10-26, on
   the hero's "Talk to our team": "doesnt react to hovering") */
.dv-night .dv-button--primary:hover, .sec--night .dv-button--primary:hover { background: var(--grid); }
@media (hover: none) { .dv-night .dv-button--primary:active, .sec--night .dv-button--primary:active { background: var(--grid); } }

/* the Insights band: the latest three, then a button to the rest, as on the hub (the owner, 2026-10-25) */
.ins-more { display: flex; justify-content: center; margin-top: 40px; }
.ins-more .dv-button svg { display: block; overflow: visible; }
.ins-more .dv-button path { stroke: currentColor; stroke-width: 1.2; fill: none; transition: transform .3s var(--ease-out); }
.ins-more .dv-button:hover path { transform: translateX(6px); }
/* a cover file beside an article keeps 16:9 (its width and height attributes stretched it to the picture's height) */
img.ins-cover { width: 100%; height: auto; object-fit: cover; }
/* a band of the latest three fills its row, three across, one under another on narrow screens */
[data-insights-band] .ins-grid, .ins-related .ins-grid { grid-template-columns: repeat(auto-fit, calc((100% - 48px) / 3)); justify-content: center; }
@media (max-width: 760px) { [data-insights-band] .ins-grid, .ins-related .ins-grid { grid-template-columns: minmax(0, 1fr); } }
/* the featured card's cover fills its half, however tall the words beside it run */
@media (min-width: 1251px) { .ins-card--lg img.ins-cover { height: 100%; } }
@media (max-width: 1250px) { .ins-card--lg { grid-template-columns: minmax(0, 1fr); } .ins-card--lg .ins-cover { border-right: 0; border-bottom: var(--line-thin) solid var(--ink); } }

/* ---- reading an Insights article (the owner, 2026-10-26: "make the backgrounds of the actual articles white - same
   white that's used in the website - easy to read", after a look at how big publications set theirs). Measured on 26 Oct
   at 1440 px: The Guardian (white, 17/23.8 px, #121212, a 620 px column, about 71 characters a line), Business Insider
   (white, 18/28.8, #0a0a0a, 614 px, about 68) and Forbes (#fcfcfc, 18/30, #333, 704 px, about 70); the FT keeps its
   tinted paper. So: the article sits on the site's white with no dot grid, the text in a column of about 70 characters (580 px at 18 px),
   the body a shade softer than the headings, and more air between paragraphs ---- */
.ins-article { background: var(--paper); --dv-surface: var(--paper); }
.ins-article .ins-head .standfirst { max-width: 36em; }
.ins-article .prose { max-width: 580px; color: var(--ink-2); gap: 0; } /* spacing from the margins below only (the grid gap doubled it) */
.ins-article .prose > * + * { margin-top: 24px; }
.ins-article .prose h2 { color: var(--ink); margin-top: 56px; }
.ins-article .prose h3 { color: var(--ink); margin-top: 40px; }
.ins-article .prose h2 + *, .ins-article .prose h3 + * { margin-top: 14px; }
.ins-article .prose strong { color: var(--ink); font-weight: 520; }
.ins-article .prose a { color: var(--ink); }
.ins-article .prose .ins-figure { margin: 40px 0 16px; } /* plus the next paragraph's 24 px: 40 px each side */
.ins-article .prose > .tbl-source { margin-top: 10px; }
/* on the article's white, the outline button's hover is the ground (paper would not show) */
.ins-article .dv-arrowlink:hover { background: var(--ground); }
@media (hover: none) { .ins-article .dv-arrowlink:active { background: var(--ground); } }
/* the hairline between the article and the band under it (the band is the page's first <section>, which loses its top line) */
.ins-article + .sec { border-top: var(--line-thin) solid var(--ink); }
/* a list of link buttons (the 404 page) lines up as one column */
li > .dv-arrowlink { min-width: 240px; justify-content: space-between; }
/* a call to action inside an article: the outline button, not an underlined link */
.prose .prose-cta { margin-top: 28px; }
.prose a.dv-arrowlink { text-decoration: none; }

/* the closing band's second button: solid night, so the dot grid does not run through it, and as tall as the large
   button beside it (the owner, 2026-10-26: "make the closing band button solid too") */
.closing .dv-button:not(.dv-button--primary) { background: var(--night); padding: 14px 21px; font-size: 16px; }
.closing .dv-button:not(.dv-button--primary):hover { background: #262626; }
@media (hover: none) { .closing .dv-button:not(.dv-button--primary):active { background: #262626; } }
/* the steps' line travels at an even pace past each step, in 2.8 s (the owner, 2026-10-26: "make this
   animation of the moving line slower ... it's too fast right now"; it ran 1.2 s on an ease-out, most of it at once; 3.2 s, then "make it 2.8 secs") */
@media (prefers-reduced-motion: no-preference) { html.js .steplist[data-draw]::before { transition: transform 2.8s linear; } }

/* ---- article text in Source Serif 4 (the owner, 2026-10-26, of three serifs tried beside the brand sans: "I like A -
   source serif - but this is good for the articles. let's not use it for the rest of documents"). The article's words
   only: headings, labels, captions, the contents and the buttons stay in the brand's fonts ---- */
.ins-article .prose :is(p, li, blockquote, dd), .ins-article .faq details p { font-family: var(--font-serif); font-size: 18px; line-height: 30px; font-optical-sizing: auto; }
.ins-article .prose p.prose-cta { font-family: var(--font-sans); }
.ins-article .prose .tbl-source { font-family: var(--font-mono); font-size: 12px; }

/* Home's Insights band shows on phones too (the owner, 2026-10-26: "I want the insights section appear on phones too",
   reversing the 22 Oct cut); on phones the cards in a band keep the cover, the category, the date and the title, and drop
   the summary line, as the audience cards do */
@media (max-width: 640px) { [data-insights-band] .ins-card__text, .ins-related .ins-card__text { display: none; } }
/* and only the latest one (the owner, 2026-10-26: "on phones, show only one insight instead of 3") */
@media (max-width: 640px) { [data-insights-band] .ins-grid > :nth-child(n+2), .ins-related .ins-grid > :nth-child(n+2) { display: none; } }

/* the proof strip without the ETH under operation (the owner, 2026-10-26: "eth also changes, maybe we dont mention at all
   for now"): three across, down to one column on phones */
.proof--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) and (min-width: 521px) { .proof--3 > div:nth-child(3) { border-left: var(--line-thin) solid var(--rule); } .proof--3 > div:nth-child(n+3) { border-top: 0; } }
@media (max-width: 520px) { .proof--3 { grid-template-columns: minmax(0, 1fr); } .proof--3 > div + div { border-left: 0; border-top: var(--line-thin) solid var(--rule); } }

/* ---- tables and captions in articles (the owner, 2026-10-26, on the routes table: "I dont like how this much text is
   stacked and the table probably should have better layout? the above the table font is sitting weird there - looks
   completely different than the rest of the article") ----
   - A table may use the whole column beside the contents, not only the 580 px of text: from 960 px wide the column is the
     layout's width less the contents (220 px) and the gap (48 px); below that, the full width up to 812 px. On a phone each
     row stays a small card. Words no longer break inside (see .prose td).
   - A table whose first header is empty has row labels (build.mjs labelTables marks it t-rows): the first cell of each row
     is the label, in the brand sans at its own weight, wide enough for its words.
   - A visual's caption is set in the article's serif, smaller and quieter than the text, so it reads as part of the
     article; source lines stay small labels. */
.ins-layout { container-type: inline-size; container-name: inslayout; }
@container inslayout (min-width: 641px) {
  .ins-article .prose table { width: min(100cqi, 812px); max-width: none; }
}
@media (min-width: 961px) {
  @container inslayout (min-width: 641px) { .ins-article .prose table { width: min(calc(100cqi - 268px), 812px); } }
}
.ins-article .prose table { font-size: 15px; line-height: 22px; }
.ins-article .prose table.t-rows td:first-child { font-weight: 560; color: var(--ink); width: 22%; min-width: 9.5em; }
.ins-article .prose table.t-rows th:first-child { width: 22%; }
@media (max-width: 640px) {
  .ins-article .prose table.t-rows td:first-child { width: 100%; min-width: 0; font-size: 15.5px; padding-bottom: 4px; }
  .ins-article .prose table.t-rows td:first-child::before { display: none; }
}
.ins-article .prose .ins-figure figcaption { font-family: var(--font-serif); font-size: 15px; line-height: 24px; color: var(--graphite); margin-top: 12px; font-optical-sizing: auto; }