/* GENERATED by web/tool/build_chrome.py — do not edit by hand.
   The site header and footer, lifted from index.html so every page carries
   the same ones. Every rule is scoped to .cmy-chrome: pages own .wrap, body
   and the rest for themselves, and nothing here leaks into their content. */

.cmy-chrome {
      --char: #17120c;
      --char-2: #211910;
      --surface: #2a2015;
      --surface-line: #3a2d1c;
      --paper: #fbf3e3;
      --paper-2: #f3e7cf;
      --paper-line: #e6d5b4;
      --ink: #241a12;
      --ink-soft: #6d5b46;
      --cream: #f7ecd8;
      --cream-soft: #c3b299;
      --orange: #ff6b35;
      --orange-deep: #e2521f;
      --gold: #ffc947;
      --mint: #33c7a8;
      --display: "Baloo 2", ui-rounded, "Segoe UI Rounded", "SF Pro Rounded", system-ui, "Trebuchet MS", sans-serif;
      --body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      --nav-h: 132px;
      --radius: 22px;
      --radius-sm: 14px;
      --shadow-card: 0 18px 40px -18px rgba(0, 0, 0, .55);
      --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, .6);
      --maxw: 1160px;
  --paper: #fbf3e3;
  --ink: #241a12;
  --ink-soft: #6d5b46;
}

/* The base index.html gets from its own reset. A page with its own rules —
   blog.css underlines every link, company.css sets its own type — would
   otherwise repaint the shared chrome, so the chrome restates them for the
   subtree it owns and nothing more. */
.cmy-chrome,
.cmy-chrome *,
.cmy-chrome *::before,
.cmy-chrome *::after {
  box-sizing: border-box;
}

.cmy-chrome {
  display: block;
  font-family: var(--body);
  background: var(--char);
  color: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

.cmy-chrome a {
  color: inherit;
  text-decoration: none;
}

.cmy-chrome h1,
.cmy-chrome h2,
.cmy-chrome h3,
.cmy-chrome h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
}

.cmy-chrome p {
  margin: 0;
}

.cmy-chrome img {
  max-width: 100%;
  display: block;
}

.cmy-chrome button {
  font: inherit;
}

.cmy-chrome .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 24px;
}
.cmy-chrome .btn {
      font-family: var(--display);
      font-weight: 700;
      font-size: 1rem;
      border: none;
      cursor: pointer;
      border-radius: 999px;
      padding: .85em 1.6em;
      display: inline-flex;
      align-items: center;
      gap: .5em;
      white-space: nowrap;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cmy-chrome .btn-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--orange), var(--gold));
      box-shadow: 0 12px 30px -10px rgba(255, 107, 53, .7);
}
.cmy-chrome .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 38px -10px rgba(255, 107, 53, .8);
}
.cmy-chrome .btn-store {
      gap: 9px;
}
.cmy-chrome .btn-store[aria-disabled="true"] {
      cursor: default;
}
.cmy-chrome .btn-store[aria-disabled="true"]:hover {
      transform: none;
}
.cmy-chrome .btn-ghost {
      background: rgba(255, 255, 255, .06);
      color: var(--cream);
      border: 1px solid var(--surface-line);
}
.cmy-chrome .btn-ghost:hover {
      background: rgba(255, 255, 255, .12);
      transform: translateY(-2px);
}
.cmy-chrome .btn:focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 3px;
}
.cmy-chrome header.nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(23, 18, 12, .72);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.cmy-chrome .nav-inner {
      display: flex;
      align-items: center;
      
      justify-content: flex-end;
      gap: 24px;
      height: 132px;
      
      padding-left: 280px;
}
.cmy-chrome .brand {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--display);
      font-weight: 800;
      font-size: 1.15rem;
}
.cmy-chrome .brand img {
      height: 88px;
      width: auto;
}
.cmy-chrome .brand .ai {
      color: var(--orange);
}
.cmy-chrome .nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
}
.cmy-chrome .nav-links>a {
      white-space: nowrap;
}
.cmy-chrome .nav-links a {
      font-weight: 600;
      font-size: .95rem;
      color: var(--cream-soft);
      transition: color .15s;
}
.cmy-chrome .nav-links a:hover {
      color: var(--cream);
}
.cmy-chrome .nav-cta {
      display: flex;
      align-items: center;
      gap: 14px;
}
.cmy-chrome .menu-btn {
      display: none;
      background: none;
      border: none;
      color: var(--cream);
      cursor: pointer;
      padding: 8px;
}
.cmy-chrome .nav-social {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding-left: 6px;
      margin-left: 2px;
      border-left: 1px solid var(--surface-line);
}
.cmy-chrome .nav-social a {
      display: inline-flex;
      padding: 4px;
      color: var(--cream-soft);
      transition: color .15s, transform .15s;
}
.cmy-chrome .nav-social a:hover {
      color: var(--gold);
      transform: translateY(-2px);
}
.cmy-chrome .store-badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: .5em .95em;
      border-radius: 12px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid var(--surface-line);
      font-size: .8rem;
      color: var(--cream);
      transition: transform .15s, background .15s, border-color .15s;
}
.cmy-chrome .getapp-wrap {
      position: relative;
      display: inline-block;
}
.cmy-chrome .getapp-pop {
      position: absolute;
      
      bottom: calc(100% + 12px);
      left: 0;
      z-index: 60;
      width: max-content;
      max-width: min(320px, calc(100vw - 40px));
      padding: 18px;
      border-radius: 18px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .65);
      text-align: left;
}
.cmy-chrome .nav-getapp .btn-store {
      font-size: .9rem;
      padding: .6em 1.15em;
}
.cmy-chrome .nav-getapp .getapp-pop {
      top: calc(100% + 12px);
      bottom: auto;
      left: auto;
      right: 0;
}
.cmy-chrome .hero-store .store-badge {
      border-color: rgba(255, 255, 255, .22);
}
.cmy-chrome .getapp-pop h4 {
      font-family: var(--display);
      font-size: 1.15rem;
      margin: 0 0 4px;
      color: var(--ink);
}
.cmy-chrome .getapp-pop>p {
      font-size: .84rem;
      line-height: 1.5;
      margin: 0 0 14px;
      color: rgba(0, 0, 0, .62);
}
.cmy-chrome .getapp-pop .store-badge {
      display: flex;
      width: 100%;
      margin-bottom: 9px;
}
.cmy-chrome .store-dark,
.cmy-chrome .nav-links .store-dark,
.cmy-chrome .f-col .store-dark {
      background: #000;
      border-color: #000;
      color: #fff;
      padding: .55em 1em;
}
.cmy-chrome .store-badge.store-dark:hover,
.cmy-chrome .store-badge.store-dark:focus-visible {
      background: #000;
      border-color: var(--gold);
}
.cmy-chrome .store-dark small,
.cmy-chrome .nav-links .store-dark small,
.cmy-chrome .f-col .store-dark small,
.cmy-chrome .hero-store .store-dark small {
      color: rgba(255, 255, 255, .72);
}
.cmy-chrome .store-badge:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, .1);
      border-color: var(--gold);
}
.cmy-chrome .store-badge svg {
      flex: none;
}
.cmy-chrome .store-badge b {
      font-family: var(--display);
      font-weight: 700;
      font-size: .95rem;
      display: block;
      line-height: 1.1;
}
.cmy-chrome .store-badge small {
      display: block;
      font-size: .62rem;
      color: var(--cream-soft);
      letter-spacing: .08em;
      text-transform: uppercase;
}
.cmy-chrome .band {
      padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.cmy-chrome .band.paper {
      background: var(--paper);
      color: var(--ink);
}
.cmy-chrome .band.paper .eyebrow {
      color: var(--orange-deep);
}
.cmy-chrome .band.paper .sec-head p {
      color: var(--ink-soft);
}
.cmy-chrome .band:not(.paper) .sec-head p {
      color: var(--cream-soft);
}
.cmy-chrome .band.paper .feature {
      background: #fff;
      border-color: var(--paper-line);
      box-shadow: 0 20px 40px -28px rgba(90, 60, 20, .35);
}
.cmy-chrome .band.paper .feature h3 {
      color: var(--ink);
}
.cmy-chrome .band.paper .feature p {
      color: var(--ink-soft);
}
.cmy-chrome .local .btn {
      margin-top: 26px;
      position: relative;
}
.cmy-chrome .site-footer {
      background: var(--char-2);
      border-top: 1px solid rgba(255, 255, 255, .06);
}
.cmy-chrome .footer-main {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr 1.1fr;
      gap: 44px;
}
.cmy-chrome .foot-brand {
      display: flex;
      align-items: center;
      gap: 10px;
}
.cmy-chrome .foot-brand img {
      height: 64px;
      width: auto;
}
.cmy-chrome .f-tagline {
      font-family: var(--display);
      font-weight: 700;
      color: var(--cream);
      margin-top: 8px;
      font-size: 1.05rem;
}
.cmy-chrome .f-about {
      color: var(--cream-soft);
      font-size: .92rem;
      margin-top: 12px;
      max-width: 36ch;
}
.cmy-chrome .f-socials {
      display: flex;
      gap: 12px;
      margin-top: 20px;
}
.cmy-chrome .f-social {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--cream);
      background: rgba(255, 255, 255, .06);
      border: 1px solid var(--surface-line);
      transition: transform .15s, background .15s, border-color .15s, color .15s;
}
.cmy-chrome .f-social:hover {
      transform: translateY(-3px);
      background: linear-gradient(135deg, var(--orange), var(--gold));
      border-color: transparent;
      color: #fff;
}
.cmy-chrome .f-col h4 {
      font-family: var(--display);
      font-weight: 800;
      font-size: .8rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 14px;
}
.cmy-chrome .f-col a {
      display: block;
      color: var(--cream-soft);
      font-size: .95rem;
      padding: 5px 0;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
      font-family: var(--body);
      transition: color .15s;
}
.cmy-chrome .f-col a:hover {
      color: var(--cream);
}
.cmy-chrome .f-get .store-badge {
      display: inline-flex;
      margin-bottom: 10px;
}
.cmy-chrome .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center;
      border-top: 1px solid rgba(255, 255, 255, .07);
      margin-top: 34px;
      padding-top: 22px;
}
.cmy-chrome .footer-bottom .copy {
      color: #8a7c67;
      font-size: .84rem;
}
.cmy-chrome .footer-bottom .made {
      color: var(--cream-soft);
      font-size: .84rem;
}
@media(max-width:1024px) {
  .cmy-chrome .nav-inner {
        height: 74px;
        
        padding-left: 160px;
  }
  .cmy-chrome .brand img {
        height: 48px;
  }
  .cmy-chrome section[id],
.cmy-chrome .hero,
.cmy-chrome .band {
        scroll-margin-top: 82px;
  }
  .cmy-chrome .nav-links,
.cmy-chrome .nav-cta .btn {
        display: none;
  }
  .cmy-chrome .nav-getapp,
.cmy-chrome .nav-getapp .btn-store {
        display: flex;
        width: 100%;
        justify-content: center;
  }
  .cmy-chrome .nav-getapp {
        flex-direction: column;
  }
  .cmy-chrome .nav-getapp .getapp-pop {
        position: static;
        margin-top: 10px;
        max-width: none;
        width: auto;
        box-shadow: none;
  }
  .cmy-chrome .menu-btn {
        display: block;
  }
  .cmy-chrome .nav-links.open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--char-2);
        padding: 16px 22px 22px;
        gap: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .75);
        max-height: calc(100vh - 74px);
        overflow-y: auto;
  }
  .cmy-chrome .nav-links.open>a:not(.menu-cta) {
        font-size: 1.06rem;
        padding: 5px 2px;
  }
  .cmy-chrome .nav-links.open .nav-social {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        gap: 26px;
        justify-content: center;
        padding-top: 8px;
  }
  .cmy-chrome .nav-links.open .menu-cta {
        display: inline-flex;
        justify-content: center;
        margin-top: 6px;
        font-size: 1.02rem;
  }
}
@media(max-width:900px) {
  .cmy-chrome .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
  }
  .cmy-chrome .f-brand {
        grid-column: 1 / -1;
  }
  .cmy-chrome .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
  }
}
@media(max-width:640px) {
  .cmy-chrome .hero-cta .btn {
        justify-content: center;
        white-space: normal;
  }
  .cmy-chrome .footer-main {
        grid-template-columns: 1fr;
        text-align: left;
  }
}
@media(max-width:380px) {
  .cmy-chrome .wrap {
        padding: 0 18px;
  }
}