/* ============================================================
   Qgress - "Ink and Signal", the document pages
   terms.html, privacy.html, refunds.html, contact.html, pricing.html

   index.html and 404.html keep their styles inline because each is
   one page standing on its own. These five are a set, and five
   copies of the same rules would drift the first time one page was
   edited, so they share this file. It is served from our own origin,
   which the style-src 'self' in _headers already allows, and it is
   why those pages cost two requests rather than one.

   The tokens below are the landing page's tokens, trimmed to what a
   page of prose and a price table need. When a colour changes in
   index.html it has to change here too; there is no build step to
   share them.
   ============================================================ */

:root{
  --paper:#F4F4F1; --paper-dim:#EBEAE6;
  --surface:#FFFFFF; --surface-2:#FAFAF8;
  --line:#E2E1DC; --line-soft:#EDECE7;
  --text:#17161A; --text-2:#6E6C75; --text-3:#A3A0AB;
  --signal:#EA580C; --signal-ink:#C2410C; --signal-soft:#FFEDD5; --signal-surface:#FFF7ED;
  --btn:#17161A; --btn-text:#FFFFFF; --btn-hover:#2C2A32;
  --shadow-sm:0 1px 2px rgba(23,22,26,.05);
  --shadow-md:0 1px 2px rgba(23,22,26,.05), 0 10px 30px -18px rgba(23,22,26,.35);
  /* The homepage pair (index.html), so a reader moving from the homepage to
     a policy is still on the same site. Bricolage and Figtree were the
     earlier look and had stayed on these pages alone. */
  --display:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --body:"Mukta",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131216; --paper-dim:#0D0C10;
    --surface:#1C1B21; --surface-2:#232228;
    --line:#312F38; --line-soft:#26252C;
    --text:#F5F4F1; --text-2:#A8A5B0; --text-3:#78757F;
    --signal:#FB8B4C; --signal-ink:#FDBA8C; --signal-soft:#3B2114; --signal-surface:#251710;
    --btn:#F5F4F1; --btn-text:#17161A; --btn-hover:#DFDDD8;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#131216; --paper-dim:#0D0C10;
  --surface:#1C1B21; --surface-2:#232228;
  --line:#312F38; --line-soft:#26252C;
  --text:#F5F4F1; --text-2:#A8A5B0; --text-3:#78757F;
  --signal:#FB8B4C; --signal-ink:#FDBA8C; --signal-soft:#3B2114; --signal-surface:#251710;
  --btn:#F5F4F1; --btn-text:#17161A; --btn-hover:#DFDDD8;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px; border-radius:4px}

.wrap{width:min(1160px,calc(100% - 3rem)); margin-inline:auto}
@media (max-width:640px){ .wrap{width:calc(100% - 2rem)} }

/* ---------- nav and footer, matching index.html ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex; align-items:center; gap:1.6rem; height:66px}
.brand{
  display:flex; align-items:center; gap:.6rem; font-family:var(--display);
  font-weight:700; font-size:1.24rem; letter-spacing:-.03em; text-decoration:none;
}
.brand-mark{
  width:27px; height:27px; border-radius:9px; background:var(--signal);
  display:grid; place-items:center; flex:none;
  box-shadow:0 3px 10px -3px rgba(234,88,12,.6);
}
/* The Qgress mark: a paper token with a Q punched through it, the same mark
   as the favicon (scripts/qgress-mark.mjs has the numbers). The tile is this
   span's own background; the SVG only draws the token, with its holes painted
   in --signal so they follow the dark-mode orange with the tile. */
.brand-mark svg{display:block; width:100%; height:100%}
.brand-mark .bm-cut{fill:var(--signal)}
.brand-mark .bm-q{fill:none; stroke:var(--signal)}
/* Set as on the homepage: the mono face, small and bold. */
.nav-links{display:flex; gap:1.5rem; margin-left:auto; font-family:var(--display); font-size:13px; font-weight:700; color:var(--text-2)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text); font-weight:800}
@media (max-width:820px){ .nav-links{display:none} }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--body); font-weight:600; font-size:.95rem; line-height:1;
  padding:.86rem 1.35rem; border-radius:12px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .16s, color .16s, border-color .16s;
}
.btn-primary{background:var(--btn); color:var(--btn-text)}
.btn-primary:hover{background:var(--btn-hover)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn-ghost:hover{background:var(--surface)}
.nav .btn{padding:.62rem 1.05rem; font-size:.88rem; margin-left:auto}
@media (min-width:821px){ .nav .btn{margin-left:0} }

footer{
  border-top:1px solid var(--line); padding-block:2.2rem;
  margin-top:clamp(3rem,7vw,5rem); font-size:.86rem; color:var(--text-3);
}
.foot-in{display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between}
.foot-links{display:flex; flex-wrap:wrap; gap:1.3rem}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--text)}

/* ---------- the page head ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  display:flex; align-items:center; gap:.6rem; margin:0;
}
.eyebrow::after{content:""; height:1px; flex:1; background:var(--line); max-width:120px}
.doc-head{padding-block:clamp(2.6rem,6vw,4rem) clamp(1.6rem,3vw,2.2rem)}
.doc-head h1{
  font-family:var(--display); font-weight:700; margin:1rem 0 0;
  font-size:clamp(2.1rem,4.6vw,3.1rem); line-height:1.08;
  letter-spacing:-.032em; text-wrap:balance;
}
.lede{
  font-size:clamp(1.02rem,1.5vw,1.15rem); color:var(--text-2);
  line-height:1.55; max-width:62ch; margin:1.1rem 0 0;
}
.stamp{
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--signal); margin:1.4rem 0 0;
}

/* ---------- prose ---------- */
/* One column of about 70 characters. Sections number themselves, so a clause
   can be inserted without renumbering every heading below it by hand. */
.doc-body{max-width:70ch; padding-bottom:1rem; counter-reset:sec}
.doc-body h2{
  font-family:var(--display); font-weight:700; font-size:1.32rem; line-height:1.2;
  letter-spacing:-.02em; margin:2.8rem 0 .8rem; scroll-margin-top:84px;
  display:flex; gap:.7rem; align-items:baseline;
}
.doc-body h2::before{
  counter-increment:sec; content:counter(sec);
  font-family:var(--mono); font-size:.8rem; font-weight:700; color:var(--signal);
  flex:none; padding-top:.15rem;
}
.doc-body h3{
  font-family:var(--display); font-weight:700; font-size:1.02rem;
  letter-spacing:-.012em; margin:1.8rem 0 .5rem;
}
.doc-body p{margin:0 0 .9rem; color:var(--text-2)}
.doc-body strong{color:var(--text); font-weight:600}
/* :not(.btn) matters. A bare `.doc-body a` rule outranks `.btn-primary` on
   specificity, so the call to action inside a paragraph would come out orange
   on near-black instead of white on near-black. */
.doc-body a:not(.btn){color:var(--signal-ink); text-decoration-thickness:1px; text-underline-offset:2px}
.doc-body ul{margin:0 0 1.1rem; padding-left:1.1rem; color:var(--text-2)}
.doc-body li{margin-bottom:.45rem}
.doc-body li::marker{color:var(--text-3)}

/* A boxed aside for the one thing on a page a reader must not miss. */
.note{
  background:var(--signal-surface); border:1px solid var(--signal-soft);
  border-radius:14px; padding:1rem 1.15rem; margin:1.4rem 0 1.6rem;
}
.note p{margin:0; color:var(--text-2)}
.note p + p{margin-top:.6rem}

/* ---------- tables ---------- */
.tbl-scroll{overflow-x:auto; margin:1.2rem 0 1.6rem}
table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:31rem}
th,td{text-align:left; padding:.7rem .85rem; border-bottom:1px solid var(--line-soft); vertical-align:top}
thead th{
  font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); border-bottom:1px solid var(--line);
}
tbody th{font-weight:600; color:var(--text)}
td{color:var(--text-2)}
.num{font-family:var(--mono); font-weight:700; color:var(--text); white-space:nowrap}

/* ---------- contact details ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:clamp(1.2rem,3vw,1.8rem); box-shadow:var(--shadow-sm); margin:1.4rem 0 1.8rem;
}
.meta{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.9rem 1.6rem; margin:0}
@media (max-width:520px){ .meta{grid-template-columns:1fr; gap:.2rem 0} }
.meta dt{
  font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); padding-top:.25rem;
}
.meta dd{margin:0 0 .6rem; color:var(--text)}
.meta dd a{color:var(--signal-ink)}

/* ---------- plans ---------- */
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.8rem 0 1.2rem}
@media (max-width:860px){ .plans{grid-template-columns:1fr} }
.plan{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.plan.pick{border-color:var(--signal); box-shadow:var(--shadow-md)}
/* Every line in a card is a <p>, and these cards sit inside .doc-body, whose
   own `p` rule would otherwise paint the price and the plan name in body grey.
   Hence the .plan prefix on each, and an explicit colour on each. */
.plan .plan-tag{
  font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--signal); margin:0 0 .5rem;
}
.plan .plan-name,.ent .plan-name{
  font-family:var(--display); font-weight:700; font-size:1.18rem;
  letter-spacing:-.018em; color:var(--text); margin:0;
}
.plan .plan-for{font-size:.86rem; color:var(--text-3); margin:.3rem 0 1.1rem}
.plan .price{
  font-family:var(--display); font-weight:700; font-size:2.2rem;
  letter-spacing:-.035em; line-height:1; color:var(--text); margin:0;
}
.plan .price small{font-family:var(--body); font-size:.85rem; font-weight:500; color:var(--text-3); letter-spacing:0}
.plan .price-yr{font-size:.82rem; color:var(--text-3); margin:.45rem 0 1.2rem}
.plan ul{list-style:none; margin:0 0 1.5rem; padding:0; font-size:.9rem; color:var(--text-2)}
.plan li{display:flex; gap:.55rem; margin-bottom:.5rem; line-height:1.45}
.plan li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--signal); flex:none; margin-top:.55rem}
.plan .btn{margin-top:auto; width:100%}

/* The pricing page reuses the prose rules but not the clause numbering: its
   headings are signposts, not clauses anyone will ever cite. It also lets
   tables and cards run full width while paragraphs keep a readable measure. */
.doc-body.unnumbered h2{display:block}
.doc-body.unnumbered h2::before{content:none; counter-increment:none}
.doc-body.wide{max-width:none}
.doc-body.wide p,.doc-body.wide ul{max-width:70ch}

/* Enterprise sits below the three self-serve cards: one wide row, because it
   has no price to put in a column. */
.ent{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem}
.ent div{max-width:52ch}
.ent .plan-name{margin-bottom:.35rem}
.ent p{margin:0; font-size:.92rem; color:var(--text-2)}