/* ===========================================================================
   THE PUBLIC PAGES — pricing, legal, ask.

   Read by people with no account, so these pages do not load the signed-in
   shell (no sidebar, no top bar, no session). They DO load tokens.css, so
   everything below is spacing and layout: not one colour, size or radius is
   declared here that the token layer already owns. That is the whole point —
   before build 227 each public page carried a private copy of the palette and
   its own font stack, and they had already drifted apart from each other and
   from the platform.
   ======================================================================== */

.pub {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
}

/* --- header --------------------------------------------------------------- */
.pub-top {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.pub-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-primary);
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  letter-spacing: .08em;
  font-size: var(--fs-small);
}
.pub-brand:hover { text-decoration: none; }
.pub-brand b { color: var(--cyan); }
.pub-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-small);
}
/* A FULL TAP TARGET IN THE HEADER (build 229). These were 22px-tall text links
   — fine with a mouse, a coin toss with a thumb — and build 229 added two more
   of them. The padding does the work rather than a font size, so the header
   still reads as text rather than as a row of buttons. */
.pub-nav > a:not(.b) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-2);
}

/* --- page furniture ------------------------------------------------------- */
.pub-eyebrow {
  color: var(--gold);
  font-family: var(--font-head);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pub h1 { font-size: var(--fs-display); margin: var(--sp-2) 0 var(--sp-2); }
.pub h2 { font-size: var(--fs-h1); margin: var(--sp-8) 0 var(--sp-1); }
.pub h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-1); }
.pub .lede { color: var(--text-muted); font-size: var(--fs-h3); margin: 0; max-width: 62ch; }
.pub .sub  { color: var(--text-muted); margin: 0 0 var(--sp-4); max-width: 70ch; }
.pub .note { color: var(--text-muted); font-size: var(--fs-small); margin: var(--sp-2) 0 0; }

.pub .card {
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5);
}
.pub .grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.pub table { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); }
.pub th, .pub td {
  text-align: left; padding: var(--sp-3) var(--sp-3);
  border-bottom: var(--hair); font-size: var(--fs-small);
}
.pub th {
  color: var(--text-muted); font-size: var(--fs-tiny); font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase;
}
.pub td.num, .pub th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pub .plain {
  background: var(--surface); border: var(--hair);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-btn);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
}
.pub .plain ul { margin: 0; padding-left: var(--sp-5); }
.pub .plain li { margin: var(--sp-2) 0; }

.pub .tag {
  display: inline-block; background: var(--surface-3); border: var(--hair);
  border-radius: var(--r-pill); padding: 2px 10px;
  font-size: var(--fs-tiny); color: var(--text-muted);
  margin-left: var(--sp-2); vertical-align: middle;
}

/* THE ROW THAT WAS MISSING (build 227, item 2). A price list ended on a
   section called "Before you decide" and then stopped. One primary, two
   quieter alternatives, at the top of the page and again at the bottom. */
.pub-cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center;
  margin: var(--sp-5) 0 var(--sp-2);
}
.pub-cta .b { flex: 0 0 auto; }
.pub-cta .cta-note { color: var(--text-muted); font-size: var(--fs-small); }

/* --- footer --------------------------------------------------------------- */
.pub-foot {
  max-width: 960px;
  margin: var(--sp-8) auto 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
  border-top: var(--hair);
  color: var(--text-muted);
  font-size: var(--fs-small);
}
.pub-foot p { margin: 0 0 var(--sp-4); max-width: 70ch; }
.pub-foot b { color: var(--text-primary); }
.pub-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pub-fine { font-size: var(--fs-tiny); margin-bottom: 0; }

/* --- the ask form --------------------------------------------------------- */
.ask-form { display: grid; gap: var(--sp-4); max-width: 560px; }
.ask-form label { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.ask-form input[type="text"],
.ask-form input[type="email"],
.ask-form select,
.ask-form textarea {
  width: 100%; min-height: var(--tap);
  background: var(--surface-3);
  border: var(--hair-control);          /* the edge IS the field (item 4) */
  border-radius: var(--r-btn);
  padding: var(--sp-3);
  color: var(--text-primary);
}
.ask-form textarea { min-height: 110px; resize: vertical; line-height: var(--lh-body); }
.ask-form .hint { color: var(--text-muted); font-size: var(--fs-tiny); margin-top: var(--sp-2); }

/* The honeypot. Off-screen rather than display:none — a bot that reads CSS
   skips hidden fields, and one that fills everything is what this catches. */
.ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ask-kinds { display: grid; gap: var(--sp-3); }
.ask-kinds label {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--surface); border: var(--hair-control);
  border-radius: var(--r-btn); padding: var(--sp-3) var(--sp-4);
  font-weight: var(--fw-body); cursor: pointer; margin: 0;
}
.ask-kinds label:has(input:checked) { border-color: var(--cyan); background: var(--cyan-soft); }
.ask-kinds input { margin-top: 2px; }
.ask-kinds b { display: block; font-size: var(--fs-small); }
.ask-kinds span { color: var(--text-muted); font-size: var(--fs-tiny); }

.ask-msg { border-radius: var(--r-btn); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.ask-msg.err { background: var(--red-soft); color: var(--red); }
.ask-msg.ok  { background: var(--green-soft); color: var(--green); }
.ask-msg ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }

/* --- legal documents ------------------------------------------------------ */
/* The document body stays a serif: this is a page somebody reads end to end
   before they agree to it, and a serif is easier to hold a line in. The
   CHROME around it is the brand's. */
.pub-doc {
  background: var(--surface); border: var(--hair);
  border-radius: var(--r-card);
  padding: var(--sp-7) var(--sp-8);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.65;
}
.pub-doc h1, .pub-doc h2 { font-family: var(--font-head); }
.pub-doc h1 { font-size: var(--fs-h1); margin: 0 0 var(--sp-1); }
.pub-doc h2 { font-size: var(--fs-h2); margin: var(--sp-7) 0 var(--sp-2); color: var(--cyan); }
.pub-doc .meta { color: var(--text-muted); font-size: var(--fs-small); margin-bottom: var(--sp-6); font-family: var(--font-body); }
.pub-doc ul { padding-left: var(--sp-5); }
.pub-doc li { margin-bottom: var(--sp-2); }
.pub-doc .box {
  background: var(--surface-2); border-left: 3px solid var(--gold);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0; font-size: var(--fs-small);
}

@media (max-width: 620px) {
  .pub-doc { padding: var(--sp-5) var(--sp-4); }
  .pub h1 { font-size: var(--fs-h1); }
}

/* --- buttons -------------------------------------------------------------- */
/* The same four weights as the rest of the platform (build 227, item 5).
   dashkit.css scopes its copy to .scanpage / .auth-page, and a public page is
   neither — so the weights are restated here against the same tokens rather
   than the public pages inventing a fifth button. */
.pub .b, .pub-top .b, .pub-foot .b {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-5);
  border-radius: var(--r-btn);
  background: var(--surface-3); color: var(--text-primary);
  border: var(--hair-control);
  font-family: var(--font-head); font-weight: var(--fw-black); font-size: var(--fs-small);
  text-align: center;
}
.pub .b:hover, .pub-top .b:hover, .pub-foot .b:hover { text-decoration: none; border-color: var(--cyan); }
.pub .b.primary, .pub-top .b.primary, .pub-foot .b.primary {
  background: var(--cyan); color: var(--on-cyan); border-color: transparent;
}
.pub .b.quiet, .pub-top .b.quiet, .pub-foot .b.quiet {
  background: transparent; border-color: transparent; color: var(--text-muted);
}
.pub .b.quiet:hover, .pub-foot .b.quiet:hover { color: var(--cyan); border-color: var(--border-control); }
.pub .b.small, .pub-top .b.small, .pub-foot .b.small {
  min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-tiny);
}

/* ===========================================================================
   The pricing page, in soccer terms (build 229, design review item 25).
   =========================================================================== */

/* A seat or a plan is a card with what you can DO on it, not a table row with
   a dollar figure. The entry seat is marked because "which one do I start on"
   is the question the page exists to answer. */
.pub .card.is-entry { border-color: var(--cyan); }
.pub .card.is-trial { border-color: var(--gold); }
.pub .card .price {
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  margin: var(--sp-2) 0 var(--sp-3);
}
.pub .card .price .per {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-body);
  color: var(--text-muted);
}
/* The month-to-month rate, under the season price it is derived from.
   Deliberately quiet: it is the answer to "what about December", not the
   headline, and giving it equal weight would make the page look like it is
   quoting two prices for the same thing. */
.pub .card .permo {
  margin: calc(var(--sp-3) * -1) 0 var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
/* WHAT PERIOD EVERY NUMBER BELOW IS IN, said once, above all of them. */
.pub .seasonbar {
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0 var(--sp-6);
  background: var(--surface-2);
}
.pub .seasonbar h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
.pub .seasonwins { list-style: none; margin: 0 0 var(--sp-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.pub .seasonwins li { display: flex; gap: var(--sp-2); align-items: baseline; }
.pub .seasonwins li span { color: var(--text-secondary, var(--text-muted)); }
.pub .seasonnow { margin: 0 0 var(--sp-2); font-weight: var(--fw-bold); }
.pub .card .lim { margin: 0; padding-left: var(--sp-5); }
.pub .card .lim li { margin: var(--sp-2) 0; font-size: var(--fs-small); line-height: var(--lh-body); }
.pub .card h3 .tag { margin-left: var(--sp-2); }

/* What a contract includes, beside the form that asks for one. */
.pr-contract {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r-card);
}
.pr-contract h3 { margin-top: 0; }
.pr-contract .lim { margin: 0; padding-left: var(--sp-5); }
.pr-contract .lim li { margin: var(--sp-2) 0; font-size: var(--fs-small); line-height: var(--lh-body); }
@media (min-width: 900px) {
  .pr-contract { grid-template-columns: 1fr 1fr; }
}

/* The FAQ. A <details> is the disclosure the copy diet asked for, and it works
   with no JavaScript at all. */
.pr-faq { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.pr-faq details {
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5);
}
.pr-faq summary {
  cursor: pointer;
  font-weight: var(--fw-med);
  list-style-position: outside;
}
.pr-faq summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pr-faq details[open] summary { margin-bottom: var(--sp-3); }
.pr-faq p { margin: 0; color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-body); max-width: 70ch; }

/* The ask form's fieldset and optional-field marks, moved out of inline styles
   when the form became a partial two pages draw. */
.ask-fs { border: 0; padding: 0; margin: var(--sp-4) 0 0; }
.ask-fs legend { font-size: var(--fs-small); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.ask-form .opt { font-weight: var(--fw-body); color: var(--text-muted); }