/* Shared branding; legal documents retain their wording and simple navigation. */
.legal-page {
  --ink: #3e2d22;
  --paper: #fff9ef;
  --paper-muted: #705a49;
  --ink-muted: #705a49;
  --cobalt: #94601f;
  --cobalt-hover: #794b15;
  --line-dark: rgba(92, 62, 33, 0.2);
  --line-light: var(--line-dark);
}
html:has(.legal-page) { background: #fff9ef; }
.legal-page .site-header,
.legal-page .site-header::after,
.legal-page .primary-nav,
.legal-page .site-footer { color: var(--ink); background: var(--paper); }
.legal-page .wordmark,
.legal-page .primary-nav > a:not(.button),
.legal-page .footer-nav a:hover { color: var(--ink); }
.legal-page .site-footer__legal a { color: var(--cobalt); }
.legal-page .legal-links a { text-decoration-color: currentColor; }
.legal-page .legal-main { padding-block: 3rem 4rem; }
.legal-page .legal-main h1 { font-size: clamp(2.75rem, 5.2vw, 4.5rem); line-height: 1.05; }
.legal-page .legal-main__kicker { margin-bottom: 1rem; }
.legal-page .legal-main__intro { margin-block: 1.5rem 2.5rem; font-size: 1.125rem; }

.brand-wordmark { gap: 0.75rem; letter-spacing: 0.12em; }
.brand-wordmark img { display: block; width: 3rem; height: 3rem; border-radius: 0.75rem; }

.marketing-home { --line-light: var(--line-dark); --ink-muted: var(--app-muted); }
.app-showcases {
  display: grid;
  gap: 2.5rem;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: calc(var(--header-height) + 2rem) var(--gutter) 3rem;
}
.featured-app {
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--panel-line);
  border-radius: 1.75rem;
  scroll-margin-top: 7rem;
}
.featured-app__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  grid-template-areas: "copy art";
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--max-width);
  margin-inline: auto;
  padding: clamp(1.5rem, 3.5vw, 3.5rem);
}
.featured-app__copy { grid-area: copy; max-width: 37rem; }
.featured-app .section-label { margin-block: 0 1.5rem; letter-spacing: 0.15em; }
.featured-app__identity { display: flex; align-items: center; gap: 1rem; }
.featured-app__identity img { width: 4rem; height: 4rem; border-radius: 1rem; }
.featured-app h1,
.featured-app__identity h2 { margin: 0; font: 400 clamp(3rem, 5vw, 4.5rem)/1.1 var(--serif); letter-spacing: -0.04em; }
.featured-app__tagline { margin-block: 1.5rem 1rem; font: 400 clamp(1.75rem, 2.6vw, 2.5rem)/1.2 var(--serif); }
.featured-app__copy > p:not(.section-label, .featured-app__tagline) { color: var(--app-muted); line-height: 1.75; }
.featured-app__meta { font-size: 0.875rem; }
.featured-app__art { grid-area: art; justify-self: center; width: min(100%, 16rem); }
.featured-app__art img { display: block; width: 100%; height: auto; border-radius: 1rem; }

.studio-section,
.company-section { max-width: var(--max-width); margin-inline: auto; padding: 3rem var(--gutter); border-top: 1px solid var(--line-dark); scroll-margin-top: 5rem; }
.studio-section { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
.studio-section h2,
.company-section h2 { margin: 0; font: 400 clamp(2rem, 3vw, 2.75rem)/1.15 var(--serif); letter-spacing: -0.025em; }
.studio-section p { max-width: 35rem; color: var(--app-muted); line-height: 1.75; }
.studio-section a,
.company-section__heading a { text-decoration: underline; text-underline-offset: 0.2em; }
.studio-standard { scroll-margin-top: 6rem; }
.studio-standard h3 { margin: 0 0 1rem; font: 400 1.5rem/1.25 var(--serif); }
.studio-standard ul { margin: 0; padding-left: 1.25rem; color: var(--app-muted); line-height: 1.75; }
.studio-standard li + li { margin-top: 0.75rem; }
.studio-standard strong { color: var(--app-text); font-weight: 600; }
.company-section__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; scroll-margin-top: 6rem; }
.company-section__heading a { color: var(--cobalt); }
.company-section .company-details { margin-top: 2rem; }

/* Supporting company links stay easy to find without another oversized section. */
.site-footer { padding-block: 1rem 2.5rem; }
.site-footer__inner { min-height: 0; padding-top: 2rem; grid-template-columns: 1fr 1.2fr 1fr; align-items: start; gap: 2rem; }
.footer-wordmark { font-size: 2rem; letter-spacing: 0.12em; }
.footer-wordmark::after { margin-top: 1rem; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.footer-nav a { padding-block: 0.65rem; }
.site-footer__legal { padding: 0; border: 0; font-size: 0.875rem; }

/* Keep vendor artwork untouched. Google's supplied PNG includes clear space. */
.store-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.25rem; }
.store-badges__item { display: flex; flex-direction: column; align-items: center; }
.store-badge { display: flex; align-items: center; justify-content: center; height: 4.5rem; }
.store-badge img { display: block; flex: none; }
.store-badge--apple { padding: 0.75rem; }
.store-badge--apple img { width: auto; height: 3rem; }
.store-badge--google img { width: auto; height: 4.5rem; }
.store-badges__note { color: inherit; font-size: 0.8125rem; line-height: 1.5; text-align: center; }
.store-badges__note strong { font-weight: 650; }
/* Still Clay's launch shares the company shell and keeps its studio colors. */
.featured-app--clay {
  --app-surface: #edf0e5;
  --app-text: #30433a;
  --app-muted: #5d695f;
  --cobalt: #4f6957;
  --panel-line: #d6ddcd;
}
.featured-app--secondary {
  --app-surface: #fff0db;
  --app-text: #533724;
  --app-muted: #755a42;
  --panel-line: #ecd6b7;
}
.featured-app--secondary .featured-app__inner {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-areas: "art copy";
}
.apps-directory { display: grid; gap: 2rem; }
.directory-card--clay { background: #eeeee3; }
.directory-card--clay .directory-card__art { background: #e1e4d6; }
.directory-card__copy > p { line-height: 1.75; }

@media (max-width: 900px) {
  /* Closed marketing menus must be absent from the keyboard tab order. */
  .primary-nav[data-menu]:not(.is-open) { visibility: hidden; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__legal { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .app-showcases { padding: calc(var(--header-height) + 1.25rem) 1rem 2.5rem; gap: 1.5rem; }
  .featured-app { border-radius: 1.25rem; }
  .featured-app__inner,
  .featured-app--secondary .featured-app__inner { grid-template-columns: 1fr; grid-template-areas: "copy" "art"; gap: 2rem; padding: 1.5rem; }
  .featured-app__tagline { margin-top: 1.25rem; }
  .studio-section { grid-template-columns: 1fr; }
  .brand-wordmark { font-size: 0.875rem; letter-spacing: 0.08em; }
  .brand-wordmark img { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; }
  .store-badge { height: 3.75rem; }
  .store-badge--apple { padding: 0.625rem; }
  .store-badge--apple img { height: 2.5rem; }
  .store-badge--google img { height: 3.75rem; }
}

@media (max-width: 480px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-wordmark { flex-direction: row; gap: 0.5rem; font-size: 1.5rem; }
  .footer-wordmark::after { display: none; }
}