/* fitnessforgepro.com, from the "No data version" boards on the landing page canvas. Light pages with dark bands, in
   the Forge colours (shared/tokens). Everything is served from this site: no third-party requests. */
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("fonts/BarlowCondensed-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("fonts/BarlowCondensed-Bold.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --background: #f6f4f1; --surface: #ffffff; --border: #e2ddd6; --border-strong: #8c857b;
  --text: #1b1a18; --text-2: #5e5a54; --text-3: #6f6a63;
  --primary: #c2410c; --primary-pressed: #9a3412; --primary-subtle: #fbe6da; --on-primary-subtle: #8a2c07;
  --warning: #9a5b00; --warning-subtle: #fbefd6; --success: #0f766e; --gold: #8a6100;
  /* The dark bands: header, hero, privacy, the final call and the footer. */
  --ink: #121110; --ink-raised: #1d1b19; --ink-border: #34302b; --on-ink: #f4f1ec; --on-ink-2: #b3ada4;
  --ember: #ff7a3d; --on-ember: #1b0e06;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(27,26,24,.06), 0 2px 8px rgba(27,26,24,.05);
  --phone-ring: #d9d3cb; --get: var(--ink); --get-border: transparent; --badge-border: #a6a6a6;
}
/* Dark mode follows the visitor's setting (the "No data version · dark mode" boards). The dark bands keep their
   colours; the light sections take the Forge dark tokens, and cards are told apart by a border instead of a shadow. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #121110; --surface: #1d1b19; --border: #34302b; --border-strong: #77706a;
    --text: #f4f1ec; --text-2: #b3ada4; --text-3: #9a948b;
    --primary: #ff7a3d; --primary-pressed: #ff9a66; --primary-subtle: #3a2215; --on-primary-subtle: #ffb48f;
    --warning: #f5b547; --warning-subtle: #3a2c10; --success: #4fd1c5; --gold: #f2c14e;
    --shadow: none;
    --phone-ring: #34302b; --get: #272421; --get-border: #34302b; --badge-border: #ffffff;
  }
  body:not(.home) .site-header { border-bottom: 1px solid var(--ink-border); }
  .button.primary { background: var(--ember); color: var(--on-ember); }
  .button.primary:hover { background: #ff9a66; color: var(--on-ember); }
}
.icon { color: var(--primary); }
.icon.gold { color: var(--gold); }
.icon.success { color: var(--success); }
.icon.warning { color: var(--warning); }

* { box-sizing: border-box; }
/* Blocks given a display (the share page's routine and error) still hide when the script says so. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* The page fills the window: the footer sits at the bottom however short the content. */
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--background); color: var(--text); font: 17px/1.5 var(--body); }
body > main { flex: 1 0 auto; }
a { color: var(--primary); }
a:hover { color: var(--primary-pressed); }
:focus-visible { outline: 3px solid #2457d6; outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.eyebrow { font: 600 15px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.on-ink .eyebrow, .eyebrow.on-ink { color: var(--ember); }
.display { font-family: var(--display); font-weight: 700; line-height: 1; }
.muted { color: var(--text-2); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.on-ink { background: var(--ink); color: var(--on-ink); }
.on-ink .muted { color: var(--on-ink-2); }

/* Header and footer */
.site-header { background: var(--ink); }
.site-header .wrap { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--on-ink); text-decoration: none; }
.brand:hover { color: var(--on-ink); }
.brand-name { font: 700 24px/1 var(--display); letter-spacing: .01em; }
.brand-pro { font-size: 11px; line-height: 1; letter-spacing: .08em; color: var(--on-ember); background: var(--ember); border-radius: 4px; padding: 3px 5px 2px; margin-left: 5px; vertical-align: 5px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 15px; }
.site-nav a { color: var(--on-ink-2); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--on-ink); }
.site-nav a[aria-current="page"] { font-weight: 600; }
.site-footer { background: var(--ink); color: var(--on-ink-2); border-top: 1px solid var(--ink-border); }
.site-footer .wrap { padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer a { color: var(--on-ink-2); }
.site-footer a:hover { color: var(--on-ink); }

/* The beta invite: an email, since the site has no forms. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: 10px; font-size: 17px; font-weight: 700; text-decoration: none; }
.button.ember { background: var(--ember); color: var(--on-ember); }
.button.ember:hover { background: #ff9a66; color: var(--on-ember); }
.button.primary { background: var(--primary); color: #fff; }
.button.primary:hover { background: var(--primary-pressed); color: #fff; }
.button.small { min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; }
.button svg { flex: none; }

/* ---------- Home ---------- */
.hero { position: relative; overflow: hidden; }
.hero-body { padding-top: 56px; padding-bottom: 96px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.hero-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.status-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; border: 1px solid var(--ink-border); background: var(--ink-raised);
  border-radius: 999px; padding: 6px 14px 6px 10px; font-size: 14px; }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--ember); }
.hero h1 { font: 700 clamp(56px, 7.2vw, 108px)/.92 var(--display); letter-spacing: -.01em; }
.hero .lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--on-ink-2); max-width: 540px; }
.hero-cta { display: flex; flex-direction: column; gap: 12px; max-width: 520px; padding-top: 8px; }
.hero-cta .button { align-self: flex-start; }
.hero .note { font-size: 14px; color: var(--on-ink-2); }
/* The hero phone: the built app's set log after a PR, tilted. */
.hero-phone { flex: 0 1 340px; display: flex; justify-content: center; position: relative; margin: 0 auto; }
.hero-phone .glow { position: absolute; width: 440px; height: 440px; top: 90px; left: 50%; margin-left: -220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,61,.30) 0%, rgba(255,122,61,0) 68%); }
.hero-phone .stage { position: relative; perspective: 1800px; }
.hero-phone .floor { position: absolute; left: 24px; right: 0; bottom: -30px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.6); filter: blur(24px); transform: translateX(26px) scaleX(1.12); }
.hero-phone .body { position: relative; width: 312px; padding: 4px; border-radius: 56px;
  background: linear-gradient(145deg, #4a453f 0%, #1a1816 38%, #0d0c0b 62%, #34302b 100%); transform: rotateY(-22deg) rotateX(8deg) rotateZ(2deg);
  box-shadow: 1px 1px 0 #2c2925, 2px 2px 0 #28251f, 3px 3px 0 #24211d, 4px 4px 0 #201e1a, 5px 5px 0 #1d1b18, 6px 6px 0 #1a1815, 7px 7px 0 #171513, 8px 8px 0 #141311, 40px 50px 90px rgba(0,0,0,.6); }
.hero-phone .key { position: absolute; width: 3px; background: #3a3631; }
.hero-phone .key.left { left: -3px; border-radius: 2px 0 0 2px; }
.hero-phone .key.right { right: -3px; border-radius: 0 2px 2px 0; }
.hero-phone .screen { background: #000; border-radius: 52px; padding: 6px; }
.hero-phone .screen img { display: block; width: 292px; height: auto; aspect-ratio: 780 / 1692; border-radius: 46px; }
.hero-phone .glare { position: absolute; inset: 10px; border-radius: 46px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 40%); }

.proof { background: var(--surface); border-bottom: 1px solid var(--border); }
.proof ul { list-style: none; margin: 0 auto; padding-top: 22px; padding-bottom: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-size: 15px; font-weight: 600; }
.proof li { display: flex; align-items: center; gap: 8px; }

.section { padding-top: 112px; padding-bottom: 112px; }
.section-title { margin-top: 10px; font: 700 clamp(40px, 4.6vw, 64px)/1 var(--display); max-width: 820px; }
.section-lede { margin-top: 18px; font-size: 19px; color: var(--text-2); max-width: 640px; }
.on-ink .section-lede { color: var(--on-ink-2); }
.loop { padding-bottom: 48px; }
.loop-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.shot-card { padding: 28px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.shot-card .step { font: 700 44px/1 var(--display); color: var(--primary); }
.shot-card h3 { font-size: 22px; font-weight: 700; }
.shot-card p { color: var(--text-2); }
/* The top of a phone, peeking up from the bottom of a card. */
.peek { margin: auto -28px -28px; padding-top: 28px; height: 300px; overflow: hidden; background: var(--background); border-top: 1px solid var(--border); display: flex; justify-content: center; }
.peek.tall { height: 340px; }
.peek > div { width: 248px; background: #000; border-radius: 44px 44px 0 0; padding: 8px 8px 0; }
picture { display: contents; }
.peek img { display: block; width: 232px; height: auto; aspect-ratio: 780 / 1692; border-radius: 36px 36px 0 0; }

.features { padding-top: 64px; }
.features h2 { font: 700 clamp(36px, 3.8vw, 52px)/1 var(--display); }
.feature-pair { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 20px; }
.feature-pair .shot-card { gap: 14px; }
.feature-pair .shot-card:first-child { flex: 2 1 560px; min-width: 0; }
.feature-pair .shot-card:last-child { flex: 1 1 320px; min-width: 0; }
.feature-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.feature h3 { font-size: 19px; font-weight: 700; }
.feature p { color: var(--text-2); font-size: 16px; }

.band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.split > div { flex: 1 1 440px; min-width: 0; }
.consistency-copy { display: flex; flex-direction: column; gap: 20px; }
.consistency-copy h2 { font: 700 clamp(40px, 4.4vw, 60px)/1 var(--display); }
.consistency-copy > p { font-size: 19px; color: var(--text-2); }
.ticks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: flex; gap: 12px; }
.ticks svg { flex: none; margin-top: 2px; }
.phones { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; }
.phone { flex: none; width: 224px; background: #000; border-radius: 38px; padding: 8px; box-shadow: 0 0 0 1.5px var(--phone-ring), 0 20px 50px rgba(0,0,0,.22); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 780 / 1692; border-radius: 30px; }
.phone.lower { margin-top: 48px; }
.phone.small { width: 208px; border-radius: 35px; }
.phone.small img { border-radius: 27px; }
.phone.dark { box-shadow: 0 0 0 1.5px var(--ink-border), 0 20px 50px rgba(27,26,24,.18); }

.privacy-band .section-title { font-size: clamp(40px, 5vw, 72px); line-height: .98; max-width: 860px; }
.dark-cards { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.dark-cards > div { background: var(--ink-raised); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.dark-cards .step { font: 700 32px/1.2 var(--display); color: var(--ember); }
.dark-cards h3 { font-size: 19px; }
.dark-cards p { font-size: 16px; color: var(--on-ink-2); }

.duo { display: flex; flex-wrap: wrap; gap: 20px; }
.duo .shot-card { flex: 1 1 460px; min-width: 0; border-radius: 20px; padding: 36px; gap: 16px; }
.duo h2 { font: 700 clamp(32px, 3vw, 42px)/1.02 var(--display); }
.duo .peek { margin: auto -36px -36px; }

.themes { padding-top: 88px; padding-bottom: 88px; gap: 40px; }
.themes > div:first-child { flex: 1 1 380px; }
.themes > div:last-child { flex: 1 1 460px; }
.themes h2 { font: 700 clamp(36px, 3.6vw, 50px)/1 var(--display); }
.themes p { margin-top: 14px; color: var(--text-2); font-size: 18px; }

.faq { max-width: 880px; }
.faq h2 { font: 700 clamp(36px, 3.8vw, 52px)/1 var(--display); }
.qa { margin-top: 28px; border-top: 1px solid var(--border); }
.qa details { border-bottom: 1px solid var(--border); padding: 20px 0; }
.qa summary { cursor: pointer; font-size: 19px; font-weight: 600; }
.qa details p { margin-top: 10px; color: var(--text-2); }

.final { position: relative; overflow: hidden; }
.final .glow { position: absolute; width: 760px; height: 760px; left: 50%; margin-left: -380px; top: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,61,.22) 0%, rgba(255,122,61,0) 65%); }
.final .wrap { position: relative; max-width: 900px; padding-top: 120px; padding-bottom: 120px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.final h2 { font: 700 clamp(56px, 7vw, 112px)/.92 var(--display); }
.final p { font-size: 20px; color: var(--on-ink-2); max-width: 560px; }
.final .cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.final .cta div { font-size: 14px; color: var(--on-ink-2); }
.final .cta a:not(.button) { color: var(--on-ink); }

.sticky-bar { position: sticky; bottom: 0; z-index: 10; background: rgba(18,17,16,.94); border-top: 1px solid var(--ink-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sticky-bar .wrap { padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sticky-bar .who { display: flex; align-items: center; gap: 12px; color: var(--on-ink); line-height: 1.2; }
.sticky-bar .who b { display: block; font-size: 15px; }
.sticky-bar .who span { display: block; font-size: 13px; color: var(--on-ink-2); }
.sticky-bar .button { min-height: 48px; padding: 0 22px; }
@media (max-width: 640px) {
  /* The sticky bar carries the invite on phones, so the header keeps to the brand. */
  .home .site-nav { display: none; }
  .hero-body { padding-top: 24px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .hero-body { padding-bottom: 72px; }
  .hero-phone .body { transform: none; box-shadow: 0 0 0 1.5px var(--ink-border), 0 30px 80px rgba(0,0,0,.5); }
  .hero-phone .floor { display: none; }
  .phone.lower { margin-top: 0; }
  .sticky-bar .who { display: none; }
  .sticky-bar .button { flex: 1; }
}

/* ---------- Privacy and support ---------- */
.page { padding-top: 72px; padding-bottom: 112px; }
.page h1 { margin-top: 8px; font: 700 clamp(44px, 5vw, 64px)/1 var(--display); }
.doc { max-width: 760px; font-size: 17px; line-height: 1.6; }
.doc .applies { margin-top: 14px; font-size: 15px; color: var(--text-2); }
.doc section { margin-top: 36px; }
.doc section h2 { font-size: 24px; }
.doc section p { margin-top: 12px; }
.doc .summary { margin-top: 36px; padding: 28px; }
.doc .summary h2, .doc .contact h2 { font-size: 20px; }
.doc .summary ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.doc .summary li { display: flex; gap: 12px; }
.doc .summary svg { flex: none; margin-top: 3px; }
.doc .summary + section { margin-top: 48px; }
.doc .contact { padding: 28px; box-shadow: none; }
.doc .contact p { margin-top: 10px; }

.support .lede { margin-top: 14px; font-size: 19px; color: var(--text-2); max-width: 620px; }
.support-grid { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.support-grid > section { min-width: 0; }
.answers { flex: 1 1 420px; }
.answers h2, .email-card h2 { font-size: 22px; }
.answers .qa { margin-top: 16px; }
.answers .qa details { padding: 18px 0; }
.answers .qa summary { font-size: 17px; }
.answers .qa details p { margin-top: 8px; }
.warning-note { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; background: var(--warning-subtle); border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.warning-note svg { flex: none; margin-top: 2px; }
.warning-note b { color: var(--warning); }
.email-card { flex: 1 1 460px; padding: 32px; }
.email-card > p { margin-top: 12px; color: var(--text-2); }
.tips { margin-top: 20px; background: var(--background); border-radius: 12px; padding: 18px 20px; }
.tips .label { font: 600 13px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.tips ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.email-card .button { display: flex; margin-top: 20px; }
.email-card .fine { margin-top: 14px; font-size: 14px; color: var(--text-2); }

/* ---------- Share page (/r) ---------- */
.share .wrap { max-width: 1040px; }
.share .site-header a.about { color: var(--on-ink-2); text-decoration: none; font-size: 15px; }
.share .site-header a.about:hover { color: var(--on-ink); }
.share main { padding-top: 56px; padding-bottom: 72px; }
.share-grid { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-start; }
.share-grid > section { flex: 999 1 520px; min-width: 0; }
.share h1 { margin-top: 4px; font: 700 clamp(44px, 5vw, 60px)/1 var(--display); overflow-wrap: anywhere; }
.share .summary { margin-top: 8px; color: var(--text-2); }
.exercises { list-style: none; margin: 24px 0 0; padding: 0; overflow: hidden; }
.exercise { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; }
.exercise + .exercise { border-top: 1px solid var(--border); }
.exercise .n { flex: none; width: 22px; padding-top: 1px; font: 700 20px/1.2 var(--display); color: var(--text-3); }
.exercise .row { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 16px; }
.exercise .what { flex: 1 1 240px; min-width: 0; }
.exercise .name { font-weight: 600; overflow-wrap: anywhere; }
.exercise .meta { font-size: 14px; color: var(--text-2); }
.exercise .meta b { color: var(--text); }
.superset-tag { margin-top: 6px; display: inline-block; font-size: 13px; font-weight: 600; color: var(--on-primary-subtle); background: var(--primary-subtle); border-radius: 999px; padding: 3px 10px; }
.exercise .range { margin-top: 4px; font-size: 14px; color: var(--text-2); }
/* Per-set targets: one numbered row per set, each with its own rest. */
.set-table { margin-top: 10px; max-width: 420px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; font-variant-numeric: tabular-nums; }
.set-table [role="row"] { display: grid; grid-template-columns: 52px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.set-table [role="row"] + [role="row"] { border-top: 1px solid var(--border); font-size: 15px; }
.set-table [role="columnheader"] { padding: 6px 10px; background: var(--background); font: 600 12px/1.5 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.set-table [role="cell"] { padding: 7px 10px; }
.set-table .set-n { font: 700 17px/1.4 var(--display); color: var(--text-3); }
.set-table .num { font: 600 18px/1.3 var(--display); white-space: nowrap; }
.set-table .last { font-style: italic; color: var(--text-2); }
.set-table .rest { color: var(--text-2); }
.drop-line { margin: 10px 0 0 4px; display: inline-flex; align-items: flex-start; gap: 8px; border: 1px dashed var(--border-strong); border-radius: 10px; padding: 7px 12px; font-size: 14px; color: var(--text-2); }
.drop-line svg { flex: none; margin-top: 2px; }
.drop-line b { color: var(--text); }
.exercise .goal { flex: 0 1 auto; min-width: 0; }
.exercise .targets { font: 600 21px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.exercise .rest-time { font-size: 14px; color: var(--text-2); }
.share .footnote { margin: 14px 4px 0; font-size: 14px; color: var(--text-2); }

.get { flex: 1 1 320px; min-width: 0; background: var(--get); border: 1px solid var(--get-border); color: var(--on-ink); border-radius: 16px; padding: 28px; position: relative; overflow: hidden; }
.get .glow { position: absolute; width: 360px; height: 360px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,61,.28) 0%, rgba(255,122,61,0) 65%); }
.get > div:last-child { position: relative; display: flex; flex-direction: column; gap: 16px; }
.get h2 { font-size: 22px; line-height: 1.25; }
.get .phone-only { font-size: 16px; color: var(--on-ink-2); }
.get .phone-only b { color: var(--on-ink); }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.steps li { display: flex; gap: 12px; }
.steps .dot { flex: none; width: 26px; height: 26px; border-radius: 13px; background: #3a2215; color: #ffb48f; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
/* Stands in for Apple's "Download on the App Store" badge, at its size, until the official artwork replaces it. */
.store-badge { align-self: flex-start; width: 162px; height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #000; color: #fff; text-decoration: none; border: 1px solid var(--badge-border); border-radius: 10px; }
.store-badge:hover { color: #fff; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.05; }
.store-badge small { font-size: 11px; }
.store-badge strong { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.open-app { align-self: flex-start; padding: 10px 0; color: var(--ember); font-weight: 600; font-size: 16px; text-decoration: none; }
.open-app:hover { color: #ff9a66; }
.open-app[hidden] { display: none; }
.send { padding-top: 18px; border-top: 1px solid var(--ink-border); }
.send h3 { font-size: 17px; }
.send p { margin-top: 6px; font-size: 14px; color: var(--on-ink-2); }
.copy { all: unset; cursor: pointer; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ember); font-weight: 600; font-size: 15px; }
.copy:focus-visible { outline: 3px solid #2457d6; outline-offset: 2px; border-radius: 4px; }
.copy.copied { color: #4fd1c5; }
.copy.failed { color: #f5b547; }
.notice { max-width: 560px; margin: 40px auto; padding: 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.notice h1 { font: 700 24px/1.25 var(--body); margin-top: 4px; }
.notice p { color: var(--text-2); }
.notice .icon { width: 52px; height: 52px; border-radius: 26px; background: var(--warning-subtle); display: flex; align-items: center; justify-content: center; }
.notice a { margin-top: 8px; font-weight: 600; }
.share-footer { border-top: 1px solid var(--border); }
.share-footer .wrap { padding-top: 24px; padding-bottom: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: var(--text-2); }
.share-footer nav { display: flex; gap: 24px; }
/* Which device: on iPhone and iPad (the page script adds .ios), "open this link again" and Open it; elsewhere the
   steps and Copy link. */
.phone-only { display: none; }
.ios .phone-only { display: block; }
.ios .desktop-only { display: none; }