/* ===========================================================================
   Transplant Organizers – shared site styles
   ---------------------------------------------------------------------------
   Every public page links this file. Change a colour, a font, or a corner
   radius HERE and it changes everywhere. Nothing in this file should be
   duplicated into a page.

   The page colour is the sand ground the homepage uses. Cards float on it.
   Terracotta is the only accent, and it is nearly always italic. Everything
   structural is warm grey or a hairline rule – never a logo colour.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400&family=Inter:wght@400;500;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* the logo swirl, sampled from assets/images/icon.png */
  --cream:#FAF6EE; --sky:#519BE2; --sand:#F3D194; --green:#327A62;
  --peri:#67619F; --blue:#3C68AF; --rose:#B26265; --teal:#1D7576;
  --lilac:#CCA3C1; --terracotta:#C87764; --gold:#C6A24C;

  /* the system */
  --ink:#141010;          /* text and controls only -- never a large surface */
  --deep:#2A4467;         /* large dark surfaces: dark cards, the app sidebar */
  --ground:#F2E7CF;       /* the page itself */
  --surface:#FFFCF5;      /* card faces */
  --body:#3A322C;         /* body copy */
  --soft:#7A6E64;         /* labels, captions, footers */
  --line:rgba(20,16,16,.12);
  --edge:rgba(20,16,16,.16);
  --corner:6px;

  /* text on ink */
  --on-ink:#E2E8F1;
  --on-ink-soft:#D6DEEB;
  --on-ink-line:rgba(250,246,238,.18);

  /* THE BACKGROUND SWIRL. 0 hides it. .12 is texture, .28 is a picture. */
  --swirl:.12;
}

body{font-family:'Inter',sans-serif;background:var(--ground);color:var(--ink);
  font-size:16.5px;line-height:1.68;min-height:100vh}
img{max-width:100%;display:block}
a{color:var(--terracotta)}
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* the swirl, fixed behind everything – same trick as the app's BackgroundLogo */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--swirl)}

/* ---------- header ---------- */
/* Navy chrome. The header and footer are the same band the emails use, so a
   page and a message from us read as the same company. Content stays on sand
   between them. Revert by setting both backgrounds to transparent and the text
   back to var(--soft). */
header.site{display:flex;align-items:center;justify-content:space-between;
  padding:20px 34px;border-bottom:0;
  background:var(--deep);position:relative;z-index:2}
.back,.login{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-soft);text-decoration:none}
.back:hover,.login:hover{color:#fff}

/* ---------- layout ---------- */
main{max-width:1000px;margin:0 auto;padding:20px 32px 10px}
.col{max-width:660px}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1.5px solid var(--edge);border-radius:var(--corner);
  box-shadow:0 18px 44px -24px rgba(20,16,16,.30);
  padding:38px 42px;margin-bottom:20px}

/* the dark moment. Use it once per page, for the thing that matters most.
   Warm brown, not ink -- ink is reserved for text and controls. */
.card.ink{background:var(--deep);border-color:transparent;color:var(--on-ink);
  box-shadow:0 24px 56px -20px rgba(20,16,16,.45)}
.card.ink h1,.card.ink h2,.card.ink h3{color:var(--cream)}
.card.ink p,.card.ink li{color:var(--on-ink-soft)}
.card.ink strong{color:#fff}
.card.ink .label{color:var(--sand)}
.card.ink li::before{background:transparent;border:1.5px solid var(--terracotta)}
.card.ink a{color:var(--sand)}

/* ---------- type ---------- */
h1{font-family:'Fraunces',serif;font-weight:300;text-wrap:balance;
  font-size:clamp(30px,3.6vw,46px);line-height:1.05;letter-spacing:-.035em;margin-bottom:18px}
h1 em{font-style:italic;color:var(--terracotta);display:block}
h2{font-family:'Fraunces',serif;font-weight:300;text-wrap:balance;
  font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.035em;margin-bottom:18px}
h2 em{font-style:italic;color:var(--terracotta)}
h3{font-size:16px;font-weight:600;margin-bottom:6px}
p{color:var(--body);margin-bottom:15px;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}
.lede{font-size:17.5px;line-height:1.68;color:var(--body);max-width:56ch;text-wrap:pretty}
/* a hero is centred, so its lede has to be centred within its own 56ch measure
   rather than sitting flush left inside a centred card */
.hero .lede{margin-left:auto;margin-right:auto}

ul{list-style:none;margin-bottom:15px}
ul:last-child{margin-bottom:0}
li{position:relative;padding-left:22px;margin-bottom:10px;color:var(--body);text-wrap:pretty}
li:last-child{margin-bottom:0}
li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--teal)}

/* ---------- one label style, used everywhere ----------
   Small, uppercase, widely spaced, warm grey. Colour only ever varies where
   the colour carries meaning. */
.label{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.kicker{margin-bottom:14px;color:var(--terracotta)}
.eyebrow{margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--line);
  display:inline-block}

/* ---------- actions ---------- */
.ctarow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.cta{display:inline-block;text-decoration:none;font-size:13px;font-weight:600;
  padding:14px 28px;border-radius:999px;background:var(--ink);color:var(--cream);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55);transition:transform .2s}
.cta:hover{transform:translateY(-2px)}
.cta.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);
  box-shadow:none}

.pillbadge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--rose);
  padding:6px 13px;border-radius:999px}

/* ---------- numbered steps ---------- */
.step{display:flex;gap:20px;margin-bottom:28px;align-items:flex-start}
.step:last-child{margin-bottom:0}
.step .num{font-family:'Fraunces',serif;font-size:15px;font-weight:400;
  width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step h3{margin-bottom:6px}
.step p{font-size:15px;line-height:1.65}
.card.ink .step .num{background:var(--cream);color:var(--ink)}

/* ---------- fine print ---------- */
.fine{font-size:12px;color:var(--soft);line-height:1.55;margin-top:11px;font-style:italic}
.disclaimer{max-width:1000px;margin:0 auto;padding:0 32px 26px;
  font-size:12px;line-height:1.7;color:#6A5F56;text-align:center;text-wrap:pretty}
.disclaimer span,.disclaimer .inner{display:inline-block;background:rgba(255,252,245,.75);
  border-radius:var(--corner);padding:16px 24px;max-width:760px;text-align:left}

/* ---------- promise ---------- */
.promise{background:var(--surface);border:1.5px solid var(--edge);border-radius:var(--corner);
  box-shadow:0 18px 44px -24px rgba(20,16,16,.30);
  text-align:center;padding:34px 42px;margin-bottom:20px}
.promise .big{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(20px,2.6vw,30px);
  letter-spacing:-.02em;margin-bottom:10px;color:var(--ink)}
.promise .big em{font-style:italic;color:var(--terracotta)}

/* ---------- footer ---------- */
footer{border-top:0;padding:30px 34px;display:flex;background:var(--deep);
  justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:11.5px;color:#E2E8F1}
/* Links are brighter than the text beside them, not a different hue. Sand on
   navy is a saturated warm against a cool dark and it vibrates at the edges. */
footer a{color:#E2E8F1;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}

@media(max-width:900px){
  main{padding:14px 20px 6px}
  .card{padding:30px 24px}
  header.site{padding:18px 20px}
  footer{flex-direction:column;text-align:center;padding:26px 20px}
  .disclaimer{padding:0 20px 26px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}