/* Yorbit: one calm design for the app and the landing page. Colour only ever means something. */
:root {
  --ground: #F3F5F1;
  --card: #FFFFFF;
  --ink: #141A16;
  --ink-2: #4A544D;
  --ink-3: #737D76;
  --line: #E1E6E0;
  --green: #1D6B52;
  --green-ink: #FFFFFF;
  --green-soft: #DDEFE6;
  --amber: #9A5B00;
  --amber-soft: #F8EBD3;
  --red: #A2372B;
  --red-soft: #F7DEDA;
  --shadow: 0 10px 30px -12px rgba(20, 26, 22, 0.28);
  --display: "Bricolage Grotesque", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F1411;
    --card: #19201B;
    --ink: #EEF2EE;
    --ink-2: #B5BFB8;
    --ink-3: #8C978F;
    --line: #2A332D;
    --green: #5CC49C;
    --green-ink: #0B1510;
    --green-soft: #183A2C;
    --amber: #EDB45E;
    --amber-soft: #3A2A10;
    --red: #EE8074;
    --red-soft: #3D1F1B;
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--green); text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* App frame */
.app { max-width: 560px; margin: 0 auto; padding: 16px 20px 120px; min-height: 100vh; display: grid; align-content: start; gap: 20px; }
.loading { color: var(--ink-3); text-align: center; padding-top: 30vh; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.back { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 8px 8px 8px 0; color: var(--ink-2); font-weight: 600; font-size: 16px; cursor: pointer; }
.skip { background: none; border: 0; padding: 8px 0; color: var(--ink-3); font-weight: 600; font-size: 16px; cursor: pointer; }
.linkish { justify-self: center; background: none; border: 0; padding: 10px 4px; color: var(--ink-2); font-weight: 600; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish.inline { padding: 0; font-size: inherit; color: var(--green); }
.progress { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .progress i { transition: none; } }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.wordmark img { width: 28px; height: 28px; }

/* Type */
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 8vw, 38px); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.lead { margin: -8px 0 0; color: var(--ink-2); font-size: 17px; }
.muted { color: var(--ink-3); font-size: 15px; margin: 0; }
p { margin: 0; }

/* Tiles: the way to answer anything */
.tiles { display: grid; gap: 10px; }
.tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 18px; font-size: 17px; font-weight: 600; cursor: pointer; }
.tile:hover { border-color: var(--green); }
.tile[aria-pressed="true"], .tile.on { border-color: var(--green); background: var(--green-soft); }
.tile .check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.tile.on .check { background: var(--green); border-color: var(--green); }
.tile.on .check::after { content: ""; width: 10px; height: 5px; border-left: 2.5px solid var(--green-ink); border-bottom: 2.5px solid var(--green-ink); transform: rotate(-45deg) translate(1px, -1px); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; color: var(--ink-2); }
.input { width: 100%; min-height: 56px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; font-size: 18px; }
.input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 4px var(--green-soft); }
.form-error { margin: 2px 0 0; color: var(--red); font-weight: 600; font-size: 15px; }
.search { position: sticky; top: 0; z-index: 2; background: var(--ground); padding: 4px 0 6px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 14px 22px; border-radius: 16px; border: 1.5px solid transparent; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; }
.btn.wide { width: 100%; }
.btn-go { background: var(--green); color: var(--green-ink); }
.btn-go:hover { filter: brightness(1.07); }
.btn-go[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }
.btn-plain { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-plain:hover { border-color: var(--green); }
.btn-small { min-height: 40px; padding: 8px 14px; font-size: 15px; border-radius: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cards */
.stack { display: grid; gap: 12px; }
.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-3); font-size: 15px; line-height: 1.4; cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green); }
.cats { margin: -6px -20px 0; padding: 0 20px; overflow-x: auto; }
.cats ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 2px 0 6px; }
.cats a { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.cats a svg { width: 18px; height: 18px; }
.cats a[aria-current="page"] { background: var(--green-soft); border-color: var(--green); color: var(--green); }
/* News reads like a news app: picture first, then the source, the headline and a line of the story. */
.news-card { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px; text-decoration: none; color: var(--ink); }
.news-card:hover { border-color: var(--green); }
.news-img { width: 92px; height: 92px; border-radius: 14px; object-fit: cover; background: var(--green-soft); }
.news-blank { display: grid; place-items: center; color: var(--green); font-family: var(--display); font-weight: 800; font-size: 34px; }
.news-body { display: grid; gap: 6px; }
.news-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.news-title { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.2; }
.news-sum { color: var(--ink-2); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* The front page sign-up panel. On a phone it fills the screen, on a desktop it sits in the middle. */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(20, 26, 22, 0.55); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.sheet-card { position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; background: var(--card); border-radius: 26px 26px 0 0; padding: 26px 22px 30px; display: grid; gap: 12px; align-content: start; box-shadow: var(--shadow); }
/* The set-up questions run inside the panel, so the app's full page layout is trimmed down to fit. */
.app.in-sheet { min-height: 0; max-width: none; margin: 0; padding: 0; gap: 16px; }
.sheet .tabs { display: none; }
.sheet-card h2 { font-family: var(--display); font-size: 27px; }
.sheet-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 26px; line-height: 1; cursor: pointer; }
.sheet-x:hover { background: var(--line); color: var(--ink); }
body.locked { overflow: hidden; }
@media (min-width: 620px) { .sheet { align-items: center; padding: 20px; } .sheet-card { border-radius: 26px; } }
/* Places offered as you type in the diary. Picking one fills the box. */
.places { list-style: none; margin: -6px 0 0; padding: 0; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.places li button { width: 100%; text-align: left; border: 0; background: none; padding: 11px 14px; font: inherit; color: var(--ink); cursor: pointer; }
.places li button:hover { background: var(--green-soft); }
.places .place-credit { padding: 8px 14px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); }

/* Collapsed cards: one line saying when and what, opening for the detail and the snooze. */
.card.tight { padding: 12px 14px; gap: 8px; border-radius: 16px; }
.card.tight summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.card.tight summary::-webkit-details-marker { display: none; }
.card.tight .tight-title { flex: 1; font-weight: 700; font-size: 15px; line-height: 1.25; }
.card.tight[open] summary { margin-bottom: 4px; }
/* Every card that opens says so. Without a mark, people do not know there is anything under it. */
.card.tight summary::after {
  content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3); border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s ease;
}
.card.tight[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.card.tight summary:hover::after { border-color: var(--green); }
.card.tight .sum-pills { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.card.tight .sum-when { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.card.tight .tight-body { display: grid; gap: 10px; }
.card.tight .tight-body p { font-size: 15px; margin: 0; }
.card.tight .snooze { align-items: center; flex-wrap: wrap; }

/* On the Orbit screen the wheel is the point, so the list under it is compact. */
.needs { gap: 8px; }
.needs .card { padding: 12px 14px; gap: 5px; border-radius: 16px; }
.needs .card h3 { font-size: 15.5px; line-height: 1.25; }
.needs .card p { font-size: 13.5px; line-height: 1.35; }
.needs .card .pill { font-size: 11.5px; padding: 3px 9px; }
.needs .card .row { gap: 8px; margin-top: 2px; }
.needs .card .btn-small { min-height: 36px; padding: 7px 12px; font-size: 13.5px; border-radius: 12px; }
/* Six digit sign-in code: big, spaced digits so it is easy to type from an email on a phone. */
.code-input { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: 0.32em; text-align: center; padding: 16px 12px; }
.topics summary { cursor: pointer; font-weight: 600; color: var(--green); }
.topic-list { display: grid; gap: 10px; margin-top: 10px; }
.card { background: var(--card); border-radius: 20px; padding: 18px; display: grid; gap: 10px; border: 1px solid var(--line); }
.card p { color: var(--ink-2); font-size: 16px; }
.pill { justify-self: start; display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 99px; background: var(--green-soft); color: var(--green); }
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.red { background: var(--red-soft); color: var(--red); }
.pill.grey { background: var(--line); color: var(--ink-2); }
.card-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.amount { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card details { border-top: 1px solid var(--line); padding-top: 10px; }
.card summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--green); }
.card details p { margin-top: 8px; font-size: 15px; }
.src { font-size: 13px; color: var(--ink-3); }
.src a { color: var(--ink-3); }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; }
.section-title a { font-weight: 600; font-size: 15px; }

/* Signing a phone in from a browser that is already signed in. Kept small: it is a code to point a camera at,
   not a picture. */
.qr { width: min(200px, 60%); margin: 12px 0 6px; border-radius: 12px; overflow: hidden; }
.qr svg { display: block; }

/* The orbit: life in the middle, everything else around it */
/* The wheel fills the column, so it holds the same proportion on a wide browser as it does on a phone. Capped so
   it never grows past the reading column. */
.orbit { position: relative; width: min(420px, 100%); aspect-ratio: 1; margin: 0 auto; }
.orbit .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit .ring circle { fill: none; stroke: var(--line); stroke-width: 0.6; stroke-dasharray: 1.4 1.8; }
.core { position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: var(--green); color: var(--green-ink); display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; cursor: pointer; box-shadow: 0 16px 36px -14px rgba(29, 107, 82, 0.55); font: inherit; }
.core.clear { background: var(--green-soft); color: var(--green); box-shadow: none; }
.core-you { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 10vw, 44px); line-height: 1; letter-spacing: -0.03em; }
.core-num { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 12vw, 54px); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.core-text { font-weight: 700; font-size: 13px; line-height: 1.2; padding: 0 14px; }
.core-tick { width: 30px; height: 15px; border-left: 5px solid currentColor; border-bottom: 5px solid currentColor; transform: rotate(-45deg) translate(2px, -4px); border-radius: 2px; margin-bottom: 6px; }
/* Laid out like a phone home screen: rounded icons in a grid, names underneath, nothing boxed in. */
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 10px; }
.app-tile { position: relative; }
.app-tile a { display: grid; justify-items: center; gap: 7px; padding: 0; background: none; border: 0; text-decoration: none; color: var(--ink); }
.app-tile a:active .app-initial { transform: scale(0.94); }
.app-initial { position: relative; width: 62px; height: 62px; border-radius: 20px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 27px; box-shadow: var(--shadow); transition: transform 0.12s ease; overflow: hidden; }
/* The site's own icon sits over the letter, so a missing one falls back rather than showing a broken image. */
.app-icon { position: absolute; inset: 0; margin: auto; width: 60%; height: 60%; object-fit: contain; }
.app-name { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.app-remove { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; }
.app-remove:hover { background: var(--line); color: var(--ink); }
.you-apps { text-decoration: none; color: var(--ink); }
.you-apps:hover { border-color: var(--green); }
.sat { position: absolute; width: 20.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--card); border: 1.5px solid var(--line); display: grid; place-content: center; justify-items: center; gap: 1px; color: var(--ink-3); text-decoration: none; }
.sat svg { width: 22px; height: 22px; }
.sat-label { font-size: 11px; font-weight: 700; color: var(--ink-2); line-height: 1.1; }
.sat:hover { border-color: var(--green); }
.sat.has { border-color: var(--green); color: var(--green); }
.sat.urgent { border-color: var(--amber); color: var(--amber); }
.sat .badge { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--green); color: var(--green-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.sat.urgent .badge { background: var(--amber); color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
  .sat { animation: orbit-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; }
  .core { animation: core-in 0.35s ease-out both; }
}
@keyframes orbit-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } }
@keyframes core-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } }

/* Today */
.hello { display: grid; gap: 4px; padding-top: 8px; }
.hello .date { color: var(--ink-3); font-weight: 600; font-size: 15px; }
.allclear { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 40px 20px; background: var(--card); border-radius: 24px; border: 1px solid var(--line); }
.allclear .tick { width: 84px; height: 84px; border-radius: 50%; background: var(--green-soft); display: grid; place-items: center; }
.allclear .tick::after { content: ""; width: 34px; height: 16px; border-left: 6px solid var(--green); border-bottom: 6px solid var(--green); transform: rotate(-45deg) translate(3px, -3px); border-radius: 2px; }
.later { display: grid; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 4px 18px; }
.later li { list-style: none; display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.later li:last-child { border-bottom: 0; }
.later time { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
ul.later { margin: 0; }

/* Result */
.result { background: var(--green-soft); border-radius: 24px; padding: 24px; display: grid; gap: 8px; }
.result.amber { background: var(--amber-soft); }
.result.grey { background: var(--card); border: 1px solid var(--line); }
.result .big { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 0.95; letter-spacing: -0.03em; color: var(--green); font-variant-numeric: tabular-nums; }
.result p { color: var(--ink-2); }

/* Tab bar */
.tabs { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(540px, calc(100% - 24px)); z-index: 10; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
/* Yorbit is pinned in the middle and never moves. Everything else sits either side and scrolls, with the ones
   you tap most nearest the centre, which is also nearest your thumb. */
.tabs .bar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px; gap: 2px; }
.tabs ul { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.tabs ul::-webkit-scrollbar { display: none; }
.tabs ul.left { justify-content: flex-end; }
.tabs ul.right { justify-content: flex-start; }
.tabs li { flex: 0 0 auto; }
.tabs a { display: grid; justify-items: center; gap: 2px; padding: 7px 9px; border-radius: 16px; color: var(--ink-3); text-decoration: none; font-size: 12px; font-weight: 600; min-width: 60px; }
.tabs a svg { width: 24px; height: 24px; }
.tabs a[aria-current="page"] { color: var(--green); background: var(--green-soft); }
.tabs .home { display: grid; justify-items: center; gap: 2px; padding: 7px 10px; margin: 0 2px; border-radius: 16px; text-decoration: none; font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-soft); border: 1px solid transparent; }
.tabs .home svg { width: 26px; height: 26px; }
.tabs .home[aria-current="page"] { border-color: var(--green); }

/* Small round buttons for adding things, so a page of content is not broken up by full width slabs. */
.icon-btn { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 7px; padding: 8px 14px 8px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.icon-btn .plus { width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-size: 17px; line-height: 1; font-weight: 700; }
.icon-btn:hover { border-color: var(--green); color: var(--green); }
.icon-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Landing page */
.landing { max-width: 1080px; margin: 0 auto; padding: 18px 24px 64px; }
.landing .top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.landing .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; padding: 56px 0 64px; }
@media (max-width: 880px) { .landing .hero { grid-template-columns: 1fr; padding-top: 36px; gap: 36px; } }
.landing h1 { font-size: clamp(44px, 8vw, 80px); line-height: 0.96; letter-spacing: -0.035em; }
.landing h1 span { color: var(--green); }
.landing .lede { font-size: 20px; color: var(--ink-2); margin: 20px 0 28px; max-width: 30em; }
.phone { justify-self: center; width: min(360px, 100%); background: var(--ground); border: 10px solid var(--ink); border-radius: 44px; padding: 22px 16px 26px; display: grid; gap: 12px; box-shadow: var(--shadow); }
@media (prefers-color-scheme: dark) { .phone { border-color: #2E3831; } }
.phone .hello h2 { font-size: 26px; }
.proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 880px) { .proofs { grid-template-columns: 1fr; } }
.proof { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 8px; }
.proof .amount { font-size: 38px; }
.proof p { color: var(--ink-2); }
.landing section { padding: 40px 0; border-top: 1px solid var(--line); }
.landing .steps { list-style: none; counter-reset: s; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 880px) { .landing .steps { grid-template-columns: 1fr; } }
.landing .steps li { counter-increment: s; display: grid; gap: 6px; }
.landing .steps li::before { content: counter(s); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-family: var(--display); font-weight: 800; }
.landing .steps p { color: var(--ink-2); }
.landing footer { border-top: 1px solid var(--line); padding-top: 28px; display: grid; gap: 12px; color: var(--ink-3); font-size: 14px; }
.landing footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.landing footer a { color: var(--ink-2); }