/*
 * palmsend marketing site (docs/design/screens.md §13).
 *
 * Hand-written, deliberately. This file shares nothing with the React app:
 * no Tailwind, no shadcn, none of the app's CSS variables. The values below
 * come from the brand palette in docs/design/foundation.md, restated here so
 * the site can never drift because someone retuned an app token.
 *
 * The frames are 1440 (nXHHF) and 390 (qM5bv); between them the page is
 * fluid rather than stepped, so there is no width where it looks unconsidered.
 */

:root {
  --navy: #0b2149;
  --navy-deep: #081a38;
  --navy-hero: #081b3b;
  --green: #10a37f;
  --green-hover: #0d8a6a;
  --mint: #34d399;
  --ink: #0b2149;
  --ink-soft: #5c6f8a;
  --muted: #f1f6fa;
  --rule: #dde6ef;
  --on-navy: #c6d6ea;
  --on-navy-strong: #d5e2f2;
  --on-navy-quiet: #9db2ce;
  --invite: #c7f9f7;
  --link: #0b6fbf;

  --font-wordmark: "Vollkorn", Georgia, serif;
  /* Section titles (frames nXHHF / qM5bv, --font-marketing-heading). */
  --font-heading: "Crimson Text", Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  --gutter: 56px;
  --measure: 1240px;
  --nav-height: 78px;
}

@media (max-width: 900px) {
  :root {
    --gutter: 32px;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 20px;
  }
}

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

html {
  scroll-behavior: smooth;
  /* The nav is fixed only in spirit; anchors still need to clear it. */
  scroll-padding-top: calc(var(--nav-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  /* A marketing page that scrolls sideways on a phone is a broken one. */
  overflow-x: hidden;
  /* Nav, main, footer stack top to bottom and main takes whatever is
     left, so a short page (a draft legal page is one line) still puts
     the footer at the bottom of the viewport instead of mid-screen. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* The home page is a LiveView, so its nav, main and footer sit inside one
   wrapper div rather than directly in body. Make that wrapper stretch and
   stack the same way so the rule above still reaches main. */
body > [data-phx-main] {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid #0ea5f0;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- bands */

.band {
  width: 100%;
  padding-inline: var(--gutter);
}

.band__inner {
  max-width: var(--measure);
  margin-inline: auto;
  width: 100%;
}

.band--muted {
  background: var(--muted);
}

/* ------------------------------------------------------------------ type */

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--green);
  margin: 0;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  /* 30 at 390 in the mobile frame, 44 at 1440. */
  font-size: clamp(1.875rem, 1.32rem + 2.276vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 12px 0 0;
}

.lede {
  color: var(--ink-soft);
  margin: 8px 0 0;
}

/* ------------------------------------------------------------------- nav */

.nav {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px var(--gutter);
}

.nav__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

/*
 * Flex `order`, so the same markup reads
 *   logo ............ links  CTA      at 901+
 *   logo ................... CTA      below that
 * The mobile frame disables both the INVITE ONLY pill and the three links
 * and keeps the CTA — so does this.
 */
.nav__left {
  order: 0;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.nav__links {
  order: 1;
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav__cta {
  order: 2;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo__mark {
  width: 18px;
  height: 25px;
  flex: none;
}

.logo__word {
  font-family: var(--font-wordmark);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #fff;
}

.pill-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--on-navy);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.nav__link {
  font-size: 15px;
  font-weight: 500;
  color: var(--on-navy);
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  color: #fff;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--green-hover);
}

/* One row at every width: nothing here wraps or unfolds. */
@media (max-width: 900px) {
  .nav__links {
    display: none;
  }
}

/* The mobile frame drops the pill; at this width the bar has no room for it. */
@media (max-width: 600px) {
  .pill-badge {
    display: none;
  }

  .btn-primary {
    padding: 10px 16px;
  }
}

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

.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-hero);
  padding: clamp(44px, 5vw, 72px) var(--gutter) clamp(48px, 5vw, 72px);
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(8, 27, 59, 0.98) 0%, rgba(11, 33, 73, 0.88) 45%, rgba(8, 27, 59, 0.97) 100%),
    image-set(url("/marketing/hero-900.webp") 1x, url("/marketing/hero.webp") 2x);
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
  background-position: center, center;
}

@media (min-width: 901px) {
  .hero::before {
    background-image:
      linear-gradient(180deg, rgba(8, 27, 59, 0.98) 0%, rgba(11, 33, 73, 0.88) 45%, rgba(8, 27, 59, 0.97) 100%),
      url("/marketing/hero.webp");
  }
}

.hero__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2vw, 26px);
}

.hero__headline {
  font-family: var(--font-heading);
  font-weight: 600;
  /* 37 at 390, 64 at 1440. */
  font-size: clamp(2.3125rem, 1.297rem + 4.167vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 900px;
  margin: 0;
}

.hero__subhead {
  font-size: clamp(1rem, 0.93rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--on-navy-strong);
  max-width: 660px;
  margin: 0;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.033em;
  color: #c3d3e8;
}

.hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--mint);
  flex: none;
}

.invite-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--invite);
  text-decoration: none;
}

.invite-link:hover {
  text-decoration: underline;
}

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

.footer {
  background: var(--navy-deep);
  padding: 40px var(--gutter) 44px;
}

.footer__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.footer__link {
  font-size: 14px;
  color: var(--on-navy-quiet);
  text-decoration: none;
}

.footer__link:hover {
  color: #fff;
}

.footer__rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.footer__fine {
  font-size: 13px;
  color: var(--on-navy-quiet);
}

.footer .logo__word {
  color: #f2f7fb;
}

/* -------------------------------------------------------------- features */

.features {
  padding-block: clamp(48px, 6vw, 80px);
}

.showcase {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 40px;
}

.points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 328px;
  flex: none;
}

.point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.point__icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  color: var(--link);
}

.point__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.point__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.point__body {
  font-size: 15px;
  line-height: 1.53;
  color: var(--ink-soft);
}

/*
 * The desktop shot sits back and the phone sits in front of it, the way the
 * frame stacks them. Percentages, not pixels, so the pair scales together
 * instead of drifting apart as the column narrows.
 */
.showcase__art {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1016 / 620;
  /* A hint of the frame's bleed off the right edge. */
  margin-right: calc(-1 * var(--gutter));
}

.showcase__desktop {
  position: absolute;
  left: 19.5%;
  top: 11.5%;
  width: 72.9%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 26px rgba(0, 0, 0, 0.25);
}

.showcase__phone {
  position: absolute;
  left: 39%;
  top: 0;
  width: 34.4%;
  height: auto;
}

/* Below the two-column width the desktop shot would be unreadable, so the
   frame drops it and keeps the phone, centred under the three points. */
@media (max-width: 900px) {
  .showcase {
    flex-direction: column;
    gap: 32px;
  }

  .points {
    width: 100%;
  }

  .showcase__art {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    margin-right: auto;
    aspect-ratio: 349 / 620;
  }

  .showcase__desktop {
    display: none;
  }

  .showcase__phone {
    position: static;
    width: 100%;
  }
}

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

.pricing {
  position: relative;
  isolation: isolate;
  background: var(--green);
  padding-block: clamp(48px, 6vw, 80px);
  overflow: hidden;
}

/* The texture is decoration only: it sits under the card at 14%, which is
   low enough that nothing on top of it loses contrast. */
.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/marketing/pricing-texture.webp") center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.14;
}

.pricing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kicker--on-green {
  color: #fff;
}

.section-title--on-green {
  color: #fff;
  text-align: center;
}

.plan {
  width: 100%;
  max-width: 560px;
  margin-top: 32px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 18px 48px -6px rgba(4, 16, 42, 0.35);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.plan__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.plan__amount {
  font-family: var(--font-body);
  font-weight: 600;
  /* 38 at 390 in the mobile frame, 46 at 1440. */
  font-size: clamp(2.375rem, 2.189rem + 0.762vw, 2.875rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.plan__per {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
}

.plan__allowance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  text-align: right;
}

.plan__count {
  font-family: var(--font-body);
  font-weight: 600;
  /* 20 at 390 in the mobile frame, 22 at 1440. */
  font-size: clamp(1.25rem, 1.204rem + 0.19vw, 1.375rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.plan__caption {
  font-size: 14px;
  color: var(--ink-soft);
}

.plan__body {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.63;
}

.plan__rule {
  height: 1px;
  background: var(--rule);
}

.plan__includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
}

.plan__check {
  flex: none;
  color: var(--green);
  margin-top: 3px;
}

/* The 390 frame keeps the price and the allowance on one line; they only
   stack once the card is too narrow to hold both. */
@media (max-width: 359px) {
  .plan__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .plan__allowance {
    align-items: flex-start;
    text-align: left;
  }
}

/* ------------------------------------------------------------- questions */

.faq {
  padding-block: clamp(48px, 6vw, 80px);
}

.faq__inner {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.faq__head {
  width: 380px;
  flex: none;
}

.faq__list {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.faq__item {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.faq__item:last-child {
  border-bottom: 0;
}

.faq__q {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.016em;
  color: var(--ink);
}

.faq__a {
  margin: 10px 0 0;
  line-height: 1.63;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .faq__inner {
    flex-direction: column;
    gap: 24px;
  }

  .faq__head {
    width: 100%;
  }

  .faq__list {
    width: 100%;
  }
}

/* ------------------------------------------------------- request an invite */

.request {
  padding-block: clamp(48px, 6vw, 80px);
}

.request__inner {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.request__copy {
  flex: 1 1 0;
  min-width: 0;
}

.steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.step__n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--green);
  flex: none;
  padding-top: 2px;
}

.step__label {
  color: var(--ink);
}

.text-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.request__card {
  width: 100%;
  max-width: 560px;
  flex: none;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 18px 48px -12px rgba(4, 16, 42, 0.18);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.form__input {
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 11px 14px;
  width: 100%;
}

.form__input::placeholder {
  color: var(--ink-soft);
}

.form__input:focus {
  border-color: #0ea5f0;
  outline: 2px solid rgba(14, 165, 240, 0.25);
  outline-offset: 0;
}

.form__input--long {
  min-height: 104px;
  resize: vertical;
}

.form__input--bad {
  border-color: #dc2626;
}

.form__error {
  margin: 0;
  font-size: 13px;
  color: #dc2626;
}

.form__notice {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #92400e;
  background: rgba(217, 119, 6, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
}

.form__submit {
  width: 100%;
  padding-block: 13px;
  margin-top: 4px;
}

/* Off-screen rather than display:none — some bots skip hidden inputs. */
.form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-block: 8px;
}

.sent__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(16, 163, 127, 0.12);
  color: var(--green);
  margin-bottom: 4px;
}

.sent__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.sent__body {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}

.sent__body strong {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 900px) {
  .request__inner {
    flex-direction: column;
    gap: 28px;
  }

  .request__card {
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
 * Legal pages: /privacy and /terms (MIG-238).
 *
 * Long-form text rather than a landing page, so the measure narrows to
 * something readable and the table of contents sits above the body on a
 * phone and beside it from 1000px up.
 * ------------------------------------------------------------------------ */

.legal {
  padding: 56px var(--gutter) 96px;
}

.legal__inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr);
}

.legal__head {
  grid-column: 1 / -1;
}

.legal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.legal__dates {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.legal__dates span + span {
  margin-left: 8px;
}

.legal__pending {
  margin: 16px 0 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}

.legal__toc {
  align-self: start;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--muted);
}

.legal__toc-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.legal__toc-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 15px;
}

.legal__toc-link {
  color: var(--link);
  text-decoration: none;
}

.legal__toc-link:hover {
  text-decoration: underline;
}

.legal__body {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  /* An anchored heading clears the fixed nav instead of hiding under it. */
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

.legal__body h2 {
  margin: 40px 0 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

.legal__body h3 {
  margin: 28px 0 8px;
  font-size: 18px;
  font-weight: 600;
}

.legal__body p,
.legal__body li {
  margin: 0 0 14px;
  max-width: 68ch;
}

.legal__body ul,
.legal__body ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal__body a {
  color: var(--link);
}

.legal__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 15px;
}

.legal__body th,
.legal__body td {
  border: 1px solid var(--rule);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

@media (min-width: 1000px) {
  .legal__inner {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
  }

  .legal__toc {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
  }
}

@media (max-width: 900px) {
  .legal {
    padding: 32px var(--gutter) 64px;
  }

  .legal__title {
    font-size: 32px;
  }

  .legal__body {
    font-size: 16px;
  }
}

/* A policy is something people print and file. */
@media print {
  .nav,
  .footer,
  .legal__toc,
  .legal__pending {
    display: none !important;
  }

  .legal {
    padding: 0;
  }

  .legal__body {
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
  }

  .legal__body h2 {
    /* Never leave a heading stranded at the foot of a page. */
    break-after: avoid;
    page-break-after: avoid;
  }

  .legal__body a {
    color: #000;
    text-decoration: underline;
  }

  /* Print the destination of any link that leaves the page. */
  .legal__body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}