/* ══════════════════════════════════════════════════════════════════════════
   METARCH ABOUT · 23 Sep 2026

   LOADED ON TOP OF library.css, NEVER INSTEAD OF IT. Every brand token, the
   header lock, the plinth, the tables, the h2 rules and the footer already
   live there and are not repeated here. This file only carries the things the
   About page has that no other page does: the hero glow, the founder cards,
   the comparison grid and the key-facts list.

   ⛔ IT MUST BE LINKED AFTER library.css. Several rules below deliberately
   restate a library.css selector at equal specificity (.hero padding, .wrap-w
   width), and at equal specificity the one written LAST wins. Linked first,
   they lose silently and the page renders at the Library's narrow measure.
   That is the cascade-placement trap recorded in CLAUDE.md.

   ⛔ ZERO JAVASCRIPT, same as the Library and for the same reason. Several AI
   crawlers do not run scripts, and being quotable IS the job of this page. The
   two "read the full story" expanders are <details>, which is native HTML and
   needs nothing. Do not replace them with a script.

   DESIGN RULES FOLLOWED, from CLAUDE.md: 2px corners · flat #FFF200, never a
   gradient · #030303 page, #0c0b09 card, #050505 ground · hairline
   rgba(240,236,220,0.09) · NO BOXES, structure comes from rules and hairlines ·
   Mont 800 at 0.17em tracking uppercase for labels · Exodus Display for display
   type and headline numerals · Vollkorn for editorial headlines.
   ══════════════════════════════════════════════════════════════════════════ */

/* The About page is the widest of the content pages. It carries two founder
   columns side by side and a four column comparison, neither of which fits the
   Library's reading measure. */
.wrap-w{max-width:1180px;}

/* ── THE GRAIN. Lifted from home.html, where it sits over the whole page at 4%.
      An inline SVG turbulence, so it costs no request. ───────────────────── */
.grain{position:fixed;inset:0;opacity:.04;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
body > *{position:relative;z-index:2;}

/* ⛔ REQUIRED BY THE FULL-BLEED GROUNDS BELOW. A 100vw element counts the
   scrollbar in its width, so without this the page gains a horizontal
   scrollbar on any desktop that shows one. home.html carries the identical
   pair of lines for the identical reason. clip is the modern one; hidden is
   the fallback for older browsers, and the order matters. */
html{overflow-x:hidden;overflow-x:clip;}
body{overflow-x:hidden;overflow-x:clip;}

/* ── THE HERO. home.html's two radial washes, same coordinates and same
      opacities, so the top of this page and the top of the landing page are
      recognisably the same object. ───────────────────────────────────────── */
.ab-hero{position:relative;overflow:hidden;padding:70px 0 54px;text-align:center;
  background:
    radial-gradient(1500px 760px at 82% -14%, rgba(255,242,0,.17), transparent 55%),
    radial-gradient(1100px 640px at 2% 120%, rgba(255,242,0,.06), transparent 60%),
    #030303;}
/* The fading yellow hairline that closes home.html's hero. */
.ab-hero:after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,242,0,.4),transparent);}
/* Vollkorn, matching home.html's h1 exactly. See the long note on h1 in
   library.css: Exodus is a label face on this brand and never a heading face. */
.ab-hero h1{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(38px,7vw,74px);line-height:1.02;margin:0 auto 22px;max-width:23ch;}

/* THE HEADLINE BREAKS, SET BY HAND. Off by default, on from 900px up. The
   measure above is wide enough to hold the longest of the three lines,
   "because we needed it.", so the forced breaks are the only breaks. */
.ab-hero h1 .hb{display:none;}
@media (min-width:900px){ .ab-hero h1 .hb{display:inline;} }
/* ⛔ NO text-wrap:balance ON THIS HEADLINE. 23 Sep 2026, Kai: "it starts on the
   third line, it should finish the second line." Balance makes every line the
   same length, which is usually what you want, but here it was splitting the
   sentence as "because we needed" / "it. Now it's your turn." and stranding the
   "it." Without it the browser fills each line greedily, so the measure below
   decides the break: 21ch is wide enough to hold "because we needed it." and
   too narrow to pull "Now" up with it. If the headline copy ever changes,
   re-check this number, because it is tuned to these exact words. */
.ab-hero .sub{font-family:var(--serif);font-size:clamp(17px,2.05vw,20px);
  line-height:1.62;color:rgba(243,238,222,.84);max-width:64ch;margin:0 auto;}
.ab-hero .sub + .sub{margin-top:17px;}
.ab-hero .sub b{color:var(--gold);font-weight:600;}

/* The trust strip, the same device as home.html's .mx-trust: a sentence held
   between two short gold rules rather than put in a box. */
.ab-trust{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 22px;}
.ab-trust i{flex:1 1 auto;max-width:120px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,242,0,.45));}
.ab-trust i:last-child{background:linear-gradient(90deg,rgba(255,242,0,.45),transparent);}
.ab-trust p{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mut);margin:0;}
.ab-trust b{color:var(--gold);font-weight:700;}

/* ── SECTIONS ───────────────────────────────────────────────────────────────
   ⛔ REDESIGNED 23 Sep 2026 ON KAI'S INSTRUCTION: "much sexier and cleaner
   design throughout the page so it's like home.html in style with the bgs and
   layouts ... you have to consider centering certain titles."

   WHAT CHANGED AND WHY. library.css draws an h2 left aligned with a 58px
   plinth in its top-left corner. That is correct for an ARTICLE, where the
   heading introduces a column of running text. This page is not an article. It
   is a landing page, and home.html centres every section title over a centred
   plinth with real space around it. Left-aligned titles above centred sections
   are exactly what read as "off".

   THE RHYTHM IS home.html's. Sections were 16px apart and are now
   clamp(60px,6.5vw,104px), which is the same breathing room .mx-blk uses.
   Cramped vertical space is the single biggest tell of a cheap page. */
/* ⛔ TOP AND BOTTOM MUST STAY EQUAL. 23 Sep 2026, Kai: "a very tiny or no
   margin at the bottom of a section and a massive gap at the top of the next".
   This was padding on the TOP ONLY, so a section's last line sat flush against
   the divider and every bit of air piled up above the next heading: 96px of
   section padding plus 30px of plinth space, against nothing underneath. It
   read as broken rather than spacious.
   The space is now split evenly and made smaller, so the gap above a divider
   matches the gap below it. If you change one number here, change both. */
.ab-sec{padding:clamp(32px,3.4vw,50px) 0;position:relative;}

/* The centred title. The plinth moves from the top-left corner to centred
   above the heading, and the heading grows to home.html's h2 size. */
.ab-sec > h2{text-align:center;font-weight:500;
  font-size:clamp(28px,3.6vw,50px);line-height:1.04;letter-spacing:-.02em;
  max-width:24ch;margin:0 auto clamp(22px,2.4vw,32px);
  padding-top:0;padding-bottom:22px;text-wrap:balance;}
/* ⛔ display:block IS LOAD-BEARING, DO NOT DROP IT. library.css carries
   "h2:first-child:before{display:none}", because in an ARTICLE the very first
   heading needs no rule above it. On this page EVERY section's h2 is the first
   child of its section, so that rule was hiding the plinth above every single
   title. The centring below was being applied to something invisible, and the
   22px of padding that makes room for it looked like a random gap. Found by
   measuring the rendered page, not by reading the CSS. */
/* ⛔ top:auto IS REQUIRED, not decoration. library.css pins this to top:0, and
   an absolutely positioned box keeps obeying `top` unless you explicitly
   release it. Setting bottom:0 alone would leave it stretched between the two
   and it would not move. 23 Sep 2026, Kai: "put the lines underneath the
   title." The heading's padding moved from the top to the bottom to make the
   room for it. */
.ab-sec > h2:before{display:block;top:auto;bottom:0;
  left:50%;transform:translateX(-50%);width:120px;}
/* A gold italic phrase inside a title, the device home.html uses everywhere. */
.ab-sec > h2 em{font-style:italic;color:var(--gold);}

/* THE SECTION INTRO IS CENTRED. A short paragraph sitting directly under a
   centred title has to be centred too, or its left edge disagrees with the
   full-width rows further down the section and the whole block reads as
   indented by accident. Caught in the 23 Sep headless render: the founders
   intro started 175px to the right of the founder rows below it. */
.ab-sec > p{max-width:64ch;color:rgba(243,238,222,.86);margin:0 auto 17px;
  text-align:center;}
.ab-sec > p:last-child{margin-bottom:0;}

/* ⛔ THE EXCEPTION, AND IT IS NOT OPTIONAL. Centring works for four lines. It
   does NOT work for a long paragraph: past about eight lines the eye loses
   where the next line starts and the text becomes genuinely hard to read.
   The one long paragraph on this page, the answer to "what makes Metarch
   different", carries .ab-long and stays left aligned in a wider measure.
   If a future section gets a paragraph over about eight lines, give it this
   class too rather than letting it centre. */
.ab-sec > p.ab-long{max-width:var(--ab-measure);text-align:left;}

/* The one exception. The single opening sentence of a section is short enough
   to centre, and centring it is what makes it read as a statement rather than
   as the first line of a paragraph. */
.ab-sec > p.lede{text-align:center;max-width:34ch;font-family:var(--serif);
  font-weight:500;font-size:clamp(20px,2.4vw,28px);line-height:1.38;
  letter-spacing:-.015em;margin-bottom:30px;color:rgba(243,238,222,.92);}
/* Its bold opening clause stays gold, but not at 700 weight: in Vollkorn at
   28px, 700 against 500 is a shout. 600 reads as emphasis. */
.ab-sec > p.lede strong{font-weight:600;color:var(--gold);}

/* The first section sits right under the hero, which already carries its own
   deep padding. Same relationship home.html draws with ".hero + .mx-blk". */
.ab-hero + main .ab-sec:first-of-type{padding-top:clamp(26px,2.8vw,40px);}

/* ── GROUNDS GET DEPTH ──────────────────────────────────────────────────────
   Straight from home.html's own note: "flat #030303 everywhere is the cheap
   tell". Alternate sections sit on a slightly warmer ground with a faint gold
   wash falling from the top edge.

   THE FULL-BLEED TRICK, explained because it looks strange otherwise. These
   sections live inside a 1180px centred column, so a background set on them
   would stop at the column edge and look like a floating grey box. The :before
   is pulled to the middle of the viewport and made a full viewport wide, so
   the colour runs edge to edge behind the text while the text stays in its
   column. z-index -1 keeps it behind the words. */
/* No padding override any more. Every section already carries equal padding
   top and bottom, so a shaded band gets the same air as an unshaded one and
   the two kinds of section keep the same rhythm. */
.ab-sec.ab-ground:before{content:"";position:absolute;inset:0;z-index:-1;
  left:50%;transform:translateX(-50%);width:100vw;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,242,0,.05), transparent 62%),
    linear-gradient(180deg,#070605,#090807 50%,#070605);}
.ab-sec > p b,.ab-sec > p strong{color:var(--gold);font-weight:700;}
.ab-sec a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,242,0,.35);}
.ab-sec a:hover{border-bottom-color:var(--gold);}

/* ── THE SECTION SEPARATOR ──────────────────────────────────────────────────
   ⛔ RESTYLED 23 Sep 2026, AND ONLY ON THIS PAGE. The markup still says
   <span class="plinth-w">, and library.css still draws that as a full-width
   chalk-and-red plinth bar. On the Library, where it appears once or twice per
   article, that is a strong brand device. On this page it appeared EIGHT
   times, and a heavy two-colour bar repeated eight times down one page stops
   reading as a device and starts reading as a fence.

   home.html separates its sections with .mx-rule: a single hairline that fades
   to nothing at both ends. That is what this now draws. The plinth is not
   gone from the page, it still sits centred above every section title, which
   is where it earns its keep. about.css is loaded on this page only, so the
   Library and the Glossary are untouched. */
.plinth-w{height:1px;margin:0;background:
  linear-gradient(90deg,transparent,rgba(255,242,0,.3),transparent);}
/* Where a shaded band starts or ends, the band edge IS the separation and a
   hairline on top of it reads as a double line. Hide the two that touch it.
   :has() reads "the hairline that is followed by a shaded section". If a
   browser is too old to understand it, the hairline simply stays, which is
   harmless rather than broken. */
.ab-sec.ab-ground + .plinth-w{display:none;}
.plinth-w:has(+ .ab-sec.ab-ground){display:none;}

/* ── WHAT METARCH DOES. A column of rules, the way the app lists channels.
      Not cards. Not tiles. ────────────────────────────────────────────────── */
/* ⛔ ONE MEASURE FOR THE WHOLE PAGE, set here and used by every block below.
   The 23 Sep render showed the fault this fixes: the list sat in a 960px box
   but its text stopped at 74ch, about 700px, so every hairline ran 260px past
   the end of the words and the section looked left-heavy under a centred
   title. The rule now is that the container IS the text measure, so a hairline
   always ends where the sentence ends. Change this number and the list, the
   key facts and the FAQ all move together. */
:root{--ab-measure:880px;}

.ab-list{margin:6px auto 0;max-width:var(--ab-measure);}
.ab-item{padding:26px 0;border-bottom:1px solid var(--line);}
/* The last row drops its own bottom padding as well as its rule. Otherwise it
   adds 26px on top of the section's padding and that one boundary sits deeper
   than every other boundary on the page. */
.ab-item:last-child{border-bottom:none;padding-bottom:0;}
/* h3 in library.css is the small gold label. That is exactly right here, so it
   is inherited rather than restated. Only the top margin is reset: inside a
   row the label is the first thing and needs no gap above it. */
.ab-item h3{margin:0 0 9px;}
/* No max-width of its own. The container above is already the measure, and a
   second narrower cap in here is what created the ragged right edge. */
.ab-item p{color:rgba(243,238,222,.86);margin:0;}
.ab-item p b{color:var(--ink);font-weight:700;}

/* ── WHO USES METARCH. Three columns of rules divided by hairlines.
      CENTRED 23 Sep 2026. Three short columns under a centred title read as a
      set when they are centred and as a ragged list when they are not. ───── */
.ab-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0;margin-top:10px;text-align:center;}
.ab-who > div{padding:26px 30px;border-left:1px solid var(--line);}
.ab-who > div:first-child{border-left:none;}
.ab-who h3{margin:0 0 12px;}
/* ⛔ NOT var(--mut). These three read as one of the page's real sections, not as
   a caption, and --mut is 50% ink: on a phone, where the columns stack and each
   one becomes a full paragraph, it rendered visibly fainter than every other
   paragraph around it and looked disabled rather than secondary. Matched to the
   body ink used everywhere else on the page. */
.ab-who p{font-size:15px;line-height:1.55;color:rgba(243,238,222,.86);margin:0;}

/* ── THE FOUNDERS ───────────────────────────────────────────────────────────
   ⛔ REBUILT 23 Sep 2026. Kai: "the about us with me and andrew just looks off".
   He was right, and here is what was actually wrong with it.

   It was two narrow columns side by side with a hairline down the middle. That
   forced three bad things at once. The portraits had to be small, 152px, so
   two faces sat on the page at the size of a stamp. The names had to be small
   to fit a half-width column. And the stat strip, which wants to run across,
   was crammed into half the page and wrapped.

   It is now home.html's .mx-row instead: one founder per full-width row, a
   large portrait on one side and the words on the other, and the second row
   MIRRORED so the two photos sit on opposite sides. That is the alternating
   rhythm the landing page uses for every feature block, the portraits get to
   be 300px, and the numbers get a full line to themselves.

   THE MIRROR IS CSS ONLY. The markup stays in reading order, photo first, so a
   screen reader and an AI crawler still get name-then-photo in the right
   order on both. Only the painted position swaps. */
.ab-founders{display:flex;flex-direction:column;gap:clamp(44px,5.5vw,84px);
  margin-top:20px;}
.ab-fc{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);align-items:start;}
/* The second founder, mirrored. */
.ab-fc:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,300px);}
.ab-fc:nth-child(even) .ab-fp{grid-column:2;grid-row:1;}
.ab-fc:nth-child(even) .ab-fbody{grid-column:1;grid-row:1;}

/* The portrait. 2px corners like everything else that is not an avatar, and a
   hairline rather than a frame. The glow behind it is the same falling gold
   wash home.html puts behind its panels, so the photo sits IN the page rather
   than on top of it. */
.ab-fp{position:relative;width:100%;max-width:300px;aspect-ratio:1;
  border-radius:2px;overflow:hidden;background:var(--card);
  box-shadow:inset 0 1px 0 rgba(255,242,0,.16),
             inset 0 0 0 1px rgba(243,238,222,.06),
             0 22px 58px rgba(0,0,0,.62);}
.ab-fp:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%, rgba(255,242,0,.1), transparent 60%);}
/* Pinned to the corners of the square rather than sized in the flow. A plain
   height:100% is ignored when the parent's height comes from aspect-ratio, so
   the portrait rendered taller than it was wide. */
.ab-fp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* ⛔ text-transform AND color MUST BE RESTATED HERE. This is an <h3>, and
   library.css styles every h3 as the small gold uppercase label. .ab-fn was
   overriding the family, size, weight and spacing but NOT those two, so the
   founder names rendered as YELLOW SHOUTING CAPITALS instead of a name. Caught
   in the 23 Sep headless render. Restating a property you did not think you
   needed is the whole lesson: inheritance only stops where you stop it. */
.ab-fn{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,42px);
  letter-spacing:-.02em;line-height:1.06;margin:0 0 10px;
  text-transform:none;color:var(--ink);}
.ab-fr{font-family:var(--ui);font-weight:700;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);margin:0 0 16px;}
.ab-ft{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.55;
  color:rgba(243,238,222,.86);margin:0 0 20px;max-width:52ch;}

/* The per-founder number strip. It now has a full row to run across, so it
   reads as an instrument panel instead of wrapping in a narrow column. */
.ab-fs{display:flex;flex-wrap:wrap;gap:0;margin:0 0 20px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;}
.ab-fs div{padding:2px 22px;border-left:1px solid rgba(255,242,0,.22);}
.ab-fs div:first-child{border-left:none;padding-left:0;}
.ab-fs b{display:block;font-family:var(--serif);font-size:clamp(22px,2.1vw,27px);
  font-weight:600;line-height:1;color:var(--gold);}
.ab-fs span{display:block;font-family:var(--ui);font-weight:700;font-size:8.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--mut);margin-top:7px;}

/* THE STORY EXPANDER. <details>, so it works with no script at all. The arrow
   is drawn with a border rather than a glyph so no icon font is needed. */
.ab-story{margin:0 0 16px;}
.ab-story summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);padding:9px 0;}
.ab-story summary::-webkit-details-marker{display:none;}
.ab-story summary:after{content:"";width:6px;height:6px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s;}
.ab-story[open] summary:after{transform:rotate(-135deg) translate(-2px,-2px);}
.ab-story summary:hover{color:#fffa4d;}
.ab-story .ab-sbody{border-top:1px solid var(--line);padding-top:16px;margin-top:4px;}
.ab-story p{font-size:15px;line-height:1.66;color:rgba(243,238,222,.8);margin-bottom:14px;}
.ab-story p:last-child{margin-bottom:0;}

/* Socials. Rules again, never pills. */
.ab-soc{display:flex;flex-wrap:wrap;gap:0;padding-top:4px;}
.ab-soc a{font-family:var(--ui);font-weight:700;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mut);text-decoration:none;
  padding:6px 16px;border-left:1px solid var(--line);}
.ab-soc a:first-child{border-left:none;padding-left:0;}
.ab-soc a:hover{color:var(--gold);}

/* ── THE CHANNELS STRIP. The proof, as a row of rules.
      CENTRED and given bigger logos, 23 Sep 2026, to match the centred title
      above it. Each channel stacks its logo over its name rather than sitting
      beside it, which is what lets three of them centre cleanly. ─────────── */
.ab-chs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0;margin-top:14px;}
.ab-ch{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;padding:28px 24px;border-left:1px solid var(--line);}
.ab-ch:first-child{border-left:none;}
.ab-ch img{width:64px;height:64px;border-radius:50%;flex:none;display:block;
  box-shadow:0 0 0 1px rgba(255,242,0,.22);}
.ab-ch b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;
  line-height:1.2;color:var(--ink);}
.ab-ch span{display:block;font-family:var(--ui);font-size:12.5px;line-height:1.45;
  color:var(--mut);margin-top:4px;}

/* ── THE COMPARISON. A real table, because a table survives being chunked by a
      retriever and a paragraph of the same facts does not. ─────────────────
   .tbl already exists in library.css and is inherited whole. This adds only
   the tick and cross marks and the column that names us. */
/* The proof table sits in the same measure as everything else. .tw is the
   scroll wrapper library.css puts round every table so a wide one scrolls
   inside itself instead of pushing the page sideways. */
.ab-sec .tw{max-width:var(--ab-measure);margin-left:auto;margin-right:auto;}
.ab-cmp th:first-child{width:30%;}
.ab-cmp .me{color:var(--gold);}
.ab-cmp td.y{color:var(--gold);font-weight:700;}
.ab-cmp td.n{color:rgba(243,238,222,.42);}

/* ── KEY FACTS. A definition list, which is the shape a retriever reads best:
      every row is a labelled pair with nothing to infer. ──────────────────── */
.ab-facts{display:grid;grid-template-columns:200px 1fr;gap:0;
  margin:20px auto 0;max-width:var(--ab-measure);
  border-top:1px solid var(--line);}
.ab-facts dt{font-family:var(--ui);font-weight:700;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,242,0,.7);
  padding:13px 18px 13px 0;border-bottom:1px solid var(--line);}
.ab-facts dd{margin:0;padding:13px 0;border-bottom:1px solid var(--line);
  color:rgba(243,238,222,.86);font-size:15px;line-height:1.55;}
.ab-facts dd a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(255,242,0,.35);}
.ab-facts dd a:hover{border-bottom-color:var(--gold);}

/* ── FAQ. <details> again, no script. ───────────────────────────────────── */
.ab-faq{margin:10px auto 0;max-width:var(--ab-measure);}
.ab-q{border-bottom:1px solid var(--line);}
.ab-q summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  justify-content:space-between;gap:20px;padding:19px 0;
  font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.3vw,21px);
  letter-spacing:-.01em;line-height:1.35;color:var(--ink);}
.ab-q summary::-webkit-details-marker{display:none;}
.ab-q summary:hover{color:var(--gold);}
.ab-q summary:after{content:"";width:8px;height:8px;flex:none;margin-top:7px;
  border-right:1.5px solid rgba(255,242,0,.62);border-bottom:1.5px solid rgba(255,242,0,.62);
  transform:rotate(45deg);transition:transform .2s;}
.ab-q[open] summary:after{transform:rotate(-135deg);margin-top:11px;}
.ab-q p{font-size:15px;line-height:1.65;color:rgba(243,238,222,.8);
  padding:0 0 20px;margin:0;}
.ab-q p + p{padding-top:14px;}

/* ── THE CLOSING CALL. home.html's flat yellow button, same metrics. ─────── */
.ab-end{text-align:center;padding:52px 0 0;}
.ab-end p{font-family:var(--serif);font-size:clamp(18px,2.4vw,22px);line-height:1.5;
  color:rgba(243,238,222,.86);max-width:56ch;margin:0 auto 26px;}
/* ⛔ DELIBERATELY LARGE, 23 Sep 2026. Kai: "much bigger buttons with GROW
   FASTER ... make it clear." This was 11px type in 15px/30px padding and read
   as a footnote. It is now 15px in 22px/54px, which is roughly double the ink
   and the biggest single element on the page after the headline. Keep it
   bigger than the body text. If a narrow screen makes it wrap, the 620px
   block below drops it to full width rather than shrinking it. */
.ab-cta{display:inline-block;background:var(--gold);color:#070707;
  font-family:var(--ui);font-weight:800;font-size:15px;letter-spacing:.17em;
  /* The trailing gap after the last letter drags a letter-spaced centred label
     left of centre. text-indent equal to the letter-spacing puts it back. */
  text-indent:.17em;text-transform:uppercase;text-decoration:none;
  padding:22px 54px;border-radius:2px;}
.ab-cta:hover{background:#fffa4d;color:#070707;}

/* The mid-page call, so somebody who stops reading half way still has a door.
   Same button, its own spacing band, centred on the reading column. */
.ab-mid{text-align:center;padding:14px 0 30px;}

/* ── NARROW ─────────────────────────────────────────────────────────────────
   ⛔ ORDER MATTERS IN HERE. The 620px block sits after the 900px block, both
   apply at 600px, they are equal specificity, so the later one wins. Written
   the other way round the single-column founder rule is overwritten and the
   two columns stay side by side on a phone. Same trap as library.css. */
@media (max-width:900px){
  /* THE FOUNDER ROWS STACK. Below 900 there is not enough width for a 300px
     portrait beside a paragraph, so the photo goes above the words and the
     mirror is switched off: an alternating layout needs two columns to
     alternate between, and left with the mirror on, the second founder's photo
     would jump to the bottom of their own block. */
  .ab-fc{grid-template-columns:1fr;gap:22px;}
  .ab-fc:nth-child(even){grid-template-columns:1fr;}
  .ab-fc:nth-child(even) .ab-fp,
  .ab-fc:nth-child(even) .ab-fbody{grid-column:1;grid-row:auto;}
  .ab-fp{max-width:220px;}
  .ab-who > div{border-left:none;padding:18px 0;border-top:1px solid var(--line);}
  .ab-who > div:first-child{border-top:none;padding-top:0;}
  .ab-ch{border-left:none;padding:16px 0;border-top:1px solid var(--line);}
  .ab-ch:first-child{border-top:none;padding-top:0;}
  .ab-who > div{border-left:none;padding:18px 0;border-top:1px solid var(--line);}
  .ab-who > div:first-child{border-top:none;padding-top:0;}
  .ab-ch{border-left:none;padding:16px 0;border-top:1px solid var(--line);}
  .ab-ch:first-child{border-top:none;padding-top:0;}
}

@media (max-width:620px){
  .ab-hero{padding:44px 0 36px;}
  .ab-trust{gap:10px;}
  .ab-trust i{max-width:40px;}
  /* The label sits above its value rather than beside it. A 200px label column
     leaves nothing for the value on a narrow screen. */
  .ab-facts{grid-template-columns:1fr;border-top:none;}
  .ab-facts dt{border-bottom:none;padding:14px 0 3px;}
  .ab-facts dd{padding:0 0 14px;}
  .ab-fs div{padding:4px 12px;}
  .ab-soc a{padding:6px 12px;}
  /* The big button goes full width on a phone instead of shrinking, so the
     label never wraps onto two lines inside the gold. */
  .ab-cta{display:block;padding:20px 16px;font-size:14px;}
}