/* Shared styles for Sibuor Labs division sub-pages, Signal theme.
   Paper background, forest accent, square corners.

   Type, rhythm and measure are the landing pages', sibuor.com/ and /mira/, rather than a scale of their own. The division pages were built earlier on a
   fixed 16px body, a fixed 1240px/40px container and an h2 that stopped at
   52px, so next to the newer pages they read as a different, smaller site: the
   same fonts and the same green, but half the presence. Everything below is
   now driven by the same tokens and the same clamps the landing pages use, so
   a heading, a section's air and the width of the measure match wherever you
   land. Corners stay square and rules stay hairline: that part of the system
   was already shared. */
:root {
  --bg: #ffffff; --bg-2: #f4f4f1; --ink: #0a0a0a; --ink-2: #3a3a38; --muted: #8a8a85;
  --rule: rgba(10,10,10,0.12); --rule-strong: rgba(10,10,10,0.9);
  --accent: #0b6b3a; --accent-ink: #084f2b; --accent-soft: #e8f1ea;
  --btn-radius: 0; --box-radius: 0; --display-weight: 600;
  --sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* the landing pages' layout tokens, verbatim */
  --gutter: max(24px, 5vw);
  --wrap: min(1240px, 100% - var(--gutter) * 2);
  --navh: 72px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* the section rhythm every band on the landing pages uses */
  --band: clamp(90px, 15vh, 190px);
  /* white on near-black, with the brand green left to the arrow: the same
     decision the Mira and Sibuor heroes landed on for a night ground */
  --cta-night: #ffffff; --cta-night-hi: #e8ede8; --cta-night-ink: #08120c;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-size: clamp(16px, .6vw + 14px, 19px); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.container { width: var(--wrap); margin-inline: auto; }
/* The eyebrow: mono, wide tracking, with the accent rule the landing pages set
   before it. It was a plain grey mono string here, which is the one place the
   two systems disagreed on a mark rather than a size. */
.label { font: 500 clamp(11px, .95vw, 12.5px)/1 var(--mono); text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--muted); display: inline-flex; align-items: center; gap: 11px; }
.label::before { content: ""; width: 26px; height: 1px; background: var(--accent); flex: none; }
.mono { font-family: var(--mono); }
.accent { color: var(--accent); }

/* bar logo */
/* The mark is sized in em against the wordmark, so the lockup keeps one
   proportion wherever it appears. It used to be 26px hard-coded while the
   footer overrode the text to 20px, which quietly made the footer wordmark
   larger against an identical mark. 1.4444em == the nav's original 26/18. */
.barmark { display: flex; flex-direction: column; gap: .1667em; width: 1.4444em; flex-shrink: 0; }
.barmark i { display: block; height: .2778em; background: var(--ink); }
.barmark i:nth-child(2) { background: var(--accent); }

/* nav */
.nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ink); }
.nav-inner { display: flex; align-items: center; gap: 36px; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--ink); }
.nav-links a.is-current { color: var(--accent); }
.nav-spacer { flex: 1; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 20px; font-family: var(--sans); font-size: 14px; font-weight: 600; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); cursor: pointer; transition: all .15s ease; white-space: nowrap; border-radius: var(--btn-radius); }
.btn:hover { text-decoration: none; background: var(--ink); color: var(--bg); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

.back { position: fixed; left: 18px; bottom: 18px; z-index: 200; white-space: nowrap; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); background: var(--bg); border: 1px solid var(--rule-strong); padding: 8px 12px; }
.back:hover { background: var(--ink); color: var(--bg); text-decoration: none; }

/* page hero */
.page-hero { padding: clamp(64px, 11vh, 130px) 0 clamp(56px, 9vh, 110px); border-bottom: 1px solid var(--ink); }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 30px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .here { color: var(--ink); }
.page-hero .division-mark { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.page-hero .division-mark .glyph { width: 44px; height: 44px; background: var(--accent); }
.page-hero .division-mark .tagline { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.page-hero h1 { font-size: clamp(48px, 8.4vw, 116px); line-height: 0.93; letter-spacing: -0.045em; font-weight: var(--display-weight); margin: 0 0 clamp(20px, 2.6vw, 32px); max-width: 14ch; text-wrap: balance; }
/* the landing pages set their lede on a 36ch measure so it breaks into three
   or four short lines under the display type, rather than one long paragraph */
.page-hero .lede { font-size: clamp(19px, 1.5vw, 25px); line-height: 1.36; color: var(--ink-2); max-width: 42ch; margin: 0; text-wrap: pretty; }
.page-hero .hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: clamp(30px, 4vh, 46px); }

/* Legal pages (terms, privacy, security, cookies).
   The title and its version line are one unit, so the rule that used to run
   between them is gone and the two are set close together instead. Scoped to
   .legal-page because careers and affiliates share .doc-page and .page-hero
   and still want the rule. */
.legal-page .page-hero { border-bottom: 0; padding: clamp(56px, 9vh, 96px) 0 0; }
/* A legal document is not a landing page. The display clamp that gives
   "Enterprise" and "Earn on every business you send our way." their presence
   sets "Terms of Service" at 116px, which reads as a headline rather than a
   document title, so the legal pages keep the smaller scale. */
.legal-page .page-hero h1 { font-size: clamp(40px, 5vw, 66px); letter-spacing: -0.035em; }
.legal-page section.block { padding-top: 32px; }
/* With the rule gone, the title and the document under it have to share a left
   edge: the measure is centred by default, which read as two separate zones
   once there was no line between them to explain the shift. */
.legal-page .legal { margin-left: 0; }

/* generic section */
section.block { padding: var(--band) 0; border-bottom: 1px solid var(--ink); }
/* A bare <h2>, affiliates uses several, had no rule at all and fell back to
   the browser's 2em, which now tracks the fluid body size and lands wherever.
   This puts it on the system without touching the scoped headings above. */
section.block > .container > h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02;
  letter-spacing: -0.032em; font-weight: var(--display-weight); margin: 0 0 clamp(18px, 2vw, 26px); text-wrap: balance; }
.section-head { margin: 0 0 clamp(38px, 5.5vw, 72px); }
.section-head .label { display: inline-flex; margin-bottom: clamp(18px, 2.2vw, 26px); }
/* clamp(34px,6vw,80px) at line-height .96 is the landing pages' h2, and it is
   the single biggest reason these pages read smaller: they stopped at 52px. */
.section-head h2 { font-size: clamp(34px, 6vw, 80px); line-height: 0.96; letter-spacing: -0.035em; font-weight: var(--display-weight); margin: 0; max-width: 18ch; text-wrap: balance; }
.section-head p { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: var(--muted); margin: clamp(20px, 2.4vw, 28px) 0 0; max-width: 52ch; text-wrap: pretty; }

/* feature cards grid */
.grid-cards { display: grid; gap: clamp(14px, 1.4vw, 20px); }
.grid-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Bigger inside and out: the landing pages give a card real air and set its
   heading close to a section subhead, so a grid of four reads as four
   statements rather than four table cells. */
/* The min-height is deliberately not scaled with the padding. Growing both
   opened dead field under the shorter cards, the copy is two lines and the
   box was three deep, which is the same thing that went wrong on the Mira
   tiles. The padding does the work; the floor only stops a one-line card
   collapsing next to a three-line one. */
.feature { border: 1px solid var(--ink); border-radius: var(--box-radius); padding: clamp(26px, 2.9vw, 44px); display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px); min-height: 220px; }
.feature .idx { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--accent); }
.feature h3 { font-size: clamp(23px, 2.1vw, 32px); font-weight: var(--display-weight); letter-spacing: -0.028em; line-height: 1.08; margin: 0; }
.feature p { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: var(--muted); margin: 0 0 auto; }
.feature .flink { font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 16px; }
.feature .flink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* process steps */
.steps { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.step { display: grid; grid-template-columns: 0.4fr 1fr 1.6fr; gap: clamp(24px, 3.2vw, 52px); align-items: start; padding: clamp(34px, 4vw, 56px) 0; border-bottom: 1px solid var(--rule); }
.step .step-n { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--accent); }
.step h3 { font-size: clamp(28px, 3.1vw, 44px); font-weight: var(--display-weight); letter-spacing: -0.032em; line-height: 1.02; margin: 0; }
.step p { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: var(--ink-2); margin: 0; }

/* mira spotlight (Enterprise) */
.spotlight { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border: 1px solid var(--ink); border-radius: var(--box-radius); overflow: hidden; }
.spotlight-content { padding: clamp(34px, 4.2vw, 68px); display: flex; flex-direction: column; }
.spotlight-kicker { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 26px; }
.spotlight-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.spotlight-logo .barmark { width: 38px; gap: 3px; }
.spotlight-logo .barmark i { height: 7px; }
.spotlight-logo-text { font-size: 34px; font-weight: 600; letter-spacing: -0.025em; }
.spotlight-content h3 { font-size: clamp(32px, 3.4vw, 50px); font-weight: var(--display-weight); letter-spacing: -0.035em; margin: 0 0 18px; line-height: 1.0; }
.spotlight-content p { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: var(--ink-2); margin: 0 0 30px; max-width: 42ch; }
.spotlight-actions { display: flex; gap: 14px; align-items: center; margin-top: auto; flex-wrap: wrap; }
.spotlight-domain { font-family: var(--mono); font-size: 14px; color: var(--accent); }
.spotlight-visual { background: var(--accent); color: #eef6ef; padding: clamp(34px, 4.2vw, 68px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.spotlight-visual .big { font-size: clamp(52px, 5.5vw, 84px); font-weight: var(--display-weight); letter-spacing: -0.045em; line-height: 0.95; }
.spotlight-visual .cap { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; opacity: 0.85; max-width: 30ch; }
.spotlight-visual .urlpill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--mono); font-size: 13px; background: rgba(255,255,255,0.16); padding: 8px 14px; border-radius: var(--btn-radius); }

/* cross-link to other divisions */
.crosslinks { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); border-radius: var(--box-radius); overflow: hidden; }
.crosslink { padding: clamp(28px, 3.4vw, 52px); border-right: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: background .15s ease; }
.crosslink:last-child { border-right: 0; }
.crosslink:hover { background: var(--bg-2); text-decoration: none; }
.crosslink .cl-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 8px; }
.crosslink h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: var(--display-weight); letter-spacing: -0.03em; margin: 0; }
.crosslink .arrow { font-size: 24px; color: var(--accent); }

/* page cta */
.page-cta { padding: var(--band) 0; border-bottom: 1px solid var(--ink); text-align: center; }
.page-cta h2 { font-size: clamp(40px, 6.4vw, 92px); line-height: 0.96; letter-spacing: -0.04em; font-weight: var(--display-weight); margin: 0 auto clamp(20px, 2.6vw, 30px); max-width: 16ch; text-wrap: balance; }
.page-cta p { font-size: clamp(17px, 1.4vw, 22px); color: var(--muted); margin: 0 auto clamp(28px, 3.4vw, 40px); max-width: 50ch; }
/* the eyebrow is a flex row with a rule, so it has to be centred as a block */
.page-cta .label { justify-content: center; }
.page-cta .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* footer */
footer { padding: 64px 0 40px; }
/* Four tracks, not five: the Resources column (Docs, Papers, Blog) went when
   the pages it named turned out not to exist, and a fifth track would leave a
   32px gap of nothing on the right. */
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--rule); }
.footer-col h4 { font-family: var(--sans); font-size: 13.5px; letter-spacing: -0.01em; color: var(--ink); font-weight: 600; margin: 0 0 16px; }
.footer-col p { color: var(--muted); margin: 8px 0 0; max-width: 34ch; font-size: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-col a { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.footer-col a.logo { font-size: 20px; font-weight: 600; color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.footer-bottom .links { display: flex; gap: 18px; }

@media (max-width: 940px) {
  .grid-cards.cols-3, .grid-cards.cols-2 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 14px; }
  .spotlight { grid-template-columns: 1fr; }
  .crosslinks { grid-template-columns: 1fr; }
  .crosslink { border-right: 0; border-bottom: 1px solid var(--rule); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ── phones ───────────────────────────────────────────────────────────────
   The division nav was one flex row on every screen: mark, three links, a
   spacer and the CTA, with a 36px gap between them. Its min-content came to
   619px, so on a 390px phone the page carried 229px of horizontal scroll and
   the CTA sat off the right edge entirely. Rather than add a hamburger and the
   JS to drive it to three pages, the row wraps: mark and CTA keep the first
   line, the links take the second at full width. Nothing is hidden, nothing
   needs a script, and it degrades to the same shape the footer already uses.

   The link padding is not cosmetic: a 14px link in a plain flex row is an 18px
   tall target, under the 24px floor in WCAG 2.5.8. Padding the anchors lifts
   every one of them past it without moving the text. */
@media (max-width: 760px) {
  /* --gutter already narrows the container on a phone; the old fixed 40px
     padding this used to override is gone. */
  .nav-inner { flex-wrap: wrap; height: auto; gap: 12px; padding-block: 12px; }
  .nav-spacer { display: none; }
  .nav-links { order: 3; width: 100%; gap: 22px; font-size: 15px; }
  .nav-links a { display: inline-block; padding-block: 5px; }
  .nav-inner > .btn { margin-left: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col ul { gap: 0; }
  .footer-col a { display: inline-block; padding-block: 6px; font-size: 15px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom .links { flex-wrap: wrap; gap: 6px 18px; }
  .footer-bottom a { display: inline-block; padding-block: 6px; }
  /* the fixed "back" chip lands on top of the footer links on a narrow screen */
  .back { left: 12px; bottom: 12px; }
  /* 12px uppercase mono in a plain flex row is an 18px target */
  .breadcrumb { gap: 8px; }
  .breadcrumb a { display: inline-block; padding-block: 5px; }
  /* the one link out to Mira from the Enterprise spotlight, at 21px */
  .spotlight-domain { display: inline-block; padding-block: 5px; }
}

/* Document / legal pages (careers, terms, privacy, security) */
.doc-page .footer-grid { grid-template-columns: 1.6fr repeat(2, 1fr); }
.legal { max-width: 760px; margin: 0 auto; }
.legal .updated { font-family: var(--sans); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin: 0 0 48px; }
.legal h2 { font-size: 24px; letter-spacing: -0.02em; font-weight: var(--display-weight); margin: 46px 0 14px; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin: 0 0 8px; }
.legal a { color: var(--accent); }
.legal strong { color: var(--ink); }
@media (max-width: 940px) { .doc-page .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---- research: the plot block (see division-motion.css for its behaviour) -- */
.plot-wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.plot-note { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: 0; max-width: 42ch; }
@media (max-width: 860px) { .plot-wrap { grid-template-columns: 1fr; } }