/* oficina.works, the front page, in Calma (estilo AGENTS.md, row 8).

   Colour, type and shape are estilo's theme (theme.css, loaded first):
   this file only lays the page out. Each app's card, and the Memoria
   section, take their accent from estilo's colour ring through
   [data-app] (apps.css), so the page is every app's colour at once and
   each app is its own. The sky behind the hero is estilo's (sky.css),
   seeded as the suite's own. Light and dark follow the reader's system;
   the page runs no script to switch them. */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--rst-bg);
  color: var(--rst-text);
  font: 400 16px/1.55 var(--rst-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; }
a { color: var(--rst-accent); }
:focus-visible { outline: 2px solid var(--rst-accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }

.shell { max-width: 1180px; margin: 0 auto; padding-inline: 32px; }

.skip { position: absolute; left: 16px; top: -48px; z-index: 10; padding: 10px 14px; border-radius: 10px; background: var(--rst-surface); box-shadow: var(--rst-shadow-lift); }
.skip:focus { top: 12px; }

/* ── The bar ── */
.bar { position: relative; z-index: 2; }
.bar-in { display: flex; align-items: center; gap: 28px; padding-block: 18px; }
.mark { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--rst-text); text-decoration: none; font: 650 19px/1 var(--rst-font); letter-spacing: -0.01em; }
.nav { display: flex; gap: 26px; }
.nav a { color: var(--rst-text-muted); text-decoration: none; font-size: 15px; }
.nav a:hover { color: var(--rst-text); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 10px;
  background: var(--rst-accent); color: var(--rst-on-accent);
  font: 600 15px/1 var(--rst-font); text-decoration: none;
  transition: background-color .15s ease;
}
.btn:hover { background: var(--rst-accent-strong); }
.btn-quiet { background: var(--rst-surface); color: var(--rst-text); box-shadow: inset 0 0 0 1px var(--rst-line); }
.btn-quiet:hover { background: var(--rst-surface-2); }
.btn-sm { padding: 9px 14px; font-size: 14px; }

/* ── Hero: the sky behind the headline, the product beneath it ── */
.hero { --estilo-sky-top: -10%; --estilo-sky-height: 74%; }
.hero-in { text-align: center; padding-block: 72px 0; }
.hero-h {
  margin: 0 auto 22px; max-width: 13ch;
  font: 620 clamp(44px, 7.2vw, 78px)/1.02 var(--rst-font); letter-spacing: -0.035em;
}
.hero-lead { margin: 0 auto 32px; max-width: 46ch; color: var(--rst-text-muted); font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.stage {
  position: relative; height: 470px; margin-top: 60px;
  border-radius: 24px 24px 0 0; overflow: hidden;
  background: color-mix(in oklab, var(--rst-accent) 7%, var(--rst-surface-2));
}
.launch {
  position: absolute; left: 6%; top: 56px; width: 400px;
  padding: 18px 20px 22px; border-radius: 16px;
  background: var(--rst-surface); box-shadow: var(--rst-shadow-lift);
}
.launch-h { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 13px; }
.launch-h b { font-size: 15px; font-weight: 620; }
.launch-h span { margin-left: auto; color: var(--rst-text-faint); }
.launch-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.launch-apps li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 12px; font: 500 13px/1 var(--rst-font); }
.doc {
  position: absolute; right: 5%; top: 92px; width: 540px; height: 420px;
  border-radius: 16px; overflow: hidden;
  background: var(--rst-surface); box-shadow: var(--rst-shadow-lift);
}
.doc-bar { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--rst-line); font-size: 13px; }
.doc-bar b { font-weight: 620; }
.doc-bar span:last-child { color: var(--rst-text-faint); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lights { display: flex; gap: 6px; margin-right: 4px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--rst-line); }
.doc-page { padding: 26px 40px; }
.doc-h { margin: 0 0 12px; font: 620 22px/1.2 var(--rst-font); letter-spacing: -0.02em; }
.doc-page p:not(.doc-h) { margin: 0 0 10px; color: var(--rst-text-muted); font-size: 14px; line-height: 1.6; }
.doc mark { background: var(--rst-accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--rst-accent); }

/* ── Bands ── */
.band { padding-block: 92px; }
.band-quiet { background: var(--rst-surface); border-block: 1px solid var(--rst-line); }
.band h2, .sec-head h2 { margin: 0 0 14px; font: 620 clamp(28px, 3.4vw, 40px)/1.1 var(--rst-font); letter-spacing: -0.03em; }
.sec-head { max-width: 60ch; margin-bottom: 40px; }
.prose { margin: 0 0 16px; max-width: 58ch; color: var(--rst-text-muted); font-size: 17px; line-height: 1.65; }
.prose.sm { font-size: 15px; }
.lnk { font-weight: 600; }
.two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }

/* ── The family: one card per app, in its own colour ── */
.family { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.family li {
  padding: 24px 24px 22px; border-radius: 18px;
  background: var(--rst-surface); box-shadow: 0 0 0 1px var(--rst-line);
  transition: box-shadow .2s ease, transform .2s ease;
}
.family li:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--rst-accent) 30%, var(--rst-line)), var(--rst-shadow-lift); }
.family img { filter: drop-shadow(0 5px 9px rgba(20, 24, 33, .16)); }
.family h3 { margin: 16px 0 4px; font: 620 18px/1.2 var(--rst-font); letter-spacing: -0.01em; }
.family h3 em {
  margin-left: 6px; padding: 3px 8px; border-radius: 999px; vertical-align: 2px;
  background: var(--rst-accent-soft); color: var(--rst-accent);
  font: 600 11.5px/1 var(--rst-font); font-style: normal;
}
.family p { margin: 0; color: var(--rst-text-muted); font-size: 15px; }
.family .get { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; }
.get a { font-weight: 600; font-size: 14px; text-decoration: none; }
.get a:hover { text-decoration: underline; }
.get .soon { color: var(--rst-text-faint); font-weight: 500; }
.get .none { color: var(--rst-text-faint); font-size: 14px; }

/* ── Memoria's answer, and the sign-in card ── */
.ask { padding: 24px 28px; border-radius: 18px; background: var(--rst-bg); box-shadow: 0 0 0 1px var(--rst-line); }
.band:not(.band-quiet) .ask { background: var(--rst-surface); }
.ask-q { margin: 0 0 10px; font: 620 17px/1.35 var(--rst-font); }
.ask-a { margin: 0 0 14px; color: var(--rst-text-muted); }
.ask-cite { margin: 0; font-size: 14px; }
.ask-cite a { font-weight: 600; text-decoration: none; }
.ask-note { margin: 12px 0 0; color: var(--rst-text-faint); font-size: 14px; }

/* ── Isolation ── */
.facts { display: grid; gap: 12px; margin: 0; }
.facts div { padding: 18px 20px; border-radius: 16px; background: var(--rst-surface); box-shadow: 0 0 0 1px var(--rst-line); }
.facts dt { font-weight: 620; }
.facts dd { margin: 4px 0 0; color: var(--rst-text-muted); font-size: 15px; }

/* ── Native apps ── */
/* One tile per Mac app: its icon and name, the download beneath. */
.dl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.dl-list li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 12px; padding: 18px; border-radius: 18px; background: var(--rst-bg); box-shadow: 0 0 0 1px var(--rst-line); }
.dl-app { font-weight: 620; }
.dl-list .btn { grid-column: 1 / -1; }
.dl-req { margin: 20px 0 0; max-width: 60ch; color: var(--rst-text-faint); font-size: 14px; }
.tf { margin-top: 44px; max-width: 62ch; }
.tf h3 { margin: 0 0 10px; font: 620 20px/1.25 var(--rst-font); letter-spacing: -0.015em; }
.tf p { margin: 0 0 10px; color: var(--rst-text-muted); }

/* ── Footer ── */
.foot { padding-block: 56px 64px; border-top: 1px solid var(--rst-line); background: var(--rst-surface); }
.foot-in { display: grid; grid-template-columns: auto auto 1fr; gap: 56px; }
.foot-h { margin: 0 0 12px; color: var(--rst-text-faint); font: 650 13px/1 var(--rst-font); }
.foot ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.foot a { color: var(--rst-text-muted); text-decoration: none; font-size: 14.5px; }
.foot a:hover { color: var(--rst-text); }
.colophon { justify-self: end; max-width: 52ch; margin: 0; color: var(--rst-text-faint); font-size: 13.5px; line-height: 1.6; }

/* ── Narrower screens ── */
@media (max-width: 1060px) {
  .family { grid-template-columns: repeat(2, 1fr); }
  .doc { width: 460px; }
}
@media (max-width: 880px) {
  .stage { height: auto; padding: 18px 14px 0; }
  .launch { position: static; width: auto; }
  .doc { position: static; width: auto; height: 250px; margin-top: 14px; border-radius: 16px 16px 0 0; }
  .doc-page { padding: 18px 22px; }
  .two { grid-template-columns: 1fr; gap: 32px; }
  .foot-in { grid-template-columns: 1fr 1fr; gap: 32px; }
  .colophon { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .shell { padding-inline: 20px; }
  .nav { display: none; }
  .hero-in { padding-top: 44px; }
  .stage { margin-top: 40px; }
  .band { padding-block: 64px; }
  .family { grid-template-columns: 1fr; }
  .launch-apps li { padding: 10px 4px; }
}
/* In dark the sky runs brighter (estilo's gain) and the muted lead on its
   brightest band fell under 4.5:1 (review, discussion 75): the hero's sky
   is quieter there, and its words full-strength. */
@media (prefers-color-scheme: dark) {
  .hero { --estilo-sky-strength: 0.32; }
  .hero-lead { color: var(--rst-text); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .family li { transition: none; }
}