/* GiftCourier marketing site.
 *
 * Palette and type are lifted from the gift email (app/lib/email/render.ts),
 * which is the app's most visible branded surface: plum header, Polaris greys,
 * system type, 8/12px radii. A merchant who sees this site and then sees a gift
 * email should recognise the same product.
 *
 * Deliberately light only. The email is light only, and committing to one look
 * keeps this file small enough to read in one sitting.
 */

:root {
  --plum: #4a154b;
  --plum-deep: #350f36;
  --ink: #202223;
  --body: #42474c;
  --muted: #6d7175;
  --faint: #8c9196;
  --surface: #f1f2f4;
  --card: #ffffff;
  --subtle: #f6f6f7;
  --line: #dfe3e8;
  --notice-bg: #fff4e4;
  --notice-line: #e1b878;
  --notice-ink: #5e4200;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Courier New", monospace;

  --r-sm: 8px;
  --r-lg: 12px;
  --wrap: 780px;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--plum); }
a:hover { color: var(--plum-deep); }

h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0; }
h1 { font-size: 2rem; letter-spacing: -0.02em; }
h2 { font-size: 1.3rem; margin-top: 2.5rem; }
h3 { font-size: 1rem; margin-top: 1.75rem; }
p  { margin: 0.85rem 0; }

/* ---------- header ---------- */

.site-head {
  background: var(--plum);
  color: #fff;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.brand svg { display: block; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.94rem;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: #fff; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--plum);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 11px 20px;
  border-radius: var(--r-sm);
}
.btn:hover { background: var(--plum-deep); color: #fff; }
.site-nav .btn { background: #fff; color: var(--plum); }
.site-nav .btn:hover { background: var(--subtle); color: var(--plum-deep); }

/* ---------- hero ---------- */

.hero {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 48px;
}
/*
 * The hero fills the column, like everything below it.
 *
 * It used to cap the headline at 18ch, which on a 780px page left the right
 * 45% empty. With no illustration to put there, that void reads as an image
 * that failed to load rather than as deliberate space. A headline can carry a
 * longer measure than body text, so it takes the full width; the lede keeps a
 * reading measure, which is what the slight rag below the headline is for.
 */
.hero h1 { font-size: 2.4rem; max-width: 24ch; }
.hero .lede {
  font-size: 1.15rem;
  color: var(--body);
  max-width: 58ch;
  margin: 1rem 0 1.75rem;
}

/* ---------- content blocks ---------- */

main { padding: 8px 0 56px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin: 20px 0;
}

.notice {
  background: var(--notice-bg);
  border: 1px solid var(--notice-line);
  color: var(--notice-ink);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 0.95rem;
}

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 20px 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 44px;
  margin: 18px 0;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--plum);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.steps strong { color: var(--ink); }

.ticks { list-style: none; padding: 0; margin: 20px 0; }
.ticks li {
  position: relative;
  padding-left: 26px;
  margin: 12px 0;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 11px;
  border: solid var(--plum);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- pricing ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.plan {
  position: relative; /* for .tag, which straddles the top border */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}
.plan.is-featured { border-color: var(--plum); }
.plan .tag {
  /* Straddles the top border rather than sitting in the flow, so the featured
     card's title and PRICE stay on the same baseline as the other two. That
     alignment is the whole point of quoting annual as $8.25 a month: the reader
     compares it against $9.99 by looking straight across, and a badge that
     shunted this card's price down by 30px would undo it. */
  position: absolute;
  top: -10px;
  left: 18px;
  display: inline-block;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--plum);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.plan h3 { margin: 0 0 4px; }
.plan .price {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.plan .price span { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.plan p { font-size: 0.92rem; margin: 8px 0 0; }

/* ---------- faq ---------- */

/* A section heading sits directly on top of a stack of bold <summary>
   questions, and at 1.3rem against a 1rem question — both bold, both --ink —
   size alone did not separate them: "Your account" read as one more question.
   Separating on three axes at once (colour, size and the space above) makes
   the grouping legible without anyone having to compare heights. */
.qa-heading {
  font-size: 1.5rem;
  color: var(--plum);
  margin-top: 3.25rem;
  margin-bottom: 0.6rem;
}
.qa-heading:first-of-type { margin-top: 0.5rem; }

.qa { border-top: 1px solid var(--line); }
.qa details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 30px 14px 0;
  font-weight: 600;
  color: var(--ink);
  position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 21px;
  width: 8px;
  height: 8px;
  border: solid var(--muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.qa details[open] summary::after { transform: rotate(-135deg); top: 25px; }
.qa summary:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.qa .answer { padding: 0 0 14px; }
.qa .answer p:first-child { margin-top: 0; }

/* ---------- misc ---------- */

.mono { font-family: var(--mono); }
.lead-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 0.95rem;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { color: var(--ink); }

.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 20px; }
.prose li { margin: 8px 0; }
.prose code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* wide content must scroll inside itself, never the page */
.scroll-x { overflow-x: auto; }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 28px 0 40px;
  font-size: 0.9rem;
  color: var(--muted);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.site-foot address { font-style: normal; }

@media (max-width: 560px) {
  .hero { padding: 40px 0 34px; }
  .hero h1 { font-size: 1.85rem; }
  .card { padding: 20px; }
  .site-head .wrap { padding-top: 12px; padding-bottom: 12px; }
}

.flush { margin-top: 0; }
.card h3 { margin-top: 0; }