/* ==========================================================================
   Echo — site chrome
   echo.thebraincompany.co · shared by every page tools/pages.py generates

   Requires tokens.css and base.css, loaded first. What is in here: the
   header and footer those pages share, the drawn iPhone around a
   screenshot, the reading layout of the guides, the App Store call to
   action, and the handful of components the guides use. Support and
   privacy do not load this file and do not need to.

   The rules from tokens.css hold here too: green is never text, emphasis is
   weight, and elevation goes through the shadow tokens so dark mode is
   correct for free.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip link — first in the tab order, invisible until it has focus.
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 10;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: 0.9375rem;
  font-weight: var(--weight-strong);
  translate: 0 -200%;
}

.skip-link:focus-visible {
  translate: 0 0;
}

/* --------------------------------------------------------------------------
   Page frame — header on top, footer pinned to the bottom of short pages.
   -------------------------------------------------------------------------- */

.page {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
}

.page > main {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-6) 0;
}

/* The icon carries the green; the wordmark stays neutral ink so the two do
   not compete. Sentence case, never all-caps. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3125rem; /* 21 */
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.lockup .mark {
  height: 1.75rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
}

.site-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: var(--weight-strong);
  color: var(--ink-secondary);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav .cta {
  color: var(--ink-on-green);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--sp-9);
  padding-block: var(--sp-6) var(--sp-8);
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.site-footer a {
  color: var(--ink-secondary);
  text-decoration-color: color-mix(in srgb, var(--ink-secondary) 34%, transparent);
}

.site-footer a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.site-footer__links,
.site-footer__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.site-footer__langs {
  margin-top: var(--sp-4);
}

.site-footer__legal {
  max-width: 44rem;
  margin-top: var(--sp-5);
  font-size: var(--text-caption);
}

.site-footer__legal p + p {
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   The device — a screenshot is not a phone, so the frame is drawn: a band
   around the screen at the real proportions (~1.2% of the device width, the
   screen corner ~12.5% of it), and the app's elevation language around
   that — a soft shadow on the paper, a hairline in the dark.
   -------------------------------------------------------------------------- */

.device {
  --device-w: min(70vw, 17rem);
  --band: 0.012;

  width: var(--device-w);
  margin-inline: auto;
  padding: calc(var(--device-w) * var(--band));
  border: 1px solid var(--device-edge);
  border-radius: calc(var(--device-w) * 0.138);
  background: var(--device-band);
  box-shadow: var(--shadow-raised);
}

.device img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--device-w) * 0.125);
}

/* On paper the band is near-black and the shadow carries the depth. At night
   there is no shadow, so the band steps up to --surface-raised: lighter than
   the paper, which is how the app makes a thing read as in front. */
:root {
  --device-band: var(--ink);
  --device-edge: rgba(0, 0, 0, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --device-band: var(--surface-raised);
    --device-edge: var(--hairline);
  }
}

.shot {
  margin-block: var(--sp-7);
}

.shot figcaption {
  max-width: 22rem;
  margin: var(--sp-4) auto 0;
  font-size: var(--text-caption);
  line-height: 1.5;
  text-align: center;
  color: var(--ink-secondary);
}

/* --------------------------------------------------------------------------
   App Store badge — Apple's artwork, unmodified, at no less than the 40px
   minimum. Clear space is a quarter of the badge height on every side; the
   margin keeps it even when the badge sits next to text.
   -------------------------------------------------------------------------- */

.store-badge {
  display: inline-block;
  margin: 0.75rem;
  margin-left: 0;
  line-height: 0;
  text-decoration: none;
}

.store-badge img {
  width: auto;
  height: 3rem; /* 48 — comfortably over Apple's 40px floor, and a full touch target */
}

.store-facts {
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

/* --------------------------------------------------------------------------
   Reading layout — the guides
   -------------------------------------------------------------------------- */

.article {
  padding-block: var(--sp-8) 0;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

.crumbs li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--hairline);
}

@media (prefers-color-scheme: dark) {
  .crumbs li + li::before {
    color: var(--ink-secondary);
  }
}

.crumbs a {
  color: var(--ink-secondary);
}

.article__head {
  max-width: var(--measure);
}

.article__head h1 {
  margin-top: var(--sp-4);
}

.lede {
  margin-top: var(--sp-4);
  font-size: var(--text-subhead);
  line-height: 1.5;
  color: var(--ink);
}

.byline {
  margin-top: var(--sp-4);
  font-size: var(--text-caption);
  color: var(--ink-secondary);
}

.article__body {
  margin-top: var(--sp-7);
}

/* One column on a phone, in reading order: the guide, then the App Store
   card, then sources and related reading. On wide screens the card lifts
   into a second column and stays in view while the guide scrolls past it.
   DOM order is the phone order, so a screen reader meets the same sequence. */
.article__grid {
  display: grid;
  grid-template-areas:
    "head"
    "body"
    "aside"
    "sources"
    "related";
  align-items: start;
}

.article__head {
  grid-area: head;
}

.article__body {
  grid-area: body;
}

.article__aside {
  grid-area: aside;
  margin-top: var(--sp-8);
}

.article__grid > .sources {
  grid-area: sources;
}

.article__grid > .related {
  grid-area: related;
}

@media (min-width: 60rem) {
  .article__grid {
    grid-template-columns: minmax(0, var(--measure)) minmax(16rem, 20rem);
    grid-template-areas:
      "head aside"
      "body aside"
      "sources aside"
      "related aside";
    grid-template-rows: auto auto auto 1fr;
    justify-content: space-between;
    column-gap: var(--sp-8);
  }

  .article__aside {
    position: sticky;
    top: var(--sp-6);
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Prose — what a guide's body is made of. base.css resets lists to bare,
   which is right for chrome and wrong for reading, so prose puts the markers
   back.
   -------------------------------------------------------------------------- */

.prose h2 {
  margin-top: var(--sp-8);
  font-size: 1.375rem; /* 22 */
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.prose h3 {
  margin-top: var(--sp-6);
  font-size: var(--text-subhead);
  font-weight: var(--weight-strong);
  line-height: 1.35;
}

.prose h2 + *,
.prose h3 + * {
  margin-top: var(--sp-3);
}

.prose > :first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li::marker {
  color: var(--ink-secondary);
}

.prose li + li {
  margin-top: var(--sp-2);
}

.prose li > ul,
.prose li > ol {
  margin-top: var(--sp-2);
}

.prose .shot {
  margin-block: var(--sp-7);
}

/* A plain aside inside the text: the surface card, never a green wash. */
.note {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.note > * + * {
  margin-top: var(--sp-3);
}

/* Tables are rare and narrow; they scroll inside their own box rather than
   letting the page scroll sideways. */
.table-wrap {
  overflow-x: auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.prose th,
.prose td {
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.prose th {
  font-weight: var(--weight-strong);
}

/* --------------------------------------------------------------------------
   The App Store card
   -------------------------------------------------------------------------- */

.app-card {
  padding: var(--sp-5);
}

.app-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.app-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border-radius: 22.5%;
  border: 1px solid var(--hairline);
}

.app-card__name {
  font-size: var(--text-subhead);
  font-weight: var(--weight-strong);
  line-height: 1.25;
}

.app-card__text {
  margin-top: var(--sp-4);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.app-card .store-badge {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Sources and related reading, at the foot of a guide
   -------------------------------------------------------------------------- */

.sources,
.related {
  max-width: var(--measure);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.sources h2,
.related h2 {
  font-size: 1rem;
  font-weight: var(--weight-strong);
}

.sources ol {
  margin-top: var(--sp-3);
  padding-left: 1.25em;
  list-style: decimal;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.sources li + li {
  margin-top: var(--sp-2);
}

.sources a {
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Lists of guides — the hub, the home page, and "related" at the foot of a
   guide. Each entry is a title that links and a line that says why.
   -------------------------------------------------------------------------- */

.guide-list {
  margin-top: var(--sp-4);
}

.guide-list li + li {
  margin-top: var(--sp-5);
}

.guide-list a {
  font-weight: var(--weight-strong);
}

.guide-list p {
  margin-top: var(--sp-1);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.guide-group + .guide-group {
  margin-top: var(--sp-8);
}

.guide-group h2 {
  font-size: var(--text-subhead);
  font-weight: var(--weight-strong);
}

/* --------------------------------------------------------------------------
   Plain pages (about, the hub): one column, the reading measure.
   -------------------------------------------------------------------------- */

.plain {
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   Questions and answers
   -------------------------------------------------------------------------- */

.faq h3 {
  margin-top: var(--sp-6);
  font-size: var(--text-body);
  font-weight: var(--weight-strong);
  line-height: 1.4;
}

.faq h3 + p {
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Wide screens
   -------------------------------------------------------------------------- */

@media (min-width: 60rem) {
  .site-header {
    padding-block: var(--sp-7) 0;
  }

  .article {
    padding-block: var(--sp-9) 0;
  }

  .device {
    --device-w: 17rem;
  }
}

/* A citation marker in running text: small, quiet, still a real link. */
.cite {
  font-size: 0.8em;
  color: var(--ink-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.cite:hover {
  color: var(--ink);
}

.sources li:target {
  color: var(--ink);
}

/* ==========================================================================
   The product page — / and its six translations (/nl, /de, /fr, /es, /it,
   /pt-br). Everything above this line is shared with the guides.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------
   DOM order is the phone's reading order: what Echo is, who it is for, the
   way to get it, what it looks like, then the detail. On wide screens the
   device is placed into a second column, which is the only thing that
   changes. */

.hero {
  display: flex;
  flex-direction: column;
  padding-block: var(--sp-8) 0;
}

.hero__title {
  max-width: 22ch;
}

.hero__intro {
  max-width: var(--measure);
  margin-top: var(--sp-5);
  font-size: var(--text-subhead);
  line-height: 1.5;
}

.store {
  margin-top: var(--sp-5);
}

.hero .device {
  margin-top: var(--sp-8);
}

.hero .copy {
  margin-top: var(--sp-8);
}

/* --- Sections below the hero ------------------------------------------- */

.section {
  max-width: var(--measure);
  margin-top: var(--sp-10);
}

.section h2 {
  font-size: var(--text-headline);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.section > p,
.section > .prose {
  margin-top: var(--sp-4);
}

.steps {
  margin-top: var(--sp-6);
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-left: 2.5rem;
  counter-increment: step;
}

.steps li + li {
  margin-top: var(--sp-6);
}

/* The step number sits in a small hairline ring: a marker, not a badge. */
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: var(--weight-strong);
  line-height: 1;
}

.steps h3 {
  font-size: var(--text-subhead);
  font-weight: var(--weight-strong);
  line-height: 1.35;
}

.steps p {
  margin-top: var(--sp-2);
}

.shots {
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.shots figure {
  margin: 0;
}

.shots figcaption {
  max-width: 20rem;
  margin: var(--sp-4) auto 0;
  font-size: var(--text-caption);
  line-height: 1.5;
  text-align: center;
  color: var(--ink-secondary);
}

.more {
  margin-top: var(--sp-6);
  font-weight: var(--weight-strong);
}

/* --- Wide ---------------------------------------------------------------- */

@media (min-width: 40rem) {
  .shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 44rem;
  }

  .shots .device {
    --device-w: 15rem;
  }
}

@media (min-width: 60rem) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21.25rem;
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    column-gap: var(--sp-10);
    padding-block: var(--sp-9) 0;
  }

  .hero__title,
  .hero__intro,
  .store,
  .hero .copy {
    grid-column: 1;
  }

  .hero .device {
    --device-w: 21.25rem; /* 340 */
    grid-column: 2;
    grid-row: 1 / span 4;
    /* Optically level with the title's first line rather than its box. */
    margin: 0.375rem 0 0;
  }

  .hero .copy {
    margin-top: var(--sp-7);
  }
}