/* Sums Together page. Colors come from site.css, which already uses the Sums ink, sand and amber tokens. */
.hero { text-align: center; padding: 56px 0 72px; display: grid; justify-items: center; }
.hero .icon { width: 128px; height: 128px; border-radius: 29px; box-shadow: 0 1px 0 var(--border); margin-bottom: 28px; }
.hero h1 { font-size: clamp(44px, 8vw, 76px); line-height: 1; font-weight: 800; margin: 0; }
.hero h1 span { font-weight: 500; }
.hero .slogan { font-family: Manrope, system-ui, sans-serif; font-size: clamp(20px, 3vw, 26px); font-weight: 700; color: var(--brand); margin: 14px 0 10px; }
.hero .lede { max-width: 560px; color: var(--text-2); font-size: 19px; margin: 0 0 28px; }

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.features article { background: var(--surface); border-radius: var(--radius); padding: 26px 24px; }
.features h2 { font-size: 19px; margin: 18px 0 6px; }
.features p { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.5; }

/* Small geometric glyphs in the app's empty-state style: circles and capsules in ink and amber. */
.glyph { width: 48px; height: 48px; position: relative; }
.glyph::before, .glyph::after { content: ""; position: absolute; }
.g-groups::before { inset: 10px; border: 4px solid var(--border); border-radius: 50%; }
.g-groups::after { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); top: 2px; right: 2px;
  box-shadow: -32px 0 0 var(--brand), 0 32px 0 var(--brand), -32px 32px 0 var(--brand); }
.g-settle::before { left: 0; right: 0; top: 14px; height: 8px; border-radius: 4px; background: var(--brand); }
.g-settle::after { left: 12px; right: 0; top: 28px; height: 8px; border-radius: 4px; background: var(--accent); }
.g-personal::before { left: 4px; bottom: 4px; width: 9px; height: 22px; border-radius: 5px; background: var(--brand);
  box-shadow: 13px -10px 0 var(--brand), 26px 4px 0 var(--brand); }
.g-personal::after { right: 1px; bottom: 4px; width: 9px; height: 40px; border-radius: 5px; background: var(--accent); }
.g-currency::before { width: 28px; height: 28px; left: 0; top: 10px; border: 4px solid var(--brand); border-radius: 50%; }
.g-currency::after { width: 28px; height: 28px; right: 0; top: 10px; border: 4px solid var(--accent); border-radius: 50%; }
.g-quick::before { inset: 4px; border-radius: 50%; background: var(--brand); }
/* a plus sign drawn with two gradient bars */
.g-quick::after { left: 14px; top: 14px; width: 20px; height: 20px;
  background: linear-gradient(var(--on-brand), var(--on-brand)) center / 4px 20px no-repeat,
              linear-gradient(var(--on-brand), var(--on-brand)) center / 20px 4px no-repeat; }
.g-calm::before { inset: 6px; border: 4px solid var(--brand); border-radius: 50%; border-right-color: transparent; transform: rotate(-45deg); }
.g-calm::after { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); left: 19px; top: 19px; }

.promise { margin-top: 72px; text-align: center; max-width: 620px; margin-inline: auto; }
.promise h2 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 10px; }
.promise p { color: var(--text-2); margin: 0; }

/* Long-form pages: privacy policy and support. */
.doc { max-width: 720px; padding: 32px 0 0; }
.doc h1 { font-size: clamp(32px, 5vw, 44px); line-height: 1.1; margin: 0 0 6px; }
.doc .meta { color: var(--text-2); font-size: 15px; margin: 0 0 32px; }
.doc h2 { font-size: 22px; margin: 40px 0 8px; }
.doc h3 { font-size: 17px; margin: 24px 0 4px; }
.doc p, .doc li { color: var(--text); }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc .note { background: var(--surface); border-radius: 14px; padding: 16px 18px; color: var(--text-2); font-size: 15px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; }