/* ============================================================================
   public.css — the marketing surface: landing, pricing, docs, legal.

   Loaded only on anonymous public pages, so a signed-in customer never
   downloads the hero, the tier cards or the footer grid. Extracted from
   01-landing.html and 02-pricing.html.

   Depends on tokens.css, base.css and components.css.
   ========================================================================= */

/* ------------------------------------------------------------ public nav --
   Taller than the dashboard topbar and carrying its own links: a visitor who
   has not signed in needs Docs and Pricing, not five dashboard sections. */

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 60px;
  border-bottom: 1px solid var(--line);
}

.nav .links {
  display: flex;
  gap: 20px;
  margin-left: auto;
}

.nav .links a {
  font-size: 13.5px;
  color: var(--ink-2);
  text-decoration: none;
}

.nav .links a:hover {
  color: var(--ink);
}

.nav .cta {
  margin-left: 20px;
}

/* The dashboard's 36px top padding would push the hero down off its own
   vertical rhythm; the public pages open with a section that sets its own. */
.page.public {
  padding: 0;
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  padding: 96px 0 72px;
  text-align: center;
  overflow: hidden;
}

/* The one piece of pure atmosphere in the app: a soft phosphor bloom behind
   the headline. Decorative, so it is generated content on the container and
   never reaches the accessibility tree. */
.hero::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto;
  height: 120%;
  pointer-events: none;
  background: radial-gradient(560px 300px at 50% 18%, oklch(80% .19 152 / .07), transparent 70%);
}

.hero > * {
  position: relative;
}

.hero h1 {
  font-size: clamp(42px, 7vw, 76px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 700;
}

/* The second line of the headline, set back rather than italic. */
.hero h1 em {
  font-style: normal;
  color: var(--ink-3);
}

.hero .sub {
  max-width: 52ch;
  margin: 22px auto 0;
  font-size: 16.5px;
  color: var(--ink-2);
}

.hero .sub b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
  font-size: 14.5px;
}

.hero .lead-pill {
  margin-bottom: 26px;
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

.proof {
  display: flex;
  gap: 26px;
  justify-content: center;
  margin-top: 56px;
  font: 400 11.5px var(--mono);
  color: var(--ink-3);
  flex-wrap: wrap;
}

/* The hero's code window is darker, narrower and lifted off the page — the
   generic .code in components.css stays as-is for the docs pages. */
.hero .code {
  background: oklch(11% .008 165);
  max-width: 640px;
  margin: 56px auto 0;
  text-align: left;
  box-shadow: 0 30px 80px oklch(0% 0 0 / .45);
}

/* ------------------------------------------------------------- sections -- */

.public-section {
  padding: 88px 0;
  border-top: 1px dashed var(--line-2);
}

.sec-head h2 {
  font-size: clamp(26px, 3.5vw, 34px);
  letter-spacing: -.02em;
  margin-top: 10px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
  border-top: 1px solid var(--line);
}

.step {
  padding: 28px 26px 4px 0;
  border-right: 1px dashed var(--line-2);
}

.step:last-child {
  border-right: 0;
}

.step:nth-child(2),
.step:nth-child(3) {
  padding-left: 26px;
}

.step .n {
  font: 600 12px var(--mono);
  color: var(--green);
}

.step h3 {
  font-size: 16.5px;
  margin: 12px 0 8px;
}

.step p {
  font-size: 13.5px;
  color: var(--ink-2);
}

.boring {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 56px;
  margin-top: 44px;
}

.boring .item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
}

.boring .code-tag {
  font: 600 12px var(--mono);
  color: var(--green);
  padding-top: 2px;
}

.boring h3 {
  font-size: 15.5px;
  margin-bottom: 6px;
}

.boring p {
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- tiers --
   01-landing draws the teaser cards a little tighter than 02-pricing draws the
   real ones — 24px padding against 26px, a 40px price against 44px, and no
   gradient on the popular card. 00-design-system does not define tiers at all,
   so the rule that settles the other conflicts does not apply here. 02 wins:
   the pricing page is where these cards are the subject rather than a teaser,
   and one definition beats two that drift. */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 44px 0 20px;
}

.tier {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
}

.tier.popular {
  border-color: var(--green);
  position: relative;
  background: linear-gradient(180deg, var(--green-soft), transparent 40%), var(--bg-1);
}

/* Who the tier is for, above the feature list. Only the pricing page carries
   it; the landing teaser is short by design. */
.tier .for {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 14px;
}

.tier .name {
  font: 600 11px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.tier .pop {
  position: absolute;
  top: 24px;
  right: 22px;
  font: 600 10px var(--mono);
  letter-spacing: .1em;
  color: var(--green);
}

.tier .price {
  font: 700 44px/1 var(--mono);
  letter-spacing: -.03em;
  margin: 18px 0 4px;
}

.tier .price small {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
}

.tier .vol {
  font: 400 12px var(--mono);
  color: var(--ink-3);
}

.tier ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  font-size: 13px;
  color: var(--ink-2);
}

.tier li {
  padding: 4px 0 4px 20px;
  position: relative;
}

/* Decorative tick. Generated content, so a screen reader reads the feature
   rather than announcing a check mark before every line. */
.tier li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-family: var(--mono);
  font-size: 12px;
}

.tier .btn {
  width: 100%;
  justify-content: center;
}

/* ---------------------------------------------------------- public head --
   The centred title block a public page opens with. Named apart from the
   dashboard's `.page-head`, which is a left-aligned flex row with an action on
   the right — the same name for both would look like a shared component and
   then acquire one set of overrides per page. */

.public-head {
  text-align: center;
  padding: 80px 0 20px;
}

.public-head h1 {
  font-size: clamp(36px, 5.5vw, 56px);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-top: 14px;
}

.public-head h1 em {
  font-style: normal;
  color: var(--ink-3);
}

.public-head p {
  color: var(--ink-2);
  margin-top: 16px;
}

/* ----------------------------------------------------------- enterprise -- */

.ent {
  display: flex;
  gap: 28px;
  align-items: center;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 80px;
}

.ent h2 {
  font-size: 21px;
  letter-spacing: -.015em;
  margin: 8px 0;
}

.ent p {
  font-size: 13.5px;
  color: var(--ink-2);
  max-width: 56ch;
}

.ent .actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ faq --
   <details>/<summary>, so the whole thing opens and closes with no script —
   which is the requirement (R28) rather than a preference. The default
   disclosure triangle is replaced by a +/– on the right; `list-style: none`
   plus the WebKit pseudo-element is what it takes to remove it in every
   engine. */

.faq {
  border-top: 1px dashed var(--line-2);
  padding: 72px 0 90px;
}

.faq h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.02em;
  margin-top: 10px;
}

.faq .list {
  max-width: 760px;
  margin-top: 36px;
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 18px 4px;
  font-weight: 500;
  font-size: 15px;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--mono);
  color: var(--ink-3);
  font-size: 16px;
}

.faq details[open] summary::after {
  content: '–';
  color: var(--green);
}

.faq .a {
  padding: 0 4px 20px;
  color: var(--ink-2);
  font-size: 14px;
  max-width: 64ch;
}

.faq .a code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
}

/* ------------------------------------------------------------ final cta -- */

.final {
  text-align: center;
}

.final h2 {
  font-size: clamp(30px, 4.5vw, 44px);
  letter-spacing: -.025em;
  margin-top: 12px;
}

.final p {
  color: var(--ink-2);
  margin-top: 10px;
}

/* ----------------------------------------------------------------- docs --
   Sidebar plus body. The sidebar is a plain sticky column of in-page anchors:
   no script, no scroll-spy, and the current section marked server-side. */

.doc-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  padding: 48px 0 96px;
}

.side {
  position: sticky;
  top: 24px;
  align-self: start;
  font-size: 13px;
}

.side .grp {
  font: 600 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 22px 0 10px;
}

.side .grp:first-child {
  margin-top: 0;
}

.side a {
  display: block;
  color: var(--ink-2);
  text-decoration: none;
  padding: 5px 0 5px 12px;
  border-left: 1px solid var(--line);
}

.side a:hover {
  color: var(--ink);
}

.side a.on {
  color: var(--green);
  border-left-color: var(--green);
}

.doc h1 {
  font-size: 38px;
  letter-spacing: -.025em;
  margin-top: 10px;
}

.doc .lede {
  color: var(--ink-2);
  margin: 14px 0 8px;
  max-width: 64ch;
}

.doc .lede b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
  font-size: 13.5px;
}

.doc h2 {
  font-size: 22px;
  letter-spacing: -.015em;
  margin: 52px 0 6px;
  padding-top: 22px;
  border-top: 1px dashed var(--line-2);
}

.doc .sub {
  color: var(--ink-3);
  font-size: 13.5px;
  margin-bottom: 20px;
}

/* The connection settings table is a two-column definition list rendered as a
   table, not tabular data — hence no <th> and no `table.data`. */
.settings {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 13.5px;
}

.settings td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.settings tr:last-child td {
  border-bottom: 0;
}

.settings td:first-child {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  width: 230px;
  background: var(--bg-1);
}

.settings td b {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
}

.settings td .note {
  color: var(--ink-3);
  font-size: 12.5px;
}

.hw {
  margin-top: 8px;
}

.hw .st {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.hw .st:last-child {
  border-bottom: 0;
}

.hw .n {
  font: 600 12px var(--mono);
  color: var(--green);
  padding-top: 3px;
}

.hw p {
  font-size: 14px;
  color: var(--ink-2);
  max-width: 70ch;
}

.hw code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
}

/* The docs sample blocks sit darker than the generic .code and carry a library
   name on the right of the bar; the hero's own override is separate again. */
.doc .code {
  background: oklch(11% .008 165);
  margin: 18px 0 28px;
}

.doc .code .bar {
  padding: 10px 16px;
  font: 600 12px var(--mono);
  color: var(--ink);
}

.doc .code .bar .lib {
  margin-left: auto;
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-3);
}

.doc .code pre {
  padding: 20px 22px;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .doc-layout {
    grid-template-columns: 1fr;
  }

  .side {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
  }

  .side .grp {
    width: 100%;
  }
}

/* ---------------------------------------------------------------- legal --
   One prose treatment, three documents. 05-legal-terms reuses the docs page's
   `.doc` class at different sizes — 36px against 38px on the h1, 19px against
   22px on the h2, and body copy the docs page never sets. Two meanings for one
   class is how a stylesheet starts needing per-page overrides, so the legal
   treatment is `.prose` and the two never touch. */

.legal-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 64px;
  padding: 56px 0 110px;
}

.toc {
  position: sticky;
  top: 24px;
  align-self: start;
  font-size: 13px;
}

.toc .grp {
  font: 600 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.toc a {
  display: block;
  color: var(--ink-2);
  text-decoration: none;
  padding: 5px 0 5px 12px;
  border-left: 1px solid var(--line);
}

.toc a:hover {
  color: var(--ink);
}

.toc a.on {
  color: var(--green);
  border-left-color: var(--green);
}

/* Links to the other two documents. Every legal page carries all three, so a
   reader who lands on one can reach the rest without going back to the
   footer. */
.toc .switch {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-2);
}

.prose {
  max-width: 680px;
}

.prose h1 {
  font-size: 36px;
  letter-spacing: -.025em;
  margin-top: 10px;
}

.prose .meta {
  font: 400 12px var(--mono);
  color: var(--ink-3);
  margin: 14px 0 8px;
}

.prose .meta-foot {
  margin-top: 40px;
}

.prose h2 {
  font-size: 19px;
  letter-spacing: -.01em;
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-2);
}

.prose h2 .n {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--green);
  margin-right: 10px;
}

.prose p {
  color: var(--ink-2);
  font-size: 14.5px;
  margin-bottom: 14px;
}

.prose ul {
  color: var(--ink-2);
  font-size: 14.5px;
  margin: 0 0 14px 20px;
}

.prose li {
  margin-bottom: 6px;
}

/* The plain-language summary at the top of each document. Deliberately not a
   substitute for the text below it, and the wording says so. */
.prose .callout {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--green);
  border-radius: var(--r);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 18px 0;
}

@media (max-width: 860px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .toc {
    position: static;
  }
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 64px;
  margin-top: 24px;
}

.foot {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}

.foot h2 {
  font: 600 10.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.foot a,
.foot span.item {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  margin-bottom: 9px;
}

.foot a:hover {
  color: var(--ink);
}

.foot .tag {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 12px;
  max-width: 280px;
}

/* The brand mark repeats in the footer at the same size it has in the nav;
   only the copyright line beneath it is set smaller. */
.foot .brand {
  display: inline-block;
  margin-bottom: 0;
}

.foot .mono {
  font-size: 11px;
  margin-top: 14px;
}

/* --------------------------------------------------------------- narrow -- */

@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
  }

  .step {
    border-right: 0;
    border-bottom: 1px dashed var(--line-2);
    padding: 22px 0;
  }

  .step:nth-child(2),
  .step:nth-child(3) {
    padding-left: 0;
  }

  .boring,
  .tiers {
    grid-template-columns: 1fr;
  }

  .ent {
    flex-direction: column;
    align-items: flex-start;
  }

  .ent .actions {
    margin-left: 0;
  }

  .foot {
    grid-template-columns: 1fr 1fr;
  }
}