/* =====================================================================
   ProSe.app — visual identity

   Deliberately not the THIRDI hub's look. The hub is navy, gold and
   Inter: a technology company presenting a portfolio. ProSe Docs is used
   by people handling their own legal and business paperwork, often under
   stress and often on a deadline, so this reads as a well-set document
   rather than a software product: warm paper, a serif for headings,
   generous measure, high contrast, nothing that blinks or slides.

   Accent is a deep green — trust and completion — chosen to share no
   hue with the hub's navy so the two are never mistaken for each other.
   Clay is used only for warnings and unavailability.

   System fonts only. No external requests: this must render identically
   on a courthouse wifi connection and offline in a print preview.
   ===================================================================== */

:root {
  --paper:      #faf8f5;
  --card:       #ffffff;
  --ink:        #1c1917;
  --muted:      #57534e;
  --rule:       #e5ded4;
  --accent:     #15594a;
  --accent-ink: #0e3d33;
  --accent-bg:  #eef4f1;
  --clay:       #a8532e;
  --clay-bg:    #fdf3ee;
  --shadow:     0 1px 2px rgba(28,25,23,.04), 0 8px 24px rgba(28,25,23,.05);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14120f; --card: #1c1917; --ink: #ede9e3; --muted: #a8a29e;
    --rule: #332e28; --accent: #6fbfa5; --accent-ink: #9fd6c3; --accent-bg: #172f28;
    --clay: #e09b74; --clay-bg: #2b1d15;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] {
  --paper: #14120f; --card: #1c1917; --ink: #ede9e3; --muted: #a8a29e;
  --rule: #332e28; --accent: #6fbfa5; --accent-ink: #9fd6c3; --accent-bg: #172f28;
  --clay: #e09b74; --clay-bg: #2b1d15;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}
:root[data-theme="light"] {
  --paper: #faf8f5; --card: #ffffff; --ink: #1c1917; --muted: #57534e;
  --rule: #e5ded4; --accent: #15594a; --accent-ink: #0e3d33; --accent-bg: #eef4f1;
  --clay: #a8532e; --clay-bg: #fdf3ee;
  --shadow: 0 1px 2px rgba(28,25,23,.04), 0 8px 24px rgba(28,25,23,.05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
}
.shell { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.measure { max-width: 68ch; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.5rem 0 .75rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
small, .small { font-size: .875rem; color: var(--muted); }
.lede { font-size: 1.2rem; color: var(--muted); line-height: 1.6; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
code, kbd { font-family: var(--mono); font-size: .9em; }

/* ── Header ─────────────────────────────────────────────────────────── */
.masthead { border-bottom: 1px solid var(--rule); background: var(--card); }
.masthead .shell {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between; padding: .9rem 0;
}
.wordmark {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark span { color: var(--accent); }
.sitenav { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; align-items: center; }
.sitenav a {
  color: var(--muted); text-decoration: none; font-size: .95rem; padding: .25rem 0;
  border-bottom: 2px solid transparent;
}
.sitenav a:hover { color: var(--ink); }
.sitenav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: 0 1.25rem; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-primary { color: #10201b; } }
:root[data-theme="dark"] .btn-primary { color: #10201b; }
:root[data-theme="light"] .btn-primary { color: #fff; }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--clay-bg); border-color: var(--clay); color: var(--clay);
  cursor: not-allowed; font-weight: 600;
}
.btn:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }

/* ── Layout blocks ──────────────────────────────────────────────────── */
.hero { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.eyebrow {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 .9rem;
}
section { padding: 1rem 0 2rem; }
.band { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.card {
  padding: 1.4rem; background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; box-shadow: var(--shadow);
}
.card p:last-child { margin-bottom: 0; }
.card .tag {
  display: inline-block; margin-bottom: .55rem; padding: .15rem .55rem;
  border-radius: 999px; background: var(--accent-bg); color: var(--accent-ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* ── Editions ───────────────────────────────────────────────────────── */
.editions { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.edition {
  display: flex; flex-direction: column; padding: 1.75rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: var(--shadow);
}
.edition.featured { border-color: var(--accent); border-width: 2px; }
.edition h3 { font-size: 1.5rem; }
.price { font-family: var(--serif); font-size: 2.4rem; font-weight: 600; margin: .25rem 0 .1rem; }
.price-note { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.featurelist { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.featurelist li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.featurelist li::before {
  content: ""; position: absolute; left: .1rem; top: .62em;
  width: .6rem; height: .3rem; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.edition .btn { width: 100%; margin-top: auto; }

/* ── Platform table ─────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .96rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--rule); }
th { font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
.state { font-weight: 600; white-space: nowrap; }
.state-on { color: var(--accent-ink); }
.state-off { color: var(--muted); }

/* ── Notices ────────────────────────────────────────────────────────── */
.notice {
  padding: 1rem 1.15rem; border-radius: 6px; border: 1px solid var(--rule);
  background: var(--accent-bg); margin: 1.25rem 0;
}
.notice-warn { background: var(--clay-bg); border-color: var(--clay); }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--ink); }

/* ── Forms ──────────────────────────────────────────────────────────── */
form.stack { display: grid; gap: .9rem; max-width: 30rem; }
label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
input[type=email], input[type=text] {
  width: 100%; padding: .7rem .8rem; font: inherit;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper); color: var(--ink);
}
.result { margin-top: 1rem; }
.code-block {
  padding: .9rem 1rem; border-radius: 6px; background: var(--accent-bg);
  border: 1px solid var(--rule); font-family: var(--mono);
  font-size: 1.05rem; word-break: break-all;
}

/* ── Steps ──────────────────────────────────────────────────────────── */
ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.5rem 0; }
ol.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 1.4rem 3rem; border-left: 1px solid var(--rule); margin-left: 1rem;
}
ol.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps > li::before {
  content: counter(step); position: absolute; left: -1rem; top: -.15rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--sans); font-size: .9rem; font-weight: 700;
}
ol.steps h3 { margin-bottom: .25rem; }

details {
  border: 1px solid var(--rule); border-radius: 6px;
  padding: .9rem 1.1rem; margin-bottom: .75rem; background: var(--card);
}
details[open] { box-shadow: var(--shadow); }
summary { font-weight: 600; cursor: pointer; }
details > *:not(summary) { margin-top: .75rem; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.sitefoot {
  margin-top: 4rem; padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--rule); background: var(--card);
  font-size: .92rem; color: var(--muted);
}
.footgrid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sitefoot h4 {
  font-family: var(--sans); font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 .6rem;
}
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin-bottom: .35rem; }
.sitefoot a { color: var(--muted); text-decoration: none; }
.sitefoot a:hover { color: var(--ink); text-decoration: underline; }
.colophon {
  margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .85rem;
}
.hublink {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--muted); text-decoration: none; font-weight: 600;
}
.hublink:hover { color: var(--accent-ink); }
.hublink::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 2px;
  background: var(--accent); flex: none;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: .7rem 1rem; z-index: 10;
}
.skip:focus { left: .5rem; top: .5rem; }

@media print {
  .masthead, .sitefoot, .btn-row, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
}