/* Advisor Innovation Lab · shared site styles, lifted from the homepage build (round 14) */
:root {
  --ground: #FBFAF8; --band: #F3F0EA; --line: #E6E2DB;
  --ink: #1F1C18; --ink-soft: #4E4840; --ink-faint: #8A8377;
  --accent: #A66A10; --accent-soft: #F5EBDA; --btn: #1F1C18; --btn-text: #FBFAF8;
  --dot-neutral: #8E8575;
  --c-transitions: #B0690A; --c-relationships: #A23A5C; --c-money: #2F6B47; --c-identity: #5B3F8C; --c-goals: #255589;
  --c-transitions-deep: #8A560B; --c-relationships-deep: #83324B; --c-money-deep: #31573D; --c-identity-deep: #4B376E; --c-goals-deep: #24446A;
  --c-dev-a: #1E8A86; --c-dev-b: #7E9A22; --c-dev-c: #C4483A; --c-dev-d: #C99A12;
  --petal-1: #D9531E; --petal-2: #C68F0E; --petal-3: #7C9F1C; --petal-4: #2A9646; --petal-5: #178F8B; --petal-6: #1E7FC4; --petal-7: #6E3AAE;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #171512; --band: #1E1B17; --line: #33302A; --ink: #EDE8DF; --ink-soft: #C2BAAC; --ink-faint: #8A8377;
    --accent: #D99C43; --accent-soft: #35291A; --btn: #EDE8DF; --btn-text: #171512; --dot-neutral: #6A6357;
    --c-transitions: #D99C43; --c-relationships: #D98AA3; --c-money: #7FB893; --c-identity: #A995D6; --c-goals: #7FA3D0;
    --c-transitions-deep: #E8B268; --c-relationships-deep: #E6A3B8; --c-money-deep: #98C9A9; --c-identity-deep: #BBAAE2; --c-goals-deep: #98B7DD;
    --c-dev-a: #6FC9C4; --c-dev-b: #B9CF6A; --c-dev-c: #E39A90; --c-dev-d: #E6C55A;
    --petal-1: #F49A6A; --petal-2: #F0C651; --petal-3: #B7D25A; --petal-4: #6FCB8A; --petal-5: #5FCFC9; --petal-6: #74B6EC; --petal-7: #B594E4;
  }
}
:root[data-theme="dark"] {
  --ground: #171512; --band: #1E1B17; --line: #33302A; --ink: #EDE8DF; --ink-soft: #C2BAAC; --ink-faint: #8A8377;
  --accent: #D99C43; --accent-soft: #35291A; --btn: #EDE8DF; --btn-text: #171512; --dot-neutral: #6A6357;
  --c-transitions: #D99C43; --c-relationships: #D98AA3; --c-money: #7FB893; --c-identity: #A995D6; --c-goals: #7FA3D0;
  --c-transitions-deep: #E8B268; --c-relationships-deep: #E6A3B8; --c-money-deep: #98C9A9; --c-identity-deep: #BBAAE2; --c-goals-deep: #98B7DD;
    --c-dev-a: #6FC9C4; --c-dev-b: #B9CF6A; --c-dev-c: #E39A90; --c-dev-d: #E6C55A;
    --petal-1: #F49A6A; --petal-2: #F0C651; --petal-3: #B7D25A; --petal-4: #6FCB8A; --petal-5: #5FCFC9; --petal-6: #74B6EC; --petal-7: #B594E4;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Public Sans", "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 64px; }
@media (max-width: 800px) { .wrap { padding: 0 22px; } }

.eyebrow { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; }
.display { font-family: "Newsreader", Georgia, serif; font-weight: 340; font-optical-sizing: auto; font-size: clamp(42px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; max-width: 20ch; }
.display i, .h2 i, .h3 i { font-style: italic; font-weight: inherit; }
.h2 { font-family: "Newsreader", Georgia, serif; font-weight: 380; font-optical-sizing: auto; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.06; letter-spacing: -0.016em; margin: 0 0 20px; text-wrap: balance; }
.h3 { font-family: "Newsreader", Georgia, serif; font-weight: 420; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
.lede { font-size: 17.5px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; margin: 0 0 16px; }
p { max-width: 56ch; margin: 0 0 14px; color: var(--ink-soft); }
p b, .lede b, li b { color: var(--ink); font-weight: 600; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--btn); color: var(--btn-text); font-weight: 500; font-size: 15px; border-radius: 999px; padding: 13px 22px; border: 1px solid var(--btn); cursor: pointer; transition: transform .18s ease, opacity .18s ease; font-family: inherit; }
.btn:hover { transform: translateY(-1px); opacity: .92; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); }

/* A sent form keeps its button on the page, relabelled "Sent" and disabled, so
   the button has to stop looking pressable: no lift, no pointer, and enough fade
   to read as spent. Without this it hovers exactly like a live button, which
   reads as though the message did not go. Also covers the "Sending…" moment. */
.btn:disabled { cursor: default; opacity: .45; }
.btn:disabled:hover { transform: none; opacity: .45; }
.btn.ghost:disabled:hover { border-color: var(--line); }
.invite input:disabled, .invite textarea:disabled, .invite select:disabled { opacity: .55; cursor: default; }

/* The note a form ends on. Once the fields are spent this is the only live thing
   left, so it has to read as the reply to what the visitor just did rather than
   as more body copy. A rule on the leading edge carries the meaning and the type
   stays the site's. Tints are mixed from the page ground, so both themes follow
   without new tokens; the plain background before each mix is the fallback.
   Nothing here sets display, or it would defeat the hidden attribute the script
   toggles. */
.invite .sent, .invite .err {
  margin: 20px 0 0; padding: 14px 16px; max-width: 54ch;
  border-left: 2px solid var(--line); border-radius: 0 4px 4px 0;
  background: var(--band); color: var(--ink-soft);
  font-size: 15px; line-height: 1.55;
}
.invite .sent { border-left-color: var(--c-money); background: color-mix(in srgb, var(--c-money) 9%, var(--ground)); }
.invite .sent b { color: var(--c-money-deep); font-weight: 600; }
.invite .err { border-left-color: var(--c-dev-c); background: color-mix(in srgb, var(--c-dev-c) 9%, var(--ground)); }
.invite .err a { color: var(--ink); }
.invite .sent[hidden], .invite .err[hidden] { display: none; }
.linkish { font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .18s; }
.linkish:hover { border-color: var(--ink); }
.linkish.accent { border-color: var(--accent); }
.ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.tag { display: inline-block; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.tag.accent { color: var(--accent); }
.mono { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }

nav.top { position: relative; z-index: 5; }
nav.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.wordmark { font-family: "Public Sans", "Segoe UI", system-ui, sans-serif; font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.wordmark b { font-weight: 700; color: var(--ink); }
.navlinks { display: flex; gap: 30px; align-items: center; font-size: 15px; color: var(--ink-soft); }
.navlinks a:hover, .navlinks a.here { color: var(--ink); }
.navlinks a.here { border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.navlinks .btn { padding: 9px 16px; font-size: 14px; }
@media (max-width: 900px) { .navlinks > a:not(.btn) { display: none; } }
/* small screens: the header CTA was being crushed to 88px and wrapping to four
   lines, pushing the row past the viewport. Smaller button variant plus a tighter
   wordmark keeps the row on one line with no horizontal overflow. */
@media (max-width: 900px) { .navlinks .btn { padding: 8px 14px; font-size: 13px; } }
@media (max-width: 600px) {
  nav.top .wrap { gap: 12px; }
  .brand { gap: 8px; }
  .brand .mark { width: 28px; height: 28px; }
  .wordmark { font-size: 11px; letter-spacing: 0.05em; }
  .navlinks .btn { padding: 7px 12px; font-size: 12px; line-height: 1.3; }
}

/* page layout: hero, then blocks that alternate text and figure */
.page { position: relative; z-index: 1; }
/* .hero and .writing-wrap sit on the same element as .wrap and used a padding
   shorthand, which zeroed the horizontal padding .wrap had set, so on 27 of 30
   pages the text ran to the screen edge. Vertical padding only, so .wrap keeps
   its side padding. */
.hero { padding-top: 64px; padding-bottom: 40px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; min-height: calc(100vh - 78px); }
.hero.solo { grid-template-columns: 1fr; min-height: 0; padding-top: 80px; padding-bottom: 30px; }
.hero .display { margin-bottom: 26px; }
.block { padding: 96px 0; }
.block.tight { padding: 56px 0; }
.block.rule { border-top: 1px solid var(--line); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.two.text-right > .text { order: 2; }
.two.text-right > .figwrap { order: 1; }
.two.top { align-items: start; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
@media (max-width: 900px) { .hero, .two, .three, .four, .five { grid-template-columns: 1fr; } .two.text-right > .text { order: 1; } .two.text-right > .figwrap { order: 2; } .hero { min-height: 0; } }
.text .h2 { margin-bottom: 18px; }
.text p:last-child { margin-bottom: 0; }
.figwrap { position: relative; }
canvas.fig { display: block; width: 100%; height: auto; }
.figcap { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 10px 0 0; text-align: center; }

.q { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.3; color: var(--ink); margin: 0 0 12px; text-wrap: pretty; max-width: 30ch; }
.attr { font-size: 14px; color: var(--ink-faint); margin: 0 0 22px; }
.stat b { display: block; font-family: "Spline Sans Mono", ui-monospace, monospace; font-weight: 500; font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 6px; white-space: nowrap; }
.stat b.tint-amber { color: var(--accent); } .stat b.tint-blue { color: var(--c-goals); } .stat b.tint-green { color: var(--c-money); } .stat b.tint-violet { color: var(--c-identity); }
.stat span { font-size: 15.5px; color: var(--ink-soft); max-width: 34ch; display: block; }

.list { list-style: none; padding: 0; margin: 14px 0 0; }
.list li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 16.5px; max-width: 62ch; }
.list li:last-child { border-bottom: 1px solid var(--line); }
.list li b { color: var(--ink); font-weight: 600; }
.steps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 22px; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.steps .n { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.12em; color: var(--accent); padding-top: 6px; }
.steps .h3 { margin-bottom: 4px; }
.steps p { margin: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: 1px; }
.ital { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 17px; color: var(--ink); max-width: 56ch; margin: 6px 0 0; }
.tiers { display: grid; gap: 36px; margin-top: 8px; }
.tiers .tier .tag { margin-bottom: 10px; }
.tiers .tier .tag.ready { color: var(--c-money); }
.tiers .tier .tag.progress { color: var(--ink-faint); }
details { border-top: 1px solid var(--line); padding: 12px 0; max-width: 70ch; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-family: "Newsreader", Georgia, serif; font-size: 22px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 6px 0; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 18px; }
details[open] summary::after { content: "–"; }
details p { margin-top: 8px; }
.entry { border-top: 1px solid var(--line); padding: 20px 0; display: grid; grid-template-columns: 220px 1fr; gap: 28px; }
.entry:last-child { border-bottom: 1px solid var(--line); }
.entry .who { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.6; }
.entry .h3 { font-size: 21px; }
.entry p { font-size: 15.5px; }
.entry .note { font-size: 14px; color: var(--ink-faint); }
@media (max-width: 800px) { .entry { grid-template-columns: 1fr; gap: 6px; } }
.writing { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 48px; }
@media (max-width: 800px) { .writing { grid-template-columns: 1fr; } }
.writing .piece { padding: 14px 0; border-top: 1px solid var(--line); }
.writing .piece .h3 { font-size: 20px; margin-bottom: 4px; }
.writing .piece p { font-size: 15px; margin: 0; }
form.invite { max-width: 560px; }
form.invite label { display: block; margin: 18px 0 6px; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
form.invite input[type="text"], form.invite input[type="email"], form.invite textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; }
form.invite input:focus, form.invite textarea:focus { border-bottom-color: var(--ink); outline: none; }
form.invite .checks label { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--ink-soft); display: flex; gap: 10px; align-items: center; margin: 8px 0; }
form.invite .hint { font-size: 14px; color: var(--ink-faint); margin: 4px 0 0; }
form.invite .btn { margin-top: 26px; }
.figs { display: flex; gap: 96px; justify-content: center; align-items: center; }
.figs figure { margin: 0; text-align: center; }
.figs img { width: 250px; height: 250px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 14px; -webkit-mask-image: radial-gradient(circle at center, #000 62%, transparent 72%); mask-image: radial-gradient(circle at center, #000 62%, transparent 72%); }
.figs figcaption { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.figs figcaption span { display: block; color: var(--accent); margin-top: 4px; }
.fine { font-size: 14px; color: var(--ink-faint); margin-top: 12px; }
.pull { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; color: var(--ink); max-width: 30ch; margin: 0 0 10px; }

footer { position: relative; z-index: 1; background: var(--band); padding: 64px 0 56px; border-top: 1px solid var(--line); margin-top: 40px; }
.fcols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
@media (max-width: 800px) { .fcols { grid-template-columns: 1fr 1fr; } }
.fcols h4 { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; font-weight: 500; }
.fcols a { display: block; font-size: 15px; color: var(--ink-soft); margin-bottom: 8px; }
.fcols a.brand { display: inline-flex; align-items: center; margin-bottom: 0; }
.disc { font-size: 13.5px; color: var(--ink-faint); max-width: 70ch; }
.signoff { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12px; color: var(--ink-faint); margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* document mocks: a brief drawn in type and bars, not dots */
.docmock { background: var(--ground); border: 1px solid var(--line); border-radius: 3px; padding: 26px 28px; box-shadow: 0 18px 40px -30px rgba(0,0,0,.35); position: relative; max-width: 440px; }
.docmock.stack::before, .docmock.stack::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--ground); z-index: -1; }
.docmock.stack::before { transform: translate(8px, 8px); } .docmock.stack::after { transform: translate(16px, 16px); opacity: .6; }
.docmock .dm-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; gap: 12px; }
.docmock .dm-title { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.docmock .dm-meta { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.docmock .dm-sec { display: grid; grid-template-columns: 132px 1fr; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--line); align-items: start; }
.docmock .dm-sec:first-of-type { border-top: 0; }
.docmock .dm-sec .dm-k { font-family: "Newsreader", Georgia, serif; font-size: 15px; line-height: 1.25; color: var(--ink); }
.docmock .dm-sec .dm-k i { display: block; font-style: normal; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; color: var(--ink-faint); margin-top: 3px; }
.docmock .bars { display: grid; gap: 5px; padding-top: 4px; }
.docmock .bars i { display: block; height: 5px; border-radius: 3px; background: var(--line); }
.docmock .bars i.w1 { width: 92%; } .docmock .bars i.w2 { width: 78%; } .docmock .bars i.w3 { width: 60%; } .docmock .bars i.w4 { width: 85%; }
.docmock .bars i.hi { background: var(--accent); opacity: .55; }
.docmock .dm-note { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .06em; color: var(--ink-faint); margin: 12px 0 0; }
.docs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 800px) { .docs2 { grid-template-columns: 1fr; } }
.docs2 .card { display: grid; gap: 16px; }
.docs2 .facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14.5px; margin: 0; }
.docs2 .facts dt { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.docs2 .facts dd { margin: 0; }
/* the seven capabilities, one open at a time */
.seven { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
@media (max-width: 800px) { .seven { grid-template-columns: 1fr; } }
.seven .menu { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.seven .menu button { all: unset; cursor: pointer; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; padding: 11px 12px; border-radius: 4px; border-left: 2px solid transparent; font-family: "Newsreader", Georgia, serif; font-size: 19px; line-height: 1.2; color: var(--ink-soft); }
.seven .menu button .n { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; color: var(--ink-faint); }
.seven .menu button:hover { color: var(--ink); background: var(--accent-soft); }
.seven .menu button[aria-selected="true"] { color: var(--ink); border-left-color: var(--accent); background: var(--accent-soft); }
.seven .menu button[aria-selected="true"] .n { color: var(--accent); }
.seven .menu button:focus-visible { outline: 2px solid var(--accent); }
.seven .panel { min-height: 240px; }
.seven .panel .h3 { margin-bottom: 8px; }
.seven .panel .ital { border-left: 2px solid var(--line); padding-left: 14px; margin-top: 16px; }
/* the nine moments and the trust strip */
.moments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px 22px; margin-top: 14px; }
@media (max-width: 900px) { .moments { grid-template-columns: repeat(2, 1fr); } }
.moments .m { border-top: 1px solid var(--line); padding-top: 12px; }
.moments .m .tag { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.moments .m p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.strip4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 18px; }
@media (max-width: 900px) { .strip4 { grid-template-columns: repeat(2, 1fr); } }
.strip4 div { border-top: 1px solid var(--line); padding-top: 12px; }
.strip4 .tag { color: var(--accent); }
.strip4 p { margin: 0; font-size: 15px; }

/* capability colours, one petal each */
.seven .menu button { --cap: var(--accent); }
.seven .menu button .n { color: var(--cap); opacity: .75; }
.seven .menu button:hover { background: color-mix(in srgb, var(--cap) 10%, transparent); }
.seven .menu button[aria-selected="true"] { border-left-color: var(--cap); background: color-mix(in srgb, var(--cap) 12%, transparent); }
.seven .menu button[aria-selected="true"] .n { opacity: 1; }
.seven .panel .cap-body { --cap: var(--accent); }
.seven .panel .cap-body .h3 { color: var(--cap); }
.seven .panel .cap-body .ital { border-left-color: var(--cap); }
.stranger { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 800px) { .stranger { grid-template-columns: 1fr; } }

.docmock .dm-title { display: inline-flex; align-items: center; gap: 8px; }
.mark.mini { width: 16px; height: 16px; flex: none; }
.docmock.dive .bars i.hi { background: var(--c-goals); opacity: .6; }
.docmock.dive .dm-title { color: var(--c-goals); }
.bothdocs { border-top: 1px solid var(--line); padding-top: 34px; }
.bothdocs .quotecol { border-left: 1px solid var(--line); padding-left: 40px; }
.bothdocs .quotecol .pull { margin-top: 0; }
@media (max-width: 800px) { .bothdocs .quotecol { border-left: 0; padding-left: 0; } }

/* r19 */
/* facts card: the offer in numbers */
.factcard { border: 1px solid var(--line); border-radius: 4px; padding: 26px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; background: var(--ground); }
.factcard div { display: grid; gap: 4px; }
.factcard b { font-family: "Spline Sans Mono", ui-monospace, monospace; font-weight: 500; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.factcard span { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.factcard .wide { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; }
.factcard .wide b { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 24px; letter-spacing: 0; color: var(--accent); }
/* two doors */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line); padding-top: 26px; }
@media (max-width: 800px) { .doors { grid-template-columns: 1fr; } }
.doors .door + .door { border-left: 1px solid var(--line); padding-left: 48px; }
@media (max-width: 800px) { .doors .door + .door { border-left: 0; padding-left: 0; margin-top: 30px; } }
.doors .h3 { margin-bottom: 18px; }
.doors ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.doors li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start; }
.doors li .dot { margin-top: 8px; }
.doors li b { display: block; font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: 20px; line-height: 1.2; margin-bottom: 2px; }
.doors li span { color: var(--ink-soft); font-size: 15px; }
.doors .door.no .dot { background: var(--dot-neutral); }
/* the exchange, two lists with a rule */
.exchange2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
@media (max-width: 800px) { .exchange2 { grid-template-columns: 1fr; } }
.exchange2 > div + div { border-left: 1px solid var(--line); padding-left: 48px; }
@media (max-width: 800px) { .exchange2 > div + div { border-left: 0; padding-left: 0; margin-top: 24px; } }
.money { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; padding: 16px 20px; max-width: 66ch; margin-top: 30px; }
.money p { margin: 0; }
/* checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.checklist li i { width: 16px; height: 16px; border: 1.5px solid var(--ink-soft); border-radius: 3px; margin-top: 5px; }
.checklist li.no { color: var(--ink-faint); }
.checklist li.no i { border-color: var(--line); background: repeating-linear-gradient(135deg, transparent 0 3px, var(--line) 3px 4px); }
.checklist li.no b { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-relationships); display: block; margin-top: 2px; }
/* stat wall */
.statwall { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; margin-top: 30px; }
@media (max-width: 800px) { .statwall { grid-template-columns: 1fr; } }
.statwall .force { display: block; border-top: 1px solid var(--line); padding-top: 18px; }
.statwall .num { font-family: "Spline Sans Mono", ui-monospace, monospace; font-weight: 500; font-size: clamp(44px, 5vw, 68px); line-height: 1; letter-spacing: -.03em; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.statwall .num.word { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -.01em; }
.statwall .num small { display: block; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; font-style: normal; }
.statwall .h3 { font-size: clamp(22px, 2vw, 27px); margin-bottom: 8px; }
.pullline { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.2; letter-spacing: -.015em; max-width: 30ch; margin: 44px 0 0; text-wrap: balance; }
.pullline b { font-weight: 500; }
/* ledger with status chips */
.ledger { display: grid; margin-top: 10px; }
.ledger .row { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); align-items: start; }
@media (max-width: 800px) { .ledger .row { grid-template-columns: 1fr; gap: 6px; } }
.ledger .row p { margin: 0; }
.chip { display: inline-block; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; margin-top: 3px; }
.chip.ok { background: color-mix(in srgb, var(--c-money) 14%, transparent); color: var(--c-money); }
.chip.soon { background: color-mix(in srgb, var(--c-goals) 14%, transparent); color: var(--c-goals); }
.chip.later { background: var(--line); color: var(--ink-soft); }
.chip.no { background: color-mix(in srgb, var(--c-relationships) 14%, transparent); color: var(--c-relationships); }
.chip.ind { background: color-mix(in srgb, var(--c-money) 14%, transparent); color: var(--c-money); }
.chip.peer { background: color-mix(in srgb, var(--c-identity) 14%, transparent); color: var(--c-identity); }
.chip.vendor { background: var(--accent-soft); color: var(--accent); }
.chip.pro { background: color-mix(in srgb, var(--c-goals) 14%, transparent); color: var(--c-goals); }
.chip.aside { background: color-mix(in srgb, var(--c-relationships) 14%, transparent); color: var(--c-relationships); }
/* status table */
.statustable { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.statustable th { text-align: left; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; padding: 0 12px 10px 0; border-bottom: 1px solid var(--ink); }
.statustable td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.statustable td:last-child { width: 200px; white-space: nowrap; }
.tablewrap { overflow-x: auto; }
/* result card */
.result { border: 1px solid var(--line); border-radius: 4px; padding: 18px 22px; display: grid; gap: 12px; background: var(--ground); }
.result .r { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; border-top: 1px dashed var(--line); padding-top: 10px; }
.result .r:first-of-type { border-top: 0; padding-top: 0; }
.result .r span { font-size: 14.5px; color: var(--ink-soft); }
.result .r b { font-family: "Spline Sans Mono", ui-monospace, monospace; font-weight: 500; font-size: 26px; letter-spacing: -.02em; color: var(--c-money); }
.result .cap { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.steps.withcard { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .steps.withcard { grid-template-columns: 1fr; } }
/* tiers inside a document mock */
.docmock .dm-tier { display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--line); align-items: start; }
.docmock .dm-tier .t { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.docmock .dm-tier.k .t { color: var(--c-money); } .docmock .dm-tier.s .t { color: var(--c-goals); } .docmock .dm-tier.w .t { color: var(--accent); }
.docmock .dm-tier.k .bars i { background: color-mix(in srgb, var(--c-money) 55%, var(--line)); }
.docmock .dm-tier.s .bars i { background: color-mix(in srgb, var(--c-goals) 45%, var(--line)); }
.docmock .dm-tier.w .bars i { background: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.docmock .dm-disc { font-family: "Public Sans", sans-serif; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); border: 1px solid var(--line); padding: 10px 12px; border-radius: 3px; margin: 0 0 14px; }
.docmock .dm-foot { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
/* founders */
.founders-photo { margin: 36px 0 40px; }
.founders-photo img { width: 100%; height: auto; border-radius: 4px; display: block; }
.founders-photo figcaption { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; }
.founder .head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.founder .head img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.founder .head .h3 { margin: 0 0 2px; }
.founder .head .role { margin: 0; }
.beliefs.plain div { padding: 16px 0; }
.belief5 { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; padding: 18px 22px; margin-top: 34px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
@media (max-width: 800px) { .belief5 { grid-template-columns: 1fr; } }
.belief5 p { margin: 0; }
/* the show */
.show { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
@media (max-width: 800px) { .show { grid-template-columns: 1fr; } }
.show img { width: 100%; height: auto; border-radius: 6px; display: block; }
.show .eps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.show .eps li { border-top: 1px solid var(--line); padding: 10px 0; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline; }
.show .eps li span { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; color: var(--accent); }
.show .eps li a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.show .links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.labstrip { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center; margin-top: 26px; }
.labstrip img { width: 100%; height: auto; border-radius: 6px; display: block; }
/* research */
.obs.lead { grid-template-columns: 1fr 1fr; }
.obs.lead .figwrap { margin-top: 18px; }
.obs.lead .figcap { margin-top: 6px; }
.compact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 8px; }
@media (max-width: 900px) { .compact { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .compact { grid-template-columns: 1fr; } }
.compact .c { border-top: 1px solid var(--line); padding-top: 14px; }
.compact .c .h3 { font-size: 21px; margin-bottom: 8px; }
.compact .c p { font-size: 14.5px; margin: 0 0 8px; }
.compact .c .pieces { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.6; }
.entry .who .chip { display: inline-block; margin-top: 8px; }
.series ol.parts { list-style: none; margin: 0; padding: 0; counter-reset: part; }
.series ol.parts .piece { display: grid; grid-template-columns: 70px 1fr; gap: 4px 14px; }
.series ol.parts .piece > p { grid-column: 2; margin: 0; }
.series ol.parts .piece > p.h3 { margin-bottom: 4px; }
.series ol.parts .piece::before { counter-increment: part; content: "Part " counter(part); font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding-top: 6px; }

.attr.who { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.attr.who img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none; }
.attr.who b { color: var(--ink); font-weight: 500; display: block; }

/* writing pages */
.writing-wrap { padding-top: 56px; padding-bottom: 30px; }
.piece-page header { max-width: 40ch; }
.piece-page header .display { font-size: clamp(34px, 3.6vw, 50px); max-width: 30ch; margin-bottom: 18px; }
.piece-page header .lede { max-width: 60ch; }
.piece-page .byline { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 30px; }
.seriesnav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 34px; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.seriesnav span { color: var(--ink-faint); margin-right: 8px; }
.seriesnav a { color: var(--ink-soft); text-decoration: none; padding: 3px 8px; border-radius: 3px; }
.seriesnav a.here { background: var(--accent-soft); color: var(--accent); }
.prose { max-width: 66ch; font-size: 17.5px; line-height: 1.65; }
.prose p { margin: 0 0 18px; }
.prose h2 { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.012em; margin: 40px 0 14px; text-wrap: balance; }
.prose ul { padding-left: 20px; margin: 0 0 18px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.prose .note { color: var(--ink-soft); font-style: italic; border-left: 2px solid var(--line); padding-left: 16px; }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--line); margin-top: 44px; padding-top: 22px; }
.prevnext a { text-decoration: none; color: var(--ink); font-family: "Newsreader", Georgia, serif; font-size: 20px; line-height: 1.2; }
.prevnext a span { display: block; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.prevnext a.next { text-align: right; }
.subscribe { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center; border-top: 1px solid var(--line); margin-top: 48px; padding-top: 30px; }
.subscribe img { width: 100%; height: auto; border-radius: 6px; display: block; }
.subscribe p { margin: 0 0 12px; }
.writing .piece .meta { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.writing .piece .h3 a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
@media (max-width: 800px) { .prevnext, .subscribe { grid-template-columns: 1fr; } }

.piece-page .cover { margin: 0 0 36px; max-width: 760px; }
.piece-page .cover img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .piece-page .cover img { filter: brightness(.92); } }

/* Column counts used to live in inline style attributes, which outrank any media
   query, so these grids kept their desktop column count on phones and pushed the
   page 185px wide. As classes they can collapse. */
.steps.cols-2 { display: grid; grid-template-columns: 1fr 1fr; }
.steps.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.moments.dev { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .steps.cols-3 { grid-template-columns: 1fr 1fr; }
  .moments.dev { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .steps.cols-2, .steps.cols-3 { grid-template-columns: 1fr; }
  .moments, .moments.dev { grid-template-columns: 1fr; }
}

/* .two held a fixed 1fr 1fr at every width, which forces two ~106px columns on a
   320px phone. Long source URLs in the writing list are single 100+ character
   tokens with nowhere to break. */
@media (max-width: 700px) { .two { grid-template-columns: 1fr; gap: 32px; } }
p, li, a, h1, h2, h3, .lede, .display, .h2, .h3 { overflow-wrap: break-word; }
/* grid items default to min-width:auto, so a track cannot shrink below its
   content minimum and the whole row pushes past a narrow viewport */
.hero > *, .two > *, .three > *, .four > *, .five > *, .steps > *, .moments > * { min-width: 0; }
/* "2 pages · read in 5 minutes" is nowrap by design; below ~360px it has nowhere
   to go, so let it wrap rather than push the page sideways */
@media (max-width: 380px) { .docmock .dm-meta { white-space: normal; } }

/* The header CTA cannot sit beside the full wordmark on a phone: at 360px the
   full label wraps to three lines. The wordmark earns the space, so the label
   shortens instead. Body CTAs keep the full wording. */
.navlinks .btn .lbl-short { display: none; }
@media (max-width: 600px) {
  .navlinks .btn .lbl-long { display: none; }
  .navlinks .btn .lbl-short { display: inline; }
  .navlinks .btn { white-space: nowrap; }
}

/* Below ~360px even the shortened label plus the full wordmark will not fit on
   one line, and nowrap means the pill can no longer shrink to absorb it. */
@media (max-width: 365px) {
  nav.top .wrap { gap: 10px; }
  .brand { gap: 6px; }
  .brand .mark { width: 24px; height: 24px; }
  .wordmark { font-size: 9.5px; letter-spacing: 0.03em; }
  .navlinks .btn { padding: 6px 10px; font-size: 11px; }
}

/* On phones every nav link was set to display:none with nothing to replace it,
   so the only way off a page was the footer, 29 screens down on the homepage.
   Native <details> so the menu needs no script and degrades to an open list. */
details.navmenu { display: none; border: none; padding: 0; max-width: none; }
details.navmenu:last-of-type { border-bottom: none; }
.navmenu > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 0;
  font-family: "Public Sans", "Segoe UI", system-ui, sans-serif; font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-soft); padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; }
.navmenu > summary::after,
details.navmenu[open] > summary::after { content: none; }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::marker { content: ""; }
.navmenu > summary:hover, .navmenu[open] > summary { color: var(--ink); border-color: var(--ink); }
.navmenu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.navpanel { position: absolute; top: calc(100% + 8px); left: 22px; right: 22px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 6px;
  display: flex; flex-direction: column; padding: 4px 14px; z-index: 30;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }
.navpanel a { font-size: 15px; padding: 12px 0; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.navpanel a:last-child { border-bottom: none; }
.navpanel a.here { color: var(--ink); }
@media (max-width: 900px) { details.navmenu { display: block; } }
@media (max-width: 365px) { .navmenu > summary { padding: 6px 9px; font-size: 12px; } }

/* Measured at 360px in a 316px row: mark + wordmark + Menu + invite pill needs
   349px, and 317px even tightened hard, which still overflows a 320px screen.
   Dropping the pill instead needs 254px and fits everywhere. The pill was only
   ever visible in the first screen anyway, since the header is not sticky, so it
   moves into the menu panel and the wordmark keeps its place. */
@media (max-width: 600px) { .navlinks > .btn { display: none; } }
.navpanel a.navpanel-cta { display: none; }
@media (max-width: 600px) {
  .navpanel a.navpanel-cta { display: block; margin: 10px 0 12px; padding: 13px 16px; text-align: center;
    border-bottom: none;
    background: var(--btn); color: var(--btn-text); border-radius: 999px;
    font-size: 15px; font-weight: 500; }
}

/* r25b/c · About */
.pullline.wide { max-width: none; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; }
.display.split .pre { display: block; font-size: .56em; line-height: 1.15; color: var(--ink-soft); margin-bottom: .5em; letter-spacing: -.01em; }
.src a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.src a:hover { color: var(--ink); border-color: var(--ink); }
.sumblock { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 34px; }
.sumblock .lead { font-family: "Newsreader", Georgia, serif; font-size: clamp(22px, 2.2vw, 28px); margin: 0 0 22px; color: var(--ink); }
.sumblock .pts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
@media (max-width: 760px) { .sumblock .pts { grid-template-columns: 1fr; } }
.sumblock .pts p { margin: 0; padding-top: 14px; border-top: 2px solid var(--accent); font-size: 17px; color: var(--ink-soft); }
.beliefs.values { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 56px; margin-top: 28px; }
@media (max-width: 700px) { .beliefs.values { grid-template-columns: 1fr; } }
.beliefs.values > div { border-top: 1px solid var(--line); padding-top: 20px; }
.beliefs.values b { display: block; font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.15; color: var(--ink); margin-bottom: 10px; letter-spacing: -.01em; text-wrap: balance; }
.beliefs.values p { margin: 0; font-size: 16px; color: var(--ink-soft); max-width: 48ch; }
.ledger.full { max-width: none; }
.ledger.full .row { grid-template-columns: 250px 1fr; }
@media (max-width: 640px) { .ledger.full .row { grid-template-columns: 1fr; gap: 8px; } }
.ledger.full .row p { max-width: 72ch; }
.figwrap img.cover { width: min(100%, 420px); height: auto; border-radius: 8px; display: block; margin: 0 auto; }
/* r25d · About */
.h2 .sub { display: block; font-style: normal; font-size: .58em; line-height: 1.25; color: var(--ink-soft); margin-top: .45em; letter-spacing: 0; }
.sumblock .lead { color: var(--accent); }
.sumblock .rows { display: grid; gap: 18px; }
.sumblock .rows p { margin: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--accent); border-top: 0; font-size: 18px; color: var(--ink-soft); max-width: none; }
.sumblock .conclusion { font-family: "Newsreader", Georgia, serif; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.35; margin: 34px 0 0; max-width: none; color: var(--ink-soft); }
.sumblock .conclusion b { color: var(--ink); font-weight: 500; }
.h2 .pre { display: block; font-size: .72em; font-weight: 300; color: var(--ink-soft); line-height: 1.15; margin-bottom: .15em; }
.beliefs.values b { transition: color .18s; }
.beliefs.values > div:hover b { color: var(--bc); }

/* r31 · writing pages full width, series styling shared with the research page */
.hero.solo.wide .display, .hero.solo.wide .lede { max-width: none; }
.piece-page header, .piece-page header .display, .piece-page header .lede { max-width: none; }
.prose, .prose p, .prose li, .prose h2 { max-width: none; }
.series .sub { max-width: none; }
.series .stitle { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: clamp(22px, 2vw, 26px); color: var(--sc, var(--accent)); margin: 0 0 4px; }
.series .stitle::before { content: ""; display: block; width: 44px; height: 3px; background: var(--sc, var(--accent)); margin-bottom: 12px; }
.series.unit { border: 1px solid color-mix(in srgb, var(--sc, var(--accent)) 35%, var(--line)); border-left: 4px solid var(--sc, var(--accent)); border-radius: 4px; padding: 22px 26px 8px; }
.series { margin-top: 44px; }
.series .piece .h3 a:hover, .series ol.parts .piece .h3 a:hover, .series .writing .piece .h3 a:hover, .series a:hover { color: var(--sc, var(--accent)); border-color: var(--sc, var(--accent)); }
.piece-page header .display { text-wrap: initial; }
.hero.solo.wide .display { text-wrap: initial; }

/* r34 · writing chrome. The series nav lists the four titles rather than four
   numbered links, so "Part" appears once per page instead of nine times. The
   post page carries its series colour on the eyebrow and the current title. */
.piece-page header .eyebrow { color: var(--sc, var(--accent)); }
.seriesnav.titles { display: grid; gap: 0; font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; padding: 4px 0 8px; }
.seriesnav.titles > span { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 8px 0 2px; }
.seriesnav.titles a { font-family: "Newsreader", Georgia, serif; font-size: 17px; line-height: 1.3; color: var(--ink-soft); padding: 8px 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.seriesnav.titles a:hover { color: var(--ink); }
.seriesnav.titles a.here { color: var(--sc, var(--accent)); background: none; }
/* the show sits lighter than the pilot ask, so each page ends on one ask */
.subscribe.soft { grid-template-columns: 88px 1fr; margin-top: 44px; padding-top: 26px; }
.subscribe.soft p { font-size: 15px; color: var(--ink-soft); }
.subscribe.soft .ctas { margin-top: 12px; gap: 20px; }
.pilotask { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 26px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.pilotask p { margin: 0; max-width: 48ch; font-size: 17px; color: var(--ink); }

/* r35 · Research hero and the seven marks share one canvas that spans both, so the
   bar chart's dots are the same dots that disperse and travel down to the circles.
   The canvas sits behind the copy; the two empty slots reserve the space it draws into. */
.morphzone { position: relative; }
.morphzone > section { position: relative; z-index: 1; }
canvas.morphfield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#chartslot { width: 100%; aspect-ratio: 100 / 66; }
.marksslot { height: 150px; margin: 10px 0 26px; cursor: pointer; }
#patterns { padding-bottom: 0; }
.patsblock { padding-top: 30px; }
@media (max-width: 800px) { .marksslot { height: 108px; } #chartslot { aspect-ratio: 100 / 52; } }

/* r35 · writing posts: a smaller title, a way back to the index, and a show block
   and pilot ask that run the width of the page rather than a 56ch column. */
.piece-page header .display { font-size: clamp(29px, 3vw, 42px); }
.backlink { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 20px; max-width: none; }
.backlink a { color: var(--ink-faint); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.backlink a:hover { color: var(--ink); border-color: var(--ink); }
.subscribe.soft p, .pilotask p { max-width: none; }

/* r37 · an "on this page" strip under the hero of the long pages, and stable
   anchors, instead of nav dropdowns. Sections get room above them when jumped to. */
.jumpbar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; max-width: none; }
.jumpbar span { color: var(--ink-faint); }
.jumpbar a { color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.jumpbar a:hover { color: var(--ink); border-color: var(--accent); }
section[id] { scroll-margin-top: 26px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.hero .jumpbar { grid-column: 1 / -1; margin-top: 36px; }

/* r43 · pilot page: a five-cell fact card */
.factcard .wide b { font-size: 21px; line-height: 1.25; }

/* r45 · Solutions is two pages now, so the nav item opens a small menu instead of
   jumping to a homepage anchor. Plain <details>, so it works with no script: the
   summary toggles it, Escape and a second click close it. On phones the menu is
   hidden and the two pages appear as their own lines inside the existing panel. */
details.subnav { position: relative; display: inline-block; border: none; padding: 0; max-width: none; }
details.subnav > summary { list-style: none; cursor: pointer; color: inherit;
  font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; padding: 0;
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; }
details.subnav > summary::-webkit-details-marker { display: none; }
details.subnav > summary::marker { content: ""; }
details.subnav > summary::after { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s; }
details.subnav[open] > summary::after { transform: translateY(1px) rotate(225deg); }
details.subnav > summary:hover, details.subnav[open] > summary { color: var(--ink); }
details.subnav > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
details.subnav.here > summary { color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.subpanel { position: absolute; top: calc(100% + 16px); left: -20px; z-index: 40; display: grid;
  background: var(--ground); border: 1px solid var(--line); border-radius: 6px; padding: 4px 20px;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.4); }
.subpanel a { font-size: 15px; padding: 13px 0; color: var(--ink-soft); border-bottom: 1px solid var(--line); white-space: nowrap; }
.subpanel a:last-child { border-bottom: none; }
.subpanel a:hover { color: var(--ink); }
.subpanel a.here { color: var(--accent); }
@media (max-width: 900px) { .navlinks > details.subnav { display: none; } }

/* r73 · the mobile pass Yasmin planned on 2026-09-03 and deferred until the content was final:
   what hides on small screens, what tightens, what resizes, the nav between 900 and 1180,
   wordmark tracking, and button variants. The homepage had its own pass on 2026-09-03 and
   keeps its own stylesheet; only the nav band below is mirrored there. */
/* 900 to 1180: five links and the pilot pill share one row without the pill wrapping to two lines */
@media (min-width: 900px) and (max-width: 1180px) {
  nav.top .wrap { gap: 16px; }
  .navlinks { gap: 16px; font-size: 14px; }
  .navlinks .btn { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
  .wordmark { letter-spacing: 0.08em; }
}

/* tablets and below: less air between sections, a hero that is no taller than it needs to be */
@media (max-width: 900px) {
  .block { padding-top: 60px; padding-bottom: 60px; }
  .block.tight { padding-top: 40px; padding-bottom: 40px; }
  .hero { min-height: 0; padding-top: 40px; padding-bottom: 24px; gap: 28px; }
  .hero .jumpbar { margin-top: 24px; }
  footer { padding-top: 44px; padding-bottom: 40px; }
}

/* phones */
@media (max-width: 600px) {
  .block { padding-top: 44px; padding-bottom: 44px; }
  .hero { padding-top: 24px; padding-bottom: 16px; gap: 22px; }
  /* what resizes */
  .display { font-size: clamp(30px, 9vw, 38px); }
  .display.split .pre { font-size: .6em; }
  .h2 { font-size: clamp(24px, 7.2vw, 30px); }
  .h2 .sub { font-size: .66em; }
  .h3 { font-size: clamp(19px, 5.6vw, 22px); }
  .lede { font-size: 16.5px; }
  .pull { font-size: clamp(20px, 6vw, 24px); }
  .pullline, .pullline.wide { font-size: clamp(19px, 5.6vw, 22px); }
  .statwall .num { font-size: clamp(32px, 10vw, 40px); }
  .stat b { font-size: 28px; }
  .eyebrow { font-size: 11px; letter-spacing: .14em; }
  /* what tightens */
  .fcols { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
  .two, .three, .four, .five { gap: 26px; }
  .list li { font-size: 16px; padding: 12px 0; }
  .ledger .row { padding: 14px 0; }
  .attr.who img { width: 44px; height: 44px; }
  /* what hides: the jump bar label; the links become one row that scrolls sideways */
  .jumpbar { flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding-bottom: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .jumpbar::-webkit-scrollbar { display: none; }
  .jumpbar span { display: none; }
  .jumpbar a { flex: none; white-space: nowrap; }
  /* button variants: full-width primary actions, the secondary link centred beneath */
  .ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .ctas .btn { width: 100%; justify-content: center; }
  .ctas .linkish { align-self: center; }
  form.invite .btn { width: 100%; justify-content: center; }
}

/* r74 · phone pass two: strips and tables stack. Column counts that lived in inline styles
   (which outrank media queries) become classes so they can collapse. */
.strip4.cols3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .strip4.cols3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .strip4, .strip4.cols3 { grid-template-columns: 1fr; gap: 18px; }
  .statustable thead { display: none; }
  .statustable, .statustable tbody, .statustable tr, .statustable td { display: block; }
  .statustable tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .statustable td { border: 0; padding: 0; }
  .statustable td:last-child { width: auto; white-space: normal; padding-top: 8px; }
}

/* r77 · phones: the jump bar wraps into rows instead of scrolling sideways (Yasmin, 2026-09-10) */
@media (max-width: 600px) {
  .jumpbar { flex-wrap: wrap; overflow: visible; gap: 10px 18px; padding-bottom: 0; }
  .jumpbar a { flex: none; white-space: nowrap; }
}

/* r79 · phones: numbered steps keep more width for their text, and series part lists put
   the part label above the title instead of beside it */
@media (max-width: 600px) {
  .steps li { grid-template-columns: 34px 1fr; gap: 12px; }
  .series ol.parts .piece { grid-template-columns: 1fr; gap: 2px 0; }
  .series ol.parts .piece > p { grid-column: 1; }
  .series ol.parts .piece::before { margin-bottom: 2px; }
}

/* r81 · privacy and terms links in the footer signoff */
.signoff a { color: inherit; border-bottom: 1px solid var(--line); }
.signoff a:hover { color: var(--ink); border-color: var(--ink); }

/* r84 · the contact and writing headings come down a size */
.display.split.ct i { font-size: .72em; }
.display.split.wr i { font-size: .82em; }

/* r90 · the legal pages: the italic line matches the grey line above it */
.display.split.lg i { font-size: .56em; }

/* Wisdom Stack Cinema demo card and dialog. The card is dark by design: the demo is a night scene, so it keeps
   the dark palette in both themes rather than following the page ground. */
.demo-card { --dc-ground: #171512; --dc-ink: #FBFAF8; --dc-soft: #C2BAAC; --dc-line: #33302A; --dc-accent: #D99C43;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 36px; align-items: center; margin-top: 44px; padding: 28px; border-radius: 14px;
  background: var(--dc-ground); color: var(--dc-ink); border: 1px solid var(--dc-line); }
.demo-card .eyebrow { color: var(--dc-accent); margin-bottom: 12px; }
.demo-card .h3 { color: var(--dc-ink); margin-bottom: 10px; }
.demo-card .demo-line { color: var(--dc-soft); margin: 0 0 22px; max-width: none; }
.demo-card .ctas { margin: 0; }
.demo-card .btn { background: var(--dc-ink); color: var(--dc-ground); border-color: var(--dc-ink); }
.demo-card .btn:hover { background: #fff; border-color: #fff; }
.demo-thumb { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 0; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 16 / 9; }
.demo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.demo-thumb:hover img, .demo-thumb:focus-visible img { transform: scale(1.03); }
.demo-thumb:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 3px; }
.demo-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(23, 21, 18, .72); color: var(--dc-ink); border: 1px solid rgba(251, 250, 248, .35); backdrop-filter: blur(4px); transition: transform .25s ease, background-color .25s ease; }
.demo-play svg { margin-left: 3px; }
.demo-thumb:hover .demo-play, .demo-thumb:focus-visible .demo-play { transform: scale(1.06); background: rgba(23, 21, 18, .9); }
@media (prefers-reduced-motion: reduce) { .demo-thumb img, .demo-play { transition: none; } .demo-thumb:hover img { transform: none; } }
@media (max-width: 900px) { .demo-card { grid-template-columns: 1fr; gap: 22px; padding: 20px; } }
@media (max-width: 700px) { .demo-card { margin-top: 32px; padding: 16px; border-radius: 12px; } .demo-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; } }

.demo-dialog { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #FBFAF8; overflow: hidden; }
.demo-dialog::backdrop { background: rgba(0, 0, 0, .92); }
.demo-dialog:not([open]) { display: none; }
.demo-frame { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.demo-close { position: absolute; top: 14px; right: 14px; z-index: 2; font: 500 13px/1 "Public Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: .04em; color: #FBFAF8;
  background: rgba(23, 21, 18, .7); border: 1px solid rgba(251, 250, 248, .35); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.demo-close:hover, .demo-close:focus-visible { background: rgba(23, 21, 18, .95); outline: none; border-color: #FBFAF8; }
html.demo-open { overflow: hidden; }
/* In the dark theme the page ground matches the card, so the card steps darker to keep its edge. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-card { --dc-ground: #0E0D0B; --dc-line: #3D3930; } }
:root[data-theme="dark"] .demo-card { --dc-ground: #0E0D0B; --dc-line: #3D3930; }

/* How-it-works diagram: a full-width banner that enlarges in a dialog. Dark by design, like the demo card, since the artwork is a night scene. */
.diagram-card { margin: 44px 0 0; padding: 0; }
.diagram-thumb { position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 1px solid #33302A; border-radius: 14px; overflow: hidden; background: #0E0D0B; cursor: zoom-in; aspect-ratio: 16 / 9; }
.diagram-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.diagram-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.diagram-zoom { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 "Public Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: .04em; color: #FBFAF8;
  background: rgba(23, 21, 18, .72); border: 1px solid rgba(251, 250, 248, .35); border-radius: 999px; padding: 8px 12px; backdrop-filter: blur(4px); transition: background-color .25s ease; }
.diagram-thumb:hover .diagram-zoom, .diagram-thumb:focus-visible .diagram-zoom { background: rgba(23, 21, 18, .95); }
.diagram-card figcaption { font-size: 14px; color: var(--ink-soft); margin: 12px 2px 0; text-align: center; }
@media (max-width: 700px) { .diagram-card { margin-top: 32px; } .diagram-thumb { border-radius: 12px; } .diagram-zoom { right: 10px; bottom: 10px; } }

.diagram-dialog { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 7, 6, .96); color: #FBFAF8; display: grid; place-items: center; overflow: hidden; cursor: zoom-out; }
.diagram-dialog::backdrop { background: transparent; }
.diagram-dialog:not([open]) { display: none; }
.diagram-dialog img { display: block; width: auto; height: auto; max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); cursor: default; }

/* How it works: the three steps as rows on the left, the diagram beside them. */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 30px; }
.how-steps { margin: 0; gap: 26px; }
.how-grid .diagram-card { margin-top: 0; }
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; gap: 28px; } .how-grid .diagram-card { margin-top: 8px; } }

/* Product page proof block and the six-things close */
#proof .proofgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; margin-top: 30px; }
.asks { display: grid; gap: 22px; margin: 6px 0 8px; max-width: 46ch; }
.ask p { margin: 0 0 6px; font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }
.ask b { display: block; font-family: "Spline Sans Mono", ui-monospace, monospace; font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ask b.tint-blue { color: var(--c-goals); }
.q { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 23px; line-height: 1.3; color: var(--ink); margin: 0 0 10px; text-wrap: pretty; }
.q.client { color: var(--accent); }
.sevenclose { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }
.sevenclose .h3 { margin-bottom: 10px; }
@media (max-width: 900px) { #proof .proofgrid, .sevenclose { grid-template-columns: 1fr; gap: 28px; } }