/* =========================================================================
   pages.css: the prose pages (privacy, terms, faq, contact)
   -------------------------------------------------------------------------
   Loaded after site.css and only by those four pages. Same CSP rules as the
   rest of the site: everything that would have been an inline style is a
   class here. Nothing in this file touches the 3D scene.

   Mobile first: the base rules are the phone layout and the media queries
   below only widen things.

   Typography, v0.0.20. One measure (68ch), one heading scale, and a spacing
   rule that is followed everywhere: the gap ABOVE a heading is bigger than
   the gap below it, so a heading reads as belonging to the block it names
   rather than floating between two of them.
   ========================================================================= */

/* ---------- hero icon, stroke variant ----------
   site.css fills .icon-chip svg white and gives the general svg.ico-stroke a
   currentColor stroke for the small icons elsewhere on the site. This rule is
   more specific than both, so the four prose-page heroes keep their white
   outline drawing at chip size: a shield, a document, a question mark and an
   envelope. */
.page-hero .icon-chip svg.ico-stroke{
  fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- the "Effective" line under the hero ----------
   A date stamp, not a sentence. Set as a small label so it does not compete
   with the lead paragraph directly underneath it. */
.effective{
  font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:2px 0 0;
}

/* ---------- on this page ----------
   A short index of the sections in the two long documents.

   Capped to the same reading width as .prose below it. Left to fill the whole
   1120px main, this box was the only element on these pages that did: the
   hero, the lead and the prose all settle around the same measure, so a
   full-width contents card sat out on its own and made the page look like a
   column that had come loose from its heading.

   The links are a grid rather than a wrapped flex row. A wrapped row gave
   ragged, unpredictable columns that changed with every heading edit; fixed
   tracks line the entries up under each other and let the block be read down
   a column instead of scanned across a paragraph of links. */
.page-toc{
  background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:14px;
  padding:18px 20px 16px;margin:0 0 36px;
  max-width:68ch;
}
.page-toc p{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px;
}
.page-toc ol{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:0 20px;
}
.page-toc li{margin:0}
.page-toc a{
  display:block;padding:5px 0;
  color:var(--accent);font-weight:600;font-size:.9rem;line-height:1.4;
  text-decoration:none;
}
.page-toc a:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- prose ----------
   One reading column. 68ch is a little wider than .lead's 64ch so lists with
   a bold run-in do not wrap awkwardly on a laptop. */
.prose{max-width:68ch;margin:0 0 44px}
.prose h2{
  font-size:1.28rem;line-height:1.3;letter-spacing:-.005em;text-wrap:balance;
  margin:44px 0 14px;padding-top:26px;
  border-top:1px solid var(--line);
  /* the fixed nav covers the top ~70px of the viewport; a fragment jump
     should land under it, not behind it */
  scroll-margin-top:96px;
}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:none}
.prose h3{
  font-size:1.02rem;line-height:1.35;
  margin:26px 0 8px;scroll-margin-top:96px;
}
.prose p{font-size:.97rem;line-height:1.68;margin:0 0 14px;text-wrap:pretty}
.prose ul,.prose ol{margin:0 0 16px;padding-left:24px}
.prose li{font-size:.95rem;line-height:1.62;margin-bottom:9px;padding-left:2px}
.prose li:last-child{margin-bottom:0}
.prose li::marker{color:var(--ink-soft)}
.prose li > ul{margin-top:8px}
.prose a{color:var(--accent);font-weight:600;text-underline-offset:2px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{color:var(--ink)}
.prose .muted{color:var(--ink-soft);font-size:.9rem}

/* the answer-with-a-caveat pattern used on terms and privacy */
.prose .note{
  background:rgba(14,116,144,.07);
  border:1px solid rgba(14,116,144,.18);border-left:3px solid var(--accent);
  border-radius:12px;padding:14px 18px;margin:0 0 18px;
  font-size:.93rem;line-height:1.6;color:var(--ink);
}
.prose .note:last-child{margin-bottom:0}

/* ---------- faq ----------
   Plain h3 question, p answer. The group heading is the same h2 as the rest of
   the prose, so a group opens with a hairline above it and each question
   inside the group closes with one. Equal padding above and below a question
   keeps the rules evenly spaced down the page however long the answers are. */
.faq h3{
  font-size:1.04rem;line-height:1.4;
  margin:0;padding:0 0 6px;
}
.faq .q{
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.faq .q:last-child{border-bottom:none;padding-bottom:0}
.faq .q p{margin-bottom:10px}
.faq .q p:last-child{margin-bottom:0}
.faq .q ul{margin-bottom:0}

/* ---------- contact ----------
   Fact cards without the hover lift the service cards have; these are not
   links and should not move.

   The card heading is set as a small label rather than as a heading-sized
   line: on a card whose whole job is to carry one fact, the fact should be
   the largest thing in it, not the word "Email". */
.info-grid{
  display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 40px;
}
.info-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 20px 18px;box-shadow:0 2px 10px rgba(20,40,60,.05);
}
.info-card h2{
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px;
}
.info-card p{font-size:.88rem;color:var(--ink-soft);line-height:1.58;margin:0 0 8px}
.info-card p:last-child{margin-bottom:0}
.info-card a{color:var(--accent);font-weight:700;text-decoration:none;word-break:break-word}
.info-card a:hover{text-decoration:underline;text-underline-offset:2px}
.info-card .big{font-size:1.02rem;color:var(--ink);font-weight:700;line-height:1.4}
.info-card address{
  font-style:normal;font-size:1rem;font-weight:700;
  color:var(--ink);line-height:1.5;margin:0 0 10px;
}

/* two buttons in the CTA panel. site.css gives .cta one .btn; this wraps two
   so they sit side by side on a desk and stack on a phone. */
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.cta .btn.ghost{
  background:transparent;color:#fff;
  border:2px solid rgba(255,255,255,.85);
  padding:11px 24px;
}
.cta .btn.ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- wider screens ---------- */
@media (min-width:561px){
  .info-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .info-grid{grid-template-columns:repeat(4,1fr);gap:16px}
}

/* phones: the CTA stacks its buttons full width (site.css already sets
   .cta .btn to 100% here; the row just needs to let them wrap) */
@media (max-width:560px){
  .btn-row{width:100%}
  .page-toc{padding:16px 16px 14px;margin-bottom:28px}
  .page-toc ol{grid-template-columns:1fr}
  .prose h2{font-size:1.15rem;margin-top:34px;padding-top:22px}
  .prose h3{margin-top:22px}
  .prose p,.prose li{font-size:.95rem}
  .prose .note{padding:13px 15px}
  .faq .q{padding:16px 0}
  .info-card{padding:18px 18px 16px}
}

@media (prefers-reduced-motion:reduce){
  .cta .btn.ghost{transition:none}
}