:root{
    --paper:#FBFAF7;
    --surface:#FEFDFB;
    --ink:#2A2540;
    --ink-text:#2A2540;
    --ink-bg:#2A2540;
    --shadow:#2A2540;
    --body:#5A5568;
    --muted:#6F6885;
    --iris:#7C6BF0;
    --iris-deep:#5448B5;
    --hairline:#ECE8DF;
    --hairline-2:#D9D4C8;
    --mint:#C9F7E6;
    --butter:#FCE3C4;
    --blush:#FBD2D7;
    --mint-ink:#0F6E56;
    --butter-ink:#9A5A11;
    --blush-ink:#A32D3A;
    --tint-iris:#F0EDFB;
    --tint-iris-line:#DAD3F5;
    --tint-butter:#FBF3D9;
    --ink-soft:#3D3850;
    --shadow-iris:#D9D3FB;
    --hl-band:#D9D3FB;
    --tex-dot:rgba(42,37,64,0.10);
    --tex-band:rgba(42,37,64,0.055);
    --sel:#D9D3FB;
    --rd:0ms;
    --skel-hi:#F4F1EA;
    --chip-on-bg:#5448B5;
    --chip-on-ink:#FFFFFF;
    --on-ink-mint:#7BE8C3;
    --on-ink-butter:#F5C97A;
    --on-ink-body:#D8D4E8;
    --on-white-ink:#2A2540;
    --on-white-body:#3D3850;
    --cloud-ink:#57506E;
    --gold:#F2CE7A;
    --gold-ink:#5B3F0A;
    --gold-deep:#8A6510;
    --navh:66px;
  }
  @media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --paper:#08090C;
    --surface:#12141A;
    --ink:#4C5468;
    --ink-text:#F4F6FA;
    --ink-bg:#12141A;
    --body:#BFC4D2;
    --muted:#868C9C;
    --iris:#8271FF;
    --iris-deep:#AEA2FF;
    --hairline:#22252E;
    --hairline-2:#2E3340;
    --shadow:#4A3AD1;
    --mint:#0A4634;
    --butter:#4A3410;
    --blush:#4C1C25;
    --mint-ink:#5CFFC8;
    --butter-ink:#FFD37A;
    --blush-ink:#FF9DAB;
    --tint-iris:#191B26;
    --tint-iris-line:#3E4358;
    --tint-butter:#4A3410;
    --ink-soft:#BFC4D2;
    --shadow-iris:#4A3AD1;
    --hl-band:rgba(130,113,255,0.45);
    --tex-dot:rgba(244,246,250,0.10);
    --tex-band:rgba(244,246,250,0.05);
    --sel:#3A2F8C;
    --rd:0ms;
    --skel-hi:#2A2E3A;
    --chip-on-bg:#AEA2FF;
    --chip-on-ink:#08090C;
    --cloud-ink:#9E96C8;
    --gold:#FFC95E;
    --gold-ink:#1B1405;
    --gold-deep:#FFD98A;
    --on-ink-mint:#7BE8C3;
    --on-ink-butter:#F5C97A;
    --on-ink-body:#D8D4E8;
    --on-white-ink:#2A2540;
    --on-white-body:#3D3850;
  }
  }
  :root[data-theme="dark"]{
    --paper:#08090C;
    --surface:#12141A;
    --ink:#4C5468;
    --ink-text:#F4F6FA;
    --ink-bg:#12141A;
    --body:#BFC4D2;
    --muted:#868C9C;
    --iris:#8271FF;
    --iris-deep:#AEA2FF;
    --hairline:#22252E;
    --hairline-2:#2E3340;
    --shadow:#4A3AD1;
    --mint:#0A4634;
    --butter:#4A3410;
    --blush:#4C1C25;
    --mint-ink:#5CFFC8;
    --butter-ink:#FFD37A;
    --blush-ink:#FF9DAB;
    --tint-iris:#191B26;
    --tint-iris-line:#3E4358;
    --tint-butter:#4A3410;
    --ink-soft:#BFC4D2;
    --shadow-iris:#4A3AD1;
    --hl-band:rgba(130,113,255,0.45);
    --tex-dot:rgba(244,246,250,0.10);
    --tex-band:rgba(244,246,250,0.05);
    --sel:#3A2F8C;
    --rd:0ms;
    --skel-hi:#2A2E3A;
    --chip-on-bg:#AEA2FF;
    --chip-on-ink:#08090C;
    --cloud-ink:#9E96C8;
    --gold:#FFC95E;
    --gold-ink:#1B1405;
    --gold-deep:#FFD98A;
    --on-ink-mint:#7BE8C3;
    --on-ink-butter:#F5C97A;
    --on-ink-body:#D8D4E8;
    --on-white-ink:#2A2540;
    --on-white-body:#3D3850;
  }
  :root[data-theme="light"]{
    --paper:#FBFAF7;
    --surface:#FEFDFB;
    --ink:#2A2540;
    --ink-text:#2A2540;
    --ink-bg:#2A2540;
    --shadow:#2A2540;
    --body:#5A5568;
    --muted:#6F6885;
    --iris:#7C6BF0;
    --iris-deep:#5448B5;
    --hairline:#ECE8DF;
    --hairline-2:#D9D4C8;
    --mint:#C9F7E6;
    --butter:#FCE3C4;
    --blush:#FBD2D7;
    --mint-ink:#0F6E56;
    --butter-ink:#9A5A11;
    --blush-ink:#A32D3A;
    --tint-iris:#F0EDFB;
    --tint-iris-line:#DAD3F5;
    --tint-butter:#FBF3D9;
    --ink-soft:#3D3850;
    --shadow-iris:#D9D3FB;
    --hl-band:#D9D3FB;
    --tex-dot:rgba(42,37,64,0.10);
    --tex-band:rgba(42,37,64,0.055);
    --sel:#D9D3FB;
    --rd:0ms;
    --skel-hi:#F4F1EA;
    --chip-on-bg:#5448B5;
    --chip-on-ink:#FFFFFF;
    --on-ink-mint:#7BE8C3;
    --on-ink-butter:#F5C97A;
    --on-ink-body:#D8D4E8;
    --on-white-ink:#2A2540;
    --on-white-body:#3D3850;
    --cloud-ink:#57506E;
    --gold:#F2CE7A;
    --gold-ink:#5B3F0A;
    --gold-deep:#8A6510;
  }

  /* ---- the field: a comparison matrix with us in the first column -------------------
     Lifted out of the home page's style block (Edward, 2026-07-30) so the API page can
     render the SAME table rather than a lookalike. Two matrices with different padding
     would read as two different products. */
  .fld-scroll{overflow-x:auto;margin-top:18px;-webkit-overflow-scrolling:touch;}
  .fld{border-collapse:collapse;width:100%;min-width:640px;font-size:13px;}
  .fld th,.fld td{padding:9px 6px;text-align:center;border-bottom:1.5px solid var(--hairline);}
  .fld thead th{font-size:11.5px;font-weight:700;color:var(--muted);vertical-align:bottom;
    border-bottom:2px solid var(--ink);}
  .fld .fld-feat{text-align:left;font-size:12.5px;color:var(--body);width:44%;
    padding-left:0;line-height:1.4;}
  .fld tfoot .fld-feat{font-weight:700;color:var(--ink-text);}
  .fld .fld-us{background:var(--tint-iris);}
  .fld thead .fld-us{font-size:14px;font-weight:700;color:var(--ink-text);
    border-radius:10px 10px 0 0;}
  .fld tfoot td{border-bottom:0;border-top:2px solid var(--ink);font-weight:700;
    font-size:14px;padding-top:11px;}
  .fld tfoot .fld-us{border-radius:0 0 10px 10px;color:var(--iris-deep);}
  .fld tfoot span{font-weight:600;font-size:10.5px;color:var(--muted);}
  .fld .tick{color:var(--mint-ink);font-weight:700;font-size:15px;}
  .fld .cross{color:var(--hairline-2);font-weight:700;font-size:15px;}
  /* The note under a matrix is small print, but small print people actually read: one
     short paragraph per point, spaced apart, at a size that does not punish the reader
     (Edward, 2026-07-30 -- the old single 12-line block was unreadable). */
  .fld-note{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.65;
    max-width:640px;}
  .fld-note p{margin:0 0 7px;}
  .fld-note p:last-child{margin-bottom:0;}
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  /* ---- the red pen ----------------------------------------------------------------
     House annotation hand: a marker arrow and a cursive aside, the visual grammar of
     someone scribbling on a printout. Started on the home page's "A receipt" arrow and
     now shared, so a second ad lib cannot drift to a different red or weight. WHERE an
     arrow points is always a placement class at the call site; this is only the look.
     FAIL-OPEN by design: the drawn arrow is the base state. Only a section registered
     for animation (.rv.pre) hides the stroke and .rv.in draws it back, so an annotation
     on a page with no reveal wrapper renders finished instead of invisible. */
  .mark-arrow{stroke:var(--blush-ink,#A32D3A);stroke-width:5;stroke-linecap:round;
    stroke-linejoin:round;pointer-events:none;z-index:3;}
  .mark-arrow .ma-line{stroke-dasharray:420;}
  .mark-arrow .ma-head{stroke-dasharray:90;}
  .rv.pre .mark-arrow .ma-line{stroke-dashoffset:420;}
  .rv.pre .mark-arrow .ma-head{stroke-dashoffset:90;}
  .rv.in .mark-arrow .ma-line{animation:madraw .7s cubic-bezier(.22,1,.36,1) .25s forwards;}
  .rv.in .mark-arrow .ma-head{animation:madraw .3s cubic-bezier(.22,1,.36,1) .9s forwards;}
  @keyframes madraw{to{stroke-dashoffset:0;}}
  @media (prefers-reduced-motion: reduce){
    .mark-arrow .ma-line,.mark-arrow .ma-head{stroke-dashoffset:0 !important;
      animation:none !important;}
  }
  /* --navh (defined with the palette on :root) is the sticky header's height. Anything
     else that sticks (the FAQ contact column, the wiki side track) offsets by it, or it
     pins to the top of the viewport and the header covers it (Edward, 2026-07-29 --
     reported on /faq#contact). One row at every width where a sticky track is active;
     the stacked mobile nav is taller, but there the tracks are static.
     Same reason, for in-page jumps: /faq#contact landed the target under the header. */
  [id]{scroll-margin-top:calc(var(--navh) + 14px);}
  *{box-sizing:border-box;}
  /* POLISH: grid and flex children default to min-width:auto, i.e. they refuse to shrink
     below their own min-content. One long word or one nowrap span then sets a floor for
     the whole page, and with body{overflow-x:clip} the page does not even scroll to show
     what got pushed out -- it just silently loses it. That is exactly how five of six
     receipt cards ended up off-screen. Opt every layout container's children out. */
  .split>*,.rgrid>*,.feats>*,.tiers>*,.shape>*,.hits>*,.stats>*,.wkshell>*,.tools>*,
  .bstage>*,.ticker-inner>*,.cmp-us>*,.rg-slot>*{min-width:0;}
  /* POLISH: native form controls follow the ACTIVE scheme, which is not always the OS
     one -- `color-scheme:light dark` deferred to the OS and left inputs dark inside a
     manually-lightened page. These four rules mirror _theme_blocks() exactly. */
  :root{color-scheme:light;}
  @media (prefers-color-scheme: dark){:root:not([data-theme]){color-scheme:dark;}}
  :root[data-theme="dark"]{color-scheme:dark;}
  :root[data-theme="light"]{color-scheme:light;}
  /* and do not leave the paint to the UA at all where we can help it */
  input,textarea,select{background:var(--surface);color:var(--ink-text);}
  input::placeholder,textarea::placeholder{color:var(--muted);opacity:1;}
  body{font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    background:var(--paper);color:var(--ink-text);margin:0;overflow-x:clip;}
  a{color:var(--iris-deep);text-underline-offset:2px;text-decoration-color:var(--tint-iris-line);}
  a:hover{text-decoration-color:currentColor;}
  ::selection{background:var(--sel);}
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
  select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
    outline:2.5px solid var(--iris);outline-offset:2px;border-radius:8px;}
  /* baseline, not center: the logo is 16px and the items are 13px, so centering their
     BOXES left the text sitting at visibly different heights (Edward, 2026-07-26).
     Baseline puts all the nav text on one line; the two non-text controls (theme
     toggle, CTA pill) opt back into centering below. */
  /* Logo left, links CENTERED as a group, controls right (Edward, 2026-07-28):
     the flat left-pack read as crowding next to the logo with dead air before the
     controls. Two auto margins bracket the link group; the theme button loses its
     old auto margin so it sits with the CTA. Wider max-width so the bar breathes. */
  /* The whole header bar sticks to the top of the tab (Edward, 2026-07-28); the
     old dark bottom check-a-claim bar is gone in its favour. Solid ground + hairline
     so content scrolling under it never bleeds through. */
  .nav-shell{position:sticky;top:0;z-index:60;background:var(--paper);
    border-bottom:1.5px solid var(--hairline);}
  /* Three tracks: logo left, links CENTRED on the page, controls right. Auto margins
     centred the links in the LEFTOVER space, so unequal logo/control widths pushed
     them off true centre (Edward, 2026-07-28). Equal 1fr side tracks put the middle
     track dead centre whatever sits either side. */
  .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
    max-width:1060px;margin:0 auto;padding:13px 20px;}
  /* The wordmark sits INSIDE the link group (Edward, 2026-07-29), immediately left of
     "trust wiki", so the whole cluster centres as one unit. Track 1 is an empty spacer
     that balances the controls in track 3: equal 1fr tracks are what put the middle one
     on the page's true centre rather than in the leftover space. */
  .navpad{display:block;}
  .navlinks{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;}
  .navlinks .logo{display:flex;align-items:center;margin-right:2px;}
  .navctl{justify-self:end;display:flex;align-items:center;gap:8px;}
  .logo{font-size:16px;font-weight:600;color:var(--ink-text);text-decoration:none;}
  .logo span{color:var(--iris);}
  .nav a.item{font-size:13px;font-weight:600;color:var(--body);text-decoration:none;}
  .nav a.item:hover{color:var(--ink-text);}
  /* POLISH: theme toggle -- cycles system -> light -> dark. Sits before the CTA so the
     CTA keeps its margin-left:auto anchoring. */
  .theme-btn{font:inherit;font-size:15px;line-height:1;cursor:pointer;
    background:var(--surface);color:var(--body);border:2px solid var(--ink);border-radius:10px;
    padding:6px 10px;transition:transform .18s cubic-bezier(.22,1,.36,1),color .18s;}
  .theme-btn:hover{color:var(--ink-text);transform:translateY(-1px);}
  .theme-btn+.cta{margin-left:8px;}
  .nav .cta{background:var(--iris);color:#fff;border:2px solid var(--ink);
    border-radius:10px;padding:7px 14px;font-size:13px;font-weight:700;text-decoration:none;
    box-shadow:3px 3px 0 var(--shadow);white-space:nowrap;}
  /* MOBILE HEADER (Edward, 2026-07-29): the old rule stacked the nav three rows deep and
     ate the top third of the first phone screen before the headline got a look in. One
     row now: the links become a horizontal scroller in the flexible track while the
     controls stay pinned right. `navpad` is display:none so the links land in track 1
     (the 1fr), which is what gives them room to overflow -- and min-width:0 is what lets
     a grid item actually shrink below its content width instead of blowing out the row.
     The right-edge mask fades the last link so there is a visible cue that it scrolls. */
  @media (max-width:520px){
    .nav{grid-template-columns:minmax(0,1fr) auto;justify-items:stretch;
      align-items:center;gap:0 8px;padding:9px 10px 9px 14px;}
    .navpad{display:none;}
    .navlinks{min-width:0;flex-wrap:nowrap;justify-content:flex-start;gap:16px;
      overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;-ms-overflow-style:none;
      padding:3px 20px 3px 0;
      -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
      mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);}
    .navlinks::-webkit-scrollbar{display:none;}
    .nav a.item{white-space:nowrap;font-size:13px;}
    .navlinks .logo{font-size:15px;}
    .navctl{justify-self:end;gap:6px;}
    .theme-btn{margin-left:0;padding:5px 8px;font-size:14px;}
    .theme-btn+.cta{margin-left:4px;}
    .nav .cta{padding:6px 11px;font-size:12.5px;}
  }
  .wrap{max-width:760px;margin:0 auto;padding:24px 16px 60px;}
  h1{font-size:38px;font-weight:600;letter-spacing:-0.8px;line-height:1.12;margin:24px 0 10px;}
  .hl{background:linear-gradient(180deg,transparent 58%,var(--hl-band) 58%);padding:0 2px;}
  .hl-m{background:linear-gradient(180deg,transparent 58%,var(--mint) 58%);padding:0 2px;}
  .sub{font-size:16px;color:var(--body);max-width:560px;}
  .eyebrow{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;font-size:11px;
    font-weight:700;text-transform:uppercase;letter-spacing:0.09em;color:var(--iris);margin-bottom:6px;}
  .card{background:var(--surface);border:2px solid var(--ink);border-radius:14px;padding:16px;}
  .btn{background:var(--iris);color:#fff;border:2px solid var(--ink);border-radius:11px;
    padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:3px 3px 0 var(--shadow);
    transition:transform .12s ease,box-shadow .12s ease;}
  .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow);}
  .btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shadow);}
  .btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:3px 3px 0 var(--shadow);}
  .badge{display:inline-block;font-size:12px;font-weight:700;padding:5px 12px;
    border-radius:18px;border:2px solid var(--ink);}
  .foot{border-top:2px dashed var(--hairline-2);margin-top:20px;}
  .foot-in{max-width:760px;margin:0 auto;padding:26px 16px 44px;display:flex;
    gap:24px 40px;flex-wrap:wrap;font-size:12px;}
  .foot-brand{flex-basis:100%;}
  .fcol a{text-transform:lowercase;}
  /* the four link columns as one centred block with even widths, so the footer reads
     as deliberate rather than ragged */
  @media(min-width:900px){
    .foot-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 30px;
      justify-items:start;max-width:900px;margin:0 auto;}
    .foot-brand{grid-column:1/-1;justify-self:center;text-align:center;}
    .foot-brand .logo{display:inline-block;}
  }
  .foot-tag{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;font-size:11px;
    color:var(--muted);margin-top:8px;max-width:180px;line-height:1.6;}
  .fcol{min-width:110px;}
  .fcol b{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:0.08em;color:var(--muted);margin-bottom:7px;
    font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;}
  .fcol a{display:block;color:var(--body);text-decoration:none;padding:2.5px 0;font-weight:600;}
  .fcol a:hover{color:var(--iris-deep);}
  .chip{font-family:inherit;font-size:12px;font-weight:600;color:var(--iris-deep);background:var(--tint-iris);
    border:1.5px solid var(--tint-iris-line);border-radius:16px;padding:6px 12px;cursor:pointer;transition:all .2s;
    text-align:left;line-height:1.35;}
  .chip:hover{background:var(--iris);color:#fff;border-color:var(--ink);}
  .chip.on{background:var(--chip-on-bg);color:var(--chip-on-ink);border-color:var(--ink);}
  /* ONE tab-strip system, shared by the Trust Feed and Trust Tools so the two read as
     the same product (Edward, 2026-07-28). Receipt styling: a mono eyebrow label, a
     dashed tear-line under the strip, ink borders and hard offset shadows. */
  .strip-label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;
    font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--muted);
    margin:16px 0 6px;}
  .feed-filters{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px;}
  .feed-filters.tearline{padding-bottom:13px;border-bottom:1.5px dashed var(--hairline);
    margin-bottom:14px;}
  .fchip{font:inherit;font-size:12px;font-weight:700;padding:5px 12px;border-radius:16px;
    border:2px solid var(--ink);background:var(--surface);color:var(--ink-text);cursor:pointer;
    transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s;}
  .fchip:hover{transform:translateY(-1px);}
  .fchip.on{background:var(--iris);color:#fff;box-shadow:3px 3px 0 var(--shadow-iris);}
  .fchip .n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
    opacity:.75;margin-left:5px;}
  /* the Trust Wiki's filters are LINKS (they carry the querystring so the page works
     with no JS), so they need what a button gets for free */
  a.fchip{text-decoration:none;display:inline-block;line-height:1.35;}
  a.fchip:hover{color:var(--ink-text);}
  a.fchip.on,a.fchip.on:hover{color:#fff;}
  /* ---- shared fragment atoms (WS9a): one source for the recurring receipt bits ---- */
  .mono-rule{border:0;border-top:1.5px dashed var(--hairline-2);height:0;}
  .vchip{display:inline-block;font-size:12px;font-weight:700;padding:5px 12px;border-radius:18px;
    border:2px solid var(--ink);letter-spacing:.02em;}
  .snippet{position:relative;margin:12px 0;}
  .snippet-code{background:var(--ink-bg);color:#E9E6F5;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
    font-size:12px;line-height:1.55;padding:14px 16px;border-radius:12px;overflow-x:auto;white-space:pre;
    margin:0;border:2px solid var(--ink);}
  .snippet-copy{position:absolute;top:8px;right:8px;background:var(--iris);color:#fff;border:2px solid var(--ink);
    border-radius:8px;padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
  .snippet-copy:hover{background:var(--iris-deep);}
  /* ---- POLISH: the extension shown where it lives -- inside a browser. Chrome and
     page are PINNED light (it is standing in for someone else's website, which does not
     follow our theme), so every colour in here is literal, not a token. ---- */
  /* ---- real product shots -----------------------------------------------------
     PNGs captured from the shipped extension in a real browser (scripts/ext_shots.py).
     Framed like specimens: hard border, offset shadow, caption underneath. The wide
     shot leads; the two tall surfaces sit side by side beneath it and stack on narrow
     screens. Images are clipped to a max height so a 2,800px-tall popup capture cannot
     run away with the page. */
  .shots{margin-top:20px;}
  .shot{margin:0;}
  .shot img{display:block;width:100%;height:auto;border:2px solid var(--ink);
    border-radius:12px;background:#fff;box-shadow:5px 5px 0 var(--shadow-iris);}
  /* One system for all three shots (Edward, 2026-07-28): identical frame height,
     identical bottom fade, captions beneath. Mobile: triangle (card on top, pair
     below). Wide: three across with a fan -- outer shots tilt away, middle lifts. */
  .shots3{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;margin-top:22px;}
  .shot3{margin:0;}
  .shot3:first-child{grid-column:1/-1;width:min(100%,480px);margin:0 auto;}
  /* The card shot is near-square and carries the product's whole point, so it is
     CONTAINED: nothing cropped off its left edge. The two very tall screenshots keep
     cover, where cropping the bottom is the intent. */
  .shot3:nth-child(1) img{object-fit:contain !important;background:var(--surface);}
  .shot3 img{width:100%;height:340px;object-fit:cover;object-position:top;
    border:2px solid var(--ink);border-radius:14px;background:var(--surface);
    -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 99%);
    mask-image:linear-gradient(180deg,#000 74%,transparent 99%);}
  .shot3 figcaption{font-size:12px;color:var(--body);line-height:1.55;margin-top:8px;}
  @media(min-width:980px){
    /* padding absorbs the fan's tilt so no figure clips the section edge, and the
       rotation moved OFF the raster (2.2deg AA blur on screenshot text) onto a
       subtle translate: the fan reads in the offsets, the pixels stay sharp */
    .shots3{grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;
      padding:0 10px 14px;}
    .shot3:first-child{grid-column:auto;width:auto;margin:0;}
    .shot3 img{height:430px;transform:translateZ(0);backface-visibility:hidden;}
    .shot3:nth-child(1){transform:rotate(-1deg) translateY(12px);}
    .shot3:nth-child(2){transform:translateY(-8px);}
    .shot3:nth-child(3){transform:rotate(1deg) translateY(12px);}
  }
  .shot figcaption{font-size:12.5px;color:var(--body);line-height:1.6;margin-top:9px;}
  .shot figcaption b{color:var(--ink-text);}
  .shot-wide img{box-shadow:6px 6px 0 var(--mint);}
  .shot-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;
    align-items:start;}
  @media(max-width:640px){.shot-row{grid-template-columns:1fr;gap:22px;}}
  /* The popup and panel captures are very tall; show the top of each and fade the cut
     so it reads as a deliberate crop rather than a broken image. */
  .shot-row .shot img{max-height:440px;object-fit:cover;object-position:top;
    -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);
    mask-image:linear-gradient(180deg,#000 78%,transparent);
    transition:transform .3s cubic-bezier(.22,1,.36,1);}
  /* two tall surfaces side by side kept blending into one shape: tilt them apart
     like photographs on a desk, distinct shadow hues, straighten on hover */
  .shot-row .shot:first-child img{box-shadow:6px 6px 0 var(--butter);transform:rotate(-.6deg);}
  .shot-row .shot:last-child img{box-shadow:6px 6px 0 var(--shadow-iris);transform:rotate(.6deg);}
  .shot-row .shot:hover img{transform:rotate(0);}
  @media(min-width:1100px){.shot-row{gap:38px;}.shot-row .shot img{max-height:560px;}}

  /* POLISH: shared motion layer. Reveal-on-scroll is progressive enhancement: content
     is fully visible with no JS; _page()'s observer adds .in to animate it in. Only
     transform/opacity animate (compositable). */
  /* Fail-open motion (2026-07-28). POLISH_LOOP law: "elements are VISIBLE with no
     JS; the observer only adds the animated-in transition." The old html.js gate
     hid every .reveal up front and bet the page on the observer firing; when it
     did not (real browser, real user), whole pages rendered blank. Now nothing is
     hidden by CSS alone: the script adds .pre per element as it registers it, so
     the only thing that can hide content is the thing that animates it back. */
  .reveal{opacity:1;transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--rd,0ms);}
  .reveal.pre{opacity:0;transform:translateY(14px);will-change:opacity,transform;}
  .reveal.in{opacity:1;transform:none;}
  /* cohesive card lift on hover/focus-within (subtle; shadow + 2px rise) */
  .card{transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1);}
  .card:hover,.card:focus-within{transform:translateY(-2px);}
  /* global reduced-motion guard: every page inherits this even if it defines no local one */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
      transition-duration:.001ms !important;scroll-behavior:auto !important;}
    .reveal.pre{opacity:1 !important;transform:none !important;}
  }