/*
 * The public site.
 *
 * Loaded AFTER app.css and deliberately depends on its custom properties, so
 * the marketing pages and the product share one palette and cannot drift
 * into looking like two companies. Nothing here restyles a console class.
 *
 * Dark mode is inherited the same way: app.css redefines the tokens under
 * prefers-color-scheme and every rule below is written in tokens, so there
 * is no second set of colours to keep in step.
 */

.site {
  background: var(--bg);
  color: var(--text);
}

.site-wrap {
  /*
   * 1440, which is what terrasuite.uk uses, so the estate has one number
   * rather than three.
   *
   * NOTHING INSIDE THIS CONTAINER GETS A WIDTH CAP OF ITS OWN. Not a
   * heading, not a lead paragraph, not a list, and above all not a prose
   * measure in `ch`. That cap is the single defect Ian has raised on every
   * site built here, six separate times on TerraSuite alone, and the
   * conclusion recorded after the sixth is that on this account it has been
   * wrong every time it was tried. A 140 to 175 character line is the house
   * style, and where lines vary the longest is usually the best one.
   *
   * Measure before calling any page finished. At a 1920 viewport anything
   * under about 70% of the window is the defect:
   *
   *   const el = document.querySelector('.hero h1');
   *   Math.round(el.getBoundingClientRect().width / innerWidth * 100)
   *
   * And measure where the WORDS break, not where the box ends, with a Range
   * over the text: a box can be 1440 wide while the lines break at 600.
   */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
}

/*
 * .site-wrap is the container and nothing inside it may override that
 * width. Putting a second width-bearing class on the same element is how
 * the container became a ribbon once already.
 */
.site-wrap.prose { max-width: 1440px; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
}

/* ---------------------------------------------------------------- header */

.site-head {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 5;
}

.site-head__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-weight: 650;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-brand span { color: var(--text); }

.site-nav {
  display: flex;
  gap: 24px;
  margin-right: auto;
}
.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 15px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.site-head__cta {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
}

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

.section {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.section--tint { background: var(--surface); }
.section--flush { border-bottom: 0; }

.section h2 {
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.section > .site-wrap > p.lede {
  font-size: 17px;
  color: var(--text-muted);
  margin: 0 0 32px;
}

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

.hero {
  padding: 84px 0 72px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(34px, 3.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}

.hero p.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 28px;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.hero__note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-faint);
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 100px;
  padding: 5px 12px;
  margin-bottom: 18px;
}

/* -------------------------------------------------------------- figures */

.figure {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.figure__bar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.figure__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
  display: block;
}
.figure table { margin: 0; font-size: 13px; }

/* ----------------------------------------------------------------- grid */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.card--site {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px;
}
.card--site h3 {
  font-size: 17px;
  margin: 0 0 8px;
}
.card--site p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}
.card--site .mark {
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}

/* -------------------------------------------------------------- pricing */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}
.plan--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.plan__name {
  font-weight: 650;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.plan__price {
  font-size: 34px;
  letter-spacing: -0.03em;
  margin: 10px 0 2px;
}
.plan__price small {
  font-size: 15px;
  color: var(--text-muted);
  letter-spacing: 0;
}
.plan__year {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 2px;
}
.plan__meter {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 18px;
}
.plan__cta { margin-top: auto; }

.plan ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-size: 14px;
  color: var(--text-muted);
}
.plan li {
  padding: 5px 0 5px 20px;
  position: relative;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 7px;
  height: 3px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.price-note {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--accent-soft);
  border-radius: 10px;
  font-size: 15px;
}
.price-note strong { display: block; margin-bottom: 4px; }

/* ----------------------------------------------------------------- misc */

/*
 * Prose is a MODIFIER, never a container.
 *
 * It carried `max-width: 72ch` and was put on the same element as
 * .site-wrap, so it overrode the container width and produced a 700px
 * ribbon centred in an 1880px window: text starting a third of the way
 * across the screen with empty space on both sides. It sets no width now,
 * and the container above it owns the width.
 *
 * NOTHING HERE CAPS WIDTH IN ch. Asked both the TerraSuite and the Keel
 * sessions. TerraSuite ships 110ch because that is where an existing site
 * landed after being corrected from 72ch. Keel quotes the rule for a NEW
 * build and it is the one that applies here: the ch cap has been wrong
 * every single time it has been tried on this account, so default to no
 * cap at all and add one only if asked. Keel's own hero lede is still at
 * 46ch, which is the exact value the memory names as the defect, and that
 * session is raising it rather than defending it.
 *
 * At a 1440 container a paragraph runs about 172 characters, inside the
 * 140-175 band that reads correctly here.
 */
.prose h2 { font-size: 24px; margin: 36px 0 10px; }
.prose h3 { font-size: 18px; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--text-muted); }
.prose li { margin-bottom: 6px; }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.logo-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
}
.logo-tile .big { color: var(--accent); }
.logo-tile .sizes {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.logo-tile code { font-size: 12px; color: var(--text-faint); }
.logo-tile.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

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

.site-foot {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 48px 0 32px;
}
.site-foot__cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.site-foot h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: 0 0 12px;
}
.site-foot a {
  display: block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 15px;
  padding: 3px 0;
}
.site-foot a:hover { color: var(--text); }
.site-foot .site-brand--foot { margin-bottom: 12px; }
.site-foot__legal {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

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

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { font-size: 34px; }
  .site-foot__cols { grid-template-columns: 1fr 1fr; }
  .site-nav { display: none; }
  .site-head__inner { gap: 16px; }
  .site-head__cta { margin-left: auto; }
  .section { padding: 48px 0; }
}

@media (max-width: 520px) {
  .site-wrap { padding: 0 16px; }
  .site-foot__cols { grid-template-columns: 1fr; }
  .hero h1 { font-size: 29px; }
}

/* ------------------------------------------------------------- signup */

.signup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.signup-aside {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}

.signup-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--text-muted);
}
.signup-list li {
  position: relative;
  padding: 6px 0 6px 24px;
}
.signup-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.signup-list--steps {
  counter-reset: step;
}
.signup-list--steps li::before {
  counter-increment: step;
  content: counter(step);
  border: 0;
  transform: none;
  top: 6px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
}

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

/* ---------------------------------------------------------------------------
   The signup form.

   It used to borrow .filters from app.css, which is the CONSOLE's toolbar
   layout: a flex row with align-items:flex-end and a 150px minimum and no
   flex-grow. On a form that produced three faults at once. Fields did not
   grow, so a work email overran its box; the hint under "Business name"
   dragged the Country select out of line with the label beside it; and the
   slug input was narrower than its own placeholder text.

   A form is not a toolbar, so it has its own two-column grid.
--------------------------------------------------------------------------- */

.signup-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  align-items: start;
  margin-bottom: 14px;
}

.signup-row .field { margin-bottom: 0; min-width: 0; }

/* app.css already gives both 100% width, border-box and the same padding;
   what they did not have was a column to be 100% OF. No height is set here
   on purpose: a hardcoded one stops matching the moment the font does. */

@media (max-width: 620px) {
  .signup-row { grid-template-columns: 1fr; }
}