.mydevcook-site-header,
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid rgba(20, 40, 59, 0.08);
  box-shadow: 0 3px 16px rgba(20, 40, 59, 0.04);
}

.mydevcook-header-inner {
  width: min(calc(100% - 32px), 1180px);
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mydevcook-header-logo {
  display: block;
  width: auto;
  height: 50px;
  max-width: min(260px, 56vw);
  object-fit: contain;
  opacity: 0.92;
}

.legal-header .topbar {
  min-height: 72px;
}

.legal-header .mydevcook-brand {
  grid-column: 3;
  justify-self: end;
  min-width: 0;
}

.legal-header .language-picker {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.mydevcook-product-topbar {
  display: grid;
  width: min(calc(100% - 32px), 1180px);
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: clamp(14px, 1.35vw, 24px);
  min-height: 72px;
  padding-right: 0;
}

.mydevcook-product-topbar .language-picker {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-right: 0;
}

.mydevcook-product-topbar .brand {
  grid-column: 2;
  grid-row: 1;
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

.mydevcook-product-topbar .topnav {
  grid-column: 3;
  grid-row: 1;
}

.mydevcook-product-topbar .brand-copy,
.mydevcook-product-topbar .brand-copy strong,
.mydevcook-product-topbar .brand-copy small {
  min-width: max-content;
  white-space: nowrap;
}

.mydevcook-product-topbar .brand-icon-shell {
  width: 52px;
  min-width: 52px;
  height: 52px;
  flex: 0 0 52px;
  aspect-ratio: 1 / 1;
}

.mydevcook-product-topbar .brand-icon {
  width: 112%;
  max-width: none;
  height: 112%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.mydevcook-global-brand {
  grid-column: 4;
  grid-row: 1;
  position: static;
  align-self: center;
  justify-self: end;
  display: block;
}

.mydevcook-global-brand .mydevcook-header-logo {
  height: 50px;
  max-width: 195px;
}

.legal-page-shell {
  --brand-navy: #102030;
  --brand-navy-deep: #091622;
  --brand-cyan: #20a0c0;
  --brand-cyan-bright: #2bb6d1;
  --brand-coral: #f04830;
  --brand-ink: #173149;
  --brand-copy: #496577;
  background:
    radial-gradient(circle at 12% 12%, rgba(32, 160, 192, 0.1), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(240, 72, 48, 0.08), transparent 22%),
    #ffffff;
}

.legal-page-shell .legal-header {
  border-bottom-color: rgba(32, 160, 192, 0.2);
  box-shadow: 0 3px 18px rgba(16, 32, 48, 0.08);
}

.legal-page-shell .language-picker {
  border-color: rgba(32, 160, 192, 0.22);
  background: rgba(242, 250, 252, 0.96);
}

.legal-page-shell .legal-hero {
  background:
    radial-gradient(circle at 17% 30%, rgba(32, 160, 192, 0.13), transparent 29%),
    radial-gradient(circle at 84% 18%, rgba(240, 72, 48, 0.1), transparent 24%),
    linear-gradient(145deg, #ffffff 0%, #f6fafb 100%);
}

.legal-page-shell .legal-hero .eyebrow {
  color: var(--brand-coral);
}

.legal-page-shell .legal-hero h1 {
  color: var(--brand-navy);
}

.legal-page-shell .legal-hero .legal-lead {
  color: var(--brand-copy);
}

.legal-page-shell .legal-content {
  background: #ffffff;
}

.legal-page-shell .legal-card {
  border-color: rgba(32, 160, 192, 0.17);
  box-shadow: 0 20px 50px rgba(16, 32, 48, 0.09);
}

.legal-page-shell .legal-card h2,
.legal-page-shell .legal-card .section-tag {
  color: var(--brand-ink);
}

.legal-page-shell .legal-card .section-tag {
  color: var(--brand-coral);
}

.legal-page-shell .legal-card p,
.legal-page-shell .legal-card li,
.legal-page-shell .legal-contact-card address,
.legal-page-shell .legal-updated {
  color: var(--brand-copy);
}

.legal-page-shell .legal-card ul {
  margin: 0.75rem 0 1rem;
  padding-left: 1.4rem;
}

.legal-page-shell .legal-card li + li {
  margin-top: 0.3rem;
}

.legal-page-shell .legal-card a:not(.obfuscated-contact) {
  color: #1688a7;
}

.legal-page-shell .legal-card a:not(.obfuscated-contact):hover,
.legal-page-shell .legal-card a:not(.obfuscated-contact):focus-visible {
  color: var(--brand-coral);
}

.legal-page-shell .obfuscated-contact {
  color: #1688a7;
}

.legal-page-shell .obfuscated-contact:hover,
.legal-page-shell .obfuscated-contact:focus-visible {
  color: var(--brand-coral);
}

.legal-page-shell .legal-back-link {
  background: var(--brand-coral);
  box-shadow: 0 12px 26px rgba(240, 72, 48, 0.24);
}

.legal-page-shell .legal-back-row {
  display: flex;
  justify-content: center;
}

.legal-page-shell .legal-back-link:hover,
.legal-page-shell .legal-back-link:focus-visible {
  background: var(--brand-navy);
}

@media (max-width: 1180px) {
  .mydevcook-product-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px 20px;
    padding: 11px 0;
  }

  .mydevcook-product-topbar .brand {
    grid-column: 2;
    grid-row: 1;
  }

  .mydevcook-product-topbar .mydevcook-global-brand {
    grid-column: 3;
    grid-row: 1;
  }

  .mydevcook-product-topbar .topnav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mydevcook-product-topbar .language-picker {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .mydevcook-header-inner {
    min-height: 64px;
  }

  .legal-header .topbar {
    grid-template-columns: auto 1fr;
    gap: 12px;
    min-height: 64px;
  }

  .legal-header .mydevcook-brand {
    grid-column: 2;
  }

  .legal-header .language-picker {
    grid-column: 1;
  }

  .legal-header .language-picker > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .mydevcook-product-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 7px 0 12px;
  }

  .mydevcook-product-topbar .language-picker {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 8px 10px;
  }

  .mydevcook-product-topbar .language-picker select {
    width: 120px;
  }

  .mydevcook-product-topbar .mydevcook-global-brand {
    grid-column: 2;
    grid-row: 1;
  }

  .mydevcook-product-topbar .brand {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mydevcook-product-topbar .topnav {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .mydevcook-global-brand .mydevcook-header-logo {
    height: 42px;
    max-width: min(165px, 42vw);
  }
}

@media (min-width: 1181px) {
  .site-shell .mydevcook-product-topbar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    padding-right: 0;
  }

  .site-shell .mydevcook-product-topbar .topnav {
    gap: clamp(14px, 1.25vw, 24px);
  }

  .site-shell .mydevcook-product-topbar .language-picker {
    margin-right: 0;
  }

  .site-shell .mydevcook-product-topbar .mydevcook-header-logo {
    width: auto;
    max-width: 195px;
  }
}

/*
 * Shared myDevCook design system
 * Keeps every content and app page visually aligned with the landing page.
 */
body {
  background:
    radial-gradient(circle at 16% 12%, rgba(32, 160, 192, 0.1), transparent 28%),
    radial-gradient(circle at 84% 10%, rgba(240, 72, 48, 0.08), transparent 24%),
    linear-gradient(145deg, #ffffff 0%, #f6fafb 100%);
}

.site-shell {
  --brand-navy: #102030;
  --brand-navy-deep: #091622;
  --brand-cyan: #20a0c0;
  --brand-cyan-bright: #2bb6d1;
  --brand-coral: #f04830;
  --brand-ink: #173149;
  --brand-copy: #496577;
  --bg: #ffffff;
  --bg-2: #f6fafb;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-strong: #ffffff;
  --surface-soft: rgba(32, 160, 192, 0.08);
  --line: rgba(32, 160, 192, 0.17);
  --text: #102030;
  --muted: #496577;
  --primary: #20a0c0;
  --accent: #f04830;
  --ok: #168a6a;
  --warn: #f04830;
  --shadow: 0 20px 50px rgba(16, 32, 48, 0.09);
  --radius-xl: 28px;
  --radius-lg: 24px;
  --container: 1100px;
  color: var(--brand-navy);
  background:
    radial-gradient(circle at 14% 10%, rgba(32, 160, 192, 0.1), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(240, 72, 48, 0.08), transparent 24%),
    linear-gradient(145deg, #ffffff 0%, #f6fafb 100%);
}

.site-shell .site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(32, 160, 192, 0.2);
  box-shadow: 0 3px 18px rgba(16, 32, 48, 0.08);
}

.site-shell .topnav,
.site-shell .brand-copy small {
  color: var(--brand-copy);
}

.site-shell .brand-copy strong,
.site-shell .topnav,
.site-shell .language-picker,
.site-shell .language-picker select {
  color: var(--brand-navy);
}

.site-shell .topnav a:hover,
.site-shell .topnav a:focus-visible,
.site-shell .footer-column a:hover,
.site-shell .footer-column a:focus-visible {
  color: var(--brand-coral);
}

.site-shell .language-picker {
  border-color: rgba(32, 160, 192, 0.22);
  background: rgba(242, 250, 252, 0.96);
}

.site-shell .hero,
.site-shell .updates-hero,
.site-shell .faq-hero,
.site-shell .legal-hero {
  background:
    radial-gradient(circle at 16% 24%, rgba(32, 160, 192, 0.13), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(240, 72, 48, 0.1), transparent 25%),
    linear-gradient(145deg, #ffffff 0%, #f6fafb 100%);
}

.site-shell .faq-hero {
  padding: 72px 0 38px;
}

.site-shell .faq-main,
.site-shell .updates-main,
.site-shell .legal-main {
  background: transparent;
}

.site-shell .faq-content {
  padding: 34px 0 76px;
}

.site-shell .hero-copy,
.site-shell .hero-copy h1,
.site-shell .hero-copy p,
.site-shell .updates-hero h1,
.site-shell .updates-hero .hero-lead,
.site-shell .faq-hero h1,
.site-shell .faq-hero .hero-lead,
.site-shell .legal-hero h1,
.site-shell .legal-hero .legal-lead {
  color: var(--brand-navy);
}

.site-shell .hero-copy .hero-lead,
.site-shell .hero-copy .hero-subcopy,
.site-shell .updates-hero .hero-lead,
.site-shell .faq-hero .hero-lead,
.site-shell .legal-hero .legal-lead {
  color: var(--brand-copy);
}

.site-shell .eyebrow,
.site-shell .section-tag,
.site-shell .comparison-kicker {
  color: var(--brand-coral);
}

.site-shell h1,
.site-shell h2,
.site-shell h3,
.site-shell .section-light h2,
.site-shell .section-light h3,
.site-shell .section-dark h2,
.site-shell .section-dark h3 {
  color: var(--brand-navy);
}

.site-shell p,
.site-shell li,
.site-shell .section-light p,
.site-shell .section-light li,
.site-shell .section-dark p,
.site-shell .section-dark li {
  color: var(--brand-copy);
}

.site-shell .hero-note {
  color: var(--brand-copy);
}

.site-shell .signal-pill {
  border-color: rgba(32, 160, 192, 0.18);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 26px rgba(16, 32, 48, 0.07);
}

.site-shell .signal-label {
  color: #1688a7;
}

.site-shell .signal-pill strong {
  color: var(--brand-navy);
}

.site-shell .hero-card,
.site-shell .hero-card-floating {
  border-color: rgba(32, 160, 192, 0.17);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 50px rgba(16, 32, 48, 0.11);
}

.site-shell .hero-card-floating strong {
  color: var(--brand-navy);
}

.site-shell .section-light {
  background: transparent;
}

.site-shell .section-dark {
  background:
    radial-gradient(circle at 12% 18%, rgba(32, 160, 192, 0.07), transparent 28%),
    rgba(238, 248, 250, 0.72);
  border-top: 1px solid rgba(32, 160, 192, 0.1);
  border-bottom: 1px solid rgba(32, 160, 192, 0.1);
}

.site-shell .glass-card,
.site-shell .comparison-card,
.site-shell .feature-card,
.site-shell .example-card,
.site-shell .use-case-card,
.site-shell .faq-card,
.site-shell .premium-card,
.site-shell .footer-note,
.site-shell .release-card,
.site-shell .legal-card,
.site-shell .language-band {
  border-color: rgba(32, 160, 192, 0.17);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 50px rgba(16, 32, 48, 0.09);
}

.site-shell .comparison-card-accent,
.site-shell .premium-card-accent {
  background:
    radial-gradient(circle at 88% 12%, rgba(240, 72, 48, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.96);
}

.site-shell .card-icon,
.site-shell .section-light .card-icon {
  background: rgba(32, 160, 192, 0.11);
  color: #1688a7;
  box-shadow: inset 0 0 0 1px rgba(32, 160, 192, 0.13);
}

.site-shell .supported-language-flags span,
.site-shell .language-chips span {
  border-color: rgba(32, 160, 192, 0.16);
  background: rgba(32, 160, 192, 0.07);
  color: var(--brand-navy);
}

.site-shell .release-meta,
.site-shell .release-summary,
.site-shell .release-points {
  color: var(--brand-copy);
}

.site-shell .release-badge {
  background: rgba(32, 160, 192, 0.11);
  color: #147f9c;
}

.site-shell .site-footer {
  border-top-color: rgba(32, 160, 192, 0.16);
  background:
    radial-gradient(circle at 10% 20%, rgba(32, 160, 192, 0.1), transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #eef8fa 100%);
}

.site-shell .site-footer,
.site-shell .site-footer h3,
.site-shell .site-footer strong,
.site-shell .site-footer a {
  color: var(--brand-navy);
}

.site-shell .site-footer p {
  color: var(--brand-copy);
}

.site-shell .appstore-badge,
.site-shell .site-footer .appstore-badge,
.site-shell .appstore-badge .appstore-large {
  color: #ffffff;
}

.site-shell .legal-content {
  background: transparent;
}

.site-shell .legal-back-link {
  background: var(--brand-coral);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(240, 72, 48, 0.24);
}

.site-shell .legal-back-link:hover,
.site-shell .legal-back-link:focus-visible {
  background: var(--brand-navy);
  color: #ffffff;
}

@media (max-width: 760px) {
  .site-shell .faq-hero {
    padding: 54px 0 28px;
  }
}