/* Archivo 600 (expanded): the Figo wordmark (FigoWord, 30-design-update.css). The three files are the variable
   font, so weight 600 needs no new file — the 800 and 900 faces below point at the same ones. */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 125%;
  font-display: swap;
  src: url("/mockup/assets/fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 125%;
  font-display: swap;
  src: url("/mockup/assets/fonts/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 125%;
  font-display: swap;
  src: url("/mockup/assets/fonts/archivo-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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 125%;
  font-display: swap;
  src: url("/mockup/assets/fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 125%;
  font-display: swap;
  src: url("/mockup/assets/fonts/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 125%;
  font-display: swap;
  src: url("/mockup/assets/fonts/archivo-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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 125%;
  font-display: swap;
  src: url("/mockup/assets/fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 125%;
  font-display: swap;
  src: url("/mockup/assets/fonts/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 125%;
  font-display: swap;
  src: url("/mockup/assets/fonts/archivo-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;
}
/* Inter Tight 300–600 (variable, one file per subset): the Pulse / Terminal board on the device screen
   (device-ui/styles/13-pulse-board.css) */
/* vietnamese */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/mockup/assets/fonts/inter-tight-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/mockup/assets/fonts/inter-tight-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/mockup/assets/fonts/inter-tight-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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/mockup/assets/fonts/dm-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/mockup/assets/fonts/dm-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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/mockup/assets/fonts/dm-mono-latin-ext-2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/mockup/assets/fonts/dm-mono-latin-2.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/mockup/assets/fonts/manrope-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;
}
/* Cookie consent (sections/CookieConsent.tsx): the card in the corner and the preferences dialog, in the page's own
   look (the light theme's colours, Archivo titles, DM Mono buttons, the Try it switch). Its own colours, so it reads
   the same on the landing (light or gone dark) and on /track, which imports this file too. No live blur */
.cc-ck,.cc-dlg{--c-bg:#F4F4F2;--c-fg:#202020;--c-mut:rgba(32,32,32,.74);--c-dim:rgba(32,32,32,.56);--c-ln:rgba(32,32,32,.14);--c-bd:rgba(32,32,32,.3);--c-ac:var(--accent,#95BF47);--c-act:color-mix(in srgb,var(--c-ac) 64%,#000);color:var(--c-fg);font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;text-transform:none;letter-spacing:0}
.cc-ck{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;gap:16px;align-items:flex-start;width:min(452px,calc(100vw - 32px));padding:20px 20px 18px;border-radius:22px;background:var(--c-bg);box-shadow:0 24px 64px -18px rgba(0,0,0,.38),0 0 0 1px var(--c-ln);animation:cc-in .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes cc-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cc-ic{flex:none;display:block;padding-top:2px}
.cc-ic .fgm{display:block;height:30px;width:52px;transform:none}
.cc-tx{min-width:0}
.cc-t{margin:0;font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:800;font-size:17px;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;color:var(--c-fg)}
.cc-p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--c-mut)}
.cc-p a{color:var(--c-act);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.cc-b{appearance:none;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border:1px solid transparent;border-radius:999px;background:none;color:var(--c-fg);font:500 12px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.cc-go{background:var(--c-fg);color:var(--c-bg)}
.cc-no{border-color:var(--c-bd)}
.cc-lk{padding:0 10px;color:var(--c-mut);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .25s ease,color .25s ease}
@media (hover:hover) and (pointer:fine){
  .cc-go:hover{background:var(--c-ac);color:#0C0D0F}
  .cc-no:hover{border-color:var(--c-fg)}
  .cc-lk:hover{color:var(--c-fg);text-decoration-color:var(--c-ac)}
  .cc-x:hover{border-color:var(--c-fg)}
}
.cc-b:focus-visible,.cc-x:focus-visible,.cc-p a:focus-visible{outline:2px solid var(--c-ac);outline-offset:2px}

dialog.cc-dlg{width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);margin:auto;padding:0;border:0;border-radius:22px;background:var(--c-bg);box-shadow:0 30px 80px rgba(0,0,0,.3),0 0 0 1px var(--c-ln);overflow:auto;overscroll-behavior:contain}
dialog.cc-dlg::backdrop{background:rgba(10,12,14,.38)}
dialog.cc-dlg[open]{animation:cc-up .45s cubic-bezier(.2,.8,.2,1)}
@keyframes cc-up{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.cc-dh{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 22px 18px 26px;border-bottom:1px solid var(--c-ln)}
.cc-dh .cc-t{font-size:22px}
.cc-x{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--c-ln);border-radius:50%;background:none;color:var(--c-fg);cursor:pointer;transition:border-color .25s ease}
.cc-db{padding:20px 26px 4px}
.cc-db > .cc-p{margin:0 0 6px}
/* .cc-dlg before the row and the switch's input: the host page's form styles (/track and /cookies: .tk label,
   .tk input) stay out of them */
.cc-dlg .cc-row{position:relative;display:flex;gap:16px;align-items:flex-start;margin:0;padding:16px 0;border-top:1px solid var(--c-ln);font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.cc-dlg label.cc-row{cursor:pointer}
.cc-rt{margin:0;font-weight:600;font-size:15px;line-height:1.3;color:var(--c-fg)}
.cc-al{margin-left:8px;font:500 10px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--c-dim)}
.cc-rd{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--c-mut)}
.cc-sw{flex:none;position:relative;width:40px;height:24px;margin-top:1px;border-radius:99px;background:color-mix(in srgb,var(--c-fg) 16%,transparent);transition:background-color .25s ease}
.cc-sw::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cc-sw.on{background:var(--c-ac)}
.cc-sw.on::after{transform:translateX(16px)}
.cc-sw.dis{opacity:.5}
.cc-dlg .cc-in{position:absolute;left:0;top:16px;display:block;width:40px;height:24px;margin:0;padding:0;border:0;border-radius:99px;background:none;opacity:0;cursor:pointer}
.cc-in:focus-visible + .cc-sw{outline:2px solid var(--c-ac);outline-offset:2px}
.cc-df{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 22px 22px;border-top:1px solid var(--c-ln)}
.cc-df .cc-b{flex:1 1 0;min-width:0;padding:0 14px}
.cc-df .cc-lk{flex:0 1 auto}
@media (prefers-reduced-motion:reduce){.cc-ck,dialog.cc-dlg[open]{animation:none}.cc-sw,.cc-sw::after{transition:none}}
@media (max-width:560px){
  /* the title beside the mark, the text and the three buttons the card's full width (one row) */
  .cc-ck{left:12px;right:12px;bottom:12px;width:auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;padding:16px 16px 14px}
  .cc-tx{display:contents}
  .cc-ic{padding-top:0}
  .cc-ic .fgm{height:24px;width:42px}
  .cc-p,.cc-acts{grid-column:1 / -1}
  .cc-acts .cc-go,.cc-acts .cc-no{flex:1 1 0;padding:0 12px}
  .cc-acts .cc-lk{padding:0 6px}
  .cc-dh{padding:18px 16px 14px 20px}
  .cc-dh .cc-t{font-size:19px}
  .cc-db{padding:16px 20px 4px}
  .cc-df{flex-wrap:wrap;padding:14px 16px 18px}
  .cc-df .cc-go{order:-1;flex:1 1 100%}
}

/* the footer's links: the cookie policy and the cookie settings */
.cc-fl{display:inline-flex;align-items:center;gap:14px}
.cc-fl a,.cc-fl button{appearance:none;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .25s ease,text-decoration-color .25s ease}
@media (hover:hover) and (pointer:fine){.cc-fl a:hover,.cc-fl button:hover{text-decoration-color:currentColor}}
.cc-fl a:focus-visible,.cc-fl button:focus-visible{outline:2px solid var(--accent,#95BF47);outline-offset:2px}
/* The page around the story: base, the Figo logo, the header with its menu, the round buttons and the footer. Copies
   of the landing's rules (landing/styles: the logo in 30-design-update.css, .nb/.pre/.menu in 06-header-ask.css and
   26-mobile.css, the buttons in 32-design-1029.css, the footer in 12-preorder.css, 17-preorder-stage.css and
   30-design-update.css), with each property at the value the design's story page gives it: its header is clear over
   the page, light on dark and dark on light, its footer the landing's gone dark (--fd 1). Change them with the landing. */

/* the hero and the footer are dark: so is the page past either end (overscroll) */
html,body{margin:0;background:#0B0C0E}
/* the page is dark like its two ends; the story's own background is light. --sty-hd: the header's height, the room
   the hero, its Back button and the pinned rail's heading leave for it (fx.ts measures it; this is its value before) */
.sty-pg{display:flex;flex-direction:column;min-height:100vh;background:#0B0C0E;color:#202020;font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;--accent:#95BF47;--sty-hd:90px}
/* as the design's global rules: they lose to any class */
:where(.sty-pg) *{box-sizing:border-box}
:where(.sty-pg) a{color:inherit;text-decoration:none}
.sty-pg :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* the Figo mark and wordmark (landing/sections/FigoMark.tsx); the eyes are alive (landing/figoEyes.js) */
.fgw,.fgk{display:inline-flex;align-items:center;gap:.42em;font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:600;font-size:.84em;letter-spacing:.04em;text-transform:uppercase}
.fgw{line-height:1}
.fgw .fgt,.fgk .fgt{white-space:nowrap}
.fgm{flex:none;height:.7em;width:1.52em;overflow:visible;transform:translateY(-.01em)}
.fgw .fgm,.fgk .fgm{height:1.62em;width:2.78em;transform:none}
.fgm .fgf{fill:color-mix(in srgb,currentColor 12%,#1B1D1F);stroke:color-mix(in srgb,currentColor 26%,transparent);stroke-width:.6}
.fgm .fgs{fill:#8E9196}
.fgm .fgf,.fgm .fgs{transition:fill .35s ease}
.fgm .fgeye{scale:1.12;transform-box:fill-box;transform-origin:50% 100%;transition:transform .11s ease,scale .3s cubic-bezier(.3,1.6,.5,1);will-change:translate}
.fgm .fgo,.fgm .fgh{fill:#95BF47;transition:opacity .14s ease}
.fgm .fgo{transform-box:fill-box;transform-origin:50% 50%}
.fgm .fgh{opacity:0}
.fgm.blink .fgeye{transform:scaleY(.08)}
.fgm.happy .fgo{opacity:0}
.fgm.happy .fgh{opacity:1}
.fgm.wow .fgeye{scale:1.16}
.fgm.sleep .fgeye{transform:scaleY(.28);transition:transform 1.4s ease}
.fgm.sleep.blink .fgeye{transform:scaleY(.06)}
.fgd{font-style:normal;color:#95BF47;margin-left:.02em}

/* header: the logo, the Pre-order pill and the menu button. Pinned at the top like the home page's (design 30 Oct):
   clear, no rule, and taking no room (the page starts under it, the hero padded by --sty-hd). Light over the dark
   parts of the page, dark (.sty-lt, fx.ts startHeader) over its light background */
.trk-hd{position:sticky;top:0;z-index:80;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:calc(-1 * var(--sty-hd));padding:22px 32px;color:#F2F2EE;--fg:#F2F2EE;--ln:rgba(242,242,238,.14);--dim:rgba(242,242,238,.55)}
.trk-logo{display:inline-flex;align-items:center;min-height:44px;color:#F2F2EE;transition:color .3s}
.trk-logo .fgw{font-size:18px}
.navw{position:relative;display:flex;align-items:center;gap:8px}
.navw .pre{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;background:#F2F2EE;color:#0B0C0E;font:600 14px/normal 'DM Mono',ui-monospace,monospace;text-transform:uppercase;transition:background-color .3s,color .3s}
.nb{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;padding:0;border:1px solid transparent;border-radius:999px;background:none;color:#F2F2EE;font:inherit;cursor:pointer;transition:color .3s}
.nb .hb{width:22px;height:14px}
.hb path{transition:transform .35s cubic-bezier(.2,.8,.1,1),opacity .2s;transform-box:fill-box;transform-origin:center}
.hb path.hb-s{stroke-dasharray:10 40;transition:transform .35s cubic-bezier(.2,.8,.1,1),stroke-dasharray .35s cubic-bezier(.2,.8,.1,1)}
.nb.open .hb path:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nb.open .hb path:nth-child(2){transform:translateY(-4px) rotate(-45deg);stroke-dasharray:18 40}
.nb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
.navw .pre:hover{background:#95BF47;color:#fff}
.nb:hover{opacity:.7}
}
/* over the light background: dark, the pill turned round (as the design's, over its hover too). The open menu keeps
   its dark colours, its pill and --fg (its items) with them */
.trk-hd.sty-lt .trk-logo,.trk-hd.sty-lt .nb{color:#202020}
.trk-hd.sty-lt .navw>.pre{background:#202020;color:#F4F4F2}
/* phones: the pill is in the menu only */
@media (max-width:820px){.navw>.pre{display:none}}
/* under 820px the header is 74px tall */
@media (max-width:819px){.sty-pg{--sty-hd:74px}.trk-hd{padding:14px 16px}}

/* the menu: the landing's (its header menu gone dark), with this site's routes. Numbered by CSS so phones, which
   leave Specs out as the landing's menu does, count on without it */
.menu{position:absolute;right:0;top:58px;z-index:2;width:min(320px,calc(100vw - 32px));padding:14px;border-radius:22px;background:#0E0F12;border:1px solid var(--ln);box-shadow:0 24px 64px -18px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px;counter-reset:mi;animation:sy-menu .45s cubic-bezier(.2,.8,.1,1) both}
@keyframes sy-menu{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.mi{display:flex;align-items:baseline;gap:14px;min-height:48px;padding:6px 10px;border-radius:12px;color:var(--fg);font-size:24px;font-weight:400;letter-spacing:-.02em;counter-increment:mi}
.mi::before{content:counter(mi,decimal-leading-zero);font:400 12px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.06em;color:var(--dim)}
.mi.cur{color:#95BF47}
.mi-try{align-items:center}
.mi i{display:grid;place-items:center;flex:none;width:28px;height:28px;margin-left:auto;border-radius:50%;background:#95BF47;color:#fff}
.menu .pre{justify-content:center;margin-top:14px;min-height:52px}
@media (hover:hover) and (pointer:fine){.mi:hover{background:rgba(242,242,238,.07);color:#95BF47}}
@media (max-width:819px){.mi-sp{display:none}}
@media (prefers-reduced-motion:reduce){.menu{animation:none}}

/* the round buttons (32-design-1029.css), dark on the light page; the design's own Pre-order rule outranks its hover,
   so that one only lifts */
.hc-pre{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:99px;background:#202020;color:#F4F4F2;font:600 15px/1 'Manrope',ui-sans-serif,system-ui,sans-serif;transition:background-color .25s,transform .25s}
.hc-try{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 8px;border-radius:99px;border:1px solid currentColor;background:transparent;color:#202020;font:600 15px/1 'Manrope',ui-sans-serif,system-ui,sans-serif}
.hc-try b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#95BF47;color:#fff}
@media (hover:hover) and (pointer:fine){.hc-pre:hover{transform:translateY(-1px)}}
@media (max-width:820px){.hc-pre,.hc-try{height:44px;font-size:14px}}

/* footer: the landing's, as it ends the page gone dark — the wordmark, the line of links, Track your order */
.sy-foot{--bg:#0B0C0E;--fg:#F2F2EE;--dim:rgba(242,242,238,.55);--gb:rgba(242,242,238,.16);flex:none;padding:0 40px;background:#0B0C0E;color:#F2F2EE}
.sy-foot .p-ft{display:flex;flex-direction:column;align-items:stretch;gap:26px;max-width:1280px;margin:0 auto;padding:72px 0 40px}
.sy-foot .p-ft a{min-height:44px;display:inline-flex;align-items:center;transition:color .3s}
.sy-foot .p-ft .p-wm{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;color:var(--fg);font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(40px,6.4vw,96px);letter-spacing:-.06em;line-height:.85;text-transform:uppercase;transition:color .4s}
.p-wm .fgk{gap:.3em;font-size:1em}
.p-wm .fgk .fgm{height:.9em;width:1.55em}
.p-go{flex:none;width:72px;height:72px;border-radius:50%;border:1px solid var(--gb);display:flex;align-items:center;justify-content:center;transition:background-color .4s,border-color .4s,color .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.p-go svg{width:22px;height:22px}
.p-fb{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;color:var(--dim);font-family:'DM Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.p-fl{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
.p-fl .p-cp{white-space:nowrap}
.cc-fl{flex-wrap:wrap;row-gap:4px}
.p-fl .cc-fl a,.p-fl .cc-fl button{min-height:44px;display:inline-flex;align-items:center}
.sy-foot .p-fb .p-trk-cta{gap:10px;padding:0 20px;border:1px solid var(--fg);border-radius:99px;background:var(--fg);color:var(--bg);transition:background-color .3s,color .3s,border-color .3s}
@media (hover:hover) and (pointer:fine){
.sy-foot .p-ft .p-wm:hover{color:var(--accent)}
.sy-foot .p-ft .p-wm:hover .p-go{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(-90deg)}
.sy-foot .cc-fl a:hover{color:var(--accent)}
.sy-foot .p-fb .p-trk-cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
}
@media (max-width:960px){.sy-foot{padding:0 16px}}
/* narrow phones: the copyright line (364px on one line) wraps, and under 360px the wordmark's arrow is smaller, so
   the page doesn't scroll sideways */
@media (max-width:420px){.p-fl .p-cp{white-space:normal}}
@media (max-width:359px){.sy-foot .p-ft .p-wm{gap:14px}.sy-foot .p-ft .p-wm .p-go{width:48px;height:48px}}
/* Our story (design 29 Oct, artifact "Commerce Companion — Pre-order": the story page, its v4 "sy4"). The design
   layers several versions of these rules with !important; here each property has the value the design's last rule
   gives it. Where this page differs: it is a page of its own (no overlay), the hero enters with CSS animations from
   the first paint (no script needed), the sections below reveal once the page's script runs (.sty.rv, fx.ts), the
   timeline is pinned on desktop (a swipe row on phones, as in the design), its progress bar is a transform, and photos not there yet
   leave a plain block (img[data-miss], app/story/missing.ts). The design's evening update (29 Oct): a lighter grid,
   a calmer founder block, app cards in each app's colours, a plainer Figo card, a header that stays pinned; then
   (30 Oct) that header clear over the page, the hero and the pinned rail the full window under it; (30 Oct, evening)
   the story told from the merchant's side: a new hero line, the rail first and light, a closing of moments and an
   offer panel instead of "Meet Figo". */

.sty{display:flex;flex-direction:column;align-items:stretch;background:#F4F4F2;gap:clamp(96px,13vh,160px);padding:0 0 clamp(80px,12vh,140px);--sl:rgba(32,32,32,.07);--sx:rgba(32,32,32,.26)}
.sty>section{width:100%}
/* the design hides its section labels in this version */
.sty-k,.sy-lb{display:none}
.sty-h1,.sty-h2{margin:0;font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;text-wrap:balance}
.sty-h1{font-size:clamp(40px,6.4vw,96px);line-height:.92;letter-spacing:-.045em}
.sty-h2{font-size:clamp(28px,3.4vw,48px);line-height:.98;letter-spacing:-.035em}
.sy-p,.sy-sub{margin:0;max-width:48ch;font:400 15px/1.6 'DM Mono',ui-monospace,monospace;letter-spacing:-.01em;color:rgba(32,32,32,.74)}
/* a section's heading */
.sy-hd{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 auto clamp(40px,6vh,64px);padding:0 24px;text-align:center}
.sy-hd .sty-h2{margin:0 auto;font-size:clamp(30px,4.1vw,60px);line-height:.92;text-wrap:wrap}
.sy-hd .sy-p{margin:4px auto 0;max-width:56ch}
@media (max-width:820px){.sy-hd .sty-h2 br{display:none}}

/* the hairline grid the sections sit on: rows with a top rule, cells with a left rule, a cross where lines meet */
.sy4-w{position:relative;width:min(100% - 56px,1384px);margin:0 auto}
.sy4-row{position:relative;display:grid;grid-template-columns:var(--cols,repeat(3,minmax(0,1fr)));border-top:1px solid var(--sl)}
.sy4-row>.sy4-c+.sy4-c{border-left:1px solid var(--sl)}
.sy4-x{position:absolute;top:0;z-index:2;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;pointer-events:none;background:linear-gradient(var(--sx),var(--sx)) 50% 0/1px 100% no-repeat,linear-gradient(var(--sx),var(--sx)) 0 50%/100% 1px no-repeat}
.sy4-end{height:0}
.sy4-c{min-width:0}
@media (max-width:820px){
.sy4-row{grid-template-columns:minmax(0,1fr)}
.sy4-row>.sy4-c+.sy4-c{border-left:0;border-top:1px solid var(--sl)}
.sy4-x:not(.e){display:none}
}

/* ── hero: dark, the full window with the header over its top (--sty-hd: the room left for it), a pixel planet
   rising from below (globe.ts), the numbers on a band across its foot ── */
.sy-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding-top:var(--sty-hd);color:#F3F2EE;background:radial-gradient(50% 45% at 50% 100%,rgba(149,191,71,.12),transparent 70%),#0B0C0E}
.sy4-hgrid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(243,242,238,.05) 1px,transparent 1px) 0 0/100% 120px,linear-gradient(90deg,rgba(243,242,238,.05) 1px,transparent 1px) 50% 0/120px 100%;-webkit-mask:radial-gradient(70% 70% at 50% 40%,#000,transparent);mask:radial-gradient(70% 70% at 50% 40%,#000,transparent);opacity:.5}
/* Back: just under the header */
.sy-back{position:absolute;left:clamp(16px,2.2vw,32px);top:calc(var(--sty-hd) + 8px);z-index:3;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(243,242,238,.22);background:rgba(243,242,238,.06);color:#F3F2EE;font:500 12px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,border-color .25s}
.sy-back svg{transition:transform .25s}
.sty .sy-back:focus-visible{outline:2px solid #B9E36A;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.sy-back:hover{background:rgba(243,242,238,.14);border-color:rgba(243,242,238,.4)}.sy-back:hover svg{transform:translateX(-3px)}}
.sy-hero-t{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:min(1440px,94vw);padding:clamp(56px,9vh,104px) 24px 0;text-align:center;container-type:inline-size}
/* each line whole, the size kept under the column's width ("650,000 Shopify stores." is 16.4em: 6.1cqi; the design's
   6.6 let it run past the column on wide, tall windows) */
.sy-h1{color:#F3F2EE;font-size:clamp(36px,min(5.2vw,10vh),92px);font-size:min(clamp(36px,min(5.2vw,10vh),92px),6.1cqi);line-height:.9}
.sy-h1 .sy-l{display:block;white-space:nowrap}
.sy-h1 em{font-style:normal;color:#B9E36A}
.sy-hero .sy-sub{max-width:60ch;font-size:17px;line-height:1.6;color:rgba(243,242,238,.68)}
/* a sentence a line where they fit (the design from 821px: the first is ~850px wide, cut off by the hero under 1000) */
@media (min-width:1000px){.sy-hero .sy-sub{max-width:none}.sy-hero .sy-sub>span{display:block;white-space:nowrap}}
.sy-glw{position:absolute;inset:0;z-index:1;pointer-events:none}
.sy-globe{display:block;width:100%;height:100%}
.sy-stats{position:relative;z-index:2;margin-top:auto}
/* the band's crosses and its phone rows as light as the page's grid; the lines between its numbers stay as they were */
.sy-stats .sy4-row{--sl:rgba(243,242,238,.07);--sx:rgba(243,242,238,.26);border-top-color:rgba(243,242,238,.1);background:linear-gradient(180deg,rgba(11,12,14,.35),rgba(11,12,14,.82) 70%);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sy-stats .sy4-row>.sy4-c+.sy4-c{border-left-color:rgba(243,242,238,.14)}
.sy-stats .sy4-c{display:flex;flex-direction:column;gap:10px;padding:26px clamp(16px,2vw,28px) 30px}
.sy-stats b{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(28px,3.4vw,54px);line-height:.9;letter-spacing:-.04em;color:#F3F2EE;white-space:nowrap;font-variant-numeric:tabular-nums}
.sy-stats small{display:flex;align-items:center;font:500 12px/1.2 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,242,238,.55)}
/* the entrance: the design's transitions (started 0.2 s after it opens) as animations from the first paint */
@keyframes sy-fade{from{opacity:0;filter:blur(6px)}}
@keyframes sy-show{from{opacity:0}}
@keyframes sy-up36{from{transform:translateY(36px)}}
@keyframes sy-up24{from{transform:translateY(24px)}}
@keyframes sy-up60{from{transform:translateY(60px)}}
.sy-hero-t>*{animation:sy-fade 1.6s ease .4s both,sy-up36 1.8s cubic-bezier(.16,.8,.2,1) .4s both}
.sy-hero-t>:nth-child(2){animation-delay:.65s}
.sy-hero-t>:nth-child(3){animation-delay:.95s}
.sy-glw{animation:sy-show 1.8s ease .4s both,sy-up60 2.6s cubic-bezier(.16,.8,.2,1) .4s both}
.sy-stats{animation:sy-show 1.4s ease 1.6s both,sy-up24 1.6s cubic-bezier(.16,.8,.2,1) 1.6s both}
@media (max-width:820px){
.sy-hero{min-height:auto}
.sy-hero-t{padding-bottom:40px}
.sy-h1{font-size:clamp(34px,10vw,52px)}
.sy-h1 .sy-l{white-space:normal}
.sy-stats .sy4-row{grid-template-columns:repeat(2,minmax(0,1fr));-webkit-backdrop-filter:none;backdrop-filter:none}
.sy-stats .sy4-row>.sy4-c{border-left:0;border-top:0;padding:20px 16px 22px}
.sy-stats .sy4-row>.sy4-c:nth-of-type(2n){border-left:1px solid rgba(243,242,238,.14)}
.sy-stats .sy4-row>.sy4-c:nth-of-type(n+3){border-top:1px solid var(--sl)}
.sy-stats b{font-size:26px}
/* no blur in the entrance on phones: a filter animated on large text redraws it every frame */
.sy-hero-t>*{animation-name:sy-show,sy-up36}
}

/* the sections after the rail: an even room above each, and under the proof's and the closing's headings */
.sy4-fn,.sy4-rec,.sy4-ppl,.sy5-end{padding-top:clamp(64px,9vh,110px)}
.sy4-rec .sy-hd,.sy5-end .sy-hd{margin-bottom:72px}
@media (max-width:820px){.sy4-fn,.sy4-rec,.sy4-ppl,.sy5-end{padding-top:40px}.sy4-rec .sy-hd,.sy5-end .sy-hd{margin-bottom:48px}}

/* ── 02 where it started: the founder's photo and quote, three facts ── */
.sy4-fn .sy-hd{margin-bottom:clamp(56px,8vh,104px)}
.sy4-fn-ph{margin:0;padding:24px;display:flex;flex-direction:column;gap:12px}
.sy4-im{position:relative;overflow:hidden;aspect-ratio:1;background:#d9d7d2}
.sy4-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sy4-chip{position:absolute;right:0;top:0;padding:4px 7px 3px;background:#95BF47;color:#141414;font:500 11px/1.2 'DM Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.sy4-fn-ph figcaption{display:flex;justify-content:space-between;gap:8px 20px;font:500 13px/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;color:#202020}
.sy4-fn-q{position:relative;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(32px,5vw,72px) clamp(24px,4vw,64px)}
.sy4-qm{display:block;height:.5em;margin:0 0 4px -4px;font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(56px,5vw,80px);line-height:.8;color:#95BF47}
.sy4-lead{margin:0;max-width:34ch;font:600 clamp(19px,1.75vw,26px)/1.38 'Manrope',ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em;color:#202020}
.sy4-fn-q .sy-p{max-width:none}
.sy4-sig{display:flex;align-items:center;gap:20px;min-height:74px;padding-top:20px;border-top:1px solid var(--sl)}
.sy4-sig img{height:54px;width:auto}
.sy4-sig div{display:flex;flex-direction:column;gap:6px}
.sy4-sig b{font:700 15px/1.2 'Manrope',ui-sans-serif,system-ui,sans-serif;color:#202020}
.sy4-sig span{font:500 11px/1.2 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(32,32,32,.6)}
.sy4-fact{display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 28px 36px;text-align:center}
.sy4-fact b{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(48px,5.6vw,88px);line-height:.86;letter-spacing:-.04em;color:#202020}
.sy4-fact b em{font-style:normal;color:#5E8E1F}
.sy4-fact small,.sy4-aw small,.sy4-off small{font:500 12px/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(32,32,32,.6)}
.sy4-fact small{line-height:1.5}
@media (max-width:820px){
.sy4-fn-q{padding:28px 20px}
}

/* ── 03 the proof: six awards, the platforms ── */
.sy4-aw{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 24px 30px;transition:background-color .3s}
.sy4-aw-im{display:block;height:76px;margin-bottom:10px}
.sy4-aw-im img{display:block;height:100%;width:auto;max-width:140px;object-fit:contain}
.sy4-aw b{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(17px,1.5vw,22px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;color:#202020}
@media (hover:hover) and (pointer:fine){.sy4-aw:hover{background:rgba(32,32,32,.03)}}
.sy-pt{width:min(100% - 56px,1384px);margin:22px auto 0;font:600 15px/1.6 'Manrope',ui-sans-serif,system-ui,sans-serif;color:#202020;text-align:center}
.sy-pt span{margin-right:12px;font:500 11px/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(32,32,32,.58)}
/* phones: two columns, the rows flattened into one grid (l: the awards in the left column) */
@media (max-width:820px){
.sy4-rec .sy4-w{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--sl)}
.sy4-rec .sy4-row{display:contents}
.sy4-rec .sy4-x{display:none}
.sy4-rec .sy4-row>.sy4-aw{border:0;border-bottom:1px solid var(--sl);padding:20px 16px 22px}
.sy4-rec .sy4-row>.sy4-aw.l{border-right:1px solid var(--sl)}
.sy4-aw-im{height:56px}
.sy4-aw b{font-size:15px}
}

/* ── 01 what we built: the milestones on a rail that the page's scroll moves sideways while it is pinned (fx.ts
   startRail), right after the hero, on the page's light ground with its grid (design 30 Oct, evening; the cards stay
   dark). Its height leaves the rail 1.9 px of scroll per px it travels: 6.5 cards, half the last, the 7 gaps; fx.ts
   sets the measured one. The pinned box fills the window, the header over its top ── */
.sy-hz{position:relative;width:100%;background:#F4F4F2;--cw:clamp(300px,27vw,380px);--cw2:clamp(380px,36vw,520px);height:calc(100vh + 1.9 * (6.5 * var(--cw) + .5 * var(--cw2) + 112px))}
.sy-hz-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.sy-hz-pin::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(32,32,32,.06) 1px,transparent 1px) 0 0/100% 120px,linear-gradient(90deg,rgba(32,32,32,.06) 1px,transparent 1px) 50% 0/120px 100%,#F4F4F2}
.sy-hz-pin>*{position:relative;z-index:1}
.sy-hz-hd{display:flex;flex-direction:column;align-items:center;gap:18px;padding:clamp(48px,8vh,84px) 24px 0;text-align:center}
.sy-hz-hd .sty-h2{color:#202020;font-size:clamp(30px,4.1vw,60px);line-height:.92}
.sy-hz-hd .sy4-intro{max-width:min(100%,1060px);margin:4px auto 0;font-size:15px;line-height:1.65;color:rgba(32,32,32,.72);text-align:center;text-wrap:balance}
@media (max-width:820px){.sy-hz-hd .sy4-intro{font-size:14px;padding:0 4px}}
.sy-hz-yr{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:clamp(10px,1.4vw,22px);font:500 12px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.08em}
.sy-hz-yr li{color:rgba(32,32,32,.32);transition:color .4s}
.sy-hz-yr li.past{color:rgba(32,32,32,.6)}
.sy-hz-yr li.on{color:#5E8E1F}
.sy-hz-yr b{font-weight:500}
.sy-hz-vp{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center}
.sy-hz-tr{display:flex;gap:16px;padding:0 calc(50vw - var(--cw2) / 2) 0 calc(50vw - var(--cw) / 2);will-change:transform}
.sy-hc{position:relative;flex:none;width:var(--cw);height:min(52vh,460px);display:flex;flex-direction:column;padding:26px;background:#16181B;border:1px solid rgba(243,242,238,.1);color:#F3F2EE;overflow:hidden;transition:border-color .4s,transform .5s cubic-bezier(.2,.7,.2,1),background-color .4s}
.sy-hc.on{border-color:rgba(185,227,106,.5);transform:translateY(-6px)}
.sy-hc-y{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(56px,6vw,92px);line-height:.82;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(243,242,238,.35);transition:color .5s,-webkit-text-stroke-color .5s}
.sy-hc.on .sy-hc-y{color:#F3F2EE;-webkit-text-stroke-color:transparent}
/* pinned (desktop): the heading starts just under the header, sized to the window's height too so the cards fit */
@media (min-width:821px){
.sy-hz-hd{gap:12px;padding-top:calc(var(--sty-hd) + 4px)}
.sy-hz-hd .sty-h2{font-size:min(clamp(30px,4.1vw,60px),6.2vh)}
.sy-hz-hd .sy4-intro{margin-top:0;font-size:min(15px,1.9vh)}
.sy-hc{height:min(52vh,460px,calc(100vh - 380px))}
}
.sy-hc-b{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.sy-hc-b h3{margin:0;font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;font-size:22px;letter-spacing:-.02em;text-transform:uppercase}
.sy-hc-b p{margin:0;font:400 15px/1.5 'Manrope',ui-sans-serif,system-ui,sans-serif;color:rgba(243,242,238,.68)}
.sy-hc-m{display:flex;flex-direction:column;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(243,242,238,.12)}
.sy-hc-m b{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(30px,2.8vw,42px);line-height:.9;letter-spacing:-.04em;color:#B9E36A}
.sy-hc-m small{font:500 11px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,242,238,.55)}
.sy-hc-go{position:absolute;top:22px;right:22px;font-style:normal;color:rgba(243,242,238,.4);transition:color .25s,transform .25s}
@media (hover:hover) and (pointer:fine){a.sy-hc:hover{background:#1B1E22}a.sy-hc:hover .sy-hc-go{color:#B9E36A;transform:translate(2px,-2px)}}
/* the photo cards: the founders (2015) and the apps; the photo under a shade, the year over it */
.sy-hc-ph{justify-content:flex-end}
.sy-hc-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .5s}
.sy-hc-ph::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(11,12,14,.2),rgba(11,12,14,.85) 70%)}
.sy-hc-ph>:not(.sy-hc-bg){position:relative;z-index:1}
.sy-hc-ph .sy-hc-y{position:absolute;top:26px;left:26px}
/* the apps (links to their App Store pages): the app's own colours as a full-bleed background, blurred until no shape
   shows, its colour logo in the middle (the name then left to the logo), the line and the figure at the foot. The blur
   is drawn once into the rail's layer: nothing animates under it */
.sy-hc-app .sy-hc-bg{opacity:1;filter:blur(34px) saturate(1.2);transform:scale(1.45)}
.sy-hc-app::after{background:linear-gradient(180deg,rgba(11,12,14,.35) 0%,rgba(11,12,14,0) 30%,rgba(11,12,14,.25) 58%,rgba(11,12,14,.9) 78%)}
.sy-hc-app .sy-hc-lg{position:absolute;left:26px;right:26px;top:43%;z-index:2;display:flex;justify-content:center;transform:translateY(-50%)}
.sy-hc-lg img{display:block;height:clamp(30px,2.7vw,40px);width:auto;max-width:82%;object-fit:contain}
.sy-hc-lg+.sy-hc-b h3{display:none}
.sy-hc-app .sy-hc-b{margin-top:10px}
.sy-hc-app .sy-hc-m{margin-top:14px;padding-top:12px}
.sy-hc-app .sy-hc-go{position:absolute;z-index:2}
/* Figo (2026): a plain green card, the ship date top right, the device rising from the bottom edge (level once lit) */
.sy-hc-fig{width:var(--cw2);background:radial-gradient(90% 70% at 72% 105%,rgba(243,242,238,.38),rgba(243,242,238,0) 62%),#95BF47;border-color:#95BF47}
.sy-hc-fig>*{position:relative;z-index:2}
.sy-hc-fig .sy-hc-y{-webkit-text-stroke-color:rgba(11,12,14,.5)}
.sy-hc-fig.on .sy-hc-y{color:#0B0C0E}
.sy-hc-fig .sy-hc-b{margin-top:14px;max-width:62%}
.sy-hc-fig .sy-hc-b h3{font-size:clamp(40px,3.8vw,60px);line-height:.9;color:#0B0C0E}
.sy-hc-fig .sy-hc-b p{font-size:14px;line-height:1.45;color:rgba(11,12,14,.78)}
.sy-hc-fig .sy-hc-m{position:absolute;top:26px;right:26px;margin:0;padding:0;border:0;align-items:flex-end;text-align:right}
.sy-hc-fig .sy-hc-m b{font-size:clamp(26px,2.3vw,34px);color:#0B0C0E}
.sy-hc-fig .sy-hc-m small{color:rgba(11,12,14,.7)}
.sy-hc-fig .sy-hc-fg{position:absolute;z-index:1;left:13%;bottom:-15%;width:80%;height:auto;filter:drop-shadow(0 28px 34px rgba(11,12,14,.38)) drop-shadow(0 6px 10px rgba(11,12,14,.18));transform:translateY(10px) rotate(-1.5deg);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.sy-hc-fig.on .sy-hc-fg{transform:none}
.sy-hz-bar{width:min(100% - 56px,1384px);height:2px;margin:0 auto clamp(28px,4vh,44px);background:rgba(32,32,32,.12);border-radius:2px;overflow:hidden}
.sy-hz-bar i{display:block;height:100%;background:#95BF47;transform:scaleX(0);transform-origin:0 0}
/* phones (the design's): not pinned, the cards in a row the finger swipes, snapping card by card; no script, no lit
   card. The rail is not moved by a transform here, so it needs no layer of its own; a swipe past either end does not
   turn into the browser's back or forward */
@media (max-width:820px){
.sy-hz{height:auto !important}
.sy-hz-pin{position:relative;height:auto}
.sy-hz-yr,.sy-hz-bar{display:none}
.sy-hz-vp{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.sy-hz-tr{transform:none !important;will-change:auto}
/* (the Figo card no wider than the window: 380px on a 360px phone left its first 20px out of reach) */
.sy-hz{--cw2:min(380px,calc(100vw - 10px))}
.sy-hc{height:400px;scroll-snap-align:start}
.sy-hc-app .sy-hc-lg{top:41%}
.sy-hc-fig .sy-hc-b{max-width:100%}
.sy-hc-fig .sy-hc-fg{left:6%;width:92%;bottom:-20%}
.sy-hc-fig .sy-hc-m b{font-size:24px}
}
/* the Figo card narrower than its 380px (phones under 390px): the ship date's line on two lines, the year smaller with
   the card, and below 345px the date too; the line ran over the year's last figure (375px: 1px, 360px: 17px, 320px: 57px) */
@media (max-width:389px){
.sy-hc-fig .sy-hc-y{font-size:min(56px,calc((var(--cw2) - 52px) * .19))}
.sy-hc-fig .sy-hc-m small{max-width:7.5em;line-height:1.3}
}
@media (max-width:344px){.sy-hc-fig .sy-hc-m b{font-size:22px}}

/* ── 04 the people: the team photo, the three offices ── */
.sy4-ppl{display:flex;flex-direction:column;gap:clamp(40px,6vh,64px)}
.sy4-ppl-f{position:relative;margin:0;height:min(78vh,760px);overflow:hidden;background:#d9d7d2}
.sy4-ppl-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sy4-ppl-f figcaption{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:center;gap:18px;padding:clamp(32px,6vh,72px) 24px;text-align:center;background:linear-gradient(180deg,transparent,rgba(11,12,14,.85))}
.sy4-ppl-f .sty-h2{color:#F3F2EE;font-size:clamp(34px,4.6vw,72px);line-height:.92}
.sy4-off{display:flex;flex-direction:column;gap:10px;padding:26px 24px 30px}
.sy4-off b{margin-top:8px;font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;font-size:24px;letter-spacing:-.02em;text-transform:uppercase;color:#202020}
.sy4-off p{margin:0;font:400 14px/1.55 'DM Mono',ui-monospace,monospace;color:rgba(32,32,32,.7)}
@media (max-width:820px){.sy4-ppl-f{height:64vh}}

/* ── the closing: the moments Figo is there for (three photos on the grid), then the offer ── */
.sy5-end{display:flex;flex-direction:column;align-items:stretch}
.sy5-end .sty-h2 em{font-style:normal;color:#5E8E1F}
.sy5-end .sy-hd .sy5-p{margin:0 auto;max-width:min(100%,760px);font:400 15px/1.7 'DM Mono',ui-monospace,monospace;letter-spacing:-.01em;color:rgba(32,32,32,.68);text-align:center;text-wrap:balance}
.sy5-mo{margin:0;display:flex;flex-direction:column;gap:16px;padding:clamp(18px,1.8vw,26px)}
.sy5-im{aspect-ratio:4/3;overflow:hidden;background:#E7E6E2}
.sy5-im img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.sy5-mo:hover .sy5-im img{transform:scale(1.03)}}
.sy5-mo figcaption{font:500 11px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(32,32,32,.6)}
@media (max-width:820px){.sy5-mo{padding:16px 0}}
.sty-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* the offer: a dark panel inset from the window's edges (bookending the dark hero); the device on the right opens Try
   it, a label under it on hover. It sits close under the moments (the page's gap taken back) */
.sy5-final{margin-top:calc(-1 * clamp(96px,13vh,160px));padding-top:clamp(56px,8vh,80px)}
.sy5-cv{position:relative;overflow:hidden;margin:0 clamp(16px,2vw,28px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(32px,3.6vw,52px) clamp(24px,3.6vw,56px);color:#F3F2EE;background:radial-gradient(55% 75% at 76% 50%,rgba(149,191,71,.16),transparent 62%),radial-gradient(60% 60% at 20% 0%,#1C1E22,#0B0C0E 70%)}
.sy5-cv::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(243,242,238,.07) 1px,transparent 1.4px) 0 0/16px 16px;-webkit-mask:linear-gradient(90deg,#000 0,transparent 55%);mask:linear-gradient(90deg,#000 0,transparent 55%)}
.sy5-cv-l{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.sy5-cv .sty-h2{color:#F3F2EE;font-size:clamp(30px,3.4vw,52px);line-height:.92;text-align:left}
.sy5-cv .sty-h2 em{font-style:normal;color:#A6D35C}
.sy5-mk{margin:18px 0 0;font:400 20px/1.4 'Manrope',ui-sans-serif,system-ui,sans-serif;color:rgba(243,242,238,.72)}
.sy5-pr{display:flex;align-items:center;gap:18px;width:100%;margin-top:34px;padding-top:26px;border-top:1px solid rgba(243,242,238,.14)}
.sy5-pr b{font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-stretch:125%;font-weight:900;font-size:clamp(44px,4.4vw,64px);line-height:.9;letter-spacing:-.04em;color:#F3F2EE}
.sy5-pr span{font:500 11px/1.6 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,242,238,.6)}
.sy5-cv .sty-cta{justify-content:flex-start;margin-top:26px}
.sy5-cv .hc-pre{background:#F3F2EE;color:#0B0C0E}
@media (hover:hover) and (pointer:fine){.sy5-cv .hc-pre:hover{background:#A6D35C}}
.sy5-cv .hc-try{color:#F3F2EE;border-color:rgba(243,242,238,.4)}
.sy5-tr{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.sy5-tr li{display:inline-flex;align-items:center;gap:8px;font:500 11px/1.3 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,242,238,.62)}
.sy5-tr svg{flex:none;color:#A6D35C}
.sy5-cv-dev{position:relative;display:block;width:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sy5-cv-dev>i{position:absolute;inset:8% 4% 2%;border-radius:50%;background:radial-gradient(closest-side,rgba(166,211,92,.28),transparent);filter:blur(30px);pointer-events:none}
.sy5-cv-dev img{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.55))}
.sy5-cv-tip{position:absolute;left:50%;bottom:-6px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:1px solid rgba(243,242,238,.2);background:rgba(243,242,238,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#F3F2EE;font:600 12px/1 'Manrope',ui-sans-serif,system-ui,sans-serif;white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity .3s,transform .3s}
@media (hover:hover) and (pointer:fine){.sy5-cv-dev:hover{transform:translateY(-6px) scale(1.015)}.sy5-cv-dev:hover .sy5-cv-tip{opacity:1;transform:translate(-50%,0)}}
.sy5-cv-dev:focus-visible{outline:2px solid #A6D35C;outline-offset:6px;border-radius:16px}
.sy5-cv-dev:focus-visible .sy5-cv-tip{opacity:1;transform:translate(-50%,0)}
@media (max-width:820px){
.sy5-final{padding-top:48px}
.sy5-cv{grid-template-columns:1fr;gap:8px;padding:28px 18px}
.sy5-cv-dev{order:-1;max-width:420px;margin:-8px auto 0}
.sy5-cv-tip{display:none}
.sy5-cv .sty-h2{font-size:clamp(28px,8.4vw,40px)}
.sy5-cv .sty-cta{width:100%}
.sy5-cv .sty-cta>*{flex:1 1 auto;justify-content:center}
}

/* the sections below the hero rise in as they come into view, once the page's script runs (fx.ts startReveal adds
   rv, and in to each in turn): without it they are simply there */
.sty.rv .sy-rv:not(.in){opacity:0;transform:translateY(40px)}
.sy-rv.in{transition:opacity 1.5s ease,transform 1.8s cubic-bezier(.16,.8,.2,1)}

/* photos not there yet (an error marks them, app/story/page.tsx): no broken-image icon, the block they sit in shows */
.sty img[data-miss]{visibility:hidden}
/* the signature: gone, its row keeps the height it will have */
.sy4-sig img[data-miss]{display:none}
/* an award's badge: a square where it goes */
.sy4-aw-im:has(>img[data-miss]){aspect-ratio:1;background:rgba(32,32,32,.06)}
/* an app's colour logo: its logo file from landing/firegroup.ts instead (data-fbk), white, as the cards had it before */
.sy-hc-lg img[data-fbk]{height:clamp(22px,2vw,28px);filter:brightness(0) invert(1);opacity:.9}

@media (prefers-reduced-motion:reduce){
.sy-hero-t>*,.sy-glw,.sy-stats{animation:none}
.sy-rv.in{transition:none}
}