/* GENERATED by apps/site/scripts/import-prototype.mjs from the prototype base.css :root block, plus tokens for
   every colour literal the prototype CSS used outside it (value-identical). Do not edit; re-import. */
:root{
  --ink:#182126; --paper:#F7F6F2; --white:#FFFFFF;
  --sky:#8EC7EA; --jade:#8CBBA5; --saffron:#E6C578; --clay:#D9A18F; --iris:#BDB4E6;
  --ink-2:#4A5358;      /* secondary text on Paper / White (7.2:1) */
  --ink-2c:#2E383D;     /* secondary text on pastel fills (>=5.4:1) */
  --paper-2:#A7AFB3;    /* secondary text on Ink (7.4:1) */
  --ink-hover:#2A353B;
  --line:rgba(24,33,38,.13);
  --line-c:rgba(24,33,38,.26);
  --line-i:rgba(247,246,242,.17);
  --f-d:"Archivo","Archivo Fallback","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-b:"Hanken Grotesk","Hanken Grotesk Fallback","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-m:"Geist Mono","Geist Mono Fallback",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --g:clamp(16px,4vw,64px);
  --hdr:72px;
  --pbar:64px;
  --r-panel:32px;
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --ink-a06:rgba(24,33,38,.06); /* hover wash on Paper */
  --ink-a08:rgba(24,33,38,.08); /* pressed / open wash on Paper */
  --ink-a28:rgba(24,33,38,.28); /* strong hairline on pastel fields */
  --paper-a08:rgba(247,246,242,.08); /* hover wash on Ink */
  --ink-raise:#222D33;      /* raised surface on Ink (developers code panels) */
  color-scheme:light;
}

/* ============ Swaps site — shared base (Phase 1b). Page CSS goes in pages/<slug>/page.css ============ */
/* fonts:start (generated by fonts/make.py) */
/* Self-hosted OFL faces (fonts/README.md). Paths are relative to the page: the prototype serves dist/fonts/; production serves /fonts/. Fallback faces are metric-matched to Arial/Menlo so the swap moves nothing. */
@font-face{font-family:"Archivo";src:url("/_site/archivo.05b5e5f26f.woff2") format("woff2");font-weight:700 780;font-stretch:100% 116%;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/_site/hanken-grotesk.afcbb03483.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/_site/geist-mono.70282ecb05.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 800;font-stretch:100% 105%;size-adjust:105.14%;ascent-override:83.51%;descent-override:19.97%;line-gap-override:0.00%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 800;font-stretch:106% 125%;size-adjust:110.86%;ascent-override:79.20%;descent-override:18.94%;line-gap-override:0.00%}
@font-face{font-family:"Hanken Grotesk Fallback";src:local("Arial"),local("ArialMT");font-weight:400 500;size-adjust:101.71%;ascent-override:98.32%;descent-override:29.79%;line-gap-override:0.00%}
@font-face{font-family:"Hanken Grotesk Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 700;size-adjust:94.96%;ascent-override:105.31%;descent-override:31.91%;line-gap-override:0.00%}
@font-face{font-family:"Geist Mono Fallback";src:local("Menlo"),local("Menlo-Regular"),local("Courier New"),local("CourierNewPSMT");font-weight:400 500;size-adjust:99.98%;ascent-override:100.52%;descent-override:29.50%;line-gap-override:0.00%}
/* fonts:end */
@media (max-width:1023px){:root{--hdr:64px;--pbar:60px}}
html{scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
@media (min-width:1024px){html{scroll-padding-top:calc(var(--hdr) + var(--pbar) + 12px)}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-b);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@media (max-width:767px){body{font-size:17px}}
*,*::before,*::after{box-sizing:border-box}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.c-dark :focus-visible{outline-color:var(--paper)}
.c-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.c-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600}
.c-skip:focus{top:12px}

/* ============ Layout primitives (from the home file) ============ */
.c-wrap{max-width:1560px;margin-inline:auto;padding-inline:var(--g)}
.c-d{font-family:var(--f-d);font-weight:780;font-stretch:103%;letter-spacing:-.03em;line-height:.93;text-wrap:balance;margin:0}
.c-label{font-family:var(--f-d);font-weight:700;font-stretch:116%;font-size:12px;line-height:1.25;letter-spacing:.14em;text-transform:uppercase;margin:0}
.c-label--m{font-family:var(--f-m);font-weight:500;letter-spacing:.08em;font-stretch:100%}
.c-line{display:block;overflow:hidden;padding-bottom:.26em;margin-bottom:-.26em}
.c-line>span{display:block}
.c-h2{font-size:clamp(40px,6vw,96px)}
.c-lede{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--ink-2);max-width:40ch;text-wrap:pretty}
.c-top{display:flex;justify-content:space-between;align-items:center;gap:16px}

/* brand marks: heights set here, widths follow the word */
.c-b{display:block;height:var(--bh,40px);width:auto;flex:none}
.c-b--wallet{aspect-ratio:402.24/144}.c-b--links{aspect-ratio:312/144}.c-b--invoices{aspect-ratio:515.52/144}
.c-b--processing{aspect-ratio:676.8/144}.c-b--payroll{aspect-ratio:452.16/144}.c-b--app{aspect-ratio:366/144}
.c-lock{display:block;height:var(--bh,26px);width:auto;aspect-ratio:1001/144;color:var(--ink)}

/* ============ Buttons & links ============ */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:14px;font:600 16px/1 var(--f-b);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.c-btn--ink{background:var(--ink);color:var(--paper)}
.c-btn--ink:hover{background:var(--ink-hover)}
.c-btn--line{border-color:var(--ink);color:var(--ink);background:transparent}
.c-btn--line:hover{background:var(--ink);color:var(--paper)}
.c-btn--sm{height:44px;padding:0 18px;font-size:15px;border-radius:12px}
.c-btn .c-ar{transition:transform .3s var(--e-out)}
.c-btn:hover .c-ar{transform:translateX(4px)}
.c-ctas{display:flex;flex-wrap:wrap;gap:12px}
.c-more{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:17px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.c-more:hover{text-decoration-thickness:3px}
.c-more .c-ar{transition:transform .3s var(--e-out)}
.c-more:hover .c-ar{transform:translateX(4px)}

/* ============ Header (identical to the home file) ============ */
.c-hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;view-transition-name:c-hdr;background:var(--paper);border-bottom:1px solid var(--line)}
.c-hdr__in{height:var(--hdr);display:flex;align-items:center;gap:28px}
.c-logo{display:flex;align-items:center;min-height:44px;flex:none;border-radius:8px}
.c-logo .c-lock{--bh:26px}
.c-nav{display:flex;align-items:center;gap:2px}
.c-nav__i{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 14px;border:0;border-radius:12px;background:none;color:var(--ink);font:500 15px/1 var(--f-b);text-decoration:none;cursor:pointer;transition:background-color .2s}
.c-nav__i:hover{background:var(--ink-a06)}
.c-nav__i[aria-expanded="true"]{background:var(--ink-a08)}
/* the header link of the page you are on (promoted from /developers, 06.10: one current state on every page) */
.c-nav__i[aria-current="page"]{position:relative;font-weight:600}
.c-nav__i[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:calc((44px - var(--hdr)) / 2);height:3px;border-radius:3px 3px 0 0;background:var(--ink)}
.c-caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--e-out)}
[aria-expanded="true"]>.c-caret{transform:translateY(2px) rotate(225deg)}
.c-hdr__end{margin-left:auto;display:flex;align-items:center;gap:6px}
.c-menu-btn{display:none;align-items:center;gap:10px;height:44px;padding:0 12px;border:1.5px solid var(--line-c);border-radius:12px;background:none;color:var(--ink);font:600 15px/1 var(--f-b);cursor:pointer}
.c-menu-btn i{display:grid;gap:4px}
.c-menu-btn i::before,.c-menu-btn i::after{content:"";display:block;width:16px;height:1.6px;background:currentColor}
@media (max-width:1023px){
  .c-nav,.c-hdr .c-signin{display:none}
  .c-menu-btn{display:inline-flex}
  .c-logo .c-lock{--bh:22px}
}
@media (max-width:520px){.c-hdr__in{gap:12px}.c-menu-btn{width:44px;padding:0;justify-content:center}.c-menu-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:360px){.c-hdr .c-btn--sm{padding:0 12px}}

.c-mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line)}
.c-mega__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr);gap:24px;padding-block:28px 36px}
.c-mega__g{display:flex;flex-direction:column;gap:4px}
.c-mega__g .c-label{padding:0 14px 8px;color:var(--ink-2)}
.c-mega__a{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:18px;text-decoration:none;transition:background-color .2s}
.c-mega__a:hover,.c-mega__a[aria-current="page"]{background:var(--white)}
.c-mega__a .c-b{--bh:30px}
.c-mega__a span{font-size:15px;line-height:1.4;color:var(--ink-2)}
.c-mega__tasks{display:flex;flex-direction:column;gap:2px;margin:6px 14px 0;padding-top:10px;border-top:1px solid var(--line)}
.c-mega__t{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-inline:-14px;padding:0 14px;border-radius:14px;font-size:15px;font-weight:600;text-decoration:none;transition:background-color .2s}
.c-mega__t:hover,.c-mega__t[aria-current="page"]{background:var(--white)}
.c-mega__t .c-ar{color:var(--ink-2);transition:transform .3s var(--e-out)}
.c-mega__t:hover .c-ar{transform:translateX(3px)}
.c-mega__aside{background:var(--ink);color:var(--paper);border-radius:24px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.c-mega__aside p{font-family:var(--f-d);font-weight:780;font-stretch:103%;font-size:26px;line-height:1;letter-spacing:-.03em;text-wrap:balance}
.c-mega__aside .c-more{color:var(--paper);font-size:15px}
.c-mega__aside :focus-visible{outline-color:var(--paper)}
.c-mega__in--crypto{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);align-items:start}
.c-mega__lead{display:flex;flex-direction:column;gap:18px;padding:14px}
.c-mega__lead .c-b{--bh:40px;--c-app-bg:var(--ink);--c-app-fg:var(--white)}
.c-mega__lead p{font-size:15px;line-height:1.5;color:var(--ink-2);max-width:30ch}
.c-mega__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.c-mega__list a{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:18px;text-decoration:none;transition:background-color .2s}
.c-mega__list a:hover{background:var(--white)}
.c-mega__list b{font-family:var(--f-d);font-weight:700;font-stretch:108%;font-size:18px;letter-spacing:-.01em}
.c-mega__list span{font-size:14px;color:var(--ink-2)}

.c-mm{position:fixed;inset:0;z-index:80;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px)}
.c-mm__bar{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.c-mm__close{height:44px;padding:0 14px;border:1.5px solid var(--line-c);border-radius:12px;background:none;font:600 15px/1 var(--f-b);color:var(--ink);cursor:pointer}
.c-mm__sec{padding-block:22px;border-bottom:1px solid var(--line)}
.c-mm__sec .c-label{color:var(--ink-2);margin-bottom:10px}
.c-mm__prod{display:flex;flex-wrap:wrap;gap:8px}
.c-mm__prod a{position:relative;display:flex;align-items:center;min-height:48px;padding:6px;border-radius:14px}
.c-mm__prod a[aria-current="page"]::after{content:"";position:absolute;inset:2px;border:2px solid var(--ink);border-radius:12px}
.c-mm__prod a[aria-current="page"]::before{content:"";position:absolute;left:12px;right:12px;bottom:-5px;height:3px;border-radius:3px;background:var(--ink)}
.c-mm__prod .c-b{--bh:34px}
.c-mm__links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.c-mm__links a{display:flex;align-items:center;min-height:48px;font-size:17px;font-weight:500;text-decoration:none}
.c-mm__big{display:flex;flex-direction:column}
.c-mm__big a{display:flex;align-items:center;justify-content:space-between;min-height:60px;font-family:var(--f-d);font-weight:780;font-stretch:103%;font-size:30px;letter-spacing:-.03em;text-decoration:none;border-bottom:1px solid var(--line)}
.c-mm__big a:last-child{border-bottom:0}
.c-mm__big a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.c-mm__cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:24px}

/* ============ Product bar (new on product pages; C dock styling) ============ */
.c-pbar{position:relative;z-index:40;view-transition-name:c-pbar;background:var(--paper);border-bottom:1px solid var(--line)}
@media (min-width:1024px){.c-pbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr))}}
.c-pbar__in{display:flex;align-items:center;height:var(--pbar)}
.c-pbar__list{list-style:none;margin:0 0 0 -8px;padding:0;display:flex;align-items:center;gap:2px}
.c-pbar__a{position:relative;display:flex;align-items:center;height:48px;padding:0 8px;border-radius:15px;transition:background-color .2s}
.c-pbar__a:hover{background:var(--ink-a06)}
.c-pbar__a .c-b{--bh:30px}
.c-pbar__a[aria-current="page"]::after{content:"";position:absolute;inset:3px;border:2px solid var(--ink);border-radius:12px}
/* current = ring + a tab underline on the bar's edge; focus = a thicker offset outline, so the two never look alike */
.c-pbar__a[aria-current="page"]::before{content:"";position:absolute;left:12px;right:12px;bottom:calc((48px - var(--pbar)) / 2);height:3px;border-radius:3px 3px 0 0;background:var(--ink)}
.c-pbar__a:focus-visible,.c-mm__prod a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:17px}
@media (max-width:1023px){
  .c-pbar__in{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .c-pbar__in::-webkit-scrollbar{display:none}
  .c-pbar__list{padding-right:var(--g)}
  .c-pbar__a .c-b{--bh:28px}
}

/* ============ Hero: Paper page, Saffron poster sheet bleeding off the right edge ============ */
.c-hero{overflow:clip;padding-block:clamp(28px,4.4vh,56px) clamp(40px,5vw,80px)}
.c-hero__in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:40px clamp(32px,4vw,72px);align-items:center}
.c-hero__copy{display:flex;flex-direction:column;align-items:flex-start}
.c-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,3.4vh,34px)}
.c-eyebrow .c-b{--bh:44px}
.c-h1{font-size:clamp(44px,min(7vw,11vh),112px);margin-bottom:clamp(20px,3.4vh,34px)}
.c-hero__sub{font-size:clamp(18px,1.45vw,21px);line-height:1.5;max-width:36ch;margin-bottom:28px;text-wrap:pretty}
.c-sheet{position:relative;overflow:hidden;align-self:stretch;display:grid;place-items:center;background:var(--pc,var(--saffron));border-radius:var(--r-panel) 0 0 var(--r-panel);margin-right:calc(-1 * var(--g));padding:clamp(28px,4vw,64px) clamp(24px,4vw,64px);min-height:min(620px,calc(100svh - var(--hdr) - var(--pbar) - 96px))}
@media (min-width:1561px){.c-sheet{margin-right:calc(-1 * (var(--g) + (100vw - 1560px) / 2))}}
@media (max-width:899px){
  .c-hero__in{grid-template-columns:minmax(0,1fr);gap:32px}
  .c-h1{font-size:clamp(40px,12vw,76px)}
  .c-sheet{margin-inline:calc(-1 * var(--g));border-radius:0;padding:28px var(--g);min-height:0}
}
@media (max-width:480px){.c-hero .c-ctas{width:100%}.c-hero .c-ctas .c-btn{flex:1 1 auto;padding:0 18px}}

/* financial panel (card) — the home file's card vocabulary */
.c-card{background:var(--paper);border-radius:var(--r-panel);padding:clamp(22px,2.3vw,32px);display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.c-card__head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.c-ex{font-family:var(--f-m);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-c);border-radius:999px;padding:5px 10px 4px;white-space:nowrap}
.c-k{font-size:14px;line-height:1.4;color:var(--ink-2)}
.c-who{font-family:var(--f-d);font-weight:700;font-stretch:104%;font-size:20px;letter-spacing:-.01em;line-height:1.25}
.c-amt{font-family:var(--f-d);font-weight:700;font-stretch:100%;font-size:clamp(34px,3.5vw,52px);line-height:1.02;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:0 .28em;margin:0;white-space:nowrap}
.c-amt small{font-size:.4em;font-weight:700;font-stretch:112%;letter-spacing:.04em}
.c-rows{margin:0;display:grid}
.c-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:11px;border-top:1px solid var(--line);font-size:15px;line-height:1.35}
.c-row dt{color:var(--ink-2)}
.c-row dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.c-note{font-size:14px;line-height:1.5;color:var(--ink-2)}
.c-note--rule{border-top:1px solid var(--line);padding-top:14px;color:var(--ink)}
.c-url{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--f-m);font-size:13px;padding:11px 14px;border-radius:12px;background:var(--white);border:1px solid var(--line);overflow-wrap:anywhere}
.c-url__a{font-family:var(--f-b);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;flex:none}
.c-pill{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:12px;font-weight:600;font-size:15px;cursor:default}
.c-pill--ink{background:var(--ink);color:var(--paper)}

.c-hcard{--cp:clamp(22px,2.3vw,32px);--hb:40px;width:100%;max-width:440px;padding:var(--cp);clip-path:inset(0 round var(--r-panel));transition:clip-path 600ms var(--e-io) 160ms}
.c-hcard .c-card__head .c-b{--bh:var(--hb)}
.c-hcard .c-amt{font-size:clamp(40px,4vw,56px)}
@media (max-width:899px){.c-hcard{--hb:36px;max-width:none}}
.c-fly{position:absolute;z-index:30;margin:0;pointer-events:none;transform-origin:0 0;display:block}

/* hero intro — armed by the head script before first paint, always resolves to rest */
.c-hero .c-line>span{transition:transform 1000ms var(--e-out)}
.c-hero .c-line+.c-line>span{transition-delay:90ms}
.c-pre .c-hero .c-line>span{transform:translateY(20%)}
/* the panel starts as a Paper seed the size of its badge anchor, then unfolds from it */
/* only at >=900: below that the panel sits under the H1, so it is shown complete from the first frame and nothing flies across the headline */
@media (min-width:900px){
  .c-pre .c-hcard{clip-path:inset(var(--cp) calc(100% - var(--cp) - var(--hb) * 2.1667) calc(100% - var(--cp) - var(--hb)) var(--cp) round calc(var(--hb) * .1944))}
  .c-pre .c-hcard .c-card__head .c-b{visibility:hidden}
}


/* status track: shape + weight + text, never colour alone */
.c-st5{list-style:none;margin:0;padding:4px 0 2px;display:flex;position:relative}
.c-st5::before,.c-st5::after{content:"";position:absolute;top:13px;left:10%;height:1.5px}
.c-st5::before{right:10%;background:var(--line-c)}
.c-st5::after{width:60%;background:var(--ink)}
.c-st5 li{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;line-height:1.2;color:var(--ink-2);text-align:center}
.c-st5 i{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:var(--paper)}
.c-st5 i::after{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink-2)}
.c-st5 .is-done i::after{width:10px;height:10px;border:0;background:var(--ink)}
.c-st5 .is-now i{border:2px solid var(--ink)}
.c-st5 .is-now i::after{width:9px;height:9px;border:0;background:var(--ink)}
.c-st5 .is-done{color:var(--ink)}
.c-st5 .is-now{color:var(--ink);font-weight:600}
.c-face .c-rows .c-row:first-child{border-top-color:var(--line-c)}
@media (max-width:420px){.c-st5 li{font-size:11.5px}}

/* ============ Three facts ============ */
.c-facts{padding-block:clamp(40px,6vw,96px) clamp(8px,1.6vw,24px)}
.c-facts__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.c-facts__list li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:baseline;gap:8px;padding-block:14px;border-bottom:1px solid var(--line-c)}
.c-fact{font-size:clamp(26px,7vw,44px)}
@media (min-width:900px){
  .c-facts__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);border-top:0}
  .c-facts__list li{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);padding-block:18px 0;border-top:2px solid var(--ink);border-bottom:0}
  .c-fact{font-size:clamp(34px,3.7vw,60px)}
}
.c-hl{background:var(--pc,var(--saffron));border-radius:.16em;padding:0 .1em;margin:0 -.03em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ============ How your client can pay (data) ============ */
.c-methods{padding-block:clamp(48px,6vw,96px)}
.c-sec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px 64px;align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.c-sec-head .c-label{margin-bottom:18px}
@media (max-width:899px){.c-sec-head{grid-template-columns:minmax(0,1fr);gap:14px}}
.c-mgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px)}
@media (min-width:1024px){.c-mgrid{grid-template-columns:minmax(0,1fr) minmax(240px,300px);column-gap:clamp(40px,5vw,96px);align-items:start}}
.c-tbl{width:100%;border-collapse:collapse;font-size:16px}
.c-tbl thead th{font-family:var(--f-d);font-weight:700;font-stretch:116%;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--ink-2);padding:0 16px 12px 0;border-bottom:2px solid var(--ink)}
.c-tbl tbody tr{border-bottom:1px solid var(--line-c)}
.c-tbl tbody th,.c-tbl tbody td{padding:12px 16px 12px 0;vertical-align:middle;text-align:left;font-weight:400}
.c-tbl .c-tgrp{border-bottom:1px solid var(--ink)}
.c-tbl .c-tgrp th{padding:22px 0 8px;font:500 12px/1.2 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.c-tbl tbody:first-of-type .c-tgrp th{padding-top:16px}
.c-cur{display:inline-block;min-width:3.2em;font-family:var(--f-d);font-weight:780;font-stretch:103%;font-size:clamp(24px,2vw,32px);letter-spacing:-.02em;line-height:1}
.c-curn{display:inline;font-size:14px;color:var(--ink-2);margin-left:10px}
.c-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.c-chips li{font:500 13px/1 var(--f-m);padding:9px 12px 8px;border:1px solid var(--line-c);border-radius:999px;background:var(--white);white-space:nowrap}
.c-tbl thead .c-cw{width:clamp(240px,24vw,320px)}
.c-tnotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(24px,4vw,64px)}
.c-tnotes p{font-size:16px;line-height:1.5;max-width:52ch}
.c-tnotes .c-label{display:block;color:var(--ink-2);margin-bottom:8px}
@media (min-width:1024px){
  .c-tnotes{grid-template-columns:minmax(0,1fr);gap:0;border-top:2px solid var(--ink)}
  .c-tnotes p{padding-block:14px 18px;border-bottom:1px solid var(--line-c)}
}
@media (max-width:767px){
  .c-tbl,.c-tbl tbody,.c-tbl tr,.c-tbl th,.c-tbl td{display:block}
  .c-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .c-tbl tbody:first-of-type{border-top:2px solid var(--ink)}
  .c-tbl tbody tr:not(.c-tgrp){display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:12px;align-items:center;padding-block:11px}
  .c-tbl tbody th,.c-tbl tbody td{padding:0}
  .c-tbl .c-tgrp th{padding:18px 0 7px}
  .c-tbl tbody:first-of-type .c-tgrp th{padding-top:12px}
  .c-cur{display:block;min-width:0;font-size:26px}
  .c-curn{display:block;margin:4px 0 0;font-size:13px;line-height:1.25}
  .c-chips li{padding:8px 10px 7px}
  .c-tnotes{grid-template-columns:minmax(0,1fr)}
}

/* ============ Pricing ============ */
.c-price{background:var(--white);border-block:1px solid var(--line)}
.c-price__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px clamp(32px,5vw,96px);align-items:center;padding-block:clamp(48px,5.6vw,88px)}
.c-price .c-label{margin-bottom:18px}
.c-price .c-h2{font-size:clamp(40px,5.2vw,84px);margin-bottom:clamp(20px,2.4vw,32px)}
.c-pcard .c-row{padding-block:14px;font-size:16px}
.c-pcard .c-row dd{white-space:normal;max-width:24ch}
.c-pcard .c-row:first-of-type{border-top:0}
.c-pcard .c-big{font-family:var(--f-d);font-weight:780;font-size:22px;letter-spacing:-.02em}
@media (max-width:899px){.c-price__in{grid-template-columns:minmax(0,1fr)}}

/* ============ Who it is for ============ */
.c-for{padding-block:clamp(56px,6.6vw,104px)}
.c-cards3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.c-wc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-panel);display:flex;flex-direction:column;overflow:hidden}
.c-wc__top{padding:clamp(22px,2.3vw,32px);display:flex;flex-direction:column;gap:14px;flex:1}
.c-wc__top .c-label{color:var(--ink-2)}
.c-wc__t{font-family:var(--f-d);font-weight:780;font-stretch:103%;font-size:clamp(26px,2.3vw,36px);letter-spacing:-.025em;line-height:1.02;text-wrap:balance;margin:0}
.c-wc__stub{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px clamp(22px,2.3vw,32px);border-top:1.5px dashed var(--line-c);text-decoration:none;transition:background-color .2s}
.c-wc__stub:hover{background:var(--paper)}
.c-wc__stub:focus-visible{outline-offset:-4px}
.c-wc__stub .c-b{--bh:30px}
.c-wc__stub span{flex:1;font-size:15px;line-height:1.35;font-weight:500}
.c-wc__stub .c-ar{flex:none;transition:transform .3s var(--e-out)}
.c-wc__stub:hover .c-ar{transform:translateX(4px)}
@media (max-width:899px){.c-cards3{grid-template-columns:minmax(0,1fr)}.c-wc__top{gap:10px}}

/* ============ Trust — short Ink band ============ */
.c-trust{background:var(--ink);color:var(--paper);padding-block:clamp(44px,5.6vw,88px)}
.c-trust__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px clamp(32px,5vw,96px)}
.c-trust .c-label{color:var(--paper-2)}
.c-trust__head{grid-column:1/-1}
.c-trust__i{border-top:1px solid var(--line-i);padding-top:22px;display:flex;flex-direction:column;gap:14px}
.c-trust__h{font-size:clamp(30px,3.4vw,54px);font-stretch:108%}
.c-trust__i p{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--paper-2);max-width:38ch}
.c-trust.c-arm,[data-ink-reveal].c-arm{clip-path:inset(0 max(8px,calc(var(--g) - 16px)) round var(--r-panel))}
@media (max-width:899px){.c-trust__in{grid-template-columns:minmax(0,1fr)}}

/* ============ FAQ ============ */
.c-faq{padding-block:clamp(56px,6.6vw,104px)}
.c-faq__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px clamp(32px,5vw,96px);align-items:start}
.c-faq__in .c-label{margin-bottom:18px}
.c-faq__list{border-top:2px solid var(--ink)}
.c-q{border-bottom:1px solid var(--line-c)}
.c-q summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:clamp(56px,4.4vw,68px);padding-block:10px;cursor:pointer;font-family:var(--f-d);font-weight:700;font-stretch:104%;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.015em;line-height:1.2;border-radius:6px}
.c-q summary::-webkit-details-marker{display:none}
.c-q summary::after{content:"+";flex:none;width:36px;height:36px;display:grid;place-items:center;border:1.5px solid var(--line-c);border-radius:50%;font:400 22px/1 var(--f-b);transition:transform .3s var(--e-out),background-color .2s,color .2s}
.c-q summary:hover::after{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.c-q[open] summary::after{transform:rotate(45deg)}
.c-q p{padding:0 56px 22px 0;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:60ch}
@media (max-width:899px){.c-faq__in{grid-template-columns:minmax(0,1fr)}.c-q p{padding-right:0}}

/* ============ Final CTA — Saffron billboard, product lockup ============ */
.c-cta{background:var(--pc,var(--saffron));overflow:clip;padding-block:clamp(48px,6vw,96px) clamp(20px,3vw,44px)}
.c-cta__in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,340px);gap:28px 56px;align-items:end}
.c-cta__h{font-size:clamp(44px,7vw,116px)}
.c-cta__side p{font-size:clamp(17px,1.4vw,20px);line-height:1.5;margin-bottom:24px;max-width:32ch}
.c-cta__svg{display:block;width:100%;height:auto;aspect-ratio:586/258;margin-top:clamp(28px,4vw,64px);color:var(--ink);overflow:visible}
@media (max-width:1199px){.c-cta__in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:899px){.c-cta__h{font-size:clamp(36px,11vw,64px)}}

/* ============ Footer (home file) ============ */
.c-foot{padding-block:clamp(56px,7vw,104px) 28px}
.c-foot__top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px clamp(32px,5vw,96px)}
.c-foot__brand .c-lock{--bh:clamp(40px,4.4vw,64px)}
.c-foot__line{font-family:var(--f-d);font-weight:780;font-stretch:103%;font-size:clamp(22px,2vw,30px);line-height:1.05;letter-spacing:-.03em;margin-top:22px;max-width:16ch;text-wrap:balance}
.c-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.c-cols .c-label{color:var(--ink-2);margin-bottom:10px}
.c-cols ul{list-style:none;margin:0;padding:0}
.c-cols a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;text-decoration:none}
.c-cols a:hover,.c-dir a:hover{text-decoration:underline;text-underline-offset:4px}
.c-dir{margin-top:clamp(44px,5vw,72px);padding-top:22px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:16px 24px}
.c-dir .c-label{color:var(--ink-2)}
.c-dir ul{list-style:none;margin:0;padding:0;columns:4 190px;column-gap:24px}
.c-dir li{break-inside:avoid}
.c-dir a{display:inline-flex;align-items:center;min-height:30px;font-size:14px;color:var(--ink-2);text-decoration:none}
.c-legal{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:13px;color:var(--ink-2)}
@media (max-width:899px){
  .c-foot__top{grid-template-columns:minmax(0,1fr)}
  .c-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-cols a{min-height:44px}
  .c-dir{grid-template-columns:minmax(0,1fr)}
  .c-dir ul{columns:2;column-gap:16px}
  .c-dir a{min-height:44px;line-height:1.3}
}

/* ============ Phone pass: one poster flows into the next, tighter rhythm ============ */
@media (max-width:899px){
  .c-hero{padding-bottom:0}
  .c-inside__intro{padding-top:40px}
  .c-inside__intro .c-top{border-top:1.5px solid var(--ink);padding-top:14px;margin-bottom:8px}
  .c-mo__h{font-size:28px}
  .c-mo__h .c-line,.c-mo__h .c-line>span{display:inline;overflow:visible;padding:0;margin:0}
  .c-mo__h .c-line+.c-line::before{content:" "}
  .c-mo__cap{margin-top:6px}
}
@media (max-width:560px){
  .c-moments{gap:36px}
  .c-mo{gap:14px}
  .c-mo:not(:last-child)::after{height:20px}
  .c-face{padding:18px;--fg:12px}
  .c-share{grid-template-columns:minmax(0,1fr);gap:12px}
  .c-qr{display:none}
  .c-facts{padding-block:36px 4px}
  .c-methods{padding-block:40px 44px}
  .c-price__in{padding-block:40px;gap:24px}
  .c-for{padding-block:40px}
  .c-for .c-lede{display:none}
  .c-wc__top{padding:20px 20px 16px}
  .c-wc__t{font-size:24px}
  .c-wc__stub{min-height:64px;padding:12px 20px}
  .c-faq{padding-block:40px 44px}
  .c-trust{padding-block:40px}
  .c-sec-head{margin-bottom:20px}
  .c-sheet{padding-block:20px}
  .c-cta{padding-top:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.15s!important;transition-delay:0s!important;animation:none!important}
}
/* ============ Objects (direction 02, approved 30.09) ============
   Each object image is colour-matched at build time, so its backdrop IS the product token. The frame therefore
   never needs object-fit: the image is placed at a chosen size and pinned to the edge its object bleeds off
   (links, invoices, processing: bottom-left; payroll, wallet: bottom-right). Free edges fade out softly so a
   last hair of shading difference can never draw a rectangle on the field.
   Frame API (set on .c-obj):  --ow  image width (%, px, clamp…; default 100%)
                               --oy  lift the image off the bottom edge (default 0)
   Anchors: .c-obj--bl · .c-obj--br · .c-obj--b (centred, both sides free) */
.c-obj{position:relative;overflow:hidden;background:var(--pc,var(--paper))}
.c-obj>img{position:absolute;bottom:var(--oy,0px);left:50%;width:var(--ow,100%);max-width:none;height:auto;display:block;
  translate:-50% var(--py,0px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%),linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 14%),linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-composite:intersect}
.c-obj--bl>img{left:0;translate:0 var(--py,0px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%),linear-gradient(to left,transparent,#000 10%);
  mask-image:linear-gradient(to bottom,transparent,#000 14%),linear-gradient(to left,transparent,#000 10%)}
.c-obj--br>img{left:auto;right:0;translate:0 var(--py,0px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%),linear-gradient(to right,transparent,#000 10%);
  mask-image:linear-gradient(to bottom,transparent,#000 14%),linear-gradient(to right,transparent,#000 10%)}
/* settle-in: armed by JS only (never without it), the object drops into place like it was just set down */
@media (prefers-reduced-motion:no-preference){
  .c-obj>img{transition:transform 1400ms var(--e-out),opacity 420ms linear}
  .c-obj.is-armed>img{transform:translate3d(0,6%,0) rotate(var(--or,-1.6deg)) scale(1.03);opacity:0}
}

/* product hero sheet: colour field, the object pinned to its edge, the Paper panel on top.
   --cy moves the panel to the top (start, default) or the bottom (end) of the sheet. */
.c-sheet>.c-obj{position:absolute;inset:0;background:none}
.c-sheet>.c-card{position:relative;z-index:1;align-self:var(--cy,center)}
@media (max-width:899px){
  .c-sheet{display:flex;flex-direction:column;align-items:stretch;padding:28px var(--g)}
  .c-sheet>.c-card{align-self:stretch}
  .c-sheet>.c-obj{position:relative;inset:auto;margin:0 calc(-1 * var(--g));aspect-ratio:var(--oar,1/.86);z-index:0}
}

/* ============ View transitions between pages (Chrome, Safari 18.2+) ============ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:180ms linear both c-vt-out}
::view-transition-new(root){animation:560ms var(--e-out) both c-vt-in}
/* the hero badge of a product page shares its name with the badge that was clicked on the previous page */
.c-vtb{view-transition-name:c-badge}
::view-transition-group(c-badge){animation-duration:640ms;animation-timing-function:var(--e-out)}
@keyframes c-vt-out{to{opacity:0}}
@keyframes c-vt-in{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}


/* ============ Motion objects (no photography, G 30.09) ============
   Flat vector objects drawn in code from the badge geometry. The build inlines each object's rest frame
   (src/motion/objects/<name>.svg) into every [data-mo="<name>"]; motion/runtime.js plays it once on arrival.
   Line = Ink monoline at a constant screen width (like the badge letters); fills are flat tokens only. */
.mo{position:relative;display:block;--mo-line:var(--ink);--mo-lw:3.5px;color:var(--mo-line)}
.mo--sm{--mo-lw:2px}
.mo--on-ink{--mo-line:var(--paper)}
.mo-svg{display:block;width:100%;height:100%;overflow:visible}
.mo-svg *{transform-box:fill-box;transform-origin:center}
.mo-l{fill:none;stroke:var(--mo-line);stroke-width:var(--mo-lw);stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mo-f-pc{fill:var(--pc,var(--paper))}
.mo-f-paper{fill:var(--paper)}
.mo-f-white{fill:var(--white)}
.mo-f-ink{fill:var(--mo-line)}
.mo-f-none{fill:none}
/* an object about to play stays out of the very first paint (hard stop: .c-pre is removed ≤ 1.6 s) */
.c-pre .mo[data-mo]:not([data-mo-state]){visibility:hidden}

/* ============ Footer (promoted from chrome/footer.html by the importer) ============ */
/* footer-only (PROMOTE to base.css): the quiet partner row; the © sits on its line, the legal sentence below */
.c-foot__partner{flex:1 1 auto;display:flex;align-items:center;gap:14px;color:var(--ink-2);font:500 12px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase}
.c-foot__partner>.c-mark{padding-right:14px;border-right:1px solid var(--line-c);border-radius:0}
.c-foot__legal{order:3;flex:1 0 100%}
/* 01.10 density (VERDICT §3, CANON-DELTA §6): the partner sentence is a money/partner phrase (>= 14 px); the legal entity is visible */
.c-foot__legal:not(.c-foot__marks){font-size:14px;line-height:1.5}
.c-foot__entity{color:var(--ink)}
.c-foot__marks{order:4;font-size:12px;opacity:1;color:var(--ink-2)}

/* ============ T3 official marks — ONE normalised container system (CANON-DELTA §2) ============
   Files: img/marks/* (official, unaltered; provenance in img/marks/SOURCES.md). Snippets: src/MARKS.md.
   The container is Swaps'; the mark inside is the owner's. Size, state and motion live on the container only.
   Kinds:  .c-mark                 method tile 38×24, White, 1 px line, radius 6, mark height-led
           .c-mark--framed         owner mark that carries its own frame (Apple Pay, Google Pay): the frame IS the tile
           .c-mark--coin           token / network / flag circle, --mk 20|24|32|44 (.c-mark--s20…s44)
           .c-mark--disc           (with coin/net) artwork is itself a full disc: it covers the container ring
           .c-mark--net            14 px network badge on a 16 px ring, bottom-right of a coin (.c-mark-tok wrapper)
           .c-mark--logo           partner logo, height-led via --lh, no tile; White plate on Ink surfaces
   Per-mark optical fit: [data-mark="…"] sets --mo (height factor) or --cf (share of the circle). Never edit artwork. */

.c-mark{
  --k:1;                 /* tile scale (1 = 38×24) */
  --mo:1;                /* per-mark optical height factor (tile + logo) */
  --cf:.62;              /* per-mark share of the circle (coin + net) */
  --mk-ring:var(--paper);/* net-badge cut-out ring = the surface colour */
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
  box-sizing:border-box;width:calc(38px * var(--k));height:calc(24px * var(--k));
  background:var(--white);border:1px solid var(--line);border-radius:calc(6px * var(--k));
  vertical-align:middle;line-height:0;overflow:visible;
  transition:border-color .15s var(--e-out,ease),outline-color .15s var(--e-out,ease);
}
.c-mark>img,.c-mark>svg{display:block;flex:none;width:auto;max-width:none;height:calc(15px * var(--k) * var(--mo))}
.c-mark--lg{--k:1.5}                                   /* 57×36: widget mock at desktop only */

/* framed acceptance marks: the owner's own frame is the tile (no second frame around it) */
.c-mark--framed{background:none;border-color:transparent;width:auto;min-width:calc(38px * var(--k))}
.c-mark--framed>img{height:calc(24px * var(--k) * var(--mo))}
.c-mark--framed[data-mark="google-pay"]{border-radius:calc(12px * var(--k));width:calc(45px * var(--k))}

/* coins: tokens, networks, currency flags */
.c-mark--coin{--mk:24px;width:var(--mk);height:var(--mk);border-radius:50%}
.c-mark--s20{--mk:20px}.c-mark--s24{--mk:24px}.c-mark--s32{--mk:32px}.c-mark--s44{--mk:44px}
.c-mark--coin>img{height:calc(var(--mk) * var(--cf))}
.c-mark--coin.c-mark--disc>img{width:var(--mk);height:var(--mk)}  /* covers the 1 px ring: the owner's disc is the edge */

/* network badge on a token: 16 px ring (surface colour) holding a 14 px mark */
.c-mark-tok{position:relative;display:inline-flex;flex:none;vertical-align:middle;line-height:0}
.c-mark--net{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--mk-ring);box-sizing:border-box;background:var(--white)}
.c-mark--net>img{height:calc(14px * var(--cf))}
.c-mark--net.c-mark--disc>img{width:14px;height:14px}
.c-mark-tok:has(.c-mark--s20)>.c-mark--net,.c-mark-tok:has(.c-mark--s24)>.c-mark--net{right:-4px;bottom:-4px}

/* partner logos (trust bands, home diagram, footer): height-led, no tile */
.c-mark--logo{--lh:20px;width:auto;height:auto;background:none;border:0;border-radius:8px;padding:0}
.c-mark--logo>img{height:calc(var(--lh) * var(--mo))}
.c-mark--logo.c-mark--sm{--lh:16px}.c-mark--logo.c-mark--lg{--lh:28px}
.c-mark--plate,
:is(.c-dark,.c-trust,.c-mega__aside,.c-on-ink) .c-mark--logo{background:var(--white);height:calc(var(--lh) * 2);padding:0 calc(var(--lh) * .7);border-radius:10px}
/* one plate height per --lh, whatever the mark: a row of plates stays level */

/* per-mark optical fit (measured in lab/marks.html; artwork untouched) */
.c-mark[data-mark="visa"]{--mo:.64}            /* 3.06:1 wordmark: width-bound, reads as heavy as the symbols */
.c-mark[data-mark="mastercard"]{--mo:1.14}     /* file carries ~6 % clear space top/bottom */
.c-mark[data-mark="apple-pay"]{--mo:1}
.c-mark[data-mark="google-pay"]{--mo:1.854}    /* frame = 53.9 % of the file height (clear space built in) */
.c-mark[data-mark="ethereum"]{--cf:.64}
.c-mark[data-mark="base"]{--cf:.46}            /* a square reads heavier than a disc */
.c-mark[data-mark="arbitrum"]{--cf:.7}
.c-mark--net[data-mark="ethereum"]{--cf:.74}
.c-mark--net[data-mark="base"]{--cf:.56}
.c-mark--net[data-mark="arbitrum"]{--cf:.8}
.c-mark[data-mark="bridge"]{--mo:1}             /* vector wordmark */
.c-mark[data-mark="bridge-lockup"]{--mo:1.3}    /* symbol + wordmark: "Bridge" cap height matches bridge.svg */
.c-mark[data-mark="tempo-wordmark"]{--mo:.7}    /* heavy italic caps: optically level with Bridge */

/* rows */
.c-mark-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.c-mark-row>li{display:contents}
.c-mark-row--coins{gap:6px}
.c-mark-row--logos{gap:clamp(24px,3vw,40px)}
.c-mark-pair{display:inline-flex;align-items:center;gap:8px;min-height:24px}
.c-mark-pair>.c-mark-t{font:500 13px/1 var(--f-m);white-space:nowrap}

/* states — container only */
:is(a,button,label,[role="option"],[role="radio"]):hover>.c-mark:not(.c-mark--framed),
.c-mark.is-hover{border-color:var(--line-c)}
.c-mark.is-sel,
:is([aria-pressed="true"],[aria-checked="true"],[aria-selected="true"])>.c-mark{outline:2px solid var(--ink);outline-offset:2px}
.c-mark--coin.is-sel,:is([aria-pressed="true"],[aria-checked="true"],[aria-selected="true"])>.c-mark--coin{outline-offset:1px}
:is(.c-dark,.c-trust,.c-mega__aside,.c-on-ink) .c-mark{--mk-ring:var(--ink)}
:is(.c-dark,.c-trust,.c-mega__aside,.c-on-ink) .c-mark.is-sel,
:is(.c-dark,.c-trust,.c-mega__aside,.c-on-ink) :is([aria-pressed="true"],[aria-checked="true"],[aria-selected="true"])>.c-mark{outline-color:var(--paper)}

/* guard: nothing may alter the owner's pixels (no filter, opacity, blend, transform, animation) */
.c-mark>img,.c-mark>svg,.c-mark img,.c-mark svg{filter:none!important;opacity:1!important;mix-blend-mode:normal!important;
  transform:none!important;translate:none!important;scale:none!important;rotate:none!important;
  animation:none!important;transition:none!important;clip-path:none!important;mask:none!important}
.c-mark{filter:none!important;scale:none!important;rotate:none!important;mix-blend-mode:normal!important}

/* ============ T1 Swaps glyphs (src/glyphs.svg, docs: src/GLYPHS.md) ============
   <svg class="c-g" aria-hidden="true"><use href="#g-bank"/></svg>
   Size: --gs (16/20/24/32 via .c-g--16 … .c-g--32). Colour: currentColor (Ink on Paper/pastel, Paper on Ink).
   Motion lives on the glyph only and is driven by inherited, registered custom properties, because the shapes sit in
   the <use> shadow tree: the host animates --g-do / --g-ck / --g-rot / --g-nx, the cloned shapes read them. */
@property --g-do{syntax:'<number>';inherits:true;initial-value:0}
@property --g-ck{syntax:'<number>';inherits:true;initial-value:0}
@property --g-rot{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --g-nx{syntax:'<length>';inherits:true;initial-value:0px}

.c-g{--gs:24px;--gu:1;display:inline-block;width:var(--gs);height:var(--gs);flex:none;vertical-align:middle;color:inherit;overflow:visible}
.c-g--16{--gs:16px;--gu:1.5}
.c-g--20{--gs:20px;--gu:1.2}
.c-g--24{--gs:24px;--gu:1}
.c-g--32{--gs:32px;--gu:.75;--gw:2}          /* 2 u at 32 px+, like the badge pen at display sizes */

/* the shapes: inside a <use> shadow tree only SIMPLE selectors match (no ancestor outside the tree), so these are
   single classes owned by the sprite; their values arrive by inheritance from each <use> host */
.g-sym{stroke-width:var(--gw,1.75)}
.g-p{stroke-dasharray:1 2;stroke-dashoffset:var(--g-do,0)}
.g-p.g-ck{stroke-dashoffset:calc(var(--g-do,0) + var(--g-ck,0))}
.g-dot{opacity:calc(1 - var(--g-do,0))}
.g-rot{transform-box:view-box;transform-origin:12px 12px;transform:rotate(var(--g-rot,0deg))}
.g-nx{transform:translateX(var(--g-nx,0px));transition:transform 150ms var(--e-out,cubic-bezier(.22,1,.36,1))}

/* 1. draw once on arrival: add .is-draw (remove + re-add to replay) */
.c-g.is-draw{animation:g-draw 360ms var(--e-out,cubic-bezier(.22,1,.36,1)) both}
/* 2. paid: the check draws once, ease-out, no overshoot. Add .c-g--paid only on a confirmed terminal status */
.c-g--paid{animation:g-check 360ms var(--e-out,cubic-bezier(.22,1,.36,1)) both}
.c-g--paid.is-draw{animation:g-draw 360ms var(--e-out,cubic-bezier(.22,1,.36,1)) both,g-check 360ms var(--e-out,cubic-bezier(.22,1,.36,1)) 200ms both}
/* 3. in transit: the sector turns ONLY while the glyph itself carries .is-live (never on a terminal state) */
.c-g--moving.is-live{animation:g-spin 1600ms linear infinite}
.c-g--moving.is-live.is-draw{animation:g-draw 360ms var(--e-out,cubic-bezier(.22,1,.36,1)) both,g-spin 1600ms linear infinite}
/* 4. hand-off: the arrow nudges 2 px toward the partner on hover / focus of the glyph or its link */
.c-g--handoff:hover,
:is(a,button,[role="button"],.c-g-host):is(:hover,:focus-visible) .c-g--handoff{--g-nx:calc(2px * var(--gu,1))}

@keyframes g-draw{from{--g-do:1}to{--g-do:0}}
@keyframes g-check{from{--g-ck:1}to{--g-ck:0}}
@keyframes g-spin{to{--g-rot:360deg}}

/* reduced motion: every state is its static final frame */
@media (prefers-reduced-motion:reduce){
  .c-g,.c-g.is-draw,.c-g--paid,.c-g--moving.is-live{animation:none!important}
  .g-nx{transition:none;transform:none}
}

/* Site-owned additions on top of the imported prototype CSS (tokens/base/marks/glyphs are prototype bytes).
   Signed-in header CTA (ENG-SPEC §3.5, D3): both variants are in the HTML; html[data-signed-in] is set by the
   head script before first paint, so exactly one variant is ever laid out. */
html:not([data-signed-in]) [data-auth='in'],
html[data-signed-in] [data-auth='out'] {
  display: none !important;
}
html[data-signed-in] .c-mm__cta {
  grid-template-columns: 1fr;
}