/* Shared styles for the company pages: home, privacy and support.
   Kytra's teal/grey palette, kept simple — each app keeps its own look on its own pages.
   System fonts only, so these pages make no third-party requests. */
:root {
  --bg: #F5F9F9;
  --card: #FFFFFF;
  --tint: #E7F1F1;
  --ink: #16302F;
  --ink-soft: #566665;
  --line: #D9E6E6;
  --link: #1D5C60;
  --max: 1180px;   /* the outer column, same as Dash's --wide */
  --prose: 680px;  /* the reading column inside it */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10201F;
    --card: #1A2E2D;
    --tint: #1F3B3A;
    --ink: #E8F2F1;
    --ink-soft: #9FB8B6;
    --line: #2C4443;
    --link: #8FD1D4;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* These two pages are short enough to leave a gap under the footer on a tall
   window, so the page is a column that fills the viewport and main takes up the
   slack. With more content than fits, main outgrows it and the footer scrolls
   off the bottom as normal. dvh because 100vh on mobile measures the window
   without the address bar and pushes the footer just out of sight. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Same formula as Dash's .wrap, so the bar and footer rules land at the same
   width on every page of the site. Text inside keeps a readable measure. */
footer, .bar { width: min(var(--max), 100% - 2.5rem); margin-inline: auto; padding: 0; }
/* The chrome runs the full column; the reading column is narrower and centred
   under it, so the text keeps a sensible measure. */
main { width: min(var(--prose), 100% - 2.5rem); margin-inline: auto; padding: 0 0 56px; flex: 1 0 auto; }
.bar, footer { flex-shrink: 0; }
/* the gap above the footer comes from main, not from whatever the page happens to
   end with — a section carries a bottom margin, a card doesn't */
main > :last-child { margin-bottom: 0; }
main { padding-top: 72px; }

h1 {
  font-size: 30px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.intro { color: var(--ink-soft); margin: 0 0 56px; max-width: 52ch; }
.docs .intro { margin-bottom: 32px; }

section { margin-bottom: 56px; }
.label a { color: inherit; }
.label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

a { color: var(--link); text-underline-offset: 2px; }

/* Top bar for an app's doc pages: brand left, tabs right, rule beneath —
   the same shape Dash uses, so the two sites navigate alike. */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.bar .brand { display: inline-flex; align-items: center; text-decoration: none; }
/* The company wordmark, in place of the brand text — the same slot Dash and
   Blue Book fill with their own icon and name. Sized by width/height on the
   <img>; the art is 1506x692, so keep it to 2.176:1. */
.bar .brand img { width: 83px; height: 38px; }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; font-size: 15px; }
.tabs a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tabs a:hover { color: var(--ink); background: var(--card); }
.tabs a[aria-current="page"] { color: var(--ink); background: var(--card); border-color: var(--line); font-weight: 600; }
.bar + main { padding-top: 40px; }
@media (max-width: 720px) {
  .bar { flex-wrap: wrap; gap: 10px; }
  .tabs { font-size: 14px; }
  .tabs a { padding: 6px 9px; }
}

/* Home: app list — add another <li class="app"> per app */
.apps { list-style: none; margin: 0; padding: 0; }
.app {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.app + .app { margin-top: 12px; }
.app > img { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; }   /* the app icon only, not the store badge below it */
.app h3 { font-size: 19px; margin: 0 0 4px; }
.app p { margin: 0 0 10px; color: var(--ink-soft); font-size: 16px; }
.app .platforms { font-size: 14px; margin-bottom: 14px; }
/* The app's own site on the left, where it can be bought on the right. They
   stack, left-aligned, when the card is too narrow to hold both on one line. */
.app-links { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; font-size: 15px; font-weight: 500; }
/* Apple's own badge artwork, served from here rather than their CDN so the page
   still makes no third-party request. Sized by width/height on the <img>; the
   art is 119.66x40, so keep it to 3:1. */
.store-badge { display: inline-flex; line-height: 0; }
.store-badge img { display: block; height: auto; }
.store-soon { color: var(--ink-soft); font-size: 14px; }

.support p { margin: 0 0 14px; }
.support p:last-child { margin-bottom: 0; }

/* The body of a privacy or support page. Each app keeps its own under /<app>/,
   so there is one per page now — the class carries the typography, nothing more. */
.app-doc h2 { font-size: 24px; line-height: 1.25; margin: 0 0 4px; }
.app-doc .updated { font-size: 14px; color: var(--ink-soft); margin: 0 0 24px; }
.app-doc h3 { font-size: 18px; margin: 36px 0 8px; }
.app-doc p, .app-doc li { font-size: 16.5px; color: var(--ink-soft); }
.app-doc p { margin: 0 0 16px; }
.app-doc ul { margin: 0 0 16px; padding-left: 22px; }
.app-doc li { margin-bottom: 8px; }
.app-doc strong { color: var(--ink); }

.callout { background: var(--tint); border-radius: 12px; padding: 20px 24px; margin-bottom: 8px; }
.callout p { margin: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 48px;
}
.card h2 { font-size: 20px; margin: 0 0 8px; }
.card p { margin: 0 0 14px; font-size: 16px; color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }
.app-doc .card { margin: 8px 0 0; }
.app-doc .card p { margin-bottom: 4px; font-size: 15.5px; }

.button {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 20px;
}
details + details { margin-top: 10px; }
details[open] { border-color: var(--ink-soft); }
summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--ink-soft); flex-shrink: 0; }
details[open] summary::after { content: "–"; }
.app-doc details p { font-size: 15.5px; }

footer {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  padding-bottom: 48px;
  font-size: 14px;
  color: var(--ink-soft);
}
footer p { margin: 0 0 4px; }
footer a { color: inherit; }
/* Same shape as Dash's and Blue Book's landing footer: who made it and where
   to go on the left, the copyright on the right, stacking when narrow. */
footer .foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
footer .reg { margin: 16px 0 0; font-size: 12px; }


@media (max-width: 520px) {
  main { padding-top: 48px; }
  .app { flex-direction: column; gap: 14px; }
}