/* components.css. Owner: O2. The shared pieces every page package builds on.

   The original site's shared classes, restyled in the custom websites page's
   language (merge plan 3.1 to 3.5): tokens from base.css only, Archivo only,
   square corners, 2px rules, red at body sizes is Red 700, 4.5:1 or better for
   every body-size pair, and every animation under :root[data-motion="full"].
   The markup keeps its class names, so a page module that has not been
   restyled yet still reads as this site, and a package that restyles its page
   reuses these instead of writing its own.

   Loaded on every page, after buttons.css and before the page's own file, so
   a page file can adjust any of these for its own layout.

   Contents
     1  legacy variables and element defaults
     2  buttons and links: .button (.secondary, .button-red), .text-button,
        .text-link, .actions
     3  small type: .eyebrow, .small-note, small
     4  notices: .notice, .test-notice, .form-error
     5  forms: .field, .field-check, fieldset.field, .form-grid
     6  page hero: .page-hero, .page-hero-side
     7  prose: .prose
     8  option cards: .website-options, .website-option, .option-cta
     9  cards: .cards, .card (the custom page's tools grid treatment)
    10  statement: .statement-section, .statement
    11  FAQ: .faq-section (alias .faq)
    12  related: .related
    13  coming soon: .soon (plan 2.7)
    14  start forms while sales are closed: .flow-closed (F21)
*/

/* ── 1. legacy variables and element defaults ──────────────────────────────
   The original site's pages and its funnel styles name three variables the
   custom page never had. They are mapped onto the tokens here so that markup
   keeps working while each page package restyles its own area. Text that uses
   --muted stays above 4.5:1 on white, ground and surface. */
:root {
  --muted: rgba(32, 30, 29, 0.72);      /* ink at 72%: the top bar's secondary text */
  --muted-ink: rgba(243, 242, 242, 0.78); /* ground at 78% on ink */
  --rule: rgba(32, 30, 29, 0.24);       /* hairlines inside the funnel forms, until S6 */
  --pad: var(--gutter);
}

/* The hidden attribute always wins. The funnel scripts show and hide whole
   steps with it, and a component that sets its own display must never undo
   that. The original site had the same rule. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
select, textarea {
  width: 100%; min-height: 52px;
  padding: 14px 16px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 1rem; line-height: 1.4;
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--ink); }

/* ── 2. buttons and links ──────────────────────────────────────────────────
   .button is the original site's button, drawn like the custom page's .btn:
   Archivo 800, square, a 2px border, ink by default. button() in shell.mjs
   wraps its label in the rolling-label span, so it rolls like every .btn. */
.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 56px; padding: 16px 24px;
  background: var(--ink); color: var(--white);
  border: 2px solid var(--ink);
  font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.button:hover, .button:focus-visible { background: var(--white); color: var(--ink); }
.button > span[aria-hidden="true"] { font-weight: 400; font-size: 1.15em; line-height: 1; }
.button.secondary { background: transparent; color: inherit; border-color: currentColor; }
.button.secondary:hover, .button.secondary:focus-visible { background: var(--ink); color: var(--white); border-color: var(--ink); }
.button-red { background: var(--red-700); color: var(--white); border-color: var(--red-700); }
.button-red:hover, .button-red:focus-visible { background: var(--ink); color: var(--white); border-color: var(--ink); }
.band-ink .button:not(.button-red) { background: var(--ground); color: var(--ink); border-color: var(--ground); }
.band-ink .button:not(.button-red):hover, .band-ink .button:not(.button-red):focus-visible { background: var(--ink); color: var(--ground); }
.band-ink .button.secondary { background: transparent; color: var(--ground); border-color: rgba(243, 242, 242, 0.6); }
.band-ink .button.secondary:hover, .band-ink .button.secondary:focus-visible { background: var(--ground); color: var(--ink); border-color: var(--ground); }
:root[data-motion="full"] .button > span[aria-hidden="true"] { transition: transform 250ms cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { :root[data-motion="full"] .button:hover > span[aria-hidden="true"] { transform: translate(3px, -3px); } }
:root[data-motion="reduce"] .button { transition: none; }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }

.text-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 0; background: none; border: 0; color: inherit;
  font-weight: 800; font-size: 0.9375rem;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.text-button:hover { color: var(--red-700); }
.band-ink .text-button:hover { color: var(--red-300); }

.text-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-weight: 800; font-size: 1rem; color: inherit;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: var(--red);
}
.text-link:hover { color: var(--red-700); }
.band-ink .text-link { text-decoration-color: var(--red-300); }
.band-ink .text-link:hover { color: var(--red-300); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ── 3. small type ──────────────────────────────────────────────────────────
   .eyebrow is the original site's small label. It takes the custom label's
   type and colour without its rule, so it reads as a quieter .label. */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem; font-weight: 800; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--red-700);
}
.band-ink .eyebrow { color: var(--red-300); }
.band-red .eyebrow { color: var(--white); }
.small-note, small { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.band-ink .small-note, .band-ink small { color: var(--muted-ink); }

/* ── 4. notices ───────────────────────────────────────────────────────── */
.notice {
  display: block; max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 24px auto; padding: 16px 20px;
  background: var(--ground); color: var(--ink);
  border-left: 4px solid var(--ink);
}
.test-notice {
  display: flex; gap: 20px; align-items: baseline;
  margin: 0 var(--gutter); padding: 16px 20px;
  background: var(--surface); border-left: 4px solid var(--ink);
  font-size: 0.875rem; line-height: 1.5;
}
.test-notice strong { white-space: nowrap; font-weight: 800; }
@media (max-width: 700px) { .test-notice { display: block; } .test-notice strong { display: block; margin-bottom: 8px; } }
.form-error {
  margin-top: 20px; padding: 14px 16px;
  background: var(--white); color: var(--red-700);
  border-left: 4px solid var(--red-700);
  font-weight: 800;
}

/* ── 5. forms ─────────────────────────────────────────────────────────── */
.field { margin-bottom: 24px; }
.field label { display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 800; }
.field label > span { margin-left: 10px; font-weight: 400; color: var(--muted); }
fieldset.field { border: 0; padding: 0; margin: 0 0 24px; }
fieldset.field legend { padding: 0; margin-bottom: 10px; font-size: 0.875rem; font-weight: 800; }
.field-check label { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: 0.9375rem; font-weight: 400; line-height: 1.55; cursor: pointer; }
.field-check input[type="checkbox"] { flex: 0 0 20px; margin: 3px 0 0; }
.field-check label > span { margin-left: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* ── 6. page hero ───────────────────────────────────────────────────────────
   The original site's page opening: a label, the h1, and a side column with
   the lede and the actions. It sits in the same 1200px column as .wrap, so it
   lines up with every band below it. */
.page-hero {
  position: relative;
  width: min(1200px, 100%); margin-inline: auto;
  padding: clamp(48px, 7vw, 112px) var(--gutter) clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 80px); align-items: end;
}
.page-hero > .label, .page-hero > .eyebrow { grid-column: 1 / -1; justify-self: start; margin-bottom: 0; }
.page-hero h1 { max-width: 16ch; }
.page-hero-side { padding-left: clamp(20px, 3vw, 40px); border-left: 2px solid var(--red); }
.page-hero-side p { max-width: 42ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.page-hero-side .actions { margin-top: 28px; }
@media (max-width: 800px) {
  .page-hero { grid-template-columns: 1fr; align-items: start; }
  .page-hero-side { padding-left: 18px; }
}

/* ── 7. prose ───────────────────────────────────────────────────────────────
   Text pages and text sections: a measured column, left-aligned inside the
   site's 1200px column. S5 styles the plain pages further in prose.css. */
.prose {
  width: min(1200px, 100%); margin-inline: auto;
  padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(56px, 8vw, 112px);
}
.prose > * { max-width: var(--measure); }
.prose > .eyebrow { margin-bottom: 20px; }
.prose h1 { margin: 0 0 clamp(24px, 3vw, 40px); max-width: 18ch; }
.prose h2 { margin: 40px 0 14px; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.15; }
.prose h3 { margin: 28px 0 10px; }
.prose p, .prose ul, .prose ol { margin: 0 0 18px; }
.prose li + li { margin-top: 6px; }
.prose a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--red); }
.prose a:hover { color: var(--red-700); }
.prose a.button { text-decoration: none; }
.prose a.button:hover { color: var(--ink); }
.prose strong { font-weight: 800; }
.prose form { margin-top: 28px; }

/* ── 8. option cards ────────────────────────────────────────────────────────
   The Websites hub's four ways and hosting's two prices: cards on 2px ink
   gaps, the custom tools grid treatment on a light field. */
.website-options {
  width: min(1200px - 2 * var(--gutter), calc(100% - 2 * var(--gutter)));
  margin: 0 auto clamp(56px, 7vw, 96px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px;
  background: var(--ink); border: 2px solid var(--ink);
}
.website-option {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--white); color: var(--ink); text-decoration: none;
}
a.website-option:hover, a.website-option:focus-visible { background: var(--ground); }
.website-option h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.05; }
.website-option p { color: var(--muted); }
.website-option .actions { margin-top: auto; }
.option-cta {
  margin-top: auto; align-self: flex-start;
  font-weight: 800; font-size: 0.9375rem;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--red);
}

/* ── 9. cards ───────────────────────────────────────────────────────────────
   The custom page's tools grid, for any page that wants it: cards on ink,
   2px red gaps between them, red headings on ink. Use on a .band-ink. */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px;
  background: var(--red); border: 2px solid var(--red);
}
.card {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--ink); color: var(--ground); text-decoration: none;
}
.card h3 { color: var(--red-300); }
.card p { color: rgba(243, 242, 242, 0.86); font-size: 1rem; }
a.card:hover, a.card:focus-visible { background: var(--ink-lift); }

/* ── 10. statement ──────────────────────────────────────────────────────────
   One large line on its own band (plan 3.3). The original site filled it word
   by word as it scrolled. That effect is retired (F9): the line is simply
   there, and rises in with the band like any heading. */
.statement-section {
  width: min(1200px, 100%); margin-inline: auto;
  padding: var(--band-y) var(--gutter);
}
/* A statement that is also a band (About's statement and its red close)
   paints its colour edge to edge, and its line stays in the same 1200px
   column as before: the padding grows by exactly what the width gained.
   Until 2026-09-26 the band itself stopped at 1200px, so any wider screen
   showed white strips beside it, or, while the curtain was on, the pinned
   footer through them. */
.band.statement-section {
  width: 100%;
  padding-inline: max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter)));
}
.statement-section > p, .statement {
  max-width: 24ch;
  font-weight: 800; font-size: clamp(1.75rem, 3.8vw, 3.25rem);
  line-height: 1.08; letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ── 11. FAQ ────────────────────────────────────────────────────────────────
   Native details and summary. 2px rules between questions, the question in
   Archivo 800, a square plus that turns into a cross when open. */
.faq-section, .faq {
  width: min(1200px, 100%); margin-inline: auto;
  padding: var(--band-y) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px);
}
@media (max-width: 900px) { .faq-section, .faq { grid-template-columns: 1fr; } }
.faq-section details, .faq details { border-top: 2px solid var(--ink); }
.faq-section details:last-child, .faq details:last-child { border-bottom: 2px solid var(--ink); }
.faq-section summary, .faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; list-style: none; cursor: pointer;
  font-weight: 800; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.3;
}
.faq-section summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.faq-section summary > span, .faq summary > span {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border: 2px solid var(--ink);
  font-weight: 400; font-size: 1.3rem; line-height: 1;
}
.faq-section details[open] summary > span, .faq details[open] summary > span { background: var(--ink); color: var(--white); transform: rotate(45deg); }
:root[data-motion="full"] .faq-section summary > span, :root[data-motion="full"] .faq summary > span { transition: transform 250ms cubic-bezier(.2, .7, .2, 1), background-color .15s ease, color .15s ease; }
.faq-section details p, .faq details p { max-width: 62ch; padding: 0 56px 24px 0; }

/* ── 12. related ────────────────────────────────────────────────────────────
   "Works well with": a label, then link cards in a row on 2px ink rules. */
.related {
  width: min(1200px, 100%); margin-inline: auto;
  padding: 0 var(--gutter) var(--band-y);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.related > span {
  grid-column: 1 / -1; justify-self: start;
  margin-bottom: 20px;
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--red-700);
}
.related a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 128px; padding: 24px;
  border: 2px solid var(--ink); border-left-width: 0;
  color: var(--ink); text-decoration: none;
  font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.1; letter-spacing: -0.02em;
}
.related > span + a { border-left-width: 2px; }
.related a:hover, .related a:focus-visible { background: var(--ink); color: var(--white); }
@media (max-width: 800px) {
  .related { grid-template-columns: 1fr; }
  .related a { border-left-width: 2px; border-top-width: 0; min-height: 0; }
  .related > span + a { border-top-width: 2px; }
}

/* ── 13. coming soon (plan 2.7) ─────────────────────────────────────────────
   The tag for the home's Dashboards and Company Brains sections and its
   Community band, and for the start forms while sales are closed. Archivo
   800, uppercase, 0.2em tracking, a 2px border in the text colour around it.
   A paragraph, never a link or a button: a screen reader reads plain text. */
.soon {
  display: inline-block; margin: 0;
  padding: 10px 14px;
  border: 2px solid currentColor;
  font-weight: 800; font-size: 0.75rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.2em;
}

/* ── 14. the start forms while sales are closed (F21) ───────────────────────
   flow.mjs puts #flow-closed where the form goes. In a closed build it is the
   only thing there. In an open build it starts hidden and js/sales.js shows
   it, and hides every step of the form, when the site says sales are not
   open for that product (or cannot say). */
.flow-closed { padding-block: clamp(32px, 5vw, 64px) var(--band-y); }
.flow-closed-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.flow-closed-cta { margin: 0; }
:root[data-sales="closed"] .flow-step,
:root[data-sales="closed"] #flow-cancelled { display: none !important; }