/**
 * Sharecut marketing layout + brand tokens.
 * Cover paints the place (canvas). Box is a durable object (surface).
 * .box.elevated is a temporary object. .primary is an act.
 * Source of truth — copies in sharecut/www/download public dirs must match
 * (tests/test_public_sites.py). Retint :root; do not restyle each page.
 */

:root {
  color-scheme: light dark;
  --ratio: 1.5;
  --s0: 1rem;
  --s-1: calc(var(--s0) / var(--ratio));
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --measure: 60ch;
  --tap-min: 1.5rem;
  --tap-comfortable: 2.75rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --font-family-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-display: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Times New Roman", serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    monospace;
  --color-bg-canvas: #191816;
  --color-bg-surface: #22211e;
  --color-bg-elevated: #2a2925;
  --color-border: #4a4842;
  --color-border-strong: #7a7870;
  --color-text-primary: #f4f1ea;
  --color-text-secondary: #a8a39a;
  --color-accent: #e8a45a;
  --color-accent-solid: #b45c28;
  --color-accent-on-solid: #ffffff;
  --color-shadow-soft: color-mix(in srgb, #000000 25%, transparent);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg-canvas: #f7f4ee;
    --color-bg-surface: #fcfbf8;
    --color-bg-elevated: #fffdf9;
    --color-border: #cfcabe;
    --color-border-strong: #8a867c;
    --color-text-primary: #1a1916;
    --color-text-secondary: #5a574e;
    --color-accent: #a85a24;
    --color-accent-solid: #a85a24;
    --color-accent-on-solid: #ffffff;
    --color-shadow-soft: color-mix(in srgb, #000000 16%, transparent);
  }
}

/* Company page: cooler accent, same scale. */
.company {
  --color-accent: #8aa8a0;
  --color-accent-solid: #3d5c56;
  --color-accent-on-solid: #ffffff;
}

@media (prefers-color-scheme: light) {
  .company {
    --color-accent: #3d5c56;
    --color-accent-solid: #3d5c56;
  }
}

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

* {
  max-inline-size: var(--measure);
}

html,
body,
div,
header,
nav,
main,
footer,
ul,
ol,
img,
svg,
audio,
.cover,
.cluster,
.box,
.switcher,
.frame {
  max-inline-size: none;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-block-size: 100dvh;
  font-family: var(--font-family-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

h1,
h2,
p {
  margin: 0;
}

a {
  color: var(--color-accent);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wordmark {
  font-family: var(--font-family-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lede {
  color: var(--color-text-secondary);
}

.badge {
  display: inline-block;
  margin: 0;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.cover {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  padding-block: var(--s1);
  padding-inline: var(--s1);
  background: var(--color-bg-canvas);
}

.cover > * {
  margin-block: var(--s1);
}

.cover > .cover-center {
  margin-block: auto;
}

.cover > :first-child:not(.cover-center) {
  margin-block-start: 0;
}

.cover > :last-child:not(.cover-center) {
  margin-block-end: 0;
}

.center {
  box-sizing: content-box;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--s1);
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--s1);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: center;
}

.box {
  padding: var(--s1);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: 0 1px 2px var(--color-shadow-soft);
}

.box.elevated {
  background: var(--color-bg-elevated);
}

.box h2 {
  font-size: 1.05rem;
  margin: 0 0 var(--s-1);
}

.box p {
  margin: 0;
  color: var(--color-text-secondary);
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((30rem - 100%) * 999);
}

.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--tap-comfortable);
  padding-inline: var(--s1);
  border-radius: var(--radius-lg);
  background: var(--color-accent-solid);
  color: var(--color-accent-on-solid);
  text-decoration: none;
  font-weight: 600;
}

.primary[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

#platform-links a[aria-disabled="true"] {
  color: var(--color-text-secondary);
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}

.soon {
  color: var(--color-text-secondary);
  font-size: 0.85em;
}

.note,
.checksums {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.checksums {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  word-break: break-all;
}

ul.plain {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.plain li {
  margin-block: var(--s-1);
}

footer {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}