/* Lemnos design system. Single source of truth for every Lemnos Holdings site.
   Served from https://lemnosholdings.com/design/lemnos.css. Change it here and every product follows.
   Reference: https://lemnosholdings.com/design/  ·  Usage: README.md in this folder. */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap");

/* =====================================================================
   1. Tokens
   ===================================================================== */
:root {
  /* Brand accent. Brands override the six *-l / *-d values (light / dark); never --accent directly. */
  --accent-l: #175C6C; --accent-ink-l: #f4f4f0; --accent-soft-l: #dde9ea;
  /* Flame: the logo's ember, for highlights (h1 em on Lemnos pages, the mark). */
  --flame-l: #D35330; --flame-d: #E8774F;
  --accent-d: #6fb3c2; --accent-ink-d: #0f2227; --accent-soft-d: #1a3036;

  /* Neutrals: warm paper */
  --paper: #f6f4ee;
  --paper-2: #efece3;
  --card: #fffdf8;
  --ink: #1b1a17;
  --ink-2: #4a4843;
  --ink-3: #7d7a72;
  --rule: #dcd7ca;
  --rule-2: #c9c3b3;

  /* Status colors (brand-independent) */
  --ok: #1d5c43;  --ok-soft: #e0ece3;
  --err: #a8321f; --err-soft: #f6e1db;
  --warn: #8a5a00; --warn-soft: #f4e8cc;

  --accent: var(--accent-l); --accent-ink: var(--accent-ink-l); --accent-soft: var(--accent-soft-l); --flame: var(--flame-l);

  /* Type */
  --serif: "Newsreader", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-body: 16.5px;
  --fs-small: 13.5px;
  --fs-label: 12px;
  --fs-h1: clamp(38px, 5vw, 58px);
  --fs-h1-statement: clamp(40px, 6.2vw, 76px);
  --fs-h2: clamp(28px, 3.2vw, 36px);
  --fs-h3: 21px;

  /* Space and shape */
  --wrap: 1080px;
  --gutter: 24px;
  --label-col: 220px;
  --col-gap: 48px;
  --band-pad: 72px;
  --r-sm: 4px;
  --r: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --shadow: 0 18px 40px -24px rgba(40, 36, 25, .35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151513; --paper-2: #1c1c19; --card: #1f1f1c;
    --ink: #ebe8e0; --ink-2: #bdb9ae; --ink-3: #8c887e;
    --rule: #2f2e2a; --rule-2: #3d3c37;
    --ok: #7fc3a2; --ok-soft: #1f3128;
    --err: #ef8f7e; --err-soft: #3a211c; --warn: #e2b560; --warn-soft: #362b17;
    --accent: var(--accent-d); --accent-ink: var(--accent-ink-d); --accent-soft: var(--accent-soft-d); --flame: var(--flame-d);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #151513; --paper-2: #1c1c19; --card: #1f1f1c;
  --ink: #ebe8e0; --ink-2: #bdb9ae; --ink-3: #8c887e;
  --rule: #2f2e2a; --rule-2: #3d3c37;
  --ok: #7fc3a2; --ok-soft: #1f3128;
  --err: #ef8f7e; --err-soft: #3a211c; --warn: #e2b560; --warn-soft: #362b17;
  --accent: var(--accent-d); --accent-ink: var(--accent-ink-d); --accent-soft: var(--accent-soft-d); --flame: var(--flame-d);
  color-scheme: dark;
}

/* =====================================================================
   2. Base
   ===================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: var(--fs-body)/1.65 var(--sans); font-feature-settings: "kern", "liga";
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code, .mono { font-family: var(--mono); font-size: .88em; }
code { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: .05em .35em; overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
h1 em, h2 em { font-style: italic; color: var(--accent); }
h2 { font-size: var(--fs-h2); margin-bottom: 20px; }
h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
p { margin: 0 0 14px; }
img, svg { max-width: 100%; }
.fine { font-size: var(--fs-small); color: var(--ink-3); }
.muted { color: var(--ink-3); font-size: 14.5px; }

/* =====================================================================
   3. Header: .top (sticky, hairline) or .top.plain (static, airy)
   ===================================================================== */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.top .in {
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.top.plain { position: static; background: none; backdrop-filter: none; border-bottom: 0; }
.top.plain .in { padding-top: 28px; padding-bottom: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: .2px; }
.brand svg { width: 22px; height: 22px; flex: none; }
.brand.caps { gap: 12px; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; }
.brand.caps svg { width: 26px; height: 26px; }
.top nav { display: flex; gap: 22px; font-size: 14.5px; }
.top nav a { color: var(--ink-2); text-decoration: none; }
.top nav a:hover { color: var(--ink); }

/* =====================================================================
   4. Layout: .wrap, section.band, .split (label column + content)
   ===================================================================== */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
section.band { border-top: 1px solid var(--rule); padding: var(--band-pad) 0; }
.split { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--col-gap); }
.split > * { min-width: 0; }
.label, .split > .label {
  font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.split > .label { padding-top: 10px; }
.body { max-width: 640px; color: var(--ink-2); }
.body p:last-child { margin-bottom: 0; }

/* =====================================================================
   5. Hero: .hero (two columns via .grid) or .hero.statement (one huge line)
   ===================================================================== */
.hero { padding: 76px 0 84px; }
.hero .grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: center; }
.hero .grid > * { min-width: 0; }
.kicker { font: 500 12.5px var(--mono); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 18px; }
.hero h1 { font-size: var(--fs-h1); margin-bottom: 22px; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 520px; }
.hero.statement { padding: 96px 0 104px; }
.hero.statement h1 { font-size: var(--fs-h1-statement); line-height: 1.04; letter-spacing: -.02em; max-width: 900px; margin-bottom: 30px; }
.hero.statement .lede { font-size: 19px; max-width: 580px; margin: 0; }

/* =====================================================================
   6. Buttons, CTA row, pills, badge, status tags
   ===================================================================== */
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.btn {
  display: inline-block; font: 500 15px var(--sans); text-decoration: none;
  background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: var(--r);
  border: 1px solid var(--ink); transition: transform .12s ease; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn.alt { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.pill { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11.5px; }
.pill.done { background: var(--ok-soft); color: var(--ok); }
.pill.err { background: var(--err-soft); color: var(--err); }
.pill.wait { background: var(--warn-soft); color: var(--warn); }

.badge { display: inline-block; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); margin-bottom: 18px; }

.status { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-sm); white-space: nowrap; }
.status.live { background: var(--accent-soft); color: var(--accent); }
.status.soon { border: 1px solid var(--rule); color: var(--ink-3); }

/* =====================================================================
   7. Lists: ol.steps (numbered, ruled), ul.limits (dash bullets, 2 columns)
   ===================================================================== */
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 0; }
ol.steps li {
  counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2);
}
ol.steps li:first-child { border-top: 1px solid var(--rule); }
ol.steps li::before { content: counter(s, decimal-leading-zero); font: 500 13px/1.9 var(--mono); color: var(--ink-3); }
ol.steps li strong { color: var(--ink); font-weight: 600; }

ul.limits { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
ul.limits li { break-inside: avoid; padding: 0 0 16px 18px; position: relative; color: var(--ink-2); font-size: 15.5px; }
ul.limits li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--ink-3); }

/* =====================================================================
   8. Pricing: .plans > .plan (second plan is tinted with the accent)
   ===================================================================== */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule-2); border-radius: var(--r-lg); overflow: hidden; background: var(--card); max-width: 760px; }
.plan { padding: 28px 28px 30px; min-width: 0; }
.plan + .plan { border-left: 1px solid var(--rule-2); background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }
.plan h3 { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.price { font: 400 44px/1.1 var(--serif); margin: 10px 0 4px; }
.price small { font: 400 15px var(--sans); color: var(--ink-3); }
.plan p { color: var(--ink-2); font-size: 15px; }
.plan .cta { margin-top: 18px; }

/* =====================================================================
   9. Definition list: dl.scopes (term | explanation, ruled)
   ===================================================================== */
dl.scopes { margin: 0; display: grid; grid-template-columns: minmax(200px, 280px) 1fr; border-top: 1px solid var(--rule); }
dl.scopes dt, dl.scopes dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
dl.scopes dt { font-weight: 600; padding-right: 24px; font-size: 15px; }
dl.scopes dd { color: var(--ink-2); font-size: 15px; }

/* =====================================================================
   10. Principles grid (2x2, hairline cross)
   ===================================================================== */
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.principles > div { padding: 22px 28px 22px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.principles > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.principles > div:nth-child(even) { padding-left: 28px; }
.principles h3 { font: 600 15.5px var(--sans); letter-spacing: 0; margin: 0 0 6px; }
.principles p { font-size: 15px; color: var(--ink-2); margin: 0; }

/* =====================================================================
   11. Product rows (.products > .product, with .status tag)
   ===================================================================== */
.product { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; padding: 24px 0; border-top: 1px solid var(--rule); }
.product > * { min-width: 0; }
.product:last-child { border-bottom: 1px solid var(--rule); }
.product h3 { font-size: 26px; line-height: 1.2; margin: 0 0 6px; }
.product h3 a { color: inherit; text-decoration: none; }
.product h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.product p { margin: 0; font-size: 15.5px; color: var(--ink-2); }

/* A large serif link, e.g. the contact address */
.display-link { font: 400 clamp(22px, 2.6vw, 28px) var(--serif); color: var(--ink); text-decoration-color: var(--accent); overflow-wrap: anywhere; }

/* =====================================================================
   12. Support grid (two prose columns)
   ===================================================================== */
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 800px; color: var(--ink-2); }
.support-grid > * { min-width: 0; }

/* =====================================================================
   13. Sheet / table mock, and the note card
   ===================================================================== */
.mock { position: relative; min-width: 0; }
.sheet {
  background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r-md);
  box-shadow: 0 1px 0 var(--rule), var(--shadow);
  overflow: hidden; font: 12.5px/1.3 var(--mono);
}
.sheet .bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.sheet .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); display: block; }
.sheet .bar span { margin-left: 8px; color: var(--ink-3); font-size: 11.5px; }
.sheet .scroll { overflow-x: auto; }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th, .sheet td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.sheet th { font-weight: 500; color: var(--ink-3); background: var(--paper-2); }
.sheet td.n { color: var(--ink-3); width: 22px; }
.sheet th.hl, .sheet td.hl { border-left: 1px solid var(--rule); }
.sheet th.hl { color: var(--accent); }
.sheet td.errtxt { color: var(--err); }

.note {
  position: relative; margin: -6px -18px 0 auto; width: min(320px, 86%);
  background: var(--card); border: 1px solid var(--rule-2); border-left: 3px solid var(--err);
  border-radius: var(--r); padding: 12px 14px; font-size: 13px; line-height: 1.45;
  box-shadow: 0 16px 30px -18px rgba(40, 36, 25, .4);
}
.note.ok { border-left-color: var(--ok); }
.note.info { border-left-color: var(--accent); }
.note b { display: block; font-weight: 600; margin-bottom: 2px; }
.note .mono { color: var(--ink-3); font-size: 11.5px; display: block; margin-top: 6px; }
.note.inline { margin: 0; width: auto; max-width: 520px; }

/* =====================================================================
   14. Footer: flex (default) or footer.cols (label column grid)
   ===================================================================== */
footer { border-top: 1px solid var(--rule); padding: 36px 0 48px; font-size: var(--fs-small); color: var(--ink-3); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--ink-2); }
footer em { font-family: var(--serif); font-size: 15px; color: var(--ink-2); }
footer.cols { padding: 40px 0 56px; }
footer.cols .wrap { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--col-gap); }
footer.cols p { margin: 0; max-width: 560px; }

/* =====================================================================
   15. Legal / long-form document: main.doc
   ===================================================================== */
main.doc { max-width: 720px; margin: 0 auto; padding: 64px var(--gutter) 80px; }
main.doc h1 { font-size: clamp(34px, 4vw, 44px); margin-bottom: 14px; }
main.doc h2 { font-size: 24px; margin: 40px 0 12px; }
main.doc p, main.doc li { color: var(--ink-2); }
main.doc ul, main.doc ol { padding-left: 20px; }
main.doc li { margin-bottom: 6px; }

/* =====================================================================
   16. Responsive. Nothing may overflow horizontally at 390px.
   ===================================================================== */
@media (max-width: 880px) {
  .hero .grid { grid-template-columns: 1fr; gap: 64px; }
  .hero.statement { padding: 64px 0 72px; }
  .split, footer.cols .wrap { grid-template-columns: 1fr; gap: 14px; }
  .split > .label { padding-top: 0; }
  ul.limits { columns: 1; }
  .support-grid { grid-template-columns: 1fr; gap: 12px; }
  .principles { grid-template-columns: 1fr; }
  .principles > div, .principles > div:nth-child(even), .principles > div:nth-child(odd) { padding: 18px 0; border-right: 0; }
  .note { width: auto; margin: -10px 12px 0; }
  .note.inline { margin: 0; }
}
@media (max-width: 620px) {
  .top nav { gap: 14px; font-size: 13.5px; }
  .hide-sm { display: none !important; }
  section.band { padding: 52px 0; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--rule-2); }
  dl.scopes { grid-template-columns: 1fr; }
  dl.scopes dt { border-bottom: 0; padding-bottom: 2px; }
  dl.scopes dd { padding-top: 0; }
  .product { grid-template-columns: 1fr; gap: 10px; }
  .product .status { justify-self: start; }
}

/* Lemnos mark (mountain + flame). Use <img class="mark-img" src="https://lemnosholdings.com/design/brand/mark.svg">. */
.mark-img { width: 26px; height: 26px; display: block; }
.mark-img.dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark-img.light { display: none; } :root:not([data-theme="light"]) .mark-img.dark { display: block; } }
:root[data-theme="dark"] .mark-img.light { display: none; } :root[data-theme="dark"] .mark-img.dark { display: block; }
.flame-em h1 em { color: var(--flame); }