/* ============================================================
   STAKZ — waitlist hero (option 2c), production CSS
   Shared by the standalone homepage and optional embed fragment.
   Everything is scoped under .sw so it cannot touch the rest
   of the site. No frameworks, no build step.
   ============================================================ */

/* Existing fonts, served locally with unchanged face definitions. */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx-muLRm.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: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx6muLRm.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCxCmuA.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: italic;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx-muLRm.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: italic;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx6muLRm.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCxCmuA.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: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxK-vA.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: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.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: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxK-vA.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: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.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: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsK8ah8QA.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: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsD8ah8QA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsL8ah8QA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsE8ah8QA.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: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsI8ah8QA.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: 400;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.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;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsH8ag.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: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsK8ah8QA.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: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsD8ah8QA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsL8ah8QA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsE8ah8QA.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: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsI8ah8QA.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: 500;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.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;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsH8ag.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: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsK8ah8QA.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: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsD8ah8QA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsL8ah8QA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsE8ah8QA.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: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsI8ah8QA.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: 600;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsJ8ah8QA.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;
}
/* latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/NGSwv5HMAFg6IuGlBNMjxLsH8ag.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;
}


/* ---------- root + tokens ---------- */
.sw{
  /* surfaces / ink / signal — STAKZ palette, dark only */
  --sw-app:#0A0A0A;
  --sw-fill:#1F1F1E;
  --sw-rule:#262625;
  --sw-ink:#F5F4F0;
  --sw-ink-2:#93938C;
  --sw-outline-on:rgba(245,244,240,.55);
  --sw-progress:#C7E85C;          /* citron = progression only */
  --sw-attention:#DDA845;
  --sw-on-light:#0A0A0A;

  --sw-display:'Archivo',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --sw-text:'Inter Tight',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* Supplied assets, relative to this stylesheet. */
  --sw-logo:url("assets/stakz-logo.webp");

  --sw-frame:url("assets/iphone-frame.png");

  /* phone-mockup scale — the media queries at the bottom set this */
  --sw-s:1;

  position:relative;
  overflow:hidden;                /* contains the glow, prevents page scroll */
  isolation:isolate;
  background:var(--sw-app);
  color:var(--sw-ink);
  font-family:var(--sw-text);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

/* Zero-specificity reset so it never beats the component rules below. */
.sw :where(*){box-sizing:border-box;margin:0;padding:0}
.sw :where(input,button,textarea){font:inherit;color:inherit;border:none;background:none;outline:none}
.sw :where(button){cursor:pointer}
.sw a{color:var(--sw-progress);text-decoration:none}
.sw a:hover{color:var(--sw-ink)}

.sw-inner{max-width:1296px;margin:0 auto;padding:60px 72px}

.sw-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- shared type ---------- */
.sw-mark{font:500 11px/14px var(--sw-text);letter-spacing:.22em;
  text-transform:uppercase;color:var(--sw-ink-2);display:block}
.sw-mark-progress{color:var(--sw-progress)}

/* Display voice: italic, uppercase, skewed -4deg from the left origin.
   margin-right (not padding) absorbs the skew overhang. */
.sw-d1,.sw-d2,.sw-d3{font-family:var(--sw-display);font-weight:800;font-style:italic;
  letter-spacing:.02em;text-transform:uppercase;transform:skewX(-4deg);
  transform-origin:left;margin-right:.09em;color:var(--sw-ink)}
.sw-d1{font-size:clamp(36px,6.1vw,76px);line-height:.94}
.sw-d2{font-size:28px;line-height:30px}
.sw-d3{font-size:20px;line-height:24px;display:inline-block}

.sw-num{font-family:var(--sw-display);font-weight:800;font-style:italic;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em}

.sw-rule{height:1px;background:var(--sw-rule)}

/* ---------- top bar ---------- */
.sw-top{display:flex;align-items:center;justify-content:space-between;gap:20px;
  position:relative;z-index:2}
.sw-wordmark{display:block;width:168px;aspect-ratio:720/190;
  background:var(--sw-logo) left center/contain no-repeat}
.sw-tag{min-height:34px;padding:0 14px;color:var(--sw-ink);
  font:600 10px var(--sw-text);letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(245,244,240,.20);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

/* ---------- hero ---------- */
.sw-hero{display:grid;grid-template-columns:minmax(0,1fr) calc(612px * var(--sw-s));
  gap:48px;margin-top:40px}
.sw-copy{container-type:inline-size;display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2}
.sw-copy .sw-d1{margin-top:18px;max-width:620px;text-wrap:balance}
.sw-lede{font:400 17px/26px var(--sw-text);color:var(--sw-ink-2);
  margin-top:26px;max-width:450px;text-wrap:pretty}

/* ---------- email signup ---------- */
.sw-signup-wrap{margin-top:40px;max-width:560px}
.sw-signup{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.sw-signup .sw-field{flex:1 1 240px;min-width:0}
.sw-fine{margin-top:14px}
.sw-consent{margin:8px 0 0;font:400 12px/18px var(--sw-text);color:var(--sw-ink-2)}
.sw-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sw-consent a:hover{color:var(--sw-ink)}

.sw-input{width:100%;min-width:0;background:var(--sw-fill);
  padding:17px 16px;font:400 16px var(--sw-text);color:var(--sw-ink);
  box-shadow:inset 0 0 0 1px var(--sw-rule);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.sw-input::placeholder{color:var(--sw-ink-2)}
.sw-input:focus{box-shadow:inset 0 0 0 1px var(--sw-outline-on)}

.sw-pill{width:100%;min-height:56px;display:flex;align-items:center;
  justify-content:center;gap:9px;font:800 14px var(--sw-display);
  text-transform:uppercase;letter-spacing:.16em;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  transition:transform 120ms cubic-bezier(.2,0,0,1)}
.sw-pill:active{transform:scale(.98)}
.sw-pill-primary{background:var(--sw-ink);color:var(--sw-on-light)}
.sw-pill-auto{width:auto;padding:0 28px}

/* ---------- phone stage ---------- */
.sw-stage-wrap{width:calc(612px * var(--sw-s));height:calc(933px * var(--sw-s))}
.sw-stage{position:relative;width:612px;height:933px;
  transform:scale(var(--sw-s));transform-origin:top left}

.sw-glow{position:absolute;top:50%;left:229px;transform:translate(-50%,-50%);
  pointer-events:none}
.sw-glow-citron{width:940px;height:940px;
  background:radial-gradient(closest-side,rgba(199,232,92,.30),rgba(199,232,92,.09) 42%,rgba(199,232,92,0) 72%)}
.sw-glow-ink{width:540px;height:860px;
  background:radial-gradient(closest-side,rgba(245,244,240,.20),rgba(245,244,240,0) 76%)}

/* Photographic iPhone frame. The picture is a background image so a missing
   file paints nothing instead of a broken-image glyph. */
.sw-bezel{position:absolute;top:0;left:0;width:462px;height:933px;
  background:var(--sw-frame) top left/462px 933px no-repeat}
.sw-device{position:absolute;top:25px;left:28px;width:402px;height:876px;
  border-radius:48px;overflow:hidden;background:#000;
  box-shadow:0 40px 80px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.12)}

.sw-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:126px;height:37px;border-radius:24px;background:#000;z-index:50}
.sw-statusbar{position:absolute;top:0;left:0;right:0;z-index:10;width:100%;
  display:flex;gap:154px;align-items:center;justify-content:center;
  padding:21px 24px 19px;color:#fff}
.sw-statusbar>div{flex:1;height:22px;display:flex;align-items:center;justify-content:center}
.sw-statusbar .sw-sb-time{padding-top:1.5px}
.sw-statusbar .sw-sb-icons{gap:7px;padding-top:1px;padding-right:1px}
.sw-statusbar .sw-sb-time span{font-family:-apple-system,'SF Pro',system-ui;
  font-weight:590;font-size:17px;line-height:22px}
.sw-homebar{position:absolute;bottom:0;left:0;right:0;z-index:60;height:34px;
  display:flex;justify-content:center;align-items:flex-end;padding-bottom:8px;
  pointer-events:none}
.sw-homebar i{width:139px;height:5px;border-radius:100px;background:rgba(255,255,255,.7);display:block}

/* ---------- app screen inside the phone ---------- */
.sw-screen{position:absolute;inset:0;display:flex;flex-direction:column;
  padding-top:54px;background:var(--sw-app);color:var(--sw-ink)}
.sw-scroll{flex:1;overflow:hidden;padding:14px 20px 0}
.sw-screen-title{font:700 24px var(--sw-display);font-style:italic;
  letter-spacing:-.01em;margin-top:6px}
.sw-sessions{display:flex;align-items:flex-end;gap:14px;margin-top:22px}
.sw-sessions .sw-num{font-size:86px;line-height:.82;color:var(--sw-progress)}
.sw-sessions-labels{display:flex;flex-direction:column;gap:3px;padding-bottom:10px}
.sw-meta{font:400 15px/22px var(--sw-text);color:var(--sw-ink-2)}
.sw-today{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-top:8px}
.sw-today-meta{font:400 13px var(--sw-text);color:var(--sw-ink-2)}
.sw-alert{display:inline-flex;align-items:center;gap:9px;color:var(--sw-progress)}
.sw-dot{width:7px;height:7px;flex:none;background:currentColor;display:inline-block;
  transform:skewX(-20deg)}
.sw-rowtitle{font:700 18px/24px var(--sw-display);font-style:italic;margin-top:10px}
.sw-rowsub{font:400 14px/20px var(--sw-text);color:var(--sw-ink-2);margin-top:4px}
.sw-prog{color:var(--sw-progress)}
.sw-attn{color:var(--sw-attention)}

.sw-rowline{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:56px;padding:16px 0;border-bottom:1px solid var(--sw-rule)}
.sw-rowline.sw-first{border-top:1px solid var(--sw-rule)}
.sw-rowline b{font:700 16px/24px var(--sw-display);font-style:italic;font-weight:700}
.sw-rowline em{font:400 14px var(--sw-text);font-style:normal;color:var(--sw-ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sw-rowline em i{font-style:normal;color:var(--sw-ink);font-weight:600}

.sw-action{flex:none;padding:8px 20px}
.sw-tabbar{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:4px;padding:10px 8px;border-top:1px solid var(--sw-rule)}
.sw-tab{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;padding-top:4px;
  color:var(--sw-ink-2);font:600 9px/1 var(--sw-text);letter-spacing:.18em;
  text-transform:uppercase}
.sw-tab::before{content:'';width:20px;height:3px;flex:none;
  background:var(--sw-outline-on);transform:skewX(-24deg)}
.sw-tab.sw-on{color:var(--sw-ink)}
.sw-tab.sw-on::before{background:var(--sw-ink)}
.sw-safe{height:20px;flex:none}

/* ---------- floating stat cards ---------- */
.sw-float{position:absolute;left:386px;width:224px;background:#F5F4F0;color:#0A0A0A;
  padding:16px 20px 18px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.sw-float-1{top:155px}
.sw-float-2{top:417px}
.sw-float .sw-mark{color:#5C5C56}
.sw-float .sw-num{font-size:30px;line-height:34px;color:#0A0A0A;margin-top:8px}
.sw-float .sw-delta{color:#4C6B0E;margin-top:8px}

/* ---------- manifesto row ---------- */
.sw-manifesto{margin-top:56px;position:relative;z-index:2}
.sw-manifesto .sw-rule{margin-top:16px}
.sw-manifesto-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sw-manifesto-cell{padding:24px 24px 0}
.sw-manifesto-cell+.sw-manifesto-cell{box-shadow:inset 1px 0 0 var(--sw-rule)}
.sw-manifesto-cell:first-child{padding-left:0}
.sw-manifesto-cell:last-child{padding-right:0}
.sw-manifesto-cell p{font:400 14px/20px var(--sw-text);color:var(--sw-ink-2);margin-top:8px}

/* ============================================================
   RESPONSIVE — the phone mockup and its floating cards scale as
   one composition (--sw-s), so their positions never change.
   ============================================================ */

@media (max-width:1240px){
  .sw{--sw-s:.84}
  .sw-inner{padding:56px 56px}
  .sw-hero{gap:40px}
}

@media (max-width:1080px){
  .sw{--sw-s:.72}
  .sw-inner{padding:48px 40px}
}

/* Size desktop display text to its column so whole words stay together. */
@media (min-width:981px){
  .sw-copy .sw-d1{font-size:clamp(36px,13.5cqi,76px);overflow-wrap:normal}
}

/* Tablet and below — single column, stage centred under the copy. */
@media (max-width:980px){
  .sw{--sw-s:.82}
  .sw-inner{padding:44px 32px}
  .sw-hero{grid-template-columns:minmax(0,1fr);gap:44px;margin-top:36px}
  .sw-copy .sw-d1,.sw-lede{max-width:640px}
  .sw-stage-wrap{margin:0 auto}
  .sw-manifesto{margin-top:44px}
  .sw-manifesto-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw-manifesto-cell:nth-child(3){box-shadow:none;padding-left:0}
  .sw-manifesto-cell:nth-child(2){padding-right:0}
}

@media (max-width:700px){
  .sw{--sw-s:.72}
  .sw-inner{padding:40px 24px}
  .sw-signup .sw-field{flex:1 1 100%}
  .sw-pill-auto{width:100%}
}

@media (max-width:520px){
  .sw{--sw-s:.60}
  .sw-inner{padding:36px 20px}
  .sw-hero{gap:36px;margin-top:28px}
  .sw-manifesto-grid{grid-template-columns:minmax(0,1fr)}
  .sw-manifesto-cell{padding:20px 0 0}
  .sw-manifesto-cell+.sw-manifesto-cell{box-shadow:inset 0 1px 0 var(--sw-rule);margin-top:20px}
}

@media (max-width:440px){ .sw{--sw-s:.54} }
@media (max-width:400px){ .sw{--sw-s:.50} }
@media (max-width:360px){ .sw{--sw-s:.45} }
@media (max-width:319px){ .sw{--sw-s:.38} .sw-top{flex-wrap:wrap} }

@media (prefers-reduced-motion:reduce){
  .sw-pill{transition:none}
  .sw-pill:active{transform:none}
}

/* Accessible validation, submission feedback, and keyboard focus. */
.sw-feedback{min-height:40px;margin-top:12px;font:400 14px/20px var(--sw-text);color:var(--sw-ink-2)}
.sw-feedback:empty{margin-top:0;min-height:0}
.sw-feedback[data-state="error"]{color:#F0B5A8}
.sw-feedback[data-state="success"]{color:var(--sw-progress)}
.sw-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #F0B5A8}
.sw-pill:focus-visible{box-shadow:inset 0 0 0 3px var(--sw-app),inset 0 0 0 5px var(--sw-progress)}
.sw-pill:disabled{opacity:.65;cursor:wait}
.sw-pill-primary:hover:not(:disabled){background:#E6E5DF}

/* Footer privacy link and standalone policy page. */
.sw .sw-privacy-link{display:inline-block;margin-top:24px;color:var(--sw-ink-2);font:400 12px/20px var(--sw-text);text-decoration:underline;text-underline-offset:3px}
.sw .sw-privacy-link:hover{color:var(--sw-ink)}
.sw a:focus-visible{outline:2px solid var(--sw-progress);outline-offset:4px}
.sw-policy{min-height:100vh}
.sw-policy .sw-inner{max-width:900px}
.sw-policy h1{font:800 italic 40px/1.1 var(--sw-display);margin:40px 0 24px}
.sw-policy h2{font:700 20px/1.3 var(--sw-display);margin:32px 0 12px}
.sw-policy p{font:400 16px/1.7 var(--sw-text);margin:12px 0;color:var(--sw-ink-2)}