@charset "UTF-8";

/* Original Factor public site: one shared stylesheet.
   No external requests: system font stacks only (brand faces are used
   only if already installed on the reader's device), no web fonts, no
   CDNs, no scripts. Colour values from the Original Factor token layer. */

:root {
  --ink: #221E33;
  --ink-deep: #1D1833;
  --ink-2: #4A4460;
  --muted: #7B7590;
  --violet: #5D50C7;
  --violet-hover: #7C6FE0;
  --lavender: #A99BF0;
  --lavender-2: #C4B9F7;
  --tint: #EDE9FB;
  --tint-2: #F3F0FC;
  --canvas: #FBFAFF;
  --surface: #FFFFFF;
  --line: #E7E2F4;
  --line-strong: #D9D2F2;
  --amber-text: #8A6A1F;
  --amber-fill: #F7EBCB;
  --amber-line: #E6CF8F;
  --stage-text: #F7F5FC;
  --stage-text-2: #C6C0DC;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 44rem;
  --gutter: 16px;
  --radius-card: 14px;
  --shadow-card: 0 1px 2px rgba(28, 24, 42, 0.04);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 3.5rem;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* ---------- Preview ribbon: remove class="preview" from <body> to switch off ---------- */

body.preview::before {
  content: "Preview — not yet published";
  display: block;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 9px var(--gutter);
  background: var(--amber-fill);
  border-bottom: 1px solid var(--amber-line);
  color: var(--amber-text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Links and focus ---------- */

a {
  color: var(--violet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--violet-hover);
}

a:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: var(--gutter);
  top: 3rem;
  z-index: 20;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(253, 252, 255, 0.72);
}

.site-header .inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
  text-decoration: none;
}

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

.wordmark .f {
  color: var(--violet);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.site-nav a {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--violet);
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-decoration-thickness: 2px;
}

/* ---------- Reading column ---------- */

main {
  display: block;
}

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 32px var(--gutter) 56px;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-deep);
  letter-spacing: -0.005em;
}

h1 {
  font-size: clamp(1.85rem, 1.2rem + 3vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 16px;
}

h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.6rem);
  line-height: 1.25;
  margin: 44px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

h3 {
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 28px 0 8px;
}

p {
  margin: 0 0 14px;
}

ul,
ol {
  margin: 0 0 16px;
  padding-left: 1.4rem;
}

li {
  margin: 0 0 8px;
}

li > ul,
li > ol {
  margin-top: 8px;
}

strong {
  font-weight: 700;
}

hr {
  border: 0;
  border-top: 1px solid var(--line-strong);
  margin: 48px 0 0;
}

/* A section rule already separates the part; the heading drops its own. */
hr + h2 {
  margin-top: 0;
  border-top: 0;
}

address {
  font-style: normal;
}

.doc-meta {
  color: var(--ink-2);
  font-size: 0.95rem;
  margin-bottom: 28px;
}

.eyebrow {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--violet);
}

/* Placeholders still to be filled before production. */

.placeholder {
  background: var(--tint);
  border-radius: 4px;
  padding: 0 0.25em;
}

mark.to-confirm {
  background: var(--amber-fill);
  color: var(--amber-text);
  font-weight: 600;
  border: 1px dashed var(--amber-line);
  border-radius: 4px;
  padding: 0.05em 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Tables ---------- */

.table-wrap {
  margin: 8px 0 24px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--line);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

th {
  background: var(--tint-2);
  color: var(--ink);
  font-weight: 700;
}

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

/* Narrow screens: each row becomes a small labelled card. */
@media (max-width: 640px) {
  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
  }

  table {
    border: 0;
    background: transparent;
  }

  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  tr {
    margin: 0 0 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
  }

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

  td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ---------- Home page ---------- */

.hero {
  background:
    radial-gradient(120% 110% at 92% 0%, rgba(226, 178, 110, 0.32), transparent 55%),
    linear-gradient(160deg, #241A45, #1B1236 55%, #140D2A);
  color: var(--stage-text);
}

.hero .inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 48px var(--gutter) 44px;
}

.hero .eyebrow {
  color: var(--lavender-2);
}

.hero h1 {
  color: var(--stage-text);
  margin-bottom: 10px;
}

.hero .lede {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.45rem);
  line-height: 1.35;
  color: var(--stage-text-2);
  margin: 0;
}

.hero .lede em {
  color: var(--lavender);
}

.home h2:first-child {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.apps {
  list-style: none;
  padding: 0;
  margin: 8px 0 20px;
  display: grid;
  gap: 10px;
}

.apps li {
  margin: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.apps .name {
  display: block;
  font-weight: 700;
  color: var(--ink);
}

.apps .detail {
  display: block;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.callout {
  margin: 24px 0;
  padding: 18px 20px;
  background: var(--tint-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
}

.callout p:last-child {
  margin-bottom: 0;
}

.link-list {
  list-style: none;
  padding: 0;
}

.link-list li {
  margin-bottom: 10px;
}

.link-list a {
  font-weight: 600;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.9rem;
}

.site-footer .inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 24px var(--gutter) 32px;
}

.site-footer p {
  margin: 0 0 10px;
}

.site-footer ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.site-footer li {
  margin: 0;
}

.site-footer a {
  color: var(--ink-2);
}

.site-footer a:hover {
  color: var(--violet);
}

@media print {
  body.preview::before {
    position: static;
  }

  .site-nav,
  .skip-link {
    display: none;
  }
}