/*
 * Generated by design/generate.py from design/tokens.json and design/export/tokens.json.
 * Do not edit this file: change the JSON and run `python3 design/generate.py`.
 * `./check.sh design` fails when the two differ.
 *
 * The colours are the iOS values, as on the guest page, under the same names.
 * The website's own colours (--website...) come from the "website" set, read from
 * design/export/website (the website frames W1 to W7, export of 2026-11-03).
 * Spacing is design/export/tokens.json's "space"; type and other sizes are the export's HTML.
 *
 * Dark values apply when the system is dark unless the visitor chose light, and
 * whenever the visitor chose dark (data-theme on <html>, website/src/site.js).
 */

:root {
  color-scheme: light;
  --textInk: #222222;
  --textBody: #3f3f3f;
  --textMuted: #686868;
  --textOnAccent: #ffffff;
  --groundPage: #ffffff;
  --groundGroup: #f2f2f2;
  --groundRaised: #f7f7f7;
  --groundFill: #efefef;
  --groundPlaceholder: #e8d9cc;
  --lineDefault: #e3e3e3;
  --accentPrimary: #e00b41;
  --accentGood: #1f7a3a;
  --identityFamilyFg: #9a3412;
  --identityFamilyBg: #ffe4d6;
  --identityDirectFg: #222222;
  --identityDirectBg: #efefef;
  --identityCoupleFg: #b0123e;
  --identityCoupleBg: #ffe0ea;
  --identityFriendsFg: #1e4fb8;
  --identityFriendsBg: #ddebff;
  --groundCard: #ffffff;
  --groundHighlight: #e2e2e2;
  --lineCardOutline: #ebebeb;
  --accentAccent: #d1013b;
  --accentIndicatorFg: #8a0026;
  --statusGoodBg: #e3f4e8;
  --statusWarn: #8a5300;
  --statusWarnBg: #fff1d6;
  --statusDanger: #c4122f;
  --statusDangerBg: #ffe5e8;
  --statusInfo: #1e4fb8;
  --statusInfoBg: #e4eeff;
  --identityEventBg: #222222;
  --identityEventFg: #ffffff;
  --controlSwitchOn: #34c759;
  --accentIndicator: #ffe0e6;
  --lineStrong: #767676;
  --identityGreenFg: #1f6b36;
  --identityGreenBg: #ddf3e4;
  --identityVioletFg: #5b3cc4;
  --identityVioletBg: #ece4ff;
  --groundMedia: #000000;
  --websiteSoft: #f7f7f7;
  --websitePrimaryHover: #b8082f;
  --websiteBadgeHover: #000000;
  --overlayScrim: rgb(0 0 0 / 35%);
  --overlaySheetGrabber: rgb(0 0 0 / 18%);
  --placeholderStripe: rgb(255 255 255 / 35%);
  --controlSwitchOffTrack: rgb(120 120 128 / 18%);
  --glassFill: rgb(255 255 255 / 60%);
  --glassTinted: rgb(224 11 65 / 92%);
  --shadowCard: 0px 0px 0px 1px rgb(0 0 0 / 2%), 0px 2px 6px 0px rgb(0 0 0 / 4%), 0px 4px 8px 0px rgb(0 0 0 / 10%);
  --radiusButton: 8px;
  --radiusCard: 20px;
  --radiusChip: 999px;
  --space2: 2px;
  --space4: 4px;
  --space8: 8px;
  --space12: 12px;
  --space16: 16px;
  --space20: 20px;
  --space24: 24px;
  --space32: 32px;
  --space40: 40px;
  --space48: 48px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --textInk: #f2f2f2;
    --textBody: #d6d6d6;
    --textMuted: #a3a3a8;
    --textOnAccent: #ffffff;
    --groundPage: #0e0e0f;
    --groundGroup: #1c1c1e;
    --groundRaised: #242426;
    --groundFill: #2c2c2e;
    --groundPlaceholder: #3a332d;
    --lineDefault: #333336;
    --accentPrimary: #e00b41;
    --accentGood: #5bd685;
    --identityFamilyFg: #ffc29e;
    --identityFamilyBg: #4a2b1b;
    --identityDirectFg: #f2f2f2;
    --identityDirectBg: #2c2c2e;
    --identityCoupleFg: #ffa3bc;
    --identityCoupleBg: #4d1b2b;
    --identityFriendsFg: #a9cbff;
    --identityFriendsBg: #1c2e4d;
    --groundCard: #1c1c1e;
    --groundHighlight: #3a3a3c;
    --lineCardOutline: #2c2c2e;
    --accentAccent: #fe5b7a;
    --accentIndicatorFg: #ffd9df;
    --statusGoodBg: #16301f;
    --statusWarn: #ffc266;
    --statusWarnBg: #3a2a0e;
    --statusDanger: #ff6b7d;
    --statusDangerBg: #3d1219;
    --statusInfo: #a9cbff;
    --statusInfoBg: #1c2e4d;
    --identityEventBg: #f2f2f2;
    --identityEventFg: #121212;
    --controlSwitchOn: #30d158;
    --accentIndicator: #5a1223;
    --lineStrong: #757579;
    --identityGreenFg: #8fe0a8;
    --identityGreenBg: #16301f;
    --identityVioletFg: #c7b6ff;
    --identityVioletBg: #2a2148;
    --groundMedia: #000000;
    --websiteSoft: #141415;
    --websitePrimaryHover: #b8082f;
    --websiteBadgeHover: #ffffff;
    --overlayScrim: rgb(0 0 0 / 55%);
    --overlaySheetGrabber: rgb(255 255 255 / 30%);
    --placeholderStripe: rgb(255 255 255 / 12%);
    --controlSwitchOffTrack: rgb(120 120 128 / 36%);
    --glassFill: rgb(58 58 62 / 50%);
    --glassTinted: rgb(224 11 65 / 92%);
    --shadowCard: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --textInk: #f2f2f2;
  --textBody: #d6d6d6;
  --textMuted: #a3a3a8;
  --textOnAccent: #ffffff;
  --groundPage: #0e0e0f;
  --groundGroup: #1c1c1e;
  --groundRaised: #242426;
  --groundFill: #2c2c2e;
  --groundPlaceholder: #3a332d;
  --lineDefault: #333336;
  --accentPrimary: #e00b41;
  --accentGood: #5bd685;
  --identityFamilyFg: #ffc29e;
  --identityFamilyBg: #4a2b1b;
  --identityDirectFg: #f2f2f2;
  --identityDirectBg: #2c2c2e;
  --identityCoupleFg: #ffa3bc;
  --identityCoupleBg: #4d1b2b;
  --identityFriendsFg: #a9cbff;
  --identityFriendsBg: #1c2e4d;
  --groundCard: #1c1c1e;
  --groundHighlight: #3a3a3c;
  --lineCardOutline: #2c2c2e;
  --accentAccent: #fe5b7a;
  --accentIndicatorFg: #ffd9df;
  --statusGoodBg: #16301f;
  --statusWarn: #ffc266;
  --statusWarnBg: #3a2a0e;
  --statusDanger: #ff6b7d;
  --statusDangerBg: #3d1219;
  --statusInfo: #a9cbff;
  --statusInfoBg: #1c2e4d;
  --identityEventBg: #f2f2f2;
  --identityEventFg: #121212;
  --controlSwitchOn: #30d158;
  --accentIndicator: #5a1223;
  --lineStrong: #757579;
  --identityGreenFg: #8fe0a8;
  --identityGreenBg: #16301f;
  --identityVioletFg: #c7b6ff;
  --identityVioletBg: #2a2148;
  --groundMedia: #000000;
  --websiteSoft: #141415;
  --websitePrimaryHover: #b8082f;
  --websiteBadgeHover: #ffffff;
  --overlayScrim: rgb(0 0 0 / 55%);
  --overlaySheetGrabber: rgb(255 255 255 / 30%);
  --placeholderStripe: rgb(255 255 255 / 12%);
  --controlSwitchOffTrack: rgb(120 120 128 / 36%);
  --glassFill: rgb(58 58 62 / 50%);
  --glassTinted: rgb(224 11 65 / 92%);
  --shadowCard: none;
}

@media (prefers-contrast: more) {
  :root {
    --textMuted: #4b4b4b;
    --accentAccent: #9b0029;
    --lineStrong: #6c6c6c;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --textMuted: #cbcbd0;
    --accentAccent: #fe5b7a;
    --lineStrong: #757579;
  }
}

@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --textMuted: #cbcbd0;
    --accentAccent: #fe5b7a;
    --lineStrong: #757579;
  }
}

/*
 * The website's own styles. Colours, shapes and spacing come from tokens.css (generated by
 * design/generate.py from design/tokens.json; never a hex value here). Type sizes, radii and
 * paddings the token files do not have are the export's (design/export/website/, the HTML of
 * W1 to W7). The export draws the phone layout with a .m class; here it is the media query
 * below 744 px, as the export's note says.
 */

@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--textInk);
  background: var(--groundPage);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--accentAccent); outline-offset: 3px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space48); }
.stack { display: flex; flex-direction: column; gap: var(--space16); }
.row { display: flex; gap: var(--space12); flex-wrap: wrap; }
/* Side by side, a button keeps its own height next to a taller field (as the design draws it). */
@media (min-width: 744px) { .row > .btn { align-self: flex-start; } }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: var(--space16); top: -60px; z-index: 3;
  padding: var(--space8) var(--space16); border-radius: 10px;
  background: var(--groundPage); color: var(--textInk); font: 600 16px/24px "DM Sans", sans-serif;
}
.skip:focus { top: var(--space16); }

/* ---------- top bar ---------- */
/* A minimum height, not a fixed one: with larger text or wider letter spacing (WCAG 1.4.4 and
   1.4.12) on a narrow phone the bar wraps to a second row instead of pushing the menu button
   off the screen. */
.nav { min-height: 72px; display: flex; border-bottom: 1px solid var(--lineCardOutline); background: var(--groundPage); }
.nav .wrap { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space8) var(--space32); }
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 800 20px/24px "DM Sans", sans-serif; letter-spacing: -.02em; color: var(--textInk);
}
.mark {
  width: 32px; height: 32px; border-radius: 10px; background: var(--accentPrimary); color: var(--textOnAccent);
  display: grid; place-items: center; font: 800 17px/1 "DM Sans", sans-serif;
}
.links { display: flex; gap: 28px; margin-left: auto; }
.links a {
  font: 600 16px/24px "DM Sans", sans-serif; color: var(--textBody); text-decoration: none;
  padding: 6px 2px; transition: color .15s;
}
.links a:hover, .links a[aria-current="page"] {
  color: var(--textInk); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.icb {
  width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; color: var(--textInk);
  display: grid; place-items: center; cursor: pointer;
}
/* Shown once site.js can run them (theme.js adds .js before the page is drawn). */
.theme, .menu-btn { display: none; }
.js .theme { display: grid; border-radius: 50%; transition: background-color .15s; }
.theme:hover { background: var(--groundGroup); }
.theme .sun { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}

/* ---------- buttons ---------- */
/* Minimum heights and wrapping text: a label that no longer fits (larger text or wider
   letter spacing on a narrow phone, WCAG 1.4.4 and 1.4.12) takes a second line instead of
   running off the screen. At the design's sizes every label fits on one line. */
.btn {
  min-height: 48px; padding: var(--space8) 20px; border-radius: 10px; font: 600 16px/20px "DM Sans", sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space8); max-width: 100%;
  border: 0; text-decoration: none; text-align: center; cursor: pointer; touch-action: manipulation;
  transition: background-color .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn.pri { background: var(--accentPrimary); color: var(--textOnAccent); }
.btn.pri:hover { background: var(--websitePrimaryHover); }
.btn.sec { background: transparent; color: var(--textInk); box-shadow: inset 0 0 0 1px var(--textInk); }
.btn.sec:hover { background: var(--groundGroup); }
.btn.sm { min-height: 40px; padding: var(--space8) var(--space16); font-size: 15px; }
.btn.lg { min-height: 56px; padding: var(--space8) var(--space24); font-size: 17px; border-radius: 12px; }

/* Store badges: placeholders, as in the export, for the official Apple and Google artwork. */
.stores { display: flex; gap: var(--space12); flex-wrap: wrap; }
.store {
  height: 56px; min-width: 184px; padding: 0 var(--space20) 0 var(--space16); border-radius: 12px;
  background: var(--identityEventBg); color: var(--identityEventFg);
  display: inline-flex; align-items: center; gap: var(--space12); text-decoration: none; transition: background-color .15s;
}
.store:hover { background: var(--websiteBadgeHover); }
.store span { display: flex; flex-direction: column; }
.store small { font: 500 13px/16px "DM Sans", sans-serif; }
.store b { font: 700 19px/22px "DM Sans", sans-serif; letter-spacing: -.01em; }

/* ---------- type ---------- */
.h2 { font: 800 44px/50px "DM Sans", sans-serif; letter-spacing: -.03em; }
.body { font: 400 17px/26px "DM Sans", sans-serif; color: var(--textBody); max-width: 60ch; }
.small { font: 400 15px/22px "DM Sans", sans-serif; color: var(--textMuted); }

/* ---------- phone menu (W5.1, W5.2) ---------- */
.sheet {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--groundPage); color: var(--textInk);
  overscroll-behavior: contain;
}
.sheet[open] { display: flex; flex-direction: column; }
html:has(.sheet[open]) { overflow: hidden; }
.sheet::backdrop { background: transparent; }
.sheet .top {
  height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space12) 0 var(--space20); border-bottom: 1px solid var(--lineCardOutline);
}
.sheet nav { display: flex; flex-direction: column; padding: var(--space12) var(--space20); }
.sheet nav a {
  height: 60px; display: flex; align-items: center; justify-content: space-between;
  font: 700 22px/28px "DM Sans", sans-serif; text-decoration: none; border-bottom: 1px solid var(--lineCardOutline);
}
.sheet nav a[aria-current="page"] { color: var(--accentAccent); }
.sheet .bottom { margin-top: auto; padding: var(--space20); display: flex; flex-direction: column; gap: var(--space12); }
.sheet .appearance { gap: 10px; margin-bottom: var(--space8); }
.sheet .stores { flex-direction: column; }
.sheet .store { width: 100%; justify-content: center; }
.seg-label { font: 700 15px/20px "DM Sans", sans-serif; color: var(--textInk); }
.seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space4); padding: var(--space4);
  border-radius: 12px; background: var(--groundGroup);
}
.seg button {
  height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--textBody);
  font: 600 15px/20px "DM Sans", sans-serif; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer;
}
.seg button[aria-checked="true"] { background: var(--groundPage); color: var(--textInk); box-shadow: var(--shadowCard); }

/* ---------- 404 (W5.5, W5.6) ---------- */
.nf { padding: 120px 0 160px; }
.nf .wrap { display: flex; flex-direction: column; gap: var(--space20); align-items: flex-start; }
.nf .code {
  font: 800 120px/1 "DM Sans", sans-serif; letter-spacing: -.05em; color: var(--accentAccent);
  font-variant-numeric: tabular-nums;
}

/* ---------- the home page (W6; W1 shares its sections) ---------- */
.eyebrow { font: 700 14px/20px "DM Sans", sans-serif; color: var(--accentAccent); }
.h1 { font: 800 60px/64px "DM Sans", sans-serif; letter-spacing: -.035em; }
.h3 { font: 700 24px/30px "DM Sans", sans-serif; letter-spacing: -.015em; }
.lead { font: 400 20px/30px "DM Sans", sans-serif; color: var(--textBody); max-width: 34ch; }
.tlink {
  font: 600 16px/24px "DM Sans", sans-serif; color: var(--accentAccent); text-decoration: underline;
  text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 6px;
}
.gap10 { gap: 10px; }
.gap14 { gap: 14px; }
.gap16 { gap: var(--space16); }
.gap20 { gap: var(--space20); }

/* Light and dark images of the same screen: the stylesheet shows the one for the theme in use. */
.dark-only { display: none; }
:root[data-theme="dark"] .dark-only { display: block; }
:root[data-theme="dark"] .light-only { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dark-only { display: block; }
  :root:not([data-theme="light"]) .light-only { display: none; }
}

/* Phone frames around the screen images. Sizes are the export's, per layout. */
:root { --phoneShadowAlpha: 18%; }
:root[data-theme="dark"] { --phoneShadowAlpha: 55%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --phoneShadowAlpha: 55%; } }
.phone {
  --pw: 303px; --pp: 7px; --pr: 44px;
  position: relative; flex: none; width: var(--pw); padding: var(--pp); border-radius: var(--pr);
  background: var(--groundMedia);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--groundMedia) var(--phoneShadowAlpha), transparent);
}
.phone img { width: 100%; vertical-align: top; height: auto; border-radius: calc(var(--pr) - var(--pp)); }
.phone.back { --pw: 271px; --pr: 40px; }
.phone.front { --pw: 295px; --pr: 43px; }
.phone.partner { --pw: 328px; --pp: 8px; --pr: 48px; }
.phone.small { --pw: 246px; --pp: 6px; --pr: 36px; }

.hero { padding: 56px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.hero .copy { display: flex; flex-direction: column; gap: var(--space24); padding-bottom: var(--space24); }
.hero .art { position: relative; height: 660px; border-radius: 32px; background: var(--websiteSoft); overflow: hidden; }
.hero .art .back { position: absolute; left: 44px; top: 100px; }
.hero .art .front { position: absolute; right: 44px; top: 44px; }

/* The early-access form. */
.field { display: flex; flex-direction: column; gap: var(--space8); }
.field fieldset { display: contents; border: 0; margin: 0; padding: 0; }
.field label { font: 600 15px/20px "DM Sans", sans-serif; color: var(--textInk); }
.early .row { max-width: 520px; }
.input {
  flex: 1; min-width: 0; height: 52px; border-radius: 10px; border: 1px solid var(--lineDefault);
  background: var(--groundPage); color: var(--textInk); padding: 0 var(--space16);
  font: 400 17px/24px "DM Sans", sans-serif; appearance: none; -webkit-appearance: none;
}
.input::placeholder { color: var(--textMuted); opacity: 1; }
.input:focus-visible { border: 2px solid var(--textInk); padding: 0 15px; outline: none; }
.help { font: 400 14px/20px "DM Sans", sans-serif; color: var(--textMuted); }
/* Before sign-ups open (site.json "signup"): muted, and nothing changes under the pointer. */
.field .status { color: var(--textInk); font-weight: 600; }
.field fieldset:disabled .input { background: var(--groundGroup); color: var(--textMuted); cursor: not-allowed; }
.field fieldset:disabled .btn.pri,
.field fieldset:disabled .btn.pri:hover { background: var(--groundFill); color: var(--textMuted); cursor: not-allowed; transform: none; }

.band { padding: 96px 0; }
.band.soft { background: var(--websiteSoft); }
.band.groups, .band.privacy-band { padding-top: 0; }
.head { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--space48); max-width: 720px; }

/* Plans anyone can answer; Lists and costs. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split .art {
  display: flex; justify-content: center; border-radius: 32px; background: var(--websiteSoft);
  padding: 56px 0 0; height: 600px; overflow: hidden;
}
.soft .split .art { background: var(--groundPage); }
.split .art.up { align-items: flex-end; padding: 0 0 56px; }
.steps { list-style: none; margin: var(--space8) 0 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space16); align-items: start; }
.steps .n {
  width: 44px; height: 44px; border-radius: 50%; background: var(--groundGroup); display: grid; place-items: center;
  font: 800 18px/1 "DM Sans", sans-serif; font-variant-numeric: tabular-nums;
}
.steps b { display: block; font: 700 19px/26px "DM Sans", sans-serif; margin-bottom: 2px; }
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space32) 28px; margin-top: var(--space8); }
.feat > div { display: flex; flex-direction: column; gap: 6px; }
.feat .fi {
  width: 40px; height: 40px; border-radius: 10px; background: var(--groundCard);
  box-shadow: var(--shadowCard), 0 0 0 1px var(--lineCardOutline);
  display: grid; place-items: center; color: var(--accentAccent); margin-bottom: 6px;
}
.feat h3 { font: 700 18px/24px "DM Sans", sans-serif; }

/* Why not just a group chat? */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space20); }
.vsA, .vsB { border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: var(--space20); }
.vsA { background: var(--groundGroup); }
.vsB { background: var(--identityGreenBg); }
.vsT { font: 700 20px/26px "DM Sans", sans-serif; }
.bubs { display: flex; flex-direction: column; gap: var(--space8); }
.bub {
  align-self: flex-start; max-width: 80%; background: var(--groundPage); color: var(--textInk);
  border-radius: 18px; padding: 10px 14px; font: 400 16px/22px "DM Sans", sans-serif;
}
.bub.me { align-self: flex-end; background: var(--accentPrimary); color: var(--textOnAccent); }
.wins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.wins li { display: flex; gap: 14px; align-items: center; font: 600 19px/26px "DM Sans", sans-serif; color: var(--textInk); }
.wins svg { color: var(--identityGreenFg); }

/* Made for every group you're in. */
.bento { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 330px 330px; gap: var(--space20); }
.tile { position: relative; border-radius: 24px; overflow: hidden; padding: 36px; display: flex; flex-direction: column; gap: 10px; }
.tile .tag { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 6px; }
.tile p { max-width: 30ch; }
.tile.p { background: var(--identityCoupleBg); grid-row: span 2; justify-content: flex-end; }
.tile.p .tag { background: var(--identityCoupleFg); color: var(--identityCoupleBg); }
.tile.o { background: var(--identityFamilyBg); }
.tile.o .tag { background: var(--identityFamilyFg); color: var(--identityFamilyBg); }
.tile.b { background: var(--identityFriendsBg); }
.tile.b .tag { background: var(--identityFriendsFg); color: var(--identityFriendsBg); }
.tile .ph { position: absolute; }
.tile.p .ph { left: 50%; margin-left: -156px; top: -271px; }
.tile.o .ph, .tile.b .ph { right: -30px; top: 48px; }
.tile.o .copy, .tile.b .copy { max-width: 270px; }

/* On your computer too. */
.deskHead { display: grid; grid-template-columns: 1fr auto; gap: var(--space32); align-items: end; margin-bottom: var(--space40); }
.deskHead .stack { max-width: 640px; }
.desk {
  border-radius: 32px; background: var(--websiteSoft); padding: 56px 56px 0; height: 620px; overflow: hidden;
  display: flex; justify-content: center;
}
.win {
  position: relative; flex: none; border-radius: 14px; overflow: hidden; border: 1px solid var(--lineDefault);
  background: var(--groundPage);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--groundMedia) var(--phoneShadowAlpha), transparent);
}
.win img { width: 100%; height: auto; vertical-align: top; }
@media (min-width: 744px) {
  .win { width: 1080px; }
}

/* Privacy. */
.privacy { display: grid; grid-template-columns: 1fr; gap: var(--space48); }
.narrow { max-width: 760px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--lineDefault); }
.facts > div { padding: 28px var(--space32) 0 0; display: flex; flex-direction: column; gap: var(--space8); }
.facts > div + div { padding-left: var(--space32); border-left: 1px solid var(--lineDefault); }
.facts .fi { color: var(--accentAccent); }
.facts h3 { font: 700 20px/26px "DM Sans", sans-serif; }
.madein { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.madein .mi { color: var(--accentAccent); display: grid; }
.madein .tlink { margin-left: auto; }

/* The kinds of plan, under "Made for every group you're in". */
.uses { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space8); }
.uses li {
  height: 36px; padding: 0 14px; border-radius: 18px; background: var(--groundGroup);
  display: inline-flex; align-items: center; font: 600 15px/20px "DM Sans", sans-serif; color: var(--textInk);
}

/* Why I built sama sama (only with the founder's details in site.json). */
.band.founder-band, .band.faq-band { padding-top: 0; }
.founder {
  display: grid; grid-template-columns: 280px 1fr; gap: var(--space48); align-items: center;
  border-radius: 32px; background: var(--websiteSoft); padding: var(--space48);
}
.founder img { width: 280px; height: 280px; border-radius: 24px; object-fit: cover; display: block; }
.fnote { font: 500 24px/36px "DM Sans", sans-serif; color: var(--textInk); max-width: 40ch; }
.fsig { display: flex; flex-direction: column; gap: 2px; font: 400 16px/22px "DM Sans", sans-serif; color: var(--textMuted); }
.fsig b { font: 700 18px/24px "DM Sans", sans-serif; color: var(--textInk); }

/* Questions before you sign up. */
.minifaq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.qa { border-bottom: 1px solid var(--lineCardOutline); }
.qa summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space16);
  padding: 22px 0; font: 700 19px/26px "DM Sans", sans-serif; cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { transition: transform .2s; }
.qa[open] summary svg { transform: rotate(180deg); }
.qa .a { padding: 0 0 var(--space24); display: flex; flex-direction: column; gap: var(--space12); max-width: 62ch; }

/* The phone question and the consent line under the early-access form. */
.field .plat { display: flex; border: 0; padding: 0; margin: var(--space4) 0 0; gap: var(--space8); align-items: center; flex-wrap: wrap; }
.plat legend { float: left; margin-right: 6px; padding: 0; font: 600 15px/20px "DM Sans", sans-serif; color: var(--textInk); }
.plat label { position: relative; cursor: pointer; }
.plat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plat span {
  height: 40px; padding: 0 var(--space16); border-radius: 20px; border: 1px solid var(--lineStrong);
  display: inline-flex; align-items: center; font: 600 15px/20px "DM Sans", sans-serif; color: var(--textInk);
  background: var(--groundPage);
}
.plat input:checked + span { background: var(--textInk); color: var(--groundPage); border-color: var(--textInk); }
.plat input:focus-visible + span { outline: 2px solid var(--accentAccent); outline-offset: 3px; }
.field fieldset:disabled .plat span { color: var(--textMuted); cursor: not-allowed; }
.help a { color: inherit; text-decoration: underline; }

/* What the form says after it is sent (early-access.js), and the bot check, which shows
   only when Cloudflare needs the person to do something. */
/* A status region stays on the page even when empty, or screen readers never announce what
   fills it (WCAG 4.1.3); empty, it takes no room. */
.form-message { color: var(--textInk); font-weight: 600; }
.form-message:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-message.err { color: var(--statusDanger); }
.turnstile:empty { display: none; }
/* The honeypot: off the page and out of the tab order, for bots only. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The confirm and unsubscribe pages (no design yet: #1220, D4), on the 404 page's layout. */
.ea-page { padding-bottom: 120px; }
.ea-page .wrap + .wrap { margin-top: var(--space24); }

/* What a phone or a computer sees (W1.3, W1.4, W2.3, W2.4): theme.js marks the device on
   <html> before the page is drawn. Without it, the computer's version shows. */
.for-ios, .for-android, .for-phone { display: none; }
.for-computer { display: contents; }
:root[data-device="ios"] .for-ios, :root[data-device="android"] .for-android,
:root[data-device="ios"] .for-phone, :root[data-device="android"] .for-phone { display: contents; }
:root[data-device="ios"] .for-computer, :root[data-device="android"] .for-computer { display: none; }

.ctas { display: flex; gap: var(--space12); flex-wrap: wrap; align-items: center; }
.gap28 { gap: 28px; }
.gap32 { gap: var(--space32); }

/* "On a computer?" and "Also on Mac and Windows" on phones. */
.note {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--space16); align-items: start;
  border-radius: 20px; background: var(--groundGroup); padding: var(--space20);
}
.note .ni { width: 48px; height: 48px; border-radius: 12px; background: var(--groundPage); display: grid; place-items: center; color: var(--accentAccent); }
.note-title { display: block; font: 700 18px/24px "DM Sans", sans-serif; margin-bottom: var(--space4); }
.note .copy { margin-top: var(--space12); }
.note .copy-field { display: block; width: 100%; margin-top: var(--space12); font-size: 15px; }
/* Read by screen readers, not shown. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The QR code that opens /download: dark modules on a light tile in both themes, so every
   camera reads it (white and black are textOnAccent and groundMedia, the same in both). */
.qr-code { display: block; width: 112px; height: 112px; }
.qrt, .qr { background: var(--textOnAccent); color: var(--groundMedia); }
.qrt { border-radius: 14px; padding: var(--space12); display: inline-flex; box-shadow: 0 0 0 1px var(--lineDefault); }
.qr { border-radius: 20px; padding: var(--space20); display: flex; flex-direction: column; align-items: center; gap: var(--space12); box-shadow: var(--shadowCard); }
.qr .qr-code { width: 152px; height: 152px; }
.qr span { font: 600 14px/18px "DM Sans", sans-serif; }
.get.launched { grid-template-columns: 1fr auto; }

/* The download page (W2). */
.dl { padding: 64px 0 96px; }
.dl > .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.dl .cards { display: flex; flex-direction: column; gap: var(--space16); }
.dl .card {
  border-radius: 24px; border: 1px solid var(--lineDefault); padding: var(--space32);
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
}
.dl .card .ci { width: 72px; height: 72px; border-radius: 18px; background: var(--groundGroup); display: grid; place-items: center; color: var(--accentAccent); }
.dl .card .body { font-size: 16px; }
.card-title { font: 700 19px/26px "DM Sans", sans-serif; }
.soon {
  display: inline-flex; align-self: flex-start; align-items: center; height: 32px; padding: 0 var(--space12); border-radius: 16px;
  background: var(--groundGroup); font: 600 14px/18px "DM Sans", sans-serif; color: var(--textBody);
}
.dl .art {
  height: 700px; border-radius: 32px; background: var(--websiteSoft); display: flex; justify-content: center;
  align-items: flex-start; padding-top: 56px; overflow: hidden;
}
.phone.welcome { --pw: 320px; --pp: 8px; --pr: 47px; }
.alt { display: inline-flex; align-items: center; gap: var(--space8); font: 600 16px/24px "DM Sans", sans-serif; color: var(--textBody); }
.alt:hover { color: var(--textInk); text-decoration: underline; }
.next-band, .invite-band { padding: 0 0 96px; }
.next { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--lineDefault); }
.next > div { padding: 28px 28px 0 0; display: flex; flex-direction: column; gap: var(--space8); }
.next > div + div { padding-left: 28px; border-left: 1px solid var(--lineDefault); }
.next .fi { color: var(--accentAccent); }
.next h3 { font: 700 19px/26px "DM Sans", sans-serif; }
.invite {
  border-radius: 24px; background: var(--groundGroup); padding: var(--space40) var(--space48);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space48); align-items: center;
}
.invite .input[aria-invalid="true"] { border: 2px solid var(--statusDanger); padding: 0 15px; }
.help.err { color: var(--statusDanger); }

/* The help page (W3). */
.gap6 { gap: 6px; }
.gap24 { gap: var(--space24); }
.helpHero { padding: 64px 0 var(--space40); }
.search-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.search {
  height: 60px; border-radius: 30px; border: 1px solid var(--lineDefault); box-shadow: var(--shadowCard);
  display: flex; align-items: center; gap: var(--space12); padding: 0 var(--space8) 0 22px; max-width: 640px;
  background: var(--groundPage); color: var(--textMuted);
}
.search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--textInk);
  font: 400 17px/24px "DM Sans", sans-serif;
}
.search input::placeholder { color: var(--textMuted); opacity: 1; }
.search input:focus-visible { outline: none; }
.search:focus-within { box-shadow: 0 0 0 2px var(--textInk); }
.help-band { padding-bottom: 96px; }
.faq { display: grid; grid-template-columns: 280px 1fr; gap: 64px; padding-top: var(--space24); }
.faq nav { display: flex; flex-direction: column; gap: var(--space4); align-self: start; }
.faq nav a {
  height: 44px; border-radius: 10px; padding: 0 14px; display: flex; align-items: center;
  font: 600 16px/22px "DM Sans", sans-serif; color: var(--textBody); text-decoration: none;
}
.faq nav a:hover { background: var(--groundGroup); }
.faq nav a[aria-current="true"] { background: var(--groundGroup); color: var(--textInk); }
.faq .topic { margin: 28px 0 var(--space4); }
.faq section:first-of-type .topic { margin-top: 0; }
.help-none { padding: var(--space24) 0; }
.contact {
  margin-top: var(--space40); border-radius: 24px; background: var(--websiteSoft); padding: var(--space32);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space24);
}

/* The privacy page (W4). */
.draft {
  display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space8); height: 32px; padding: 0 var(--space12);
  border-radius: 16px; background: var(--groundGroup); font: 600 14px/18px "DM Sans", sans-serif; color: var(--textBody);
}
.lead.wide { max-width: 46ch; }
.in-force { max-width: 66ch; }
.in-force a, .prose a { color: var(--accentAccent); text-underline-offset: 3px; }
.doc-band { padding-bottom: 96px; }
.doc { display: grid; grid-template-columns: 240px 1fr; gap: 72px; padding-top: var(--space24); }
.toc { display: flex; flex-direction: column; gap: 2px; align-self: start; position: sticky; top: var(--space24); }
.toc a {
  padding: var(--space8) var(--space12); border-radius: 8px; font: 500 15px/22px "DM Sans", sans-serif;
  color: var(--textBody); text-decoration: none;
}
.toc a:hover { background: var(--groundGroup); }
.short {
  border-radius: 24px; background: var(--identityGreenBg); padding: var(--space32);
  display: flex; flex-direction: column; gap: var(--space16); margin-bottom: var(--space48); scroll-margin-top: var(--space24);
}
.short ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space12); }
.short li { display: flex; gap: var(--space12); font: 500 17px/24px "DM Sans", sans-serif; color: var(--textInk); }
.short li svg { color: var(--identityGreenFg); margin-top: 2px; }
.prose { display: flex; flex-direction: column; gap: 14px; max-width: 66ch; }
.prose h2 { font: 800 28px/34px "DM Sans", sans-serif; letter-spacing: -.02em; margin-top: 28px; scroll-margin-top: var(--space24); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font: 400 17px/27px "DM Sans", sans-serif; color: var(--textBody); }
.prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: var(--space8); }
/* On phones the contents fold into "Jump to"; on wider screens the side list shows. */
.jump { display: none; }
.jump summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px;
  padding: 0 var(--space16); border: 1px solid var(--lineDefault); border-radius: 12px;
  font: 600 16px/22px "DM Sans", sans-serif; cursor: pointer;
}
.jump summary::-webkit-details-marker { display: none; }
.jump[open] summary svg { transform: rotate(180deg); }
.jump nav { display: flex; flex-direction: column; padding: var(--space8) 0; }
.jump nav a { padding: 10px var(--space16); font: 500 16px/22px "DM Sans", sans-serif; color: var(--textBody); text-decoration: none; }

/* Be first to try. */
.get-band { padding: 0 0 96px; }
.get { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; border-radius: 32px; background: var(--websiteSoft); padding: 64px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--lineCardOutline); padding: 56px 0 var(--space40); }
.foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space32); }
.foot .about { gap: 14px; }
.foot .about p { max-width: 30ch; }
.foot h2 { font: 700 15px/20px "DM Sans", sans-serif; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot li a { font: 400 15px/22px "DM Sans", sans-serif; color: var(--textBody); text-decoration: none; }
.foot li a:hover { text-decoration: underline; }
.legal {
  margin-top: var(--space48); padding-top: var(--space24); border-top: 1px solid var(--lineCardOutline);
  display: flex; justify-content: space-between; gap: var(--space8); font: 400 14px/20px "DM Sans", sans-serif; color: var(--textMuted);
}

/* ---------- phone layout ---------- */
@media (max-width: 743px) {
  .wrap { padding: 0 var(--space20); }
  .nav { min-height: 64px; }
  .nav .wrap { gap: var(--space8) var(--space12); }
  .links { display: none; }
  .js .theme { display: none; }
  .nav .cta { margin-left: auto; }
  .js .menu-btn { display: grid; margin-right: -10px; }
  .h2 { font-size: 32px; line-height: 38px; }
  .body { font-size: 16px; line-height: 25px; }
  .row { flex-direction: column; align-items: stretch; }
  .nf .code { font-size: 88px; }
  .h1 { font-size: 40px; line-height: 44px; }
  .h3 { font-size: 21px; line-height: 27px; }
  .lead { font-size: 18px; line-height: 27px; }
  .row .input { flex: none; width: 100%; }
  .hero { padding: 32px 0 48px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero .copy { gap: 18px; padding: 0; }
  .hero .art { height: 470px; border-radius: 24px; }
  .hero .art .back { left: 18px; top: 56px; }
  .hero .art .front { right: 18px; top: 28px; }
  .phone.back { --pw: 205px; --pp: 5px; --pr: 30px; }
  .phone.front { --pw: 230px; --pp: 6px; --pr: 34px; }
  .phone.plan, .phone.partner { --pw: 271px; --pp: 7px; --pr: 40px; }
  .band { padding: 64px 0; }
  .head { margin-bottom: var(--space32); }
  .split { grid-template-columns: 1fr; gap: var(--space40); }
  .split .art { height: 440px; padding-top: var(--space40); border-radius: 24px; order: 2; }
  .split .art.up { padding: 0 0 var(--space40); }
  .feat { grid-template-columns: 1fr; gap: var(--space24); }
  .vs { grid-template-columns: 1fr; }
  .vsA, .vsB { padding: var(--space24); }
  .bento { grid-template-columns: 1fr; grid-template-rows: auto; gap: var(--space16); }
  .tile { padding: 28px; }
  .tile.p { grid-row: auto; height: 560px; }
  .tile.o, .tile.b { height: 500px; }
  .tile.p .ph { top: -251px; margin-left: -136px; }
  .tile.o .ph, .tile.b .ph { right: auto; left: 50%; margin-left: -123px; top: 250px; }
  .tile.o .copy, .tile.b .copy { max-width: none; }
  .deskHead { grid-template-columns: 1fr; gap: var(--space20); margin-bottom: 28px; }
  .desk { height: 300px; padding: 28px 0 0 var(--space20); justify-content: flex-start; border-radius: 24px; }
  /* The export crops the window at the right on phones: 432 px wide at 390 px. */
  .win { width: 131%; }
  .facts { grid-template-columns: 1fr; }
  .facts > div, .facts > div + div { padding: var(--space24) 0; border-left: 0; border-bottom: 1px solid var(--lineDefault); }
  .madein .tlink { margin-left: 0; }
  .get { padding: 36px var(--space24); gap: 28px; border-radius: 24px; }
  .founder { grid-template-columns: 1fr; gap: var(--space24); padding: var(--space24); border-radius: 24px; }
  .founder img { width: 120px; height: 120px; border-radius: 20px; }
  .fnote { font-size: 19px; line-height: 29px; }
  .minifaq { grid-template-columns: 1fr; gap: var(--space24); }
  .get.launched { grid-template-columns: 1fr; }
  .stores { flex-direction: column; }
  .store { width: 100%; justify-content: center; }
  .qr { display: none; }
  .dl { padding: var(--space32) 0 64px; }
  .dl > .wrap { grid-template-columns: 1fr; gap: var(--space40); }
  .dl .card { grid-template-columns: 1fr; padding: var(--space24); }
  .dl .art { height: 480px; padding-top: var(--space40); border-radius: 24px; }
  .phone.welcome { --pw: 246px; --pp: 6px; --pr: 36px; }
  .next-band { padding-bottom: 56px; }
  .next { grid-template-columns: 1fr; }
  .next > div, .next > div + div { padding: var(--space20) 0; border-left: 0; border-bottom: 1px solid var(--lineDefault); }
  .invite { grid-template-columns: 1fr; padding: 28px var(--space24); gap: var(--space24); }
  .helpHero { padding: var(--space32) 0 var(--space24); }
  .faq { grid-template-columns: 1fr; gap: var(--space24); }
  .faq nav { flex-direction: row; overflow-x: auto; gap: var(--space8); margin-right: calc(-1 * var(--space20)); padding-bottom: var(--space4); }
  .faq nav a { flex: none; border: 1px solid var(--lineDefault); }
  .contact { flex-direction: column; align-items: flex-start; }
  .doc { grid-template-columns: 1fr; gap: var(--space24); }
  .toc { display: none; }
  .jump { display: block; margin-bottom: var(--space24); }
  .short { padding: var(--space24); }
  .prose h2 { font-size: 24px; line-height: 30px; }
  .foot .cols { grid-template-columns: 1fr 1fr; gap: var(--space32) var(--space20); }
  .foot .cols > div:first-child { grid-column: 1 / -1; }
  .legal { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}