/* grizaille.com: the inner pages.
   The first and last blocks are the homepage's own rules, copied as designed: the type, the tokens, the nav, the pearl
   in the wordmark, the button (top) and the footer, section 8 (bottom). The homepage keeps its inline copy; a change to
   the nav or the footer is made in both places. Between them, the inner pages' grammar: one ruled sheet per page, a
   mono label in the corner of every cell, the display size for the page's one heading, the 36px tier for a cell's
   statement, text at 17px on the right column's origin (gutter + 480px). The measure ends one pearl-width (96px) short
   of the right gutter, as every homepage section does, so every page shares one right edge. */

/* ═══ from the homepage: type, tokens, nav, wordmark, button ═══ */
@font-face{font-family:'Sentient';src:url("/assets/fonts/Sentient-Light.woff2") format('woff2');font-weight:300}
@font-face{font-family:'Sentient';src:url("/assets/fonts/Sentient-Regular.woff2") format('woff2');font-weight:400}
@font-face{font-family:'General Sans';src:url("/assets/fonts/GeneralSans-Regular.woff2") format('woff2');font-weight:400}
@font-face{font-family:'General Sans';src:url("/assets/fonts/GeneralSans-Medium.woff2") format('woff2');font-weight:500}
@font-face{font-family:'Commit Mono';src:url("/assets/fonts/CommitMono-Regular-sub.woff2") format('woff2');font-weight:400}
:root{--paper:#F4F3EF;--ink:#0E0E0C;--text:#1C1C19;--ink-60:#4A4A45;--rule:#D6D4CD;--ok:#0D652D;
  --mid:#8E8C86;--far:#C4C2BB;
  --serif:'Sentient',Georgia,serif;--sans:'General Sans',system-ui,sans-serif;--mono:'Commit Mono',ui-monospace,monospace;--r:4px;
  --mark:clamp(96px,20vw,280px);
  --gutter:round(max(40px,calc((100vw - var(--sbw, 0px) - 1120px) / 2 + 40px)), 1px)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto 0 calc(var(--gutter) - 40px);padding:0 40px}
nav{display:flex;justify-content:space-between;align-items:baseline;height:64px;padding-top:19px}
nav .group{display:flex;align-items:baseline;gap:64px}
nav .menu{display:none;font-size:15px;font-weight:400;color:var(--ink-60);text-decoration:none}
nav .call,nav .menu{display:inline-block;padding:13px 0;margin:-13px 0}
nav .menu{display:none}
.pearl{display:inline-block;width:.21em;height:.21em;border-radius:50%;vertical-align:baseline;margin-left:.05em;position:relative;top:-.015em;background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 18%, rgba(255,255,255,0) 46%),radial-gradient(circle at 68% 74%, rgba(255,255,255,.35) 0 10%, rgba(255,255,255,0) 30%),conic-gradient(from 210deg, #E9B7C1, #F2D9A6, #CDE7C9, #BFD9EF, #D3C4EA, #E9B7C1);box-shadow:inset 0 -.03em .05em rgba(14,14,12,.28), inset 0 .01em .02em rgba(255,255,255,.6), 0 .01em .02em rgba(14,14,12,.18);filter:saturate(.85)}
.pearl.d{background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.96) 0 15%, rgba(255,255,255,0) 42%),radial-gradient(circle at 70% 76%, rgba(255,255,255,.28) 0 8%, rgba(255,255,255,0) 26%),conic-gradient(from 200deg, #FF5C8A, #FFB020, #FFE94D, #35D07F, #2AB8FF, #7A5CFF, #FF5C8A);box-shadow: inset 0 -.04em .06em rgba(14,14,12,.32), inset 0 .01em .02em rgba(255,255,255,.7), 0 .01em .03em rgba(14,14,12,.22);filter:saturate(1.15)}
.wm{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;font-size:26px;line-height:1;text-decoration:none}
.wm .pearl{width:.3em;height:.3em;top:-.02em;box-shadow:inset 0 -.03em .04em rgba(14,14,12,.16)}
nav .links{display:flex;gap:28px;font-size:15px;font-weight:400}
nav .links a{text-decoration:none;color:var(--ink-60)}
nav .links a:hover{color:var(--ink)}
nav .call{font-size:15px;font-weight:500;text-decoration:none;color:var(--ink)}
nav .call:hover{color:var(--ink-60)}
.btn{border-radius:var(--r);display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 24px;background:var(--ink);color:#F4F3EF;text-decoration:none;font-weight:500;font-size:16px;border:1px solid var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);height:40px;padding:0 14px;font-size:15px}
.btn:hover{background:#2A2A27;border-color:#2A2A27}
a,button{transition:color .2s ease,background-color .2s ease,border-color .2s ease}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.btn:focus-visible{outline-color:var(--ink)}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* a date is one word (the build wraps every ISO date in the text) */
.nw{white-space:nowrap}
@media (max-width:820px){
  .wrap{padding:0 20px}
  nav .links{display:none}
  nav .menu{display:inline-block}
  nav .group{gap:24px}
  .wm{font-size:22px}
  .btn{width:100%;justify-content:center}
}

/* ═══ the inner pages ═══ */
:root{--origin:480px;--rule-end:0px}
/* the measure ends one pearl-width (96px) before the right gutter, as on the homepage */
@media (min-width:821px){:root{--rule-end:96px}}
/* the page the reader is on reads in ink in the nav */
nav .links a[aria-current]{color:var(--ink)}
.skip{position:absolute;left:-10000px;top:0;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:16px;top:12px;width:auto;height:auto;z-index:90;background:var(--paper);color:var(--ink);padding:10px 14px;outline:1px solid var(--ink);outline-offset:3px;font-size:15px;font-weight:500}

/* a sheet: one ruled section on the homepage's gutter and measure */
.sheet{position:relative;padding:0 calc(var(--gutter) + var(--rule-end)) 0 var(--gutter)}
.lab{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60);font-weight:400;margin:0}
.sheet .head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0 18px;border-bottom:1px solid var(--ink)}
.sheet .head .lab + .lab{text-align:right}
/* a sheet after another starts on its own seam, as the homepage's sections do */
.sheet + .sheet{border-top:0}

/* the page's head: its label strip, the heading at the display size (the homepage's 58px), the lede at the origin */
.phead h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.46vw,58px);line-height:1.04;line-height:round(1.04em,1px);letter-spacing:-.02em;color:var(--ink);margin:72px 0 0;max-width:15em;text-wrap:balance}
.phead .intro{display:grid;grid-template-columns:calc(var(--origin) - 24px) minmax(0,1fr);gap:24px;align-items:baseline;margin-top:56px;padding-bottom:64px;border-bottom:1px solid var(--ink)}
.phead .intro > .lab{grid-column:1}
/* when the ink comes next, its edge is the rule */
.phead:has(+ .ink) .intro{border-bottom:0}
.phead .intro > .copy{grid-column:2;min-width:0}
.lede{font-size:17px;line-height:1.6;color:var(--text);max-width:44ch;text-wrap:pretty}
.lede + .lede{margin-top:12px}

/* cells: a mono label in the corner, the content at the origin, one rule under each */
.cell{display:grid;grid-template-columns:calc(var(--origin) - 24px) minmax(0,1fr);gap:24px;align-items:baseline;padding:44px 0 52px;border-bottom:1px solid var(--ink)}
.cell.last{border-bottom:0}
.cell > .lab{grid-column:1}
.cell > .body{grid-column:2;min-width:0}
/* a cell's statement, the 36px tier: it steps, it does not flow (28px stacked, 32px from 1100, 36px from 1232) */
.say{font-family:var(--serif);font-weight:300;font-size:28px;line-height:1.2;line-height:round(1.2em,1px);letter-spacing:-.012em;color:var(--ink);margin:0;max-width:21em;text-wrap:pretty}
@media (min-width:1100px){.say{font-size:32px}}
@media (min-width:1232px){.say{font-size:36px}}
.body > * + *{margin-top:16px}
.body > .say + *{margin-top:24px}
.body > p:not(.say),.body > ul > li,.body > ol > li{font-size:17px;line-height:1.6;color:var(--text)}
.body > p:not(.say){max-width:60ch;text-wrap:pretty}
.list > li,.facts dd,.qa .a p{text-wrap:pretty}
.body a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px}
.body a:not(.btn):hover{color:var(--ink-60)}
.body .fine{font-size:15px;line-height:1.55;color:var(--ink-60)}
.body h3{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.5;color:var(--ink);margin:32px 0 0}
.body h3 + *{margin-top:8px}

/* a ruled list: one hairline under each row, the list's own rule on top */
.list{list-style:none;margin:0;padding:0;max-width:60ch;border-top:1px solid var(--rule)}
.list > li{position:relative;padding:12px 0 13px;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.5;color:var(--text)}
.list.num{counter-reset:n}
.list.num > li{padding-left:48px}
/* the number in the margin, mono, on the row's first line */
.list.num > li::before{counter-increment:n;content:counter(n, decimal-leading-zero);position:absolute;left:0;top:17px;font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;color:var(--ink-60)}
.list .t{color:var(--ink);font-weight:500}
/* a list of steps: each row a heading in the sans and its text */
.list > li > h3{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.5;color:var(--ink);margin:0}
.list > li > h3 + p,.list > li > p + p{margin-top:6px}
.list > li > p{font-size:17px;line-height:1.6;color:var(--text);max-width:60ch}
/* a quoted line, set as the tool prints it */
.printed{margin:0;padding:14px 0 14px 18px;border-left:1px solid var(--ink);font-family:var(--mono);font-size:13px;line-height:20px;color:var(--ink-60);max-width:70ch}

/* questions and answers: the question in the sans at 17px, the answer under it, a hairline under each pair */
.faq{max-width:62ch;border-top:1px solid var(--rule)}
.qa{padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.qa h3{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.5;color:var(--ink);margin:0}
.qa .a{margin-top:6px}
.qa .a p{font-size:17px;line-height:1.6;color:var(--text)}
.qa .a p + p{margin-top:10px}
.qa .a a{color:var(--ink);text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px}

/* facts: label and value on one line, a hairline under each */
.facts{margin:0;padding:0;max-width:62ch;border-top:1px solid var(--rule)}
.facts > div{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 0 13px;border-bottom:1px solid var(--rule)}
.facts dt{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60)}
.facts dd{margin:0;font-size:17px;line-height:1.5;color:var(--text)}

/* an evidence table: mono, square, page one in green */
.table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px;line-height:19px;color:var(--text)}
.table th{font-weight:400;text-align:left;color:var(--ink-60);letter-spacing:.06em;text-transform:uppercase;font-size:11px;line-height:16px;padding:0 16px 8px 0;border-bottom:1px solid var(--ink)}
.table td{padding:10px 16px 10px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.table th:last-child,.table td:last-child{padding-right:0}
.table td.pos{white-space:nowrap}
.table td.p1{color:var(--ok)}
.table td.miss{color:var(--ink-60)}
.table caption{caption-side:bottom;text-align:left;padding-top:10px;font-family:var(--mono);font-size:11px;line-height:16px;color:var(--ink-60)}

/* inside a cell, a block that spans the whole measure (a ledger that needs the width) */
.cell > .span{grid-column:1 / -1}
/* the offers ledger: the name at the gutter, what you get at the origin, the price at the measure's end */
.offers{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--ink)}
/* the name and its price in the label column, one over the other; what you get at the origin */
.offers li{display:grid;grid-template-columns:calc(var(--origin) - 24px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:24px;row-gap:4px;align-items:baseline;padding:20px 0 22px;border-bottom:1px solid var(--rule)}
.offers .what{grid-column:1;grid-row:1;font-size:17px;line-height:1.5;font-weight:500;color:var(--ink)}
.offers .what a{color:var(--ink);text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px}
.offers p{grid-column:2;grid-row:1 / span 2;font-size:16px;line-height:1.55;color:var(--text);max-width:56ch;text-wrap:pretty}
.offers .price{grid-column:1;grid-row:2;align-self:start;font-size:17px;line-height:1.5;color:var(--ink-60);white-space:nowrap}
@media (max-width:1023px){
  .offers li{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:6px 24px}
  .offers .price{grid-column:2;grid-row:1;text-align:right;color:var(--ink);font-weight:500}
  .offers p{grid-column:1 / -1;grid-row:2}
}

/* placeholders: grey brackets until the real thing exists (the homepage's slot greys) */
.slot{color:#6E6C66}
.say .slot,.phead .slot{color:#8A8880}

/* the call at the foot of a cell: the button's label and the line beside it share a baseline */
.ask{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.body > .ask{margin-top:32px}
.ask .sub{font-size:16px;line-height:24px;color:var(--ink-60)}

/* a figure beside the text in a cell (the bird, the portrait) */
.fig{margin:0}
.fig img{display:block;max-width:100%;height:auto}

/* ── ink: the proof's world, full bleed, as the homepage's results ── */
.ink{background:var(--ink);color:var(--paper);--line:rgba(244,243,239,.56)}
.ink .lab{color:#B9B8B1}
.ink .head{border-bottom-color:var(--line)}
.ink .cell{border-bottom-color:var(--line)}
.ink .say{color:var(--paper)}
.ink .body > p:not(.say),.ink .body > ul > li{color:#D6D4CD}
.ink .body a:not(.btn){color:var(--paper)}
.ink .body a:not(.btn):hover{color:#B9B8B1}
.ink .slot{color:#8A8880}
.ink .list{border-top-color:#3A3A37}
.ink .list > li{border-bottom-color:#3A3A37;color:#D6D4CD}
.ink .facts{border-top-color:#3A3A37}
.ink .facts > div{border-bottom-color:#3A3A37}
.ink .facts dt{color:#B9B8B1}
.ink .facts dd{color:#D6D4CD}
.ink .table{color:#D6D4CD}
.ink .table th{color:#B9B8B1;border-bottom-color:var(--line)}
.ink .table td{border-bottom-color:#3A3A37}
.ink .table td.p1{color:#5BB974}
.ink .table td.miss{color:#8A8880}
.ink .table caption{color:#B9B8B1}
.ink a:focus-visible{outline-color:var(--paper)}

/* the figures, as the homepage's results: one figure at scale, the others as ledger rows at the display size */
.proof .rows{list-style:none;margin:0;padding:0}
.proof .rows li{position:relative;border-bottom:1px solid var(--line)}
.proof .rows li:last-child{border-bottom:0}
.proof .in{display:grid;grid-template-columns:calc(var(--origin) - 40px) minmax(0,1fr);gap:40px;align-items:last baseline;padding:30px 0 26px}
.proof .meta .lab{display:block}
.proof .num{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.46vw,58px);line-height:1.04;line-height:round(1.04em,1px);letter-spacing:-.02em;color:var(--paper);white-space:nowrap;margin:0}
.proof .lead .in{padding:36px 0 34px;row-gap:30px}
.proof .lead .num{grid-column:1 / -1;font-size:clamp(112px,17vw,232px);line-height:.92;line-height:round(.92em,1px);letter-spacing:-.035em}
.proof .lead .meta{grid-column:2}
.proof .src{margin-top:10px;font-size:16px;line-height:24px;color:#B9B8B1;max-width:36ch;text-wrap:balance}
.proof .src a{color:#D6D4CD;text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px}
.proof .src a:hover{color:var(--paper)}
.proof .in.note .src{grid-column:2;margin-top:0;max-width:46ch;text-wrap:pretty}
.proof .case{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0 18px}
.proof .case a{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.proof .case a:hover{color:#B9B8B1}
.proof .case .arrow{color:#B9B8B1;font-size:12px;line-height:16px}
.proof .case svg{width:14px;height:14px;display:inline-block;vertical-align:-2.8px}
@media (max-width:1023px){.proof .lead .meta{grid-column:1 / -1}}

/* ── the capture, as the tool prints it: one square sheet (it is evidence), in the order of the printed page. Other
   firms are "[another firm]" on a public page ── */
.capture{margin:0;border:1px solid var(--ink);background:var(--paper);padding:28px 32px 24px;color:var(--text)}
.capture .strip{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--ink);padding-bottom:10px}
.capture .cwm{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.capture .cwm .pearl{width:.3em;height:.3em;top:-.02em;box-shadow:inset 0 -.03em .04em rgba(14,14,12,.16)}
.capture .kind{margin-top:14px}
.capture .title{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25;letter-spacing:-.005em;color:var(--ink);margin:6px 0 0;max-width:34em}
.capture .big{font-family:var(--serif);font-weight:300;font-size:40px;line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:12px 0 0}
.capture .prov{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:14px;row-gap:3px;margin:14px 0 0;font-family:var(--mono);font-size:11px;line-height:16px;color:var(--ink-60)}
.capture .prov dt{text-transform:uppercase;letter-spacing:.06em}
.capture .prov dd{margin:0}
.capture .lines{margin:18px 0 0;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.capture .lines p{font-size:14px;line-height:21px;color:var(--text)}
.capture table{width:100%;border-collapse:collapse;margin:18px 0 0}
.capture th{text-align:left;font-weight:400;padding:0 12px 6px 0;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60)}
.capture td{vertical-align:top;padding:9px 12px 9px 0;border-bottom:1px solid var(--rule);font-size:13px;line-height:19px}
.capture th:last-child,.capture td:last-child{padding-right:0}
.capture td.q{width:44%;color:var(--ink)}
.capture .gq{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;line-height:15px;letter-spacing:.01em;color:var(--ink-60)}
.capture td.n{font-family:var(--mono);font-size:13px;white-space:nowrap}
.capture td.i{color:var(--ink-60)}
.capture .tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-right:6px}
.capture td.g{font-family:var(--mono);font-size:12px;white-space:nowrap;color:var(--ink-60)}
.capture .sources{margin:18px 0 0}
.capture .sources ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
.capture .sources li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0;padding:4px 0;border-bottom:1px solid var(--rule);font-size:13px;line-height:18px}
.capture .sources .c{font-family:var(--mono);font-size:11px;color:var(--ink-60);white-space:nowrap}
.capture .sources p{margin-top:8px;font-size:13px;line-height:19px}
.capture .method{margin-top:20px;border-top:1px solid var(--ink);padding-top:10px;font-family:var(--mono);font-size:10.5px;line-height:15px;color:var(--ink-60)}
.capture .sign{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:10px;font-size:13px;line-height:18px;color:var(--ink-60)}
.capture .sign .domain{font-family:var(--mono);font-size:12px;letter-spacing:.04em;white-space:nowrap}
.capture .slot{color:#6E6C66;white-space:nowrap}
.capture .nw{white-space:nowrap}
/* the capture spans the measure under its cell */
.capture-wrap{padding:8px 0 56px}
.capture-wrap .fine{margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink-60);max-width:70ch}

/* ── a form: mono labels, 48px fields, square where it is read and 4px where it is touched ── */
.form{display:grid;gap:20px;max-width:34em}
.field{display:grid;gap:8px}
.field label,.field .legend{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60)}
.input{display:block;width:100%;height:48px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px}
.input::placeholder{color:#6E6C66}
.input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
select.input{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230E0E0C' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form .btn{justify-self:start;cursor:pointer;font-family:var(--sans)}
.form .fine{font-size:14px;line-height:1.5;color:var(--ink-60)}

/* ── the 404: the heading and the way back on the left, Petit Gris standing on the page's rule on the right (the
   homepage's bird, with its own ground clipped away, the same turn and the same notch) ── */
.lost{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;padding-top:64px;border-bottom:1px solid var(--ink)}
.phead .lost h1{margin-top:0}
.lost .lede{margin-top:24px}
.lost .list{margin:24px 0 56px;max-width:28em}
.lost .list a{color:var(--ink);text-decoration:none}
.lost .list a:hover{color:var(--ink-60)}
.lost .bird{height:300px;margin:0 72px 0 0;overflow:visible}
.lost .bird img{display:block;height:364px;width:auto;max-width:none;mix-blend-mode:multiply;transform-origin:38% 82.5%;transform:translateX(-12%) translateY(1px) rotate(1.9deg);clip-path:polygon(0 0,100% 0,100% 67%,60.1% 67%,60.1% 81.44%,30.94% 82.74%,30.94% 67%,0 67%)}
@media (max-width:820px){
  .lost{grid-template-columns:1fr;gap:0;padding-top:40px}
  .lost .list{margin-bottom:24px}
  .lost .bird{height:165px;margin:0}
  .lost .bird img{height:200px}
}

/* ── the founder: his face beside his words, as the homepage's section 7 ── */
.meet{position:relative;display:grid;grid-template-columns:round(calc(var(--gutter) + 416px), 1px) minmax(0,1fr);border-bottom:1px solid var(--ink)}
.meet .photo{position:relative;background:#DAD8D1;overflow:hidden;min-height:560px;margin:0}
.meet .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.04)}
.meet .words{padding:72px calc(var(--gutter) + var(--rule-end)) 64px 64px}
.meet .say{margin-top:28px}
.meet .body{margin-top:28px}
@media (max-width:1149px){
  .meet{grid-template-columns:1fr}
  .meet .photo{height:max(round(56vh, 1px), round(calc((100vw - var(--sbw, 0px) - 2 * var(--gutter) - var(--rule-end)) / 1.6), 1px));min-height:0;margin:48px calc(var(--gutter) + var(--rule-end)) 0 var(--gutter)}
  .meet .photo img{object-position:50% 40%}
  .meet .words{padding:56px calc(var(--gutter) + var(--rule-end)) 56px var(--gutter)}
}

/* ── a case, the answer framed (the owner's direction A, 2026-09-26): the claim on the left, what ChatGPT answered on
   the right from the origin, the question in its own bubble over the capture. ChatGPT's figures and Google's line
   share one row, so their rules meet on one line. Narrower, the answer comes straight after the heading ── */
.case .framed{display:grid;grid-template-columns:minmax(0,1fr) calc(100% - var(--origin));grid-template-rows:auto 1fr auto;grid-template-areas:"h1 fig" "lede fig" "stats also";column-gap:48px;align-items:start;padding:56px 0 88px}
.case h1{grid-area:h1;font-family:var(--serif);font-weight:300;font-size:clamp(36px,3.6vw,46px);line-height:1.09;line-height:round(1.09em,1px);letter-spacing:-.015em;color:var(--ink);margin:0;text-wrap:balance}
.case .lede{grid-area:lede;margin-top:22px}
.case .stats{grid-area:stats;margin-top:36px;--n:clamp(44px,4.2vw,56px)}
.case .also{grid-area:also;margin-top:36px;padding-top:18px;border-top:1px solid var(--ink)}
.case .also p:not(.lab){margin-top:10px;font-size:15px;line-height:1.55;color:var(--ink-60);max-width:40ch;text-wrap:pretty}
.answer{grid-area:fig;margin:0;min-width:0}
.answer .bubble{margin-top:14px;padding:14px 18px;border-radius:18px;background:var(--ink);color:var(--paper);font-size:16px;line-height:1.45}
.answer .shot{margin-top:12px;overflow:hidden;border:1px solid var(--rule);border-radius:var(--r);background:#FCFCFC}
.answer .shot img{display:block;width:100%;height:auto}
.answer figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.04em;color:var(--ink-60)}

/* figures in a row: the numbers at one size, each over its mono label, the row's own rule on top */
.stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:32px;border-top:1px solid var(--ink);padding-top:18px}
.stats .n{font-family:var(--serif);font-weight:300;font-size:var(--n,40px);line-height:1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.stats .lab{margin-top:10px}
.body > .stats{max-width:34em}

/* the questions a client's buyers ask, each with what ChatGPT answered: the question at the statement tier (it steps
   as .say does), the count at the measure's end on the question's first baseline */
.asks{list-style:none;margin:0;padding:0}
.asks li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:baseline;padding:28px 0 26px;border-bottom:1px solid var(--line)}
.asks .q{font-family:var(--serif);font-weight:300;font-size:28px;line-height:1.2;line-height:round(1.2em,1px);letter-spacing:-.012em;color:var(--paper);max-width:22em;text-wrap:balance}
.asks .r{text-align:right}
.asks .n{display:block;font-family:var(--serif);font-weight:300;font-size:28px;line-height:1.2;letter-spacing:-.012em;color:var(--paper);white-space:nowrap}
.asks .r .lab{display:block;margin-top:4px;white-space:nowrap}
@media (min-width:1100px){.asks .q,.asks .n{font-size:32px}}
@media (min-width:1232px){.asks .q,.asks .n{font-size:36px}}
/* a note under the questions reads from its first line, beside its label */
.proof .in.note{align-items:baseline}

/* a dated ledger across the measure, under its cell: the date in the label column, what happened at the origin */
.cell > .dated{grid-column:1 / -1;margin:12px 0 0;padding:0;border-top:1px solid var(--rule)}
.dated > div{display:grid;grid-template-columns:calc(var(--origin) - 24px) minmax(0,1fr);gap:24px;align-items:baseline;padding:14px 0 15px;border-bottom:1px solid var(--rule)}
.dated > div:last-child{border-bottom:0;padding-bottom:0}
.dated dt{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60)}
.dated dd{margin:0;font-size:17px;line-height:1.6;color:var(--text);max-width:60ch;text-wrap:pretty}
@media (max-width:1023px){
  .case .framed{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"h1" "fig" "lede" "stats" "also";padding:44px 0 64px}
  .answer{margin-top:32px;max-width:560px}
  .case .lede{margin-top:32px}
  .dated > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .cell > .dated{margin-top:14px}
}
@media (max-width:820px){
  .case .framed{padding:32px 0 48px}
  .case h1{font-size:clamp(32px,8.6vw,40px)}
  .case .stats{--n:clamp(40px,11vw,48px);column-gap:20px}
  .asks li{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:22px 0 20px}
  .asks .q,.asks .n{font-size:24px}
  .asks .r{text-align:left;display:flex;align-items:baseline;gap:12px}
  .asks .r .lab{margin-top:0}
}

/* ── the inner pages, narrower ── */
@media (max-width:1023px){
  .phead .intro,.cell{grid-template-columns:minmax(0,1fr);gap:14px}
  .phead .intro > .copy,.cell > .body{grid-column:1}
  .lede{max-width:60ch}
  .proof .in.note .src{grid-column:1 / -1}
}
@media (max-width:820px){
  .sheet{padding:0 20px}
  .sheet .head{padding:18px 0 14px}
  .phead h1{font-size:clamp(34px,9.6vw,40px);line-height:1.08;line-height:round(1.08em,1px);margin-top:44px}
  .phead .intro{margin-top:28px;padding-bottom:44px}
  .cell{padding:28px 0 36px}
  .say{font-size:24px}
  .ask{flex-direction:column;align-items:flex-start;gap:14px}
  .facts > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .table{font-size:12px}
  .proof .in{grid-template-columns:1fr;gap:10px;padding:22px 0 20px}
  .proof .meta{display:contents}
  .proof .meta .lab{order:1}
  .proof .num{order:2;font-size:clamp(40px,11vw,48px)}
  .proof .lead .num{font-size:clamp(88px,26vw,112px)}
  .proof .lead .in{row-gap:14px}
  .proof .src{order:3;margin-top:0}
  .proof .in.note .src{grid-column:auto}
  .capture{padding:20px 16px 18px}
  .capture .big{font-size:32px}
  .capture .title{font-size:19px}
  .capture table,.capture tbody,.capture tr,.capture td{display:block;width:auto}
  .capture thead{display:none}
  .capture tr{padding:12px 0 10px;border-bottom:1px solid var(--rule)}
  .capture td{border:0;padding:3px 0}
  .capture td.q{width:auto}
  .capture td[data-label]::before{content:attr(data-label) " ";font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60)}
  .capture .sources ul{grid-template-columns:1fr}
  .capture .sign{flex-direction:column;gap:4px}
  .meet{padding-top:0}
  .meet .photo{height:max(round(64vh, 1px), round(calc(100vw / 1.6), 1px));margin:0}
  .meet .words{padding:44px 20px 48px}
}

/* ═══ from the homepage: the footer, section 8 ═══ */
#s8{--mid:#6E6C66;--far:#A9A79F;--ease:cubic-bezier(.4,0,.2,1)}
#s8{--rule-end:0px;--origin:480px;position:relative;padding:0 calc(var(--gutter) + var(--rule-end)) 0 var(--gutter)}
#s8::before{content:"";position:absolute;left:0;top:0;right:calc(var(--gutter) + var(--rule-end));height:1px;background:var(--ink)}
@media (min-width:821px){#s8{--rule-end:96px}}
#s8 .lab{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60)}
#s8 .rows{list-style:none;margin:0;padding:0}
#s8 .pages{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:6px}
#s8 .pages a{color:var(--ink-60);text-decoration:none;white-space:nowrap}
#s8 .pages a:hover,#s8 .pages a.call{color:var(--ink)}
#s8 .pages a.call{font-weight:500}
#s8 .rows li{display:grid;grid-template-columns:calc(var(--origin) - 24px) minmax(0,1fr);gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--ink)}
#s8 .rows p{font-size:16px;line-height:24px;color:var(--text);max-width:60ch;text-wrap:balance}
#s8 .rows .slot{color:#6E6C66}
#s8 .rows p + p{margin-top:6px}
#s8 .end{position:relative;height:round(calc(var(--mark) * .76 + 72px), 1px)}
#s8 .ground{position:absolute;left:calc(-1 * var(--gutter));width:calc(100% + var(--gutter) * 2 + var(--rule-end));top:auto;bottom:-12px;height:24px;overflow:visible;pointer-events:none}
#s8 .below{display:flex;flex-direction:column;justify-content:flex-end;min-height:round(calc(100vh - var(--pearl-y, 64vh) - var(--pearl-d, 96px) / 2), 1px);padding:round(calc(var(--mark) * .3), 1px) 0 24px}
#s8 .ground path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;opacity:.8}
#s8 .mark{position:absolute;left:0;bottom:-.18em;font-family:var(--serif);font-weight:300;letter-spacing:-.015em;font-size:var(--mark);line-height:1;color:var(--ink);margin:0 0 0 -.045em;white-space:nowrap}
#s8 .spot{display:inline-block;position:relative;width:.19em;height:1px;margin-left:.05em;vertical-align:baseline}
#s8 .s8stop{position:absolute;left:0;bottom:0;font-size:.19em;width:1em;height:1em}
@media (max-width:1023px){
  #s8 .rows li{grid-template-columns:1fr;gap:6px;padding:16px 0}
}
@media (max-width:820px){
  #s8{--mark:clamp(72px,22vw,96px);padding:0 20px 0}
  #s8 .end{height:round(calc(var(--mark) * .76 + 48px), 1px)}
  #s8 .ground{left:-20px;width:calc(100% + 40px)}
  #s8 .below{min-height:0}
  #s8 .pages{flex-direction:column;gap:8px}
  #s8::before{display:none}
}