/* omegaalgo.com — corporate site.
   No JavaScript, no external requests: _headers sets `default-src 'none'` with only
   style-src/img-src 'self'. Display face is a system serif stack (New York on Apple,
   Georgia elsewhere) rather than a webfont, so nothing is fetched cross-origin and the
   no-cookies claim in privacy.html stays true without qualification. */

:root {
  --cream:   #fffef9;
  --sand:    #f7f6f3;
  --charcoal:#1a1a1a;
  --rust:    #b85c4e;
  --sage:    #7c9885;
  --ochre:   #d4a574;

  --text:    #1a1a1a;
  --text-2:  #4a5568;
  --text-3:  #718096;
  --border:  #e8e7e3;

  --bg:      var(--cream);
  --surface: rgba(247, 246, 243, 0.75);

  --rust-08: rgba(184, 92, 78, 0.08);
  --rust-16: rgba(184, 92, 78, 0.16);
  --sage-14: rgba(124, 152, 133, 0.14);
  --ochre-22:rgba(212, 165, 116, 0.22);

  --unit: 8px;

  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream:   #141311;
    --sand:    #1c1b18;
    --charcoal:#ece9e2;
    --rust:    #d4796a;

    --text:    #ece9e2;
    --text-2:  #b3afa4;
    --text-3:  #8d887d;
    --border:  #2c2a26;

    --bg:      var(--cream);
    --surface: rgba(28, 27, 24, 0.7);

    --rust-08: rgba(212, 121, 106, 0.10);
    --rust-16: rgba(212, 121, 106, 0.20);
    --sage-14: rgba(124, 152, 133, 0.18);
    --ochre-22:rgba(212, 165, 116, 0.20);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

::selection { background: var(--ochre-22); color: var(--charcoal); }

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* Barely-there dot field, as in the reference. Purely decorative. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.018;
  background-image:
    radial-gradient(circle at 20% 80%, var(--charcoal) 0.3px, transparent 0.3px),
    radial-gradient(circle at 80% 20%, var(--charcoal) 0.3px, transparent 0.3px);
  background-size: 37px 37px;
  background-position: 0 0, 18px 18px;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 calc(var(--unit) * 4);
}

p { line-height: 1.75; letter-spacing: 0.006em; }

a { color: var(--rust); text-decoration-thickness: 0.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 1px; }

*:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; border-radius: 2px; }

/* ── Masthead ───────────────────────────────────────────────────────────── */

.mast {
  display: flex;
  align-items: center;
  gap: calc(var(--unit) * 1.5);
  padding: calc(var(--unit) * 4) 0;
  border-bottom: 0.5px solid var(--border);
}

.mast img { display: block; }

.mast .name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.mast .name span { color: var(--text-3); font-weight: 400; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { padding: calc(var(--unit) * 14) 0 calc(var(--unit) * 10); }

h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.5vw, 44px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin-bottom: calc(var(--unit) * 4);
}

.hero h1 {
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.06;
  text-indent: -0.05em;
}

/* The one italic rust word the reference hangs its hero on. */
h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}

.lede {
  font-size: 19px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 62ch;
  margin-bottom: calc(var(--unit) * 5);
}

/* Organic brush-stroke highlight — gradient + irregular radius, no SVG filter. */
.brush {
  position: relative;
  display: inline-block;
  padding: 0 6px;
  margin: 0 -6px;
  color: var(--text);
  font-weight: 500;
  z-index: 1;
}

.brush::before {
  content: "";
  position: absolute;
  inset: -3px -9px;
  z-index: -1;
  transform: rotate(-1.4deg) skewX(-2.5deg);
  border-radius: 3px 88% 4px 92% / 94% 3px 90% 4px;
  background: linear-gradient(103deg, transparent 3%, var(--rust-08) 8%,
              var(--rust-16) 14%, var(--rust-16) 86%, var(--rust-08) 93%, transparent 97%);
}

.brush.sage::before {
  transform: rotate(1.6deg) skewX(2deg);
  border-radius: 92% 8px 85% 11px / 9px 94% 8px 87%;
  background: linear-gradient(106deg, transparent 4%, var(--sage-14) 9%,
              var(--sage-14) 88%, transparent 96%);
}

.brush.ochre::before {
  transform: rotate(-1deg) skewX(-3.5deg);
  border-radius: 85% 95% 92% 88% / 93% 85% 91% 96%;
  background: linear-gradient(102deg, transparent 4%, var(--ochre-22) 10%,
              var(--ochre-22) 87%, transparent 96%);
}

/* Torn-tape meta chips. */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--unit) * 1.5);
  font-size: 13px;
  color: var(--text-3);
}

.meta span {
  padding: 9px 16px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 85% 15% 92% 8% / 12% 88% 12% 88%;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.003em;
}

.meta span:nth-child(2) { border-radius: 95% 5% 85% 15% / 18% 92% 8% 82%; }
.meta span:nth-child(3) { border-radius: 88% 12% 90% 10% / 10% 85% 15% 90%; }

/* ── Sections ───────────────────────────────────────────────────────────── */

section { padding-bottom: calc(var(--unit) * 9); }

.label {
  display: inline-block;
  position: relative;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rust);
  padding: 4px 12px 4px 8px;
  margin-bottom: calc(var(--unit) * 2.5);
}

.label::before {
  content: "";
  position: absolute;
  inset: -2px -8px -2px -4px;
  z-index: -1;
  transform: rotate(-0.5deg);
  border-radius: 2px 85% 3px 90% / 88% 3px 92% 4px;
  background: linear-gradient(94deg, transparent 3%, var(--rust-08) 7%,
              var(--rust-08) 92%, transparent 97%);
}

h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.016em;
  margin-top: calc(var(--unit) * 6);
  margin-bottom: calc(var(--unit) * 3);
}

/* On index the heading follows its eyebrow label, which already supplies the gap. */
.label + h2 { margin-top: 0; }

main p + p { margin-top: calc(var(--unit) * 2.5); }

main p { color: var(--text-2); max-width: 66ch; }

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

hr {
  border: 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--border) 20%,
              var(--border) 80%, transparent);
  margin: 0 0 calc(var(--unit) * 9);
}

/* ── Company details ────────────────────────────────────────────────────── */

dl {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: calc(var(--unit) * 1.5) calc(var(--unit) * 4);
  font-size: 15px;
}

dt {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-top: 4px;
}

dd { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer {
  border-top: 0.5px solid var(--border);
  padding: calc(var(--unit) * 5) 0 calc(var(--unit) * 8);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-3);
}

footer p + p { margin-top: calc(var(--unit) * 1.5); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .wrap { padding: 0 calc(var(--unit) * 3); }
  .hero { padding: calc(var(--unit) * 9) 0 calc(var(--unit) * 7); }
  .lede { font-size: 17px; }
  dl { grid-template-columns: 1fr; gap: calc(var(--unit) * 0.5) 0; }
  dt { padding-top: calc(var(--unit) * 2); }
}

@media print {
  body::before { display: none; }
  body { background: #fff; color: #000; }
}

/* ── Inline SVG filter defs (must occupy no space) ──────────────────────── */

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Paper grain on two of the three brush strokes, as in the reference — all three
   filtered reads as noise rather than as ink. */
.brush::before        { filter: url(#roughPaper); }
.brush.sage::before   { filter: none; }

/* ── Hero atmosphere ────────────────────────────────────────────────────── */

.hero { position: relative; }

.shapes {
  position: absolute;
  inset: -80px -120px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.shapes i {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0.05;
  filter: blur(6px);
  animation: drift 52s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.shapes i:nth-child(1) {
  width: 240px; height: 240px; top: 4%; right: 2%;
  background: radial-gradient(circle, var(--rust) 0%, transparent 70%);
}
.shapes i:nth-child(2) {
  width: 200px; height: 200px; top: 52%; left: -4%;
  background: radial-gradient(circle, var(--sage) 0%, transparent 70%);
  animation-duration: 64s; animation-delay: -8s;
}
.shapes i:nth-child(3) {
  width: 170px; height: 170px; bottom: 2%; right: 18%;
  background: radial-gradient(circle, var(--ochre) 0%, transparent 70%);
  animation-duration: 76s; animation-delay: -20s;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(18px, -26px) scale(1.05); }
  50%      { transform: translate(-14px, -36px) scale(0.98); }
  75%      { transform: translate(26px, 18px) scale(1.02); }
}

/* ── Hero artwork ───────────────────────────────────────────────────────── */

.art {
  margin: 0 0 calc(var(--unit) * 9);
  padding: calc(var(--unit) * 2) 0 0;
}

.art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* Fade the field out at the left edge so the tree emerges rather than starts. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 100%);
}

.fan-faint {
  color: var(--text);
  opacity: 0.15;
  stroke-width: 0.75;
}

.fan-trace {
  color: var(--rust);
  opacity: 0.85;
  stroke-width: 1.5;
}

.fan-node circle { fill: var(--rust); opacity: 0.45; }

.fan-tip {
  fill: var(--rust);
  animation: resolve 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: 580px 114px;
}

@keyframes resolve {
  0%, 100% { opacity: 0.9;  transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.18); }
}

.art figcaption {
  margin-top: calc(var(--unit) * 2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text-3);
  letter-spacing: 0.004em;
}

/* ── Eyebrow label numbering ────────────────────────────────────────────── */

.label { position: relative; }

.label[data-n]::after {
  content: "(" attr(data-n) ")";
  margin-left: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
}

/* ── Stacked paper card ─────────────────────────────────────────────────── */

.card {
  position: relative;
  background: var(--sand);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: calc(var(--unit) * 4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 8px 16px rgba(0, 0, 0, 0.02);
}

/* Two sheets peeking out behind, mirroring the reference's stacked cards. */
.card::before,
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 0.5px solid var(--border);
  border-radius: 12px;
  background: var(--sand);
}

.card::before { transform: translate(10px, 10px) rotate(0.5deg); opacity: 0.7; }
.card::after  { transform: translate(20px, 20px) rotate(1deg);   opacity: 0.4; }

.card p { max-width: none; margin: 0; }

/* ── Motion and contrast preferences ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .shapes i,
  .fan-tip { animation: none; }
}

@media (prefers-contrast: more) {
  .fan-faint { opacity: 0.3; }
  .brush::before, .brush.sage::before, .brush.ochre::before { filter: none; }
}

/* ── Contact call to action ─────────────────────────────────────────────── */

.cta {
  text-align: center;
  background: linear-gradient(135deg, var(--sand) 0%, var(--cream) 100%);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: calc(var(--unit) * 7) calc(var(--unit) * 4);
  margin-bottom: calc(var(--unit) * 4);
}

.cta h2 { margin-top: 0; margin-bottom: calc(var(--unit) * 2); }

.cta p {
  max-width: 46ch;
  margin: 0 auto calc(var(--unit) * 4);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 28px;
  background: var(--charcoal);
  color: var(--cream);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.06);
}

.btn svg { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ══ showcase.html ═══════════════════════════════════════════════════════════
   The product page. Everything below reuses the tokens declared at the top of
   this file — no new colours — so the showcase and the company page stay one
   design. Only the device captures are new material, and they are the reason
   this page breaks the 780px measure the rest of the site keeps to. */

/* ── Masthead link back to the company page ─────────────────────────────── */

.mast-nav {
  margin-left: auto;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.mast-nav a { color: var(--text-3); text-decoration: none; }
.mast-nav a:hover { color: var(--rust); text-decoration: underline; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* "Introducing" is a roof line, not a section label, so it is set larger and in
   the serif rather than reusing the uppercase .label chip. */
.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0.01em;
  margin-bottom: calc(var(--unit) * 1);
}

.showcase-hero h1 { margin-bottom: calc(var(--unit) * 3.5); }

/* ── Full-bleed row for the captures ────────────────────────────────────── */

/* The measure is 780px; three portrait phone screens need more than that. This
   centres a wider block on the viewport without letting it exceed it. */
.breakout {
  width: min(1060px, 100vw - calc(var(--unit) * 4));
  margin-left: 50%;
  transform: translateX(-50%);
}

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: calc(var(--unit) * 4);
  align-items: start;
}

.shot { margin: 0; }

/* A hairline and a soft lift, so the capture reads as a device held against the
   paper rather than as an image pasted onto it. */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 0.5px solid var(--border);
  background: var(--sand);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.07);
}

.shot figcaption {
  margin-top: calc(var(--unit) * 2);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
}

.shot figcaption b { color: var(--text-2); font-weight: 600; }

.provenance {
  margin-top: calc(var(--unit) * 4);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--text-2);
}

/* .breakout is a section, so it already carries the section padding-bottom. */

/* ── Move notation ──────────────────────────────────────────────────────── */

/* SAN is data, and the app sets it in a mono face; matching that here keeps the
   page and the product speaking the same way. */
.san {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--text-2);
  white-space: nowrap;
}

/* ── Fact lists ─────────────────────────────────────────────────────────── */

.facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 2);
  max-width: 66ch;
  margin-top: calc(var(--unit) * 3);
}

.facts li {
  position: relative;
  padding-left: calc(var(--unit) * 3);
  color: var(--text-2);
  line-height: 1.75;
}

/* A small ochre lozenge rather than a disc — the same ink the hero highlights
   use, at the size of a punctuation mark. */
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 70% 30% 65% 35% / 35% 70% 30% 65%;
  background: var(--ochre);
  opacity: 0.85;
}

.facts li b { color: var(--text); font-weight: 600; }

/* ── Signature features ─────────────────────────────────────────────────── */

/* These are peers, not steps, so they get a rule and a heading rather than the
   numbered chips the company page uses for its ordered argument. */
.feature {
  border-top: 0.5px solid var(--border);
  padding-top: calc(var(--unit) * 3.5);
  margin-top: calc(var(--unit) * 4.5);
}

.feature:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.feature h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: calc(var(--unit) * 1.5);
}

.feature h3 em { font-style: italic; color: var(--rust); }

.aside {
  margin-top: calc(var(--unit) * 4);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text-3);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .eyebrow { font-size: 18px; }
  .shots { gap: calc(var(--unit) * 5); }
  /* One column at this width, so cap the capture at a readable phone size
     instead of letting it fill the viewport edge to edge. */
  .shot img { max-width: 300px; margin: 0 auto; }
  .shot figcaption { max-width: 300px; margin-left: auto; margin-right: auto; }
}

/* `.card p` zeroes the margin (0,1,1 beats `main p + p` at 0,0,3), so a card that
   holds more than one paragraph needs its own rule or the two collide. */
.card p + p { margin-top: calc(var(--unit) * 2.5); }

/* The capture row is a figure block, not prose, and the <hr> beneath it already
   supplies 9 units of air — the full section pad on top of that reads as a hole. */
.breakout { padding-bottom: calc(var(--unit) * 4); }

/* Keep decorative atmosphere inside the mobile page's layout bounds. */
.shapes { inset-inline: 0; }