/* 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); }
.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.4fr 1fr 1fr 1fr; gap: 40px; 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; }
.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; }
}