/* NomenSMS — landing page styles.
   Self-contained on purpose: no CDN, no framework, no external font. A local
   business owner opens this on a phone over cellular data, so the page is one
   request for the HTML, one for this file, and nothing else to block on.
   The review gate at /r is served by the engine and must stay reachable even if
   this stylesheet never loads — which is why nothing here is required to read
   the pricing or the SMS disclosure. */

:root {
  --ink: #14161a;
  --muted: #5c636e;
  --line: #e4e6ea;
  --brand: #0b6bcb;
  --brand-dark: #0956a4;
  --bg: #fbfbfa;
  --card: #ffffff;
  --good: #0e7a4a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* The artwork's own blue, carried down the page: the banner fades into this
     and the sections below sit on it, so the whole page is one surface. */
  background: linear-gradient(180deg, #ffffff 0%, #f6fafd 30%, #eef4fb 100%);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* STICKY (operator, 2026-09-21). The header carries the only route to pricing
   and checkout, so it stays on screen while the page scrolls past it. Two
   details that make it read as one surface rather than a lid: a translucent
   background over a blur, because an opaque bar on the #fbfbfa page leaves a
   visible stripe, and a z-index above the plan cards so the sticky bar never
   sinks under content. Nothing here is required to read the page — with CSS off
   it is simply a header at the top, exactly as before. */
header.top {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}
header.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { font-weight: 800; letter-spacing: -0.01em; font-size: 19px; }
.brand span { color: var(--brand); }
header.top nav a {
  color: var(--muted); text-decoration: none; margin-left: 18px; font-size: 15px;
}
header.top nav a:hover { color: var(--ink); }

/* ALIGNMENT RHYTHM (operator's rule, 2026-09-20). Centering everything is the
   classic SaaS page mistake — long paragraph text becomes hard to scan — so the
   page centres only the SHORT things (hero, section titles, tier headers and
   buttons, footer) and left-aligns everything a person actually READS at length:
   body paragraphs, card/step copy and the pricing bullet lists. */
/* THE BRAND ARTWORK IS THE PAGE'S HEAD, AND ITS PALETTE IS THE PAGE (2026-09-21).

   WHAT WAS WRONG BEFORE. Keeping the picture in a box of its own shape made it
   read as an image parked at the top of the page — the opposite of a background.
   Pushing it behind the whole page then puts its own baked-in NOMEN SMS lockup
   directly under the headline, two brands in the same pixels.

   THE SHAPE THAT WORKS — three things, and each answers one problem:

   1. FULL BLEED, EDGE TO EDGE, `cover`, and tall (`clamp(180px, 30vw, 340px)`
      of air above the copy). At every viewport width the artwork fills the
      window: nothing is cropped away on a phone, nothing is a thumbnail on a
      desktop. Tall, not short, because the scene is the point.
   2. A WHITE WASH THAT ENDS IN THE PAGE (#fff) — the top keeps ~10% so the
      artwork reads as artwork, it thickens to make the ground under the
      headline solid, and it finishes pure white so the banner and the section
      below are ONE surface with no seam. That is what makes it read as the
      page's background instead of a strip glued on.
   3. THE PALETTE CARRIES ON: the body is a whisper of the artwork's own blue
      (#f6fafd → #eef4fb), so the page below is the same world, and the brand
      blue stays exactly as it was. A dark scrim would have been the obvious
      move for a dark picture and would have cost the operator the blue.

   Fallback order matters: a background-color FIRST, so a missing image gives a
   plain navy-to-white hero, not white text on white. The 640px breakpoint has
   its own file so a phone CAN be given a different crop without touching the
   desktop name — today that file holds the same picture, which is why the two
   are the same weight. Every asset is versioned or the stylesheet's hour of
   caching hides the change. */
.hero {
  position: relative;
  padding: clamp(180px, 30vw, 340px) 0 clamp(40px, 6vw, 64px);
  text-align: center;
  background: #0a1622 url("/nomen-hero.jpg?v=20260921c") center / cover no-repeat;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.55) 38%,
    rgba(255, 255, 255, 0.88) 62%,
    #ffffff 100%
  );
}
.hero .wrap { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .hero { background-image: url("/nomen-hero-mobile.jpg?v=20260921c"); }
}
.hero h1 {
  font-size: 40px; line-height: 1.15; letter-spacing: -0.02em;
  margin: 0 auto 14px; max-width: 24ch;
}
.hero p.lede { font-size: 19px; color: var(--muted); max-width: 58ch; margin: 0 auto 26px; }
/* The blue stays: it is the one colour the operator asked to keep, and the
   white wash is what lets it sit on a busy background. */
a.btn.ghost { color: var(--ink); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
a.btn {
  display: inline-block; background: var(--brand); color: #fff; text-decoration: none;
  font-weight: 700; padding: 15px 26px; border-radius: 999px; font-size: 17px;
}
a.btn:hover { background: var(--brand-dark); }
a.btn.ghost {
  background: transparent; border: 1px solid var(--line);
}

section { padding: 34px 0; }
h2 { font-size: 26px; letter-spacing: -0.01em; margin: 0 0 6px; text-align: center; }
p.sub { color: var(--muted); margin: 0 auto 22px; max-width: 62ch; text-align: center; }

/* Body paragraphs stay LEFT even though their section title is centred: this is
   the class a paragraph carries when it is prose rather than a subheader. */
p.body-left { text-align: left; max-width: 62ch; margin: 22px auto 0; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  text-align: left;
}
.step .n {
  display: inline-flex; width: 28px; height: 28px; border-radius: 50%;
  background: #eaf2fb; color: var(--brand); font-weight: 800;
  align-items: center; justify-content: center; margin-bottom: 10px; font-size: 15px;
}
.step h3 { margin: 0 0 6px; font-size: 17px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.plan {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; height: 100%;
}
.plan.featured { border-color: var(--brand); box-shadow: 0 8px 26px rgba(11,107,203,0.10); }
/* Tier header centred, the parts the buyer reads left: the price is a number
   and scans faster centred, the feature list is sentences. */
.plan .tag {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); text-align: center;
}
.plan.featured .tag { color: var(--brand); }
.plan .price { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 2px; text-align: center; }
.plan .price small { font-size: 15px; font-weight: 600; color: var(--muted); }
/* The annual price sits under the monthly one in the same centred block, so a
   visitor reads both before choosing — and the contract note is part of the
   offer, not small print to hunt for. */
.plan .price-alt { text-align: center; font-size: 14px; color: var(--muted); margin: 0 0 4px; }
.plan .price-alt small { font-weight: 600; }
.plan-cta { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.plan-cta .btn { margin-top: 0; }
.fine-print { font-size: 13px; color: var(--muted); }
.fine-print a { color: var(--brand); text-decoration: none; }
.plan ul { list-style: none; margin: 14px 0 20px; padding: 0; text-align: left; }
.plan li { padding-left: 22px; position: relative; font-size: 15px; margin-bottom: 8px; }
.plan li:before {
  content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700;
}
.plan a.btn { text-align: center; font-size: 16px; padding: 13px 18px; }

.note {
  background: #f4f7fb; border: 1px solid #dbe6f4; border-radius: 12px;
  padding: 16px 18px; color: #22405f; font-size: 15px;
}
.note strong { color: #16324d; }

footer.bottom {
  border-top: 1px solid var(--line); margin-top: 40px; padding: 26px 0 40px;
  color: var(--muted); font-size: 14px; background: var(--card);
  text-align: center;
}
footer.bottom .wrap { max-width: 760px; }
footer.bottom .sms { color: var(--ink); margin: 0 0 14px; }
footer.bottom a { color: var(--brand); text-decoration: none; margin: 0 8px; }
/* The fine print's mail link is prose, not a nav item: the anchor margin the
   centred nav needs leaves a gap before the sentence's full stop. */
footer.bottom .fine a { margin: 0; }
footer.bottom a:hover { text-decoration: underline; }
footer.bottom .fine { font-size: 13px; color: #7b828d; margin-top: 14px; }

.legal { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }
.legal h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -0.01em; }
.legal h2 { font-size: 19px; margin: 28px 0 6px; }
.legal p, .legal li { color: #2b2f36; }
.legal .updated { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.legal a { color: var(--brand); }

@media (max-width: 820px) {
  .hero h1 { font-size: 32px; }
  .steps, .plans { grid-template-columns: 1fr; }
  .plan.featured { order: -1; }
}