/* cobolynk.com page layout. Every colour, font, radius and shadow comes from
   styles.css (the COBOLYNK design system, design/cobolynk). This sheet only
   lays pages out, on the landing template's 28px rhythm. */
:root { --leading: 28px; --half: 14px; --edge: clamp(20px, 5vw, 72px); --measure: 60ch; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; overflow-x: clip; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav-brand a { font-size: inherit; }
/* THE COMPANY NAV, ON A PHONE: every product and page stays reachable, so
   nothing is hidden; the brand takes its own row and the links sit under it. */
@media (max-width: 560px) { .nav { flex-wrap: wrap; row-gap: 0; } .nav-brand { flex-basis: 100%; }
  /* THE TAP FLOOR (2.25rem): each link a full target, not its 22px of text. */
  .nav > a { display: inline-flex; align-items: center; min-height: 2.25rem; } }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--edge); top: var(--half); z-index: 2; background: var(--color-surface); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }

.kicker { display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); margin: 0 0 var(--half); }
.muted { color: color-mix(in srgb, var(--color-text) 72%, transparent); }

.hero { position: relative; padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.hero::before { content: ""; position: absolute; right: -180px; top: -220px; width: 420px; height: 420px;
  border-radius: 50%; background: var(--color-accent-2-200); pointer-events: none; z-index: -1; }
@media (max-width: 1420px) { .hero::before { right: 0; } }
.display { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 5.8vw, 76px); line-height: 1.08; margin: 0 0 0 -0.028em; }
.display .line { display: block; }
/* On a phone the two lines run on as one sentence: forced breaks there left a
   word alone on its row ("people"). */
@media (max-width: 560px) { .display .line { display: inline; } }
.note { margin: var(--leading) 0 0; }
.sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure); margin: var(--leading) 0 0; }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--leading); }

/* the numbers, as tinted circles (the template's seed bed, kept to a plain wrap) */
.seeds { display: flex; flex-wrap: wrap; gap: var(--leading) var(--half); align-items: center; padding: var(--leading) 0 calc(2 * var(--leading)); }
.seed { border-radius: 50%; aspect-ratio: 1; display: grid; place-content: center; text-align: center;
  padding: var(--half); width: clamp(150px, 20vw, 210px); }
.seed:nth-child(1) { background: var(--color-accent-100); }
.seed:nth-child(2) { background: var(--color-accent-2-100); transform: translateY(var(--half)); }
.seed:nth-child(3) { background: var(--color-accent-200); }
.seed:nth-child(4) { background: var(--color-accent-2-300); transform: translateY(var(--half)); }
.stat-num { font-family: var(--font-heading); font-size: clamp(32px, 3.2vw, 44px); line-height: 1.1; margin: 0; color: var(--color-accent-700); }
.seed:nth-child(even) .stat-num { color: var(--color-accent-2-800); }
.stat-label { font-size: 13px; line-height: 1.35; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  margin: var(--space-1) auto 0; max-width: 15ch; color: color-mix(in srgb, var(--color-text) 75%, transparent); }

section { padding: calc(2 * var(--leading)) 0; }
h2.section-title { font-size: 32px; margin: 0 0 var(--leading); }
.feature { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--half) clamp(24px, 4vw, 72px);
  align-items: baseline; padding: var(--leading) 0 0; }
.f-title { font-family: var(--font-heading); font-size: 24px; line-height: 1.2; margin: 0; }
.f-copy { font-size: 15.5px; line-height: var(--leading); margin: 0; max-width: 54ch;
  color: color-mix(in srgb, var(--color-text) 80%, transparent); }
@media (max-width: 880px) { .feature { grid-template-columns: 1fr; } }

.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--leading); }
.product { padding: calc(1.5 * var(--leading)); border-radius: calc(2 * var(--radius-lg)); display: flex; flex-direction: column; gap: var(--half); }
.product h3 { font-size: 32px; margin: 0; }
.product p { margin: 0; font-size: 15.5px; line-height: var(--leading); max-width: 46ch; }
.product .row { margin-top: auto; padding-top: var(--half); }
.product-live { background: var(--color-accent-100); }
.product-soon { background: var(--color-accent-2-100); }

.patch { background: var(--color-accent-2-100); border-radius: calc(2 * var(--radius-lg)); padding: calc(2 * var(--leading)) clamp(24px, 4vw, 64px); }
.patch h2 { font-size: 26px; margin: 0; }

/* pricing table and plain documents */
.table-scroll { max-width: 760px; overflow-x: auto; }
.price-table { min-width: 0; }
.price-table td:last-child, .price-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc { max-width: 72ch; padding: calc(3 * var(--leading)) 0 calc(2 * var(--leading)); }
.doc h1 { font-size: clamp(36px, 4.6vw, 52px); margin-bottom: var(--leading); }
.doc h2 { font-size: 24px; margin: calc(1.5 * var(--leading)) 0 var(--half); }
.doc p, .doc li { font-size: 16px; line-height: 1.65; }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: var(--space-1); }
.draft { background: var(--color-accent-100); color: var(--color-accent-800); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); font-size: 14px; margin-bottom: var(--leading); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
.fill { background: var(--color-accent-200); border-radius: 999px; padding: 0 var(--space-2); }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; gap: 2px; } .facts dd { margin-bottom: var(--space-2); } }

footer.site { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 72%, transparent); }
footer.site .cols { display: flex; flex-wrap: wrap; gap: var(--leading) calc(2 * var(--leading)); justify-content: space-between; }
footer.site nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
footer.site a { color: inherit; }
@media (max-width: 560px) { .price-table td:last-child, .price-table th:last-child { white-space: normal; } .price-table th, .price-table td { padding-inline: var(--space-1); } }

/* the consent card: the system's raised card, bottom-left on the page edge */
.consent { position: fixed; left: var(--edge); bottom: max(var(--edge), env(safe-area-inset-bottom, 0px)); z-index: 3;
  width: min(420px, calc(100% - 2 * var(--edge))); padding: var(--space-4); }
.consent .card-body { opacity: 1; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
/* HIDDEN MEANS GONE: .card's display:flex outranks the browser's own
   [hidden] rule, so Accept hid the banner in name only (founder, 2026-10-12). */
.consent[hidden] { display: none; }
.consent-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }