/* ATX Friends — atxfriends.app
   UT palette: burnt orange, charcoal, limestone. Follows the phone's light/dark setting. */
:root {
  --orange: #BF5700;
  --orange-ink: #9E4800;      /* orange that passes contrast on white for small text */
  --charcoal: #333F48;
  --limestone: #D6D2C4;
  --paper: #FFFFFF;
  --wash: #F3F1EC;            /* light limestone wash for alternating bands */
  --text: #333F48;
  --muted: #5B6770;
  --card: #FFFFFF;
  --line: #D6D2C4;
  --on-orange: #FFFFFF;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --font: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color-scheme: light dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --orange: #E8772E;
    --orange-ink: #F0934F;
    --paper: #1E262C;
    --wash: #252F36;
    --text: #ECE9E1;
    --muted: #AEB5BA;
    --card: #2B363E;
    --line: #3E4B55;
    --on-orange: #1E262C;
  }
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-optical-sizing: auto;
}
img, svg { max-width: 100%; }
a { color: var(--orange-ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }

/* Top bar */
.top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding-block: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; color: var(--text); text-decoration: none; letter-spacing: -.01em; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--orange); display: grid; place-items: center; color: var(--on-orange); font-size: .95rem; font-weight: 800; }
.top nav a { color: var(--muted); text-decoration: none; font-weight: 600; margin-left: 1.25rem; }
.top nav a:hover { color: var(--text); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding-block: 3.5rem 5rem; }
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0 0 1.4rem;
  font-stretch: 90%;
}
.hero h1 span { display: block; color: var(--orange); }
.hero .lede { font-size: 1.2rem; color: var(--muted); max-width: 34ch; margin: 0 0 2rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.btn {
  display: inline-block; background: var(--orange); color: var(--on-orange);
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
  padding: .95rem 1.5rem; border-radius: 999px;
}
.btn:hover { filter: brightness(1.08); }
.note { color: var(--muted); font-size: .95rem; }

/* The plan card: the one memorable thing */
.plan-stage { position: relative; min-height: 360px; }
.plan {
  position: absolute; inset: auto 0 0 auto; width: min(340px, 100%);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 24px 50px -28px rgba(51, 63, 72, .55);
}
.plan.back { inset: 0 auto auto 0; transform: rotate(-5deg); opacity: .9; }
.plan.front { transform: rotate(2.5deg); animation: settle .9s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes settle { from { transform: translateY(28px) rotate(9deg); opacity: 0; } to { transform: rotate(2.5deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .plan.front { animation: none; } }
.plan .status { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--orange-ink); background: color-mix(in srgb, var(--orange) 14%, transparent); padding: .2rem .65rem; border-radius: 999px; margin-bottom: .8rem; }
.plan h3 { margin: 0 0 .9rem; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.02em; }
.plan dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; font-size: .98rem; }
.plan dt { color: var(--muted); }
.plan dd { margin: 0; font-weight: 600; }
.plan .why { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px dashed var(--line); font-size: .9rem; color: var(--muted); }
.plan .cal { margin-top: 1rem; display: block; text-align: center; border: 1.5px solid var(--orange); color: var(--orange-ink); border-radius: 999px; padding: .55rem; font-weight: 700; font-size: .95rem; }

/* Bands */
.band { padding-block: 5rem; }
.band.alt { background: var(--wash); }
.band h2, .final h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 1rem; font-weight: 800; max-width: 22ch; }
.band .intro { color: var(--muted); max-width: 58ch; margin: 0 0 2.75rem; font-size: 1.1rem; }

/* Steps: this content really is a sequence */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--orange); color: var(--on-orange); font-weight: 800; margin-bottom: 1rem;
}
.steps h3 { margin: 0 0 .4rem; font-size: 1.2rem; letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--muted); }

/* Promises */
.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 3.5rem; margin: 0; }
.promises dt { font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: .3rem; }
.promises dd { margin: 0; color: var(--muted); max-width: 44ch; }
.pull { margin: 3.5rem 0 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; max-width: 30ch; border-left: 5px solid var(--orange); padding-left: 1.25rem; }

/* Two-column band */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.split p { max-width: 50ch; }

/* Final call */
.final { text-align: center; padding-block: 5.5rem; }
.final h2 { margin-inline: auto; max-width: 18ch; }
.final .actions { justify-content: center; }

/* Footer */
footer { border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; color: var(--muted); font-size: .95rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
footer nav a { color: var(--muted); margin-right: 1.25rem; }

/* Legal pages */
.doc { max-width: 70ch; margin-inline: auto; padding-block: 2.5rem 5rem; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -.03em; line-height: 1.05; margin: 0 0 .5rem; }
.doc .updated { color: var(--muted); margin: 0 0 2.5rem; }
.doc h2 { font-size: 1.35rem; letter-spacing: -.01em; margin: 2.5rem 0 .6rem; }
.doc p, .doc li { max-width: 68ch; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: .45rem; }
.doc .summary { background: var(--wash); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; }
.doc .summary p { margin: 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-block: 1.5rem 3.5rem; gap: 2.5rem; }
  .plan-stage { min-height: 340px; max-width: 380px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .promises, .split { grid-template-columns: 1fr; gap: 2rem; }
  .band { padding-block: 3.75rem; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .top nav a:not(.keep), .top nav .wide { display: none; }
  .top nav { display: flex; gap: .9rem; }
  .top nav a { margin-left: 0; }
}