/* ============================================================
   Proseify — assets/css/site.css
   New components for the book-first consumer pages only.

   The existing site (index, faq, agent, library, account, legal)
   inlines its own design system per page; nothing here restyles
   an existing component or selector. These rules add ONLY the new
   consumer/gift components, and every one degrades to a readable
   block layout if this file ever fails to load.

   Owner: agent-E (conversion pages). Added 2026-10.
   ============================================================ */

/* -- book cards become links on the consumer pages ------------ */
a.book { text-decoration: none; color: inherit; }
a.book:hover { text-decoration: none; }
a.book:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 3px; }

/* -- book pricing: three options across one row --------------- */
.book-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
  align-items: stretch;
}
.book-tiers > * { min-width: 0; }
/* The Publisher plan is a peer card — same row, gold edge to mark it as the monthly plan. */
.book-tiers > .band {
  border-color: rgba(226, 166, 61, .55);
  background: linear-gradient(120deg, rgba(226, 166, 61, .07), transparent 62%), var(--card);
}
/* Under 1000px three columns stop being readable, so the plan drops beneath the two books
   and spans both — the same anatomy, just a wider box. */
@media (max-width: 1000px) {
  .book-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-tiers > .band { grid-column: 1 / -1; }
}

/* -- what's in every book: the shared feature strip ----------- */
.inc {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.inc div { position: relative; padding-left: 26px; font-size: 14.2px; color: var(--text); }
.inc div::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; background: var(--amber);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
}
.inc b { color: var(--ink); font-weight: 600; }

/* -- honest comparison against printed incumbents ------------- */
.cmp {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.cmp-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px 24px 26px;
}
.cmp-card.ours {
  border-color: rgba(226, 166, 61, .5);
  background: linear-gradient(172deg, #2a2418, var(--card) 80%);
}
.cmp-card .who {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 12px;
}
.cmp-card.ours .who { color: var(--amber); }
.cmp-card h3 { color: var(--ink); }
.cmp-card ul { list-style: none; display: grid; gap: 9px; margin-top: 14px; }
.cmp-card li { font-size: 14px; color: var(--text-2); padding-left: 22px; position: relative; }
.cmp-card li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 1.5px; background: var(--line-hi);
}
.cmp-card.ours li::before { background: var(--amber); width: 12px; }
.cmp-note { margin-top: 18px; font-size: 13px; color: var(--text-3); max-width: 72ch; }

/* -- developer plans: deliberately secondary, one modest row --- */
.devrow {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.devrow > * { min-width: 0; }
.dev-plan { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; }
.dev-plan h4 { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); letter-spacing: -.01em; }
.dev-plan .p { font-family: var(--mono); font-size: 13px; color: var(--amber); margin-top: 6px; }
.dev-plan p { font-size: 13px; color: var(--text-2); margin-top: 8px; }

/* -- misc on the consumer pages ------------------------------- */
.lede-note { margin-top: 18px; font-size: 14px; color: var(--text-2); }
.lede-note b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .cmp { grid-template-columns: 1fr; }
  .devrow { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .book-tiers { grid-template-columns: 1fr; max-width: none; }
}
@media (max-width: 620px) {
  .inc { grid-template-columns: 1fr; }
}

/* -- the way back in ----------------------------------------- */
/* The marketing header had no sign-in affordance at all: a returning customer had to know a URL.
   It sits WITH the CTA rather than inside .nav-links, because .nav-links is display:none below
   900px and the link has to survive on a phone. Label is 'Sign in' for a signed-out visitor, which
   is the far more common case; /account shows the account when there is a session. */
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-account { color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none;
  white-space: nowrap; padding: 4px 0; transition: color .2s ease; }
.nav-account:hover, .nav-account:focus-visible { color: var(--ink); }
@media (max-width: 620px) {
  .nav-cta { gap: 11px; }
  .nav-account { font-size: 13px; }
  /* Brand + sign-in + CTA sit tight at this width, so the row gap tightens to keep everything
     inside the wrap's padding. */
  .nav { gap: 12px; }
}

/* Narrow phones (320-380): brand + 'Sign in' + the CTA cannot all keep desktop sizing, and the
   button was landing on the viewport edge instead of the wrap's 28px padding. Measured at 320:
   brand 138 + CTA 170 = 308 against 264 of room. Every one of these gives back a few pixels. */
@media (max-width: 380px) {
  .brand .name { font-size: 18px; }
  .nav-cta { gap: 8px; }
  .nav-account { font-size: 12px; }
  .nav-cta .btn { padding: 8px 12px; font-size: 12.5px; }
}

/* -- sticky header that gets out of the way on a phone ------------------------- */
/* Both headers are position:sticky, so on a short screen they permanently eat 68px of a 844px
   viewport. ui.js adds .is-hidden while scrolling down and removes it on the way back up. */
header.site, header.top { transition: transform .28s cubic-bezier(.2,.7,.3,1); }
header.site.is-hidden, header.top.is-hidden { transform: translateY(-105%); }
@media (prefers-reduced-motion: reduce) { header.site, header.top { transition: none; } }