/* ---------- 00 fonts ----------
   Served from our own origin rather than fonts.googleapis.com: the privacy
   notice promises no third-party requests, and an embedded Google Fonts
   stylesheet sends every visitor IP to Google before anything renders.
   Geist is SIL OFL. Both families are variable, so one file per subset
   covers all the weights; the declarations mirror what Google served. */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/geist-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* BuyOwnCode, design system implementation
   Tokens mirror the Figma file "Design System, BuyOwnCode" 1:1. */

/* ---------- 01 tokens ---------- */
:root{
  --bg-header:rgba(10,11,13,.86);
  --bg-canvas:#0A0B0D; --bg-band:#0F1113; --bg-surface:#14171A; --bg-surface-2:#1A1E22;
  --bg-inverse:#F5F7F7;
  --bd-subtle:#1E2226; --bd-strong:#2C3237; --bd-hair:rgba(255,255,255,.08);
  --bd-hair-hi:rgba(255,255,255,.18);
  --tx-primary:#F5F8F8; --tx-secondary:#C2CBCC; --tx-muted:#7F9195; --tx-inverse:#0A0B0D;
  --gold:#E8A33D; --gold-hover:#F5B85C; --gold-dim:#3A2A12; --live:#35D28B;

  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px; --s32:32px;
  --s48:48px; --s64:64px; --s80:80px; --s120:120px;

  --r4:4px; --r6:6px; --r8:8px; --r12:12px; --r-pill:100px;
  --shadow-card:0 18px 40px rgba(0,0,0,.45);

  --m-xs:120ms; --m-fast:180ms; --m-base:260ms; --m-gentle:420ms; --m-slow:700ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);

  --content:1280px; --gutter:20px;

  --f-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* fluid type, Figma desktop values are the clamp maxima */
  --t-xl:clamp(2.25rem,1.15rem + 5.2vw,5rem);
  --t-l:clamp(1.875rem,1.15rem + 3.5vw,3.75rem);
  --t-m:clamp(1.625rem,1.15rem + 2.3vw,2.75rem);
  --t-s:clamp(1.5rem,1.2rem + 1.5vw,2.125rem);
  --t-h3:clamp(1.3125rem,1.15rem + .8vw,1.75rem);
  --t-h4:clamp(1.125rem,1.06rem + .3vw,1.25rem);
  --t-h5:1rem;
  --t-bl:clamp(1rem,.96rem + .2vw,1.125rem);
  --t-bm:1rem; --t-bs:.875rem; --t-micro:.8125rem; --t-legal:.6875rem;
}

/* ==========================================================================
   LIGHT THEME
   Follows the operating system. Only the colour tokens are redefined, every
   rule below the token block is written against them, so nothing else changes.
   The lightbox, drawer scrim and gallery overlay buttons stay dark on purpose:
   they sit over images in both themes.
   ========================================================================== */
@media (prefers-color-scheme: light) {
  :root {
    --bg-canvas:#FBFCFC;
    --bg-band:#F2F5F6;
    --bg-surface:#FFFFFF;
    --bg-surface-2:#F5F8F8;
    --bg-header:rgba(255,255,255,.86);
    --bg-inverse:#0A0B0D;

    --bd-subtle:#E2E8EA;
    --bd-strong:#C7D0D3;
    --bd-hair:rgba(16,22,26,.10);
    --bd-hair-hi:rgba(16,22,26,.22);

    --tx-primary:#0F1417;
    --tx-secondary:#3C484E;
    --tx-muted:#64757A;
    --tx-inverse:#F7F9F9;

    /* gold is used as a fill and as text, so the light value has to clear
       4.5:1 on white either way, the dark-theme gold is about 2:1 there */
    --gold:#8A5A0C;
    --gold-hover:#6E4708;
    --gold-dim:#FBF2E0;
    --live:#0F7A50;

    --shadow-card:0 18px 40px rgba(16,24,32,.13);
  }
}
@media (min-width:768px){ :root{ --gutter:40px } }
@media (min-width:1280px){ :root{ --gutter:80px } }

/* ---------- 02 reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--bg-canvas);color:var(--tx-secondary);
  font-family:var(--f-sans);font-size:var(--t-bm);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 03 typography ---------- */
.d-xl{font-size:var(--t-xl);line-height:.975;letter-spacing:-.032em;font-weight:600;color:var(--tx-primary)}
.d-l {font-size:var(--t-l);line-height:1;letter-spacing:-.02em;font-weight:600;color:var(--tx-primary)}
.d-m {font-size:var(--t-m);line-height:1.09;letter-spacing:-.02em;font-weight:600;color:var(--tx-primary)}
.d-s {font-size:var(--t-s);line-height:1.18;letter-spacing:-.018em;font-weight:600;color:var(--tx-primary)}
.h3  {font-size:var(--t-h3);line-height:1.14;letter-spacing:-.012em;font-weight:500;color:var(--tx-primary)}
.h4  {font-size:var(--t-h4);line-height:1.3;font-weight:500;color:var(--tx-primary)}
.h5  {font-size:var(--t-h5);line-height:1.375;font-weight:500;color:var(--tx-primary)}
.b-l {font-size:var(--t-bl);line-height:1.5}
.b-m {font-size:var(--t-bm);line-height:1.5}
.b-s {font-size:var(--t-bs);line-height:1.5}
.micro{font-size:var(--t-micro);line-height:1.385}
.legal{font-size:var(--t-legal);line-height:1.364;color:var(--tx-muted)}
.eyebrow{font-family:var(--f-mono);font-size:.6875rem;line-height:1.455;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-muted);font-weight:400}
.mono-label{font-family:var(--f-mono);font-size:.75rem;line-height:1.333;letter-spacing:.05em;color:var(--tx-muted)}
.lede{color:var(--tx-secondary);max-width:62ch}
.tx-p{color:var(--tx-primary)} .tx-mu{color:var(--tx-muted)} .gold{color:var(--gold)}

/* eyebrow with rule, as drawn in Figma */
.eyebrow-rule{display:flex;align-items:center;gap:var(--s12)}
.eyebrow-rule::before{content:"";width:18px;height:1px;background:var(--gold);flex:none}

/* ---------- 04 layout ---------- */
.wrap{width:100%;max-width:calc(var(--content) + var(--gutter)*2);margin-inline:auto;
  padding-inline:var(--gutter)}
.section{padding-block:clamp(56px,8vw,100px);border-top:1px solid var(--bd-hair)}
.section--band{background:var(--bg-band)}
.section--hero{padding-block:clamp(64px,10vw,120px) clamp(56px,8vw,104px);border-top:0}
.section-head{max-width:70ch;margin-bottom:clamp(32px,4vw,var(--s48))}
.section-head > * + *{margin-top:var(--s16)}
.stack-8>*+*{margin-top:var(--s8)} .stack-12>*+*{margin-top:var(--s12)}
.stack-16>*+*{margin-top:var(--s16)} .stack-24>*+*{margin-top:var(--s24)}
.stack-32>*+*{margin-top:var(--s32)} .stack-48>*+*{margin-top:var(--s48)}
.grid{display:grid;gap:var(--s24)}
@media (min-width:768px){.grid{gap:var(--s32)}}
.g-2{grid-template-columns:1fr}
.g-3{grid-template-columns:1fr}
.g-4{grid-template-columns:1fr 1fr}
@media (min-width:640px){.g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);
  color:var(--tx-inverse);padding:12px 20px;border-radius:0 0 var(--r6) 0;font-weight:500}
.skip:focus{left:0}

/* ---------- 05 buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  height:44px;padding-inline:var(--s24);border-radius:var(--r6);border:1px solid transparent;
  font-size:.8125rem;font-weight:500;letter-spacing:.015em;cursor:pointer;white-space:nowrap;
  transition:background var(--m-fast) var(--ease-out),border-color var(--m-fast) var(--ease-out),
    color var(--m-fast) var(--ease-out),transform var(--m-fast) var(--ease-out)}
.btn--sm{height:36px;padding-inline:var(--s16)}
.btn--primary{background:var(--gold);color:var(--tx-inverse)}
.btn--primary:hover{background:var(--gold-hover)}
.btn--secondary{background:transparent;border-color:var(--bd-strong);color:var(--tx-primary)}
.btn--secondary:hover{border-color:var(--tx-muted);background:var(--bg-surface-2)}
.btn--ghost{background:transparent;color:var(--tx-secondary);padding-inline:var(--s12)}
.btn--ghost:hover{color:var(--tx-primary)}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s12)}
.arrow{transition:transform var(--m-fast) var(--ease-out)}
.btn:hover .arrow,.lnk:hover .arrow{transform:translateX(3px)}
.lnk{display:inline-flex;align-items:center;gap:var(--s8);color:var(--gold);font-size:.875rem;font-weight:500}
.lnk:hover{color:var(--gold-hover)}

/* ---------- 06 atoms ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding-inline:10px;
  border-radius:var(--r-pill);background:rgba(53,210,139,.1);border:1px solid rgba(53,210,139,.25);
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;color:var(--live)}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--live);flex:none}
.tag{display:inline-flex;align-items:center;height:24px;padding-inline:8px;border-radius:var(--r4);
  background:var(--bg-surface-2);border:1px solid var(--bd-subtle);font-family:var(--f-mono);
  font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-muted)}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--s8);align-items:center}
.panel{background:var(--bg-surface);border:1px solid var(--bd-hair);border-radius:var(--r12);
  padding:clamp(20px,3vw,var(--s32))}

/* ---------- 07 logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1.0625rem;
  letter-spacing:-.02em;color:var(--tx-primary);line-height:1}
.logo-mark{width:22px;height:22px;border-radius:var(--r6);background:var(--gold);flex:none;
  display:grid;place-items:center}
.logo-mark::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--tx-inverse)}
.lg-a{color:var(--gold)}

/* ---------- 08 announcement + header ---------- */
.announce{background:var(--bg-band);border-bottom:1px solid var(--bd-hair);text-align:center}
.announce a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;
  padding:10px var(--gutter);font-family:var(--f-mono);font-size:.625rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tx-muted);flex-wrap:wrap}
.announce a:hover{color:var(--tx-secondary)}
.announce .sep{color:var(--bd-strong)}
.announce .amsg{color:var(--gold)}

.site-header{position:sticky;top:0;z-index:50;background:var(--bg-header);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bd-hair)}
.header-in{display:flex;align-items:center;gap:var(--s24);min-height:64px}
@media (min-width:1024px){.header-in{min-height:72px}}
.nav{display:none;margin-inline:auto}
.nav-list{display:flex;align-items:center;gap:var(--s4)}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:var(--r6);
  font-size:.875rem;color:var(--tx-secondary);transition:color var(--m-fast) var(--ease-out),
  background var(--m-fast) var(--ease-out)}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--tx-primary);background:var(--bg-surface-2)}
.nav-link .caret{width:8px;height:8px;opacity:.6;transition:transform var(--m-fast) var(--ease-out)}
.has-menu{position:relative}
.has-menu:hover .caret,.has-menu:focus-within .caret{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;width:min(92vw,360px);
  background:var(--bg-surface);border:1px solid var(--bd-subtle);border-radius:var(--r12);
  box-shadow:var(--shadow-card);padding:var(--s8);opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity var(--m-fast) var(--ease-out),
  transform var(--m-fast) var(--ease-out),visibility var(--m-fast)}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:block;padding:10px 12px;border-radius:var(--r8)}
.menu a:hover{background:var(--bg-surface-2)}
.menu strong{display:block;font-size:.875rem;font-weight:500;color:var(--tx-primary)}
.menu span{display:block;font-size:.75rem;color:var(--tx-muted);margin-top:2px}

/* two-column Apps menu: type first, categories under it */
.menu--wide{width:min(94vw,640px);left:0;translate:none;padding:var(--s12);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s16)}
.menu--wide .mcol{display:flex;flex-direction:column;min-width:0}
.menu--wide .mcol+.mcol{border-left:1px solid var(--bd-subtle);padding-left:var(--s16)}
.mhead{margin-bottom:var(--s4)}
.msub{margin:0 0 var(--s4)}
.msub li{list-style:none}
.msub a{display:flex;align-items:center;justify-content:space-between;gap:var(--s8);
  padding:6px 12px;font-size:.8125rem;color:var(--tx-secondary)}
.msub a:hover{color:var(--tx-primary)}
.msub i{font-style:normal;font-family:var(--f-mono);font-size:.6875rem;color:var(--tx-muted)}
.mfoot{margin-top:auto;padding:8px 12px;font-size:.8125rem;color:var(--gold);
  display:flex;align-items:center;gap:6px}
/* .menu span is display:block; the inline arrow must opt out */
.menu .mfoot span{display:inline;font-size:inherit;color:inherit;margin:0}
.mfoot:hover{background:var(--bg-surface-2)}
.header-cta{display:none;align-items:center;gap:var(--s8);margin-left:auto}
@media (min-width:1024px){
  .nav{display:block} .header-cta{display:flex} .nav-toggle{display:none}
}
.nav-toggle{margin-left:auto;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--bd-strong);border-radius:var(--r6);background:transparent;cursor:pointer}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--tx-primary);
  transition:transform var(--m-fast) var(--ease-out),opacity var(--m-fast) var(--ease-out)}
.nav-toggle span+span{margin-top:4px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media (min-width:1024px){.nav-toggle{display:none}}

.drawer{position:fixed;inset:0 0 0 auto;width:min(88vw,400px);z-index:60;background:var(--bg-band);
  border-left:1px solid var(--bd-subtle);transform:translateX(100%);
  transition:transform var(--m-base) var(--ease-out);overflow-y:auto;
  padding:var(--s24) var(--s24) var(--s48);overscroll-behavior:contain}
.drawer[data-open="true"]{transform:none}
.drawer-scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.6);opacity:0;
  visibility:hidden;transition:opacity var(--m-base) var(--ease-out),visibility var(--m-base)}
.drawer-scrim[data-open="true"]{opacity:1;visibility:visible}
.drawer h2{margin-bottom:var(--s12)}
.drawer .d-group+.d-group{margin-top:var(--s24);padding-top:var(--s24);border-top:1px solid var(--bd-subtle)}
.drawer a.d-item{display:block;padding:11px 0;font-size:1rem;color:var(--tx-secondary)}
.drawer a.d-item:hover{color:var(--tx-primary)}
.drawer .btn{width:100%}
body[data-lock="true"]{overflow:hidden}
@media (min-width:1024px){.drawer,.drawer-scrim{display:none}}

/* ---------- 09 app card ---------- */
.card{display:flex;flex-direction:column;background:var(--bg-surface);
  border:1px solid var(--bd-hair);border-radius:var(--r12);overflow:hidden;height:100%;
  transition:border-color var(--m-fast) var(--ease-out),transform var(--m-fast) var(--ease-out),
    box-shadow var(--m-fast) var(--ease-out)}
.card:hover{border-color:var(--bd-hair-hi);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.card-thumb{aspect-ratio:405/214;background:var(--bg-canvas);border-bottom:1px solid var(--bd-hair);
  padding:14px;display:flex;gap:10px;overflow:hidden}
.thumb-rail{width:16%;min-width:34px;display:flex;flex-direction:column;gap:7px;padding-top:4px}
.thumb-rail i{display:block;height:3px;border-radius:2px;background:var(--bd-strong)}
.thumb-rail i:first-child{background:var(--gold);width:60%}
.thumb-rail i:nth-child(2){width:85%} .thumb-rail i:nth-child(3){width:70%}
.thumb-rail i:nth-child(4){width:78%} .thumb-rail i:nth-child(5){width:55%}
.thumb-main{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.thumb-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumb-tiles div{height:26px;border-radius:var(--r4);background:var(--bg-surface-2);
  border:1px solid var(--bd-subtle);padding:6px}
.thumb-tiles div::after{content:"";display:block;height:3px;width:62%;border-radius:2px;background:var(--bd-strong)}
.thumb-tiles div:first-child::after{background:var(--gold)}
.thumb-chart{flex:1;display:flex;align-items:flex-end;gap:clamp(3px,1.1%,6px);
  background:var(--bg-surface-2);border:1px solid var(--bd-subtle);border-radius:var(--r4);padding:8px}
.thumb-chart i{flex:1;border-radius:1.5px 1.5px 0 0;background:var(--bd-strong)}
.thumb-chart i.on{background:var(--gold)}
.card-body{padding:var(--s16);display:flex;flex-direction:column;gap:10px;flex:1}
@media (min-width:640px){.card-body{padding:var(--s20,18px)}}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s8)}
.card-title{font-size:1.0625rem;line-height:1.3;font-weight:500;color:var(--tx-primary);letter-spacing:-.01em}
.card-desc{font-size:.8125rem;line-height:1.5;color:var(--tx-secondary);flex:1}
.card-stack{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--tx-muted)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s8);
  padding-top:12px;margin-top:auto;border-top:1px solid var(--bd-hair)}
.card-price{font-size:.875rem;font-weight:500;color:var(--tx-primary)}

/* ---------- 10 listing ---------- */
.listing{display:grid;gap:var(--s32);align-items:start}
@media (min-width:1024px){.listing{grid-template-columns:260px minmax(0,1fr);gap:var(--s48)}}
.rail{position:sticky;top:96px}
.rail-group+.rail-group{margin-top:var(--s24);padding-top:var(--s24);border-top:1px solid var(--bd-subtle)}
.filters{display:flex;flex-wrap:wrap;gap:var(--s8)}
@media (min-width:1024px){.filters{flex-direction:column;gap:2px}}
.filter{display:flex;align-items:center;justify-content:space-between;gap:var(--s8);
  padding:9px 12px;border-radius:var(--r6);border:1px solid var(--bd-subtle);background:transparent;
  font-size:.8125rem;color:var(--tx-secondary);cursor:pointer;text-align:left;width:auto;
  transition:background var(--m-fast) var(--ease-out),color var(--m-fast) var(--ease-out),
    border-color var(--m-fast) var(--ease-out)}
@media (min-width:1024px){.filter{width:100%;border-color:transparent}}
.filter:hover{color:var(--tx-primary);background:var(--bg-surface-2)}
.filter[aria-pressed="true"]{background:var(--gold-dim);border-color:rgba(232,163,61,.35);color:var(--gold)}
.filter .n{font-family:var(--f-mono);font-size:.6875rem;color:var(--tx-muted)}
.filter[aria-pressed="true"] .n{color:var(--gold)}
.cards-2{display:grid;gap:var(--s24);grid-template-columns:1fr}
@media (min-width:560px){.cards-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards-2{gap:var(--s32)}}
/* mobile templates list 3-up: the card art is a phone screen, not a dashboard */
@media (min-width:1024px){.cards-2[data-cols="3"]{grid-template-columns:repeat(3,1fr)}}
.card-thumb picture{display:block;width:100%;height:100%}
/* A mobile thumbnail is a phone shot that already carries its own bezel and
   corner radius, so the card must not draw a second line above it. */
.card[data-type="mobile"]{border-top:0}
.card[hidden]{display:none}
.filter[hidden]{display:none}
.listing-count{font-family:var(--f-mono);font-size:.75rem;color:var(--tx-muted);margin-bottom:var(--s16)}

/* ---------- 11 feature / step / number blocks ---------- */
.feature{border-top:1px solid var(--bd-hair);padding-top:var(--s24)}
.feature h3{margin-bottom:10px}
.step{display:grid;gap:var(--s12);border-top:1px solid var(--bd-hair);padding-top:var(--s24)}
@media (min-width:768px){.step{grid-template-columns:80px minmax(0,1fr);gap:var(--s32);padding-top:var(--s32)}}
.step-n{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;color:var(--gold)}
.stat{border-top:1px solid var(--bd-hair);padding-top:var(--s16)}
.stat b{display:block;font-size:var(--t-s);font-weight:600;color:var(--tx-primary);
  letter-spacing:-.018em;line-height:1.18;margin-bottom:6px}
.checks li{position:relative;padding-left:26px;font-size:.9375rem;line-height:1.55}
.checks li+li{margin-top:10px}
.checks li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:6px;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg) translateY(-1px)}

/* ---------- 11b cost calculator ---------- */
.calc{background:var(--bg-surface);border:1px solid var(--bd-hair);border-radius:var(--r12);
  padding:clamp(20px,3vw,var(--s32));display:flex;flex-direction:column;gap:var(--s24)}
.calc__controls{display:grid;gap:var(--s24);grid-template-columns:1fr}
@media (min-width:720px){.calc__controls{grid-template-columns:auto 1fr;align-items:end;gap:var(--s32)}}
.calc__field{display:flex;flex-direction:column;gap:10px;min-width:0}
.calc__seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;
  border:1px solid var(--bd-hair);background:var(--bg-surface-2);width:max-content;max-width:100%}
.calc__seg button{appearance:none;border:0;background:none;cursor:pointer;padding:8px 16px;
  border-radius:999px;font:inherit;font-size:.875rem;color:var(--tx-secondary);
  transition:background var(--dur,.18s) ease,color var(--dur,.18s) ease}
.calc__seg button[aria-pressed="true"]{background:var(--gold);color:var(--tx-inverse);font-weight:600}
.calc__seg button:hover[aria-pressed="false"]{color:var(--tx-primary)}
.calc__range{width:100%;accent-color:var(--gold);height:24px;cursor:pointer}
.calc__out{font-family:var(--f-mono);font-size:.8125rem;color:var(--tx-muted)}
.calc__figures{display:grid;gap:var(--s16);grid-template-columns:1fr}
@media (min-width:720px){.calc__figures{grid-template-columns:repeat(3,1fr)}}
.calc__fig{display:flex;flex-direction:column;gap:6px;padding:var(--s16);
  border:1px solid var(--bd-hair);border-radius:var(--r12);background:var(--bg-surface-2)}
.calc__fig b{font-size:clamp(1.5rem,3.4vw,2rem);font-weight:600;letter-spacing:-.02em;
  color:var(--tx-primary);font-variant-numeric:tabular-nums}
.calc__fig--ours{border-color:rgba(232,163,61,.4)}
.calc__fig--ours b{color:var(--gold)}
.calc__save{font-size:1.0625rem;color:var(--tx-primary);margin:0}
.calc__save b{color:var(--gold);font-variant-numeric:tabular-nums}

/* A "what it used to be" list: same shape as .checks, with the tick
   replaced by a muted dash so the two columns read as a comparison. */
.checks--was li::before{content:"";width:10px;height:0;border-left:0;
  border-bottom:1.5px solid var(--tx-muted);transform:none;top:.75em}

/* ---------- 12 pricing ---------- */
.plan{display:flex;flex-direction:column;gap:var(--s16);background:var(--bg-surface);
  border:1px solid var(--bd-hair);border-radius:var(--r12);padding:clamp(20px,3vw,var(--s32));height:100%}
.plan--featured{border-color:rgba(232,163,61,.4);background:linear-gradient(180deg,var(--gold-dim) 0%,var(--bg-surface) 46%)}
.plan-price{font-size:var(--t-s);font-weight:600;color:var(--tx-primary);letter-spacing:-.018em}
.plan .btn{margin-top:auto;width:100%}
.tablewrap{overflow-x:auto;border:1px solid var(--bd-hair);border-radius:var(--r12);
  -webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.875rem}
caption{text-align:left;padding:var(--s16);color:var(--tx-muted);font-size:.8125rem;
  border-bottom:1px solid var(--bd-hair)}
th,td{padding:14px var(--s16);text-align:left;border-bottom:1px solid var(--bd-hair)}
thead th{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-muted);font-weight:400;background:var(--bg-surface)}
tbody tr:last-child td{border-bottom:0}
tbody th{font-weight:400;color:var(--tx-secondary)}
td.num{font-variant-numeric:tabular-nums;color:var(--tx-primary)}
tr.hl td,tr.hl th{background:var(--gold-dim);color:var(--gold)}

/* ---------- 13 accordion ---------- */
.acc{border-top:1px solid var(--bd-hair)}
.acc details{border-bottom:1px solid var(--bd-hair)}
.acc summary{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s16);
  padding:var(--s24) 0;cursor:pointer;list-style:none;color:var(--tx-primary);
  font-size:var(--t-h4);font-weight:500;line-height:1.3}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:12px;height:12px;margin-top:6px;
  border-right:1.5px solid var(--tx-muted);border-bottom:1.5px solid var(--tx-muted);
  transform:rotate(45deg);transition:transform var(--m-fast) var(--ease-out)}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc summary:hover{color:var(--gold)}
.acc .acc-body{padding-bottom:var(--s24);max-width:72ch}

/* ---------- 13b long document: prose column + sticky contents ----------
   Privacy, terms and the FAQ are a single running column, which left the
   right half of a 1280px page empty. The space now carries a contents
   rail that tracks the section you are reading. */
.doc{display:grid;gap:var(--s32)}
.doc__body{min-width:0;max-width:78ch}
.toc{display:none}
@media (min-width:1000px){
  .doc{grid-template-columns:minmax(0,1fr) 240px;gap:var(--s48);align-items:start}
  .toc{display:block;position:sticky;top:96px;border-left:1px solid var(--bd-hair);
    padding-left:var(--s24)}
}
.toc ol{list-style:none;margin-top:var(--s16);display:flex;flex-direction:column;gap:10px}
.toc a{display:block;font-size:.875rem;line-height:1.45;color:var(--tx-muted);
  text-decoration:none;transition:color var(--m-fast) var(--ease-out)}
.toc a:hover{color:var(--tx-primary)}
.toc a[aria-current="true"]{color:var(--gold)}
.toc__foot{margin-top:var(--s24);padding-top:var(--s16);border-top:1px solid var(--bd-hair)}

/* ---------- 14 CTA band ---------- */
.cta-band{position:relative;overflow:hidden;text-align:center}
.cta-band::before{content:"";position:absolute;left:50%;top:-40%;translate:-50% 0;
  width:min(760px,120%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,163,61,.16),transparent 62%);filter:blur(110px)}
.cta-band > *{position:relative}
.cta-band .btn-row{justify-content:center}

/* ---------- 15 footer ---------- */
.site-footer{background:var(--bg-band);border-top:1px solid var(--bd-hair);
  padding-block:clamp(40px,6vw,var(--s64)) var(--s32)}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s16);margin-bottom:clamp(32px,5vw,var(--s48))}
.social{display:flex;gap:var(--s8)}
.social a{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r6);
  border:1px solid var(--bd-subtle);font-family:var(--f-mono);font-size:.5625rem;
  letter-spacing:.06em;color:var(--tx-muted);transition:color var(--m-fast) var(--ease-out),
  border-color var(--m-fast) var(--ease-out)}
.social a:hover{color:var(--tx-primary);border-color:var(--bd-strong)}
.footer-cols{display:grid;gap:var(--s32);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.footer-cols{grid-template-columns:repeat(4,1fr);gap:var(--s24)}}
.footer-cols h2{margin-bottom:var(--s16)}
.footer-cols a{display:block;padding:6px 0;font-size:.875rem;color:var(--tx-secondary);
  transition:color var(--m-fast) var(--ease-out)}
.footer-cols a:hover{color:var(--gold)}
.footer-legal{margin-top:clamp(32px,5vw,var(--s48));padding-top:var(--s24);
  border-top:1px solid var(--bd-subtle)}
.footer-base{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s24);justify-content:space-between;
  margin-top:var(--s16)}

/* ---------- 16 forms ---------- */
.field{display:block} .field+.field{margin-top:var(--s16)}
.field label{display:block;font-size:.8125rem;color:var(--tx-secondary);margin-bottom:7px}
.field .req{color:var(--gold)}
.input{width:100%;min-height:44px;padding:11px 14px;border-radius:var(--r6);
  background:var(--bg-canvas);border:1px solid var(--bd-strong);color:var(--tx-primary);
  transition:border-color var(--m-fast) var(--ease-out)}
.input::placeholder{color:var(--tx-muted)}
.input:hover{border-color:var(--tx-muted)}
textarea.input{min-height:132px;resize:vertical}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tx-muted) 50%),
  linear-gradient(135deg,var(--tx-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.field-row{display:grid;gap:var(--s16)}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}

/* ---------- 17 misc ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.8125rem;color:var(--tx-muted)}
.crumbs a:hover{color:var(--tx-primary)}
.crumbs li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--bd-strong)}
.crumbs li{display:flex;align-items:center;gap:6px}
.split{display:grid;gap:var(--s32)}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s48)}
  .split--aside{grid-template-columns:minmax(0,1fr) 380px}
  /* the screenshot gallery needs more room than a plain aside */
  .split--gallery{grid-template-columns:minmax(0,1fr) minmax(0,520px)}}
.hero-glow{position:relative}
.hero-glow::before{content:"";position:absolute;left:-10%;top:-30%;width:min(620px,90%);
  aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,163,61,.13),transparent 60%);filter:blur(110px)}
.hero-glow > *{position:relative}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.prose > * + *{margin-top:var(--s16)}
.prose h2{margin-top:var(--s48)} .prose h3{margin-top:var(--s32)}
.prose ul{list-style:disc;padding-left:1.25em} .prose li+li{margin-top:8px}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* scroll reveal, fade + 24px rise, 60ms stagger (per design system) */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(24px);
    transition:opacity var(--m-gentle) var(--ease-out),transform var(--m-gentle) var(--ease-out)}
  .js .reveal.in{opacity:1;transform:none}
  /* above the fold must paint immediately, never animate the LCP element */
  .js .section--hero .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 17b home hero entrance ----------
   Runs on load rather than on scroll, because it is above the fold, and it
   is pure CSS so it does not wait for site.js. The h1 is the LCP element,
   so it is only ever moved, never faded: an element at opacity 0 does not
   count as painted, and fading it in would push LCP back by the length of
   the animation. Everything around it may fade, because none of it is the
   largest element. */
@media (prefers-reduced-motion:no-preference){
  @keyframes hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes hero-lift{from{transform:translateY(20px)}to{transform:none}}
  @keyframes hero-drift{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(5%,4%,0) scale(1.09)}
  }

  .hero--intro .eyebrow{animation:hero-in var(--m-slow) var(--ease-out) 40ms both}
  .hero--intro h1{animation:hero-lift 780ms var(--ease-out) 90ms both}
  .hero--intro .lede{animation:hero-in var(--m-slow) var(--ease-out) 280ms both}
  .hero--intro .btn-row{animation:hero-in var(--m-slow) var(--ease-out) 380ms both}
  .hero--intro .micro{animation:hero-in var(--m-slow) var(--ease-out) 470ms both}

  /* the glow keeps moving, slowly enough to read as light rather than motion */
  .hero--intro .hero-glow::before{will-change:transform;
    animation:hero-drift 22s var(--ease-io) infinite}
}


/* ---------- 18 product-style hero: wide media column + info column ---------- */
.pdp{display:grid;gap:var(--s32);align-items:start}
@media (min-width:1024px){
  .pdp{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:var(--s48)}
}

/* ---------- 19 screenshot gallery (landscape screenshots) ---------- */
.shotgal{display:flex;flex-direction:column;gap:var(--s12)}
.shotgal__stage{border:1px solid var(--bd-hair);border-radius:var(--r12);overflow:hidden;
  background:var(--bg-surface);box-shadow:var(--shadow-card)}
.shotgal__viewport{position:relative;background:var(--bg-canvas);line-height:0}
.shotgal__frame{position:relative;display:block;width:100%;aspect-ratio:1120/591;
  border:0;padding:0;margin:0;background:var(--bg-canvas);cursor:zoom-in;overflow:hidden}
.shotgal picture{display:contents}
.shotgal__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--m-base) var(--ease-out)}
.shotgal__frame img.on{opacity:1}

.shotgal__arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-pill);
  background:rgba(10,11,13,.66);border:1px solid var(--bd-hair-hi);color:var(--tx-primary);
  cursor:pointer;opacity:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity var(--m-fast) var(--ease-out),background var(--m-fast) var(--ease-out)}
.shotgal__stage:hover .shotgal__arrow,.shotgal__arrow:focus-visible{opacity:1}
.shotgal__arrow:hover{background:var(--gold);color:var(--tx-inverse);border-color:var(--gold)}
.shotgal__arrow--prev{left:12px} .shotgal__arrow--next{right:12px}

.shotgal__expand{position:absolute;top:12px;right:12px;z-index:2;
  display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r8);
  background:rgba(10,11,13,.66);border:1px solid var(--bd-hair-hi);color:var(--tx-primary);
  cursor:pointer;opacity:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity var(--m-fast) var(--ease-out),background var(--m-fast) var(--ease-out)}
.shotgal__stage:hover .shotgal__expand,.shotgal__expand:focus-visible{opacity:1}
.shotgal__expand:hover{background:var(--gold);color:var(--tx-inverse);border-color:var(--gold)}
@media (hover:none){.shotgal__arrow,.shotgal__expand{opacity:1}}

.shotgal__cap{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap;
  padding:11px var(--s16);border-top:1px solid var(--bd-hair);background:var(--bg-surface);
  line-height:1.4}
.shotgal__cap b{font-size:.875rem;font-weight:500;color:var(--tx-primary)}
.shotgal__step{margin-left:auto;font-family:var(--f-mono);font-size:.6875rem;color:var(--tx-muted)}

/* one row whatever the shot count: 6, 7 or 8 */
.shotgal__thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s8);
  list-style:none;margin:0;padding:0}
.shotgal__thumb{display:block;width:100%;padding:0;
  border:2px solid var(--bd-strong);border-radius:var(--r8);overflow:hidden;
  background:var(--bg-surface);cursor:pointer;opacity:.6;
  transition:border-color var(--m-fast) var(--ease-out),
  transform var(--m-fast) var(--ease-out),opacity var(--m-fast) var(--ease-out),
  box-shadow var(--m-fast) var(--ease-out)}
.shotgal__thumb img{display:block;width:100%;aspect-ratio:1120/591;object-fit:cover}
.shotgal__thumb:hover{opacity:1;border-color:var(--tx-muted);transform:translateY(-1px)}
.shotgal__thumb[aria-pressed="true"]{opacity:1;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(232,163,61,.25)}

/* play / pause for the auto-advance (WCAG 2.2.2: auto-updating content needs a control) */
.shotgal__play{display:inline-grid;place-items:center;width:24px;height:24px;
  border-radius:var(--r-pill);border:1px solid var(--bd-strong);background:transparent;
  color:var(--tx-muted);cursor:pointer;flex:none;
  transition:color var(--m-fast) var(--ease-out),border-color var(--m-fast) var(--ease-out)}
.shotgal__play:hover{color:var(--tx-primary);border-color:var(--tx-muted)}
.shotgal__play .i-pause{display:none}
.shotgal__play[aria-pressed="true"] .i-pause{display:block}
.shotgal__play[aria-pressed="true"] .i-play{display:none}

/* Below 1024px the media column is full width, so thumbs stay a 6-up grid but the
   column is wide enough for comfortable targets. Under 700px switch to a snap strip. */
@media (max-width:700px){
  .shotgal__thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .shotgal__thumbs::-webkit-scrollbar{display:none}
  /* the <li> is the flex item, not the button inside it */
  .shotgal__thumbs > li{flex:0 0 116px;scroll-snap-align:start}
}

/* Portrait variant: phone screenshots. The stage stays a fixed box so the hero
   layout does not change; the shot is drawn inside a device bezel instead of
   being cover-cropped, which would slice a 780x1688 image to ribbons. */
.shotgal--portrait .shotgal__frame{aspect-ratio:4/5;cursor:zoom-in;
  background:radial-gradient(120% 90% at 50% 0%,var(--bg-surface),var(--bg-canvas))}
/* The capture already includes the iPhone shell that ios.css draws
   (11px bezel, 52px radius on a 393x852 phone), so nothing here may add a
   second one. The radius is given as a percentage pair so the clip lands on
   the bezel edge at any display size: 52/393 across, 52/852 down. */
.shotgal--portrait .shotgal__frame img{position:absolute;left:50%;top:50%;
  translate:-50% -50%;width:auto;height:88%;object-fit:contain;
  border-radius:13.23% / 6.1%}
.shotgal--portrait .shotgal__thumb img{aspect-ratio:9/16}
@media (max-width:719px){
  .shotgal--portrait .shotgal__thumbs > li{flex:0 0 62px}
}

/* lightbox */
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:clamp(12px,4vw,48px);background:rgba(5,6,7,.93);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  /* The scrim is near-black in both themes, so the lightbox keeps the dark
     palette for its own controls. Inheriting light-theme text would put
     near-black labels on a near-black background. */
  --tx-primary:#F5F8F8; --tx-secondary:#C2CBCC; --tx-muted:#7F9195;
  --tx-inverse:#0A0B0D; --bd-strong:#2C3237;
  --bd-hair:rgba(255,255,255,.08); --bd-hair-hi:rgba(255,255,255,.18);
  --bg-surface:#14171A; --bg-surface-2:#1A1E22;
  --gold:#E8A33D; --gold-hover:#F5B85C}
.lightbox__inner{width:min(1180px,100%);display:flex;flex-direction:column;gap:var(--s12)}
.lightbox img{width:100%;height:auto;border-radius:var(--r12);border:1px solid var(--bd-hair);
  background:var(--bg-surface)}
.lightbox__bar{display:flex;align-items:center;gap:var(--s12);flex-wrap:wrap;
  color:var(--tx-secondary)}
.lightbox__bar .shotgal__step{margin-left:0}
.lightbox__nav{display:flex;gap:var(--s8)}
.lightbox__close{margin-left:auto}
@media (prefers-reduced-motion:reduce){.shotgal__frame img{transition:none}}

/* --- partners ------------------------------------------------------------ */
.partner{display:flex;flex-direction:column;gap:var(--s16);height:100%;
  border-color:rgba(232,163,61,.32);
  background:linear-gradient(180deg,var(--gold-dim) 0%,var(--bg-surface) 42%)}
.partner__head{display:flex;align-items:center;gap:var(--s12)}
.partner__head .h4{margin:0}
.partner__link{display:flex;align-items:center;gap:var(--s12);text-decoration:none;color:inherit}
.partner__link:hover .h4{color:var(--gold)}
.partner__link:hover .partner__mark--logo{border-color:rgba(232,163,61,.5)}
.partner__mark{flex:none;width:52px;height:52px;border-radius:var(--r12);
  display:grid;place-items:center;background:var(--bg-surface);
  border:1px solid rgba(232,163,61,.42);color:var(--gold);
  font-family:var(--f-mono);font-size:.9375rem;font-weight:600;letter-spacing:.06em;
  overflow:hidden}
/* A logo sits in a neutral chip rather than the gold ring, so brand colour is not
   fighting the accent. The chip stays light in both themes: CodesClue publish their
   mark in black only, and it would disappear on the dark theme otherwise. */
.partner__mark img{width:100%;height:100%;object-fit:contain;padding:9px;display:block}
.partner__mark--logo{background:#FFFFFF;border-color:rgba(16,22,26,.12);color:inherit}
/* artwork that already has its own tile fills the chip edge to edge */
.partner__mark--flush img{padding:0}
.partner__mark--flush{background:transparent;border-color:transparent}
.partner__role{margin-bottom:2px}
.partner__list{margin-top:auto;padding-top:var(--s16);
  border-top:1px solid var(--bd-hair)}