/* Site styles for / and /blessers.
   Brand tokens: brand/design.md (unchanged) */
:root {
  --bg:          #0A0A0A;
  --surface:     #151515;
  --card:        #1F1F1F;
  --primary:     #1A1A1A;
  --secondary:   #2A2A2A;

  --text:        #FFFFFF;
  --text-2:      #B3B3B3;
  --text-3:      #666666;

  --gray-light:  #E5E5E5;
  --gray:        #808080;
  --gray-dark:   #404040;

  --glass:        rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.10);

  --gold:        #FFD700;
  --gold-light:  #FFF8DC;

  /* Layout tokens: brand/layout.md (Hims) */
  --max:          1200px;
  --wrap-pad:     16px;
  --section-gap:  clamp(72px, 9vw, 90px);
  --card-pad:     32px;
  --gap:          20px;
  --panel-pad:    clamp(32px, 5vw, 64px);
  --r-card:       30px;
  --r-feature:    45px;
  --r-nav:        52px;
  --r-phone:      48px;
  --shadow-card:  0 27px 104px rgba(0, 0, 0, 0.6);
  --shadow-nav:   0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-phone: 0 9px 46px rgba(0, 0, 0, 0.7);

  --f-head: "Montserrat", system-ui, sans-serif;
  --f-body: "DM Sans", system-ui, sans-serif;
}
@media (min-width: 720px) { :root { --wrap-pad: 32px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--wrap-pad); }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.label {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.083em;
  text-transform: uppercase;
  color: var(--gray);
}
.display, .h, .h-sm {
  font-family: var(--f-head);
  font-weight: 800;
  margin: 0;
}
/* Display pair: light line over heavy line, gold period */
.display { font-size: clamp(48px, 11.5vw, 141px); line-height: 1.04; letter-spacing: -0.03em; }
.display .light { display: block; font-weight: 300; }
.display .dot { color: var(--gold); }
.h    { font-size: clamp(32px, 4.4vw, 44px); line-height: 1.15; letter-spacing: -0.017em; }
.h-sm { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2;  letter-spacing: -0.017em; }
.sub  { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.4; color: var(--text-2); margin: 0; }
.body { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: var(--text-2); margin: 0; }
.caption { font-size: 13px; color: var(--text-3); }
.display, .h, .h-sm, .sub { text-wrap: balance; }
.body { text-wrap: pretty; }

.wordmark {
  font-family: var(--f-head);
  font-weight: 300;
  letter-spacing: 1.5px;
  color: var(--text);
}
.wordmark .dot { color: var(--gold); font-weight: 900; letter-spacing: 0; }
/* The stamp's wordmark ends in a gold "app" (stamp.dart, blessed_card.dart). */
.wordmark .app { color: var(--gold); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease-out, background-color 150ms, color 150ms;
}
.btn:active { transform: scale(0.96); transition-duration: 80ms; }
.btn-primary { background: var(--text); color: var(--primary); }
.btn-primary:hover { background: var(--gray-light); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--gray-dark); }
.btn-ghost:hover { background: var(--text); color: var(--primary); border-color: var(--text); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn.is-soon { background: transparent; color: var(--text-2); border-color: var(--gray-dark); cursor: default; transition: none; }
.btn .arrow { font-weight: 500; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Nav: floating glass pill ---------- */
.nav { position: sticky; top: 0; z-index: 10; padding-top: 12px; }
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 22px;
  border-radius: var(--r-nav);
  background: rgba(21, 21, 21, 0.7);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-nav);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; }
/* The mark is wide (~1.7:1), so size it by height */
.brand img { height: 28px; width: auto; }

/* Smallest phones: keep the wordmark and Download apart */
@media (max-width: 359px) {
  .brand { gap: 8px; font-size: 15px; }
  .brand img { height: 24px; width: auto; }
  .nav-bar { padding-left: 16px; }
  .nav-bar > .btn { padding: 8px 14px; font-size: 13px; }
}

/* Get blessed | For blessers: two pages that read as one switch.
   In the bar from 720px; below that, its own row under the bar. */
.nav-bar { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav-bar .brand { justify-self: start; }
.nav-bar > .btn { justify-self: end; }
.switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
}
.switch a {
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
  transition: color 150ms, background-color 150ms;
}
.switch a:hover { color: var(--text); }
.switch a[aria-current="page"] { background: var(--secondary); color: var(--text); }
.switch-row { display: none; }

/* Switching pages (/, /blessers, the legal pages) cross-fades, and the filled pill
   glides from one tab to the other. Browsers without cross-document view
   transitions (Firefox for now) just load the page. Also in legal.css. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .switch a[aria-current="page"] { view-transition-name: switch-pill; }
  ::view-transition-group(switch-pill) { animation-duration: 300ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
}
@media (max-width: 719px) {
  .nav-bar { grid-template-columns: 1fr auto; }
  .nav-bar .switch { display: none; }
  /* Compact and centered, so it reads as a control, not a second bar */
  .switch-row { display: flex; justify-content: center; padding-top: 12px; }
  .switch-row .switch { padding: 3px; }
  .switch-row .switch a { padding: 7px 16px; font-size: 13px; }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(56px, 9vw, 120px); text-align: center; overflow-x: clip; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.hero .sub { max-width: 34ch; }
/* Phones: less air above and below, buttons side by side, so the hero phone
   starts on the first screen */
@media (max-width: 599px) {
  .hero { padding-top: 40px; }
  .hero .wrap { gap: 24px; }
  .hero .btn-row { gap: 10px; }
  .hero .btn { padding: 13px 20px; font-size: 15px; }
  .hero .stage { margin-top: 0; padding-top: 24px; }
}

/* The hero phone over a faint gold halo */
.stage { position: relative; display: flex; justify-content: center; width: 100%; margin-top: 32px; padding: 48px 0 24px; }
.stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1000px, 100%);
  height: 100%;
  translate: -50% 0;
  background: radial-gradient(farthest-side, rgba(255, 215, 0, 0.16), rgba(255, 215, 0, 0.05) 55%, transparent);
  pointer-events: none;
}

/* Hero screen: the app's welcome animation, recorded in the simulator. The phone is cut
   off under the stamp and fades into the page, so the app's own headline and button
   stay out of it. The screen below the clip is the app's own background. */
.phone.hero-clip { height: auto; padding-bottom: 0; border-bottom: 0; border-radius: var(--r-phone) var(--r-phone) 0 0;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(#000 calc(100% - 72px), transparent); }
.phone.hero-clip .screen { height: auto; padding: 0 0 56px; background: #0F0F0F; border-radius: calc(var(--r-phone) - 10px) calc(var(--r-phone) - 10px) 0 0; }
.hero-clip img, .hero-clip video { display: block; width: 100%; height: auto; }
.hero-clip .clip { display: none; }
.hero-clip.is-armed .clip { display: block; }
.hero-clip.is-armed .still { display: none; }

/* ---------- Phone mockup ---------- */
.phone {
  position: relative;
  z-index: 1;
  flex: none;
  width: 290px;
  height: 600px;
  padding: 10px;
  border-radius: var(--r-phone);
  background: #000;
  border: 1px solid var(--gray-dark);
  box-shadow: var(--shadow-phone);
  text-align: left;
  letter-spacing: 0;
}
@media (max-width: 399px) { .phone { width: 260px; height: 560px; } }
.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--r-phone) - 10px);
  background: var(--bg);
  padding: 46px 16px 16px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.screen::before { /* dynamic island */
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 84px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

/* Round avatar with an initial; profile and /stamp pages size it and may put a photo in it */
.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(140deg, #3a3a3a, #1f1f1f);
  border: 1px solid var(--glass-border);
  display: grid;
  place-items: center;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 14px;
}

/* Real app screenshots (How it works, /blessers). They fill the screen from the top; the
   drawn dynamic island sits over the real one. */
.shot .screen { padding: 0; }
.shot .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot .screen::before { z-index: 1; }

/* The pick (How it works, step 03): the request shows "Pending", then crossfades to
   Elena's answer. Both screenshots are aligned so only the content changes. The
   answer is the default, so without JS (or with reduced motion) the card simply shows
   the pick. .is-armed = before, .is-run = animating. */
.pick .before { opacity: 0; }
.pick.is-armed .before { opacity: 1; }
.pick.is-run .before { transition: opacity 1400ms ease-in-out; }

/* ---------- Sections: one centered column ---------- */
section { scroll-margin-top: 96px; }
.section { padding-top: var(--section-gap); }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: 64px; }
.section-head .sub { max-width: 40ch; }
@media (max-width: 599px) { .section-head { gap: 16px; margin-bottom: 32px; } }
/* How it works heading: other questions typed in turn (site.js). The caret shows
   only while that runs. */
.ask .caret { display: none; width: 3px; height: 0.85em; margin-left: 3px; vertical-align: -0.05em; background: var(--gold); animation: blink 1s steps(1) infinite; }
.ask.is-typing .caret { display: inline-block; }

/* 3 hours: the app's countdown (expiration_countdown_panel.dart) large, but a step
   below the hero's display pair so the two don't compete. Tabular figures so the digits
   don't shift as it ticks (site.js). */
.clock { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.clock-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--text-2); }
.clock-row { display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px, 2vw, 28px); }
.clock-seg { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.clock-num, .clock-colon {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.clock-colon { font-weight: 400; color: var(--gray-dark); }
/* One block with the clock: no heading of its own, the sentence opens in white */
.clock-note { max-width: 40ch; margin: 40px auto 0; text-align: center; }
.clock-note strong { font-weight: 500; color: var(--text); }
@media (max-width: 599px) { .clock { gap: 16px; } .clock-seg { gap: 8px; } .clock-note { margin-top: 28px; } }

/* Feature panel: the large rounded surface */
.panel {
  padding: var(--panel-pad);
  border-radius: var(--r-feature);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
}

/* How it works: each step is its screen, then its copy.
   Phones: stacked, copy above a smaller screen, so all four steps show as you scroll.
   2×2 from 720px, one row of four from 1200px. */
.steps { display: grid; gap: 56px; }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.step .phone { margin-bottom: 40px; }
.step .label { margin-bottom: 8px; }
.step .h-sm { font-size: 24px; margin-bottom: 12px; }
.step .body { max-width: 32ch; }
@media (max-width: 719px) {
  /* A clear step down from the section head: smaller heading, quieter copy */
  .step .h-sm { font-size: 20px; margin-bottom: 8px; }
  .step .body { font-size: 15px; color: var(--gray); margin-bottom: 24px; }
  /* Copy first, then the screen, scaled down whole so nothing inside rewraps */
  .step .phone { order: 1; width: 290px; height: 600px; margin: 0; zoom: 0.8; }
}
@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 72px 32px; }
}
@media (min-width: 1200px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .step .phone { zoom: 0.86; }
  .step .h-sm { font-size: 22px; }
}

/* The stamp (stamp.dart): laid out as a credential. The QR first with "scan to
   verify" under it, the claim right-aligned opposite it and signed off with the
   domain, the mark as a faint watermark behind them. Sizes follow stamp.dart, in
   units of the card's height (--h). */
/* No panel behind the stamp: its own gold frame is the only frame in the section */
.stamp-panel { display: flex; justify-content: center; }
.anatomy { position: relative; container-type: inline-size; width: 100%; max-width: 720px; }
.stamp {
  --h: calc(100cqw / 2.8);
  --qr: calc(var(--h) * 0.58);
  /* "SCAN TO VERIFY" spans the tile; the domain shares its size. Floor so it stays readable on phones */
  --label: max(calc(var(--qr) / 10.8), 8px);
  --label-gap: calc(var(--h) * 0.035);
  --pad: calc(var(--h) * 0.12);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--pad);
  aspect-ratio: 2.8 / 1;
  padding: 0 var(--pad);
  border-radius: calc(var(--h) * 0.16);
  /* No shadow here: the app's black one is for sitting on photos and reads as a
     dark ring on the flat page. Metallic gold hairline, not --gold at low alpha
     (which turns olive over near-black). */
  background: linear-gradient(135deg, #1C1C1C, #121212);
  letter-spacing: 0;
}
/* The border goes over the watermark, which would otherwise dim it where it runs off the edge */
.stamp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(212, 175, 55, 0.5); pointer-events: none; }
/* Centred and a bit taller than the card, so the fingertips run off the edges and
   it reads as printed in rather than placed on */
.stamp .mark { position: absolute; left: 50%; top: 50%; height: 110%; width: auto; max-width: none; transform: translate(-50%, -50%); opacity: 0.15; pointer-events: none; }
.stamp .verify, .stamp .lines { position: relative; }
.stamp .lines { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
/* "BLESSED BY" sits tight to the name and the date stands off, so the lines read
   as one claim plus a footnote rather than three equal items */
.stamp .handle { margin-top: calc(var(--h) * 0.02); }
/* Lifted a little (half of this), so the caption and the domain under it centre
   together and the date stands clear of the domain rather than halfway between
   it and the name */
.stamp .lines { margin-bottom: calc(var(--h) * 0.08); }
.stamp .when { margin-top: calc(var(--h) * 0.075); }
/* Letter spacing trails the last glyph too, but the username's own right side
   bearing is about as wide, so the two ends line up as is */
.stamp .bb { font-family: var(--f-head); font-weight: 600; font-size: max(calc(var(--h) * 0.09), 9px); line-height: 1; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.62); }
.stamp .handle { max-width: 100%; font-family: var(--f-head); font-weight: 700; font-size: calc(var(--h) * 0.21); line-height: 1.1; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stamp .when { font-family: var(--f-head); font-weight: 500; font-size: max(calc(var(--h) * 0.1), 11px); line-height: 1; color: rgba(255, 255, 255, 0.6); }
.stamp .verify { flex: none; width: var(--qr); }
/* The label hangs under the tile, out of the flow, so only the bright tile takes
   part in the centring and the scanner corners (measured from .verify) frame just
   the code. "SCAN TO VERIFY" is the call to action: brighter and bolder than the domain. */
.stamp .verify span,
.stamp .domain { font-family: var(--f-head); font-weight: 600; font-size: var(--label); line-height: 1.2; letter-spacing: 0.12em; white-space: nowrap; color: rgba(255, 255, 255, 0.5); }
.stamp .verify span { position: absolute; top: calc(100% + var(--label-gap)); left: 50%; transform: translateX(-50%); font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.stamp .verify img { display: block; width: 100%; padding: calc(var(--qr) * 0.07); background: #fff; border-radius: calc(var(--qr) * 0.12); }
/* Bottom-right, on the "scan to verify" line: the caption ends on its issuer like a signature */
.stamp .domain { position: absolute; right: var(--pad); top: calc((var(--h) + var(--qr)) / 2 + var(--label-gap)); }
.stamp .domain .app { color: var(--gold); }
/* Phones: the labels sit at their 8px floor, so they need a bit more room under
   the tile to clear the QR's scanner corners */
@container (max-width: 520px) {
  .stamp { --label-gap: 8px; }
}

/* Stamp anatomy: notes that point at the parts of the stamp.
   Without JS: a labeled list under the stamp. The script below adds
   .is-drawn, places the notes and draws the leaders in an SVG, measured
   from the real text, so they land exactly on their targets at any width. */
.notes { list-style: none; margin: 24px 0 0; padding: 0; text-align: left; }
.note { padding: 16px 0; border-top: 1px solid var(--glass-border); color: var(--text-2); font-size: 15px; line-height: 1.45; }
.note:last-child { border-bottom: 1px solid var(--glass-border); }
.note .label { display: block; margin-bottom: 4px; }
.note-t { display: block; text-wrap: pretty; }
.note b { color: var(--text); font-weight: 500; }
.leaders { display: none; }
.anatomy.is-drawn .notes { margin: 0; }
.anatomy.is-drawn .note { position: absolute; width: 260px; padding: 0; border: 0; font-size: 16px; }
.anatomy.is-drawn .note .label { display: none; }
.anatomy.is-drawn .n-name, .anatomy.is-drawn .n-qr { top: 0; }
/* Wide: notes face outward from their leaders */
.anatomy.is-drawn .n-name, .anatomy.is-drawn .n-date { text-align: left; }
.anatomy.is-drawn .n-qr { text-align: right; }
.anatomy.is-drawn .n-date { bottom: 0; }
/* Narrow: notes pinned to the edges, two above the stamp, one below */
.anatomy.is-narrow .note { width: calc(50% - 8px); font-size: 14px; }
.anatomy.is-narrow .n-name, .anatomy.is-narrow .n-date { text-align: right; }
.anatomy.is-narrow .n-qr { text-align: left; }
.anatomy.is-narrow .note.n-date { width: 75%; }
.anatomy.is-drawn .leaders { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Quiet white guides with gold dots: the stamp's gold border stays the only gold frame,
   and the dots carry the accent (gold is punctuation) */
.leaders path { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.leaders circle { fill: var(--gold); }

/* Stamp anatomy motion, once, when the stamp scrolls into view (script in index.html):
   the stamp rises in, then each part is annotated in turn: name, QR (with one scan
   sweep), date. Lines draw from their dot to their target; notes fade up after.
   .is-armed = hidden start state, .is-play = running; neither = finished. */
.stamp .verify { position: relative; }
.stamp .verify .scan {
  position: absolute;
  top: 0;
  left: -0.8cqw;
  right: -0.8cqw;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(255, 215, 0, 0.45);
  opacity: 0;
  pointer-events: none;
}
.anatomy.is-armed .stamp,
.anatomy.is-armed .note,
.anatomy.is-armed .leaders > * { opacity: 0; }
.anatomy.is-play .stamp { animation: stamp-rise 400ms ease-out both; }
.anatomy.is-play .note { animation: stamp-rise 300ms ease-out var(--d, 0ms) both; }
.anatomy.is-play .leaders path { stroke-dasharray: 1; animation: stamp-draw 400ms ease-out var(--d, 0ms) both; }
.anatomy.is-play .leaders circle { transform-box: fill-box; transform-origin: center; animation: stamp-pop 170ms ease-out var(--d, 0ms) both; }
.anatomy.is-play .scan { animation: stamp-scan 650ms ease-in-out 850ms both; }
@keyframes stamp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes stamp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes stamp-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes stamp-scan {
  0% { top: 0; opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { top: var(--qr); opacity: 0; }
}

/* For blessers: a quiet aside after the closing, so the page's last big words
   stay with senders. One line on desktop, single weight, no white button. */
.bless-aside { padding-bottom: clamp(56px, 7vw, 80px); }
.bless-aside .wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.aside-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; }
.bless-aside .h-sm { font-size: clamp(20px, 2vw, 24px); }

/* Profile link: an address bar that types example usernames */
.link-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin-top: 8px;
  padding: 16px 24px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: 0;
  color: var(--text-2);
  white-space: nowrap;
}
.link-bar svg { flex: none; width: 20px; height: 20px; stroke: var(--gold); stroke-width: 1.5; fill: none; }
@media (max-width: 399px) {
  .link-bar { padding: 14px 18px; font-size: 15px; }
  .link-bar svg { display: none; }
}
@media (max-width: 349px) { .link-bar { padding: 12px 14px; font-size: 13px; } }
.link-bar b { color: var(--text); font-weight: 800; }
.link-bar .caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--gold); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .link-bar .caret { display: none; } }

/* Questions (/ and /blessers): open and close, no dividers */
.faq { width: 100%; max-width: 680px; margin: 48px auto 0; text-align: left; display: grid; gap: 12px; }
.faq details { border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--glass-border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 300; font-size: 24px; line-height: 1; color: var(--text-2); transition: transform 150ms ease-out; }
.faq details[open]:not(.is-closing) summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 24px 22px; overflow: hidden; color: var(--text-2); text-wrap: pretty; }
.section-head + .faq { margin-top: 0; }

/* Closing */
.closing { text-align: center; padding: calc(var(--section-gap) * 1.5) 0 var(--section-gap); }
.closing .wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.closing .sub { max-width: 34ch; }

/* Footer: centered stack */
footer { padding: 0 0 48px; }
footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 40px;
  border-top: 1px solid var(--glass-border);
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text-2);
}
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
footer a:hover { color: var(--text); }
footer .legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-family: var(--f-body); font-weight: 400; font-size: 13px; color: var(--gray); }
footer .legal a:hover { color: var(--text-2); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }