/* faxl.ai — Gamakon Ltd.
   Plain CSS. No framework, no CDN, no build step (README constraint).

   The palette is the Gamakon ramp, sampled from the brand deck. Grounds are
   ramp colours on the transparency ladder — the light page is ramp teal at
   ~37% over warm white, which is where the mint comes from. Colours were
   chosen by eye, not generated; the values below are the authority.

   Type is Latin Modern (Knuth's TeX face) — typeset, not picked from a
   dropdown. The responsive scale is sized so the proposition and the one
   action clear the fold on a 667px phone.

   Contrast ratios in comments are measured against the page ground and are
   not to be reduced below 4.5:1 for body text. */

/* ========================================================================
   1. RAMP — the ten brand colours. Do not add to this list.
   ===================================================================== */
:root {
  --ramp-teal:      #51b3aa;
  --ramp-gold:      #c1a14e;
  --ramp-slate:     #2a3640;
  --ramp-olive:     #6d9f40;
  --ramp-aubergine: #5e3538;
  --ramp-oxblood:   #962729;
  --ramp-rust:      #a2411a;
  --ramp-mauve:     #b99aa0;
  --ramp-pink:      #e196c0;
  --ramp-red:       #d4494c;

  --serif: "Latin Modern", "Latin Modern Roman", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;   /* ~66 characters. Prose never exceeds this. */
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
}

/* ---------------------------------- LIGHT ------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg:            #bfe3dc;   /* ramp teal @ ~37% over warm white */
  --bg-deep:       #aed9d0;   /* ramp teal @ ~46% */
  --card:          #fffdf7;
  --text:          #16212b;   /* 12.9:1 on --bg */
  --muted:         #3b4a55;   /*  7.1:1 on --bg */
  --accent:        #7c672f;   /* ramp gold, darkened to read on a pale ground */
  --accent-strong: #5f4e20;
  --rule:          rgba(22, 33, 43, 0.18);
  --rule-gold:     rgba(124, 103, 47, 0.40);
  --btn-bg:        #273641;   /* 9.0:1 against the page */
  --btn-fg:        #ffffff;
  --btn-bg-hover:  #1a242c;
}

/* ----------------------------------- DARK ------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:            #273641;   /* the Gamakon slate — same value as the parent site */
    --bg-deep:       #1e2a33;
    --card:          #1e2d36;
    --text:          #e8ecff;   /* 11.8:1 on --bg */
    --muted:         #a8b3bc;   /*  5.4:1 on --bg */
    --accent:        #b8a160;
    --accent-strong: #d4bd7a;
    --rule:          rgba(255, 255, 255, 0.20);
    --rule-gold:     rgba(212, 189, 122, 0.38);
    --btn-bg:        #d4bd7a;
    --btn-fg:        #1a242c;
    --btn-bg-hover:  #e8d48a;
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #273641;
  --bg-deep:       #1e2a33;
  --card:          #1e2d36;
  --text:          #e8ecff;
  --muted:         #a8b3bc;
  --accent:        #b8a160;
  --accent-strong: #d4bd7a;
  --rule:          rgba(255, 255, 255, 0.20);
  --rule-gold:     rgba(212, 189, 122, 0.38);
  --btn-bg:        #d4bd7a;
  --btn-fg:        #1a242c;
  --btn-bg-hover:  #e8d48a;
}

/* The enterprise pages take a cooler ground, one step along the ramp.
   Declared for BOTH schemes: setting only the background is what left the
   old enterprise page at 1.09:1 in dark mode. */
[data-variant="enterprise"] { --bg: #cedce3; --bg-deep: #bccdd6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-variant="enterprise"],
  [data-variant="enterprise"]:root:not([data-theme="light"]) {
    --bg: #22303a; --bg-deep: #1b262e;
  }
}
[data-theme="dark"] [data-variant="enterprise"],
[data-theme="dark"][data-variant="enterprise"] { --bg: #22303a; --bg-deep: #1b262e; }

/* ========================================================================
   2. FONTS
   ===================================================================== */
@font-face {
  font-family: "Latin Modern";
  src: url("../assets/fonts/LM-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Latin Modern";
  src: url("../assets/fonts/LM-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Latin Modern";
  src: url("../assets/fonts/LM-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Latin Modern";
  src: url("../assets/fonts/LM-bold-italic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ========================================================================
   3. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  /* Mo's scale: 17px on a phone up to 19px on a desktop. He was right that
     the old site was too small on mobile. */
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: var(--accent-strong); text-underline-offset: 0.16em; }
a:hover { color: var(--accent); }

code, pre { font-family: var(--mono); font-size: 0.875em; }
pre {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.9rem 1rem;
  overflow-x: auto;           /* wide code scrolls; the page never does */
  max-width: 44rem;
  line-height: 1.5;
}
pre code { font-size: inherit; }

img, svg { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--btn-bg); color: var(--btn-fg);
  padding: 0.6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ========================================================================
   4. LAYOUT
   ===================================================================== */
.wrap {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { display: block; }

.section { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.section + .section { border-top: 1px solid var(--rule); }

.kicker {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.7rem;
}

.lede {
  font-size: clamp(1.1rem, 1.02rem + 0.5vw, 1.3rem);
  color: var(--text);
}

.smallprint { font-size: 0.9rem; color: var(--muted); }

/* ========================================================================
   5. HEADER — the mark keeps its exclusion zone. Nothing crowds it.
   ===================================================================== */
.site-head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem var(--gutter);
  background: var(--bg-deep);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
  /* exclusion zone: nothing sits closer than the height of the mark */
  padding-right: 1.5rem;
}
.brand img { width: 28px; height: 32px; }
.brand span { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; }

.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.3rem 1.15rem; }
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.98rem;
  padding: 0.2rem 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);
}

/* ========================================================================
   6. HERO — the mark gets room. One action, not two.
   ===================================================================== */
.hero {
  background: radial-gradient(ellipse at 50% 24%, var(--bg-deep) 0%, var(--bg) 72%);
  text-align: center;
  padding: clamp(2.2rem, 1.4rem + 3vw, 4rem) var(--gutter) clamp(1.8rem, 1.2rem + 2vw, 3rem);
}
.hero-logo {
  display: block;
  width: min(30vw, 132px);
  margin: 0 auto 0.9rem;
}
.hero h1 { margin-bottom: 0.15em; }
.hero-byline {
  font-style: italic;
  color: var(--accent-strong);
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
  margin: 0 auto 1.4rem;
  max-width: none;
}
.hero-lede {
  max-width: 38rem;
  margin: 0 auto 1.7rem;
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.28rem);
}
.hero .cta { margin: 0 auto; }

/* ========================================================================
   7. BUTTONS — one primary per view.
   ===================================================================== */
.cta,
.cta-quiet {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.78rem 1.5rem;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.cta { background: var(--btn-bg); color: var(--btn-fg); }
.cta:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.cta-quiet { background: transparent; color: var(--text); border-color: var(--rule-gold); }
.cta-quiet:hover { background: var(--card); color: var(--text); }

.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.3rem 0; }

/* ========================================================================
   8. LISTS — facts, not cards. No boxes round prose.
   ===================================================================== */
.facts { max-width: var(--measure); margin: 0 0 1.1em; padding-left: 1.1rem; }
.facts li { margin-bottom: 0.5em; }

/* A definition list for feature tables — plain rules, no card chrome. */
.spec { max-width: 44rem; margin: 0; }
.spec div {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 0.4rem 1.4rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}
.spec div:last-child { border-bottom: 1px solid var(--rule); }
.spec dt { font-weight: 700; }
.spec dd { margin: 0; color: var(--muted); }
@media (max-width: 33rem) {
  .spec div { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.6rem 0; }
}

/* A measured number and what it is. Used sparingly. */
.figures { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin: 1.4rem 0; }
.figure .n {
  display: block;
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--accent-strong);
}
.figure .what { display: block; font-size: 0.92rem; color: var(--muted); max-width: 13rem; }

figure { margin: 1.6rem 0; }
figcaption { font-size: 0.9rem; color: var(--muted); max-width: var(--measure); margin-top: 0.6rem; }

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.table-scroll { overflow-x: auto; max-width: 100%; margin: 1.2rem 0; }
th, td { text-align: left; padding: 0.6rem 0.9rem 0.6rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 700; }

/* ========================================================================
   9. FORM
   ===================================================================== */
.signup { max-width: 26rem; margin: 1.2rem 0 0; }
.field { margin-bottom: 0.9rem; }
.field label { display: block; font-size: 0.92rem; color: var(--muted); margin-bottom: 0.25rem; }
.field input {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.form-msg { margin-top: 0.8rem; font-size: 0.95rem; }
.form-msg.pending { color: var(--muted); }
.form-msg.ok { color: var(--accent-strong); }
.form-msg.err { color: var(--ramp-oxblood); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-msg.err { color: var(--ramp-pink); }
}

/* ========================================================================
   10. FOOTER — the ramp strip is the signature. Ten hand-chosen colours.
   ===================================================================== */
.site-foot {
  border-top: 1px solid var(--rule-gold);
  background: var(--bg-deep);
  padding: 1.6rem var(--gutter) 0;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.2rem);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; max-width: none; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 0.94rem; }
.foot-links a:hover { color: var(--text); }
.foot-small { font-size: 0.88rem; color: var(--muted); max-width: none; }

/* The strip. Bottom-left, as on every slide of the brand deck. It carries no
   information — in a text browser it is simply absent, which is correct. */
.ramp-strip {
  display: flex;
  height: 9px;
  margin-top: 1.4rem;
  max-width: 27rem;
}
.ramp-strip span { flex: 1 1 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}