/*
 * ComChatX's site, drawn the way Claude's public site is drawn (claude.com and claude.ai/login, read 2026-10-22), in the product's
 * theme (brief 2026-10-22-57, corrections 2 and 6): Claude's layout, structure, spacing, type scale and motion; the theme's faces,
 * colours by their jobs, weights, line heights and radii, by the names theme.css gives them. A dark band names [data-theme="dark"]
 * and draws by the same names.
 * This file holds the header, the narrow screen's menu, the footer and its language menu, and the contact page; the module chrome
 * keeps it. The pages load theme.css, then base, chrome, sign-in and pricing (README.md, "Modules").
 */

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header { position: relative; z-index: 40; background: var(--ground); }
.header-row { position: relative; display: flex; align-items: center; height: 5.25rem; gap: 8px; }
/* The header comes down into place as claude.com's does when a page opens (its navSlideDown, read 2026-10-23): 20px, from
   nothing, over 1s. claude.com keeps its header while a person moves between its pages, so here it comes down on the first page
   of a visit only (the head's script marks that page). */
.enter .header-row { animation: header-down 1s var(--ease-out-power2) backwards; }
@keyframes header-down { from { opacity: 0; translate: 0 -20px; } }
.brand { display: inline-flex; align-items: center; margin-right: auto; color: var(--ink); text-decoration: none; border-radius: var(--radius-small); }
/* The wordmark as the product draws it (app.css, .sidebar .brand, at 76300278a): the mark, then the name in the UI face at the
   strong weight and the theme's wordmark size. The product's mark is 1.4rem beside 17px words with 8px between; in em, so the
   footer's larger wordmark keeps the same proportions. */
.wordmark {
  display: inline-flex; align-items: center; gap: .47em; font-size: var(--size-lead); font-weight: var(--weight-strong);
  line-height: var(--leading-tight); white-space: nowrap;
}
.wordmark::before { content: ""; flex: none; width: 1.3176em; height: 1.3176em; background: url("../brand/mark.svg") center / contain no-repeat; }
[data-theme="dark"] .wordmark::before { background-image: url("../brand/mark-dark.svg"); }
.nav { display: flex; align-items: center; gap: 8px; }
.nav-list { display: flex; align-items: center; list-style: none; margin: 0 4px 0 0; padding: 0; }
/* The theme draws a row under the pointer, and the page you are on, on the hover ground; it comes in claude.com's nav links' time. */
.nav-link {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 8px 8px 8px 12px; border: 0; background: none;
  color: var(--ink); font-size: .9375rem; line-height: var(--leading-tight); text-decoration: none; border-radius: var(--radius);
  transition: background-color .5s var(--ease-out-expo);
}
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--hover); }
.nav .btn { margin-left: 4px; }

.menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; background: none; border-radius: var(--radius); }
.menu-toggle svg { width: 24px; height: 24px; }
/* The narrow screen's menu moves as claude.com's does (its NavMobile, read 2026-10-23): it is uncovered from the top down over
   .8s and covered again from the foot up over .4s; its rows rise 20px into place over .4s, the first .32s after it starts to
   open and each next one 80ms later, and its buttons last, .2s before the rows finish. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 0 var(--container-margin) 32px; background: var(--ground); overflow-y: auto;
  animation: menu-open .8s var(--ease-in-out-power3) backwards;
}
.mobile-menu.is-closing { animation: menu-close .4s var(--ease-in-out-power3) forwards; }
@keyframes menu-open { from { clip-path: inset(0 0 100%); } to { clip-path: inset(0); } }
@keyframes menu-close { from { clip-path: inset(0); } to { clip-path: inset(0 0 100%); } }
.mobile-menu[hidden] { display: none; }
.mobile-menu-head { display: flex; flex: none; align-items: center; justify-content: space-between; height: 4.5rem; }
.mobile-menu-list { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.mobile-menu-list > li { border-bottom: 1px solid var(--line); animation: menu-row .4s var(--ease-out-power2) .32s backwards; }
.mobile-menu-list > li:last-child { border-bottom: 0; }
.mm-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 22px 0; border: 0; background: none; color: var(--ink); font-size: 1.1875rem; line-height: var(--leading-tight); text-align: left; text-decoration: none; }
/* One row, so the buttons start at .32s + .4s - .2s. */
.mobile-menu-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 2.5rem; animation: menu-row .4s var(--ease-out-power2) .52s backwards; }
.mobile-menu-actions .btn { flex: 1; height: 44px; font-size: 1.0625rem; }
@keyframes menu-row { from { opacity: 0; translate: 0 20px; } }

/* In a picture (?still), the header and the menu stand in place at once. */
.still :is(.header-row, .mobile-menu, .mobile-menu-list > li, .mobile-menu-actions, .nav-link) { animation: none !important; transition: none !important; }

@media (max-width: 1023px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-row { height: 4.5rem; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
/* claude.com's footer, part for part (read 2026-10-23): the wordmark at the head of the left column and the copyright line at
   its foot, the link columns on the right, then a rule and a bar with the social icons and the language menu. The columns carry
   no headings: their links say what they are (Jack, correction 13). The footer names the theme's dark set, as claude.com's
   footer is dark; the sign-in page's light footer, after claude.ai/login's, keeps the light set and the same parts. */
.site-footer { padding-block: clamp(4rem, 3.42857rem + 2.85714vw, 6rem); background: var(--ground); color: var(--ink); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.footer-logo { justify-self: start; color: inherit; text-decoration: none; border-radius: var(--radius-small); }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { display: block; padding: 4px 0; color: var(--ink); font-size: .75rem; line-height: var(--leading-small); letter-spacing: .01em; text-decoration: none; }
.footer-copy { margin-top: 24px; color: var(--quiet); font-size: .6875rem; line-height: var(--leading-small); }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.footer-social { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.footer-social-link { display: flex; color: var(--quiet); }
.footer-social-link svg { display: block; width: 16px; height: 16px; }
@media (min-width: 52.125em) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; }
  /* claude.com's footer logo is a fifth wider than its header's; the theme's title size is the nearest. */
  .footer-logo .wordmark { font-size: var(--size-title); }
  .footer-cols { grid-column: 2; grid-row: 1 / 3; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-copy { grid-column: 1; grid-row: 2; align-self: end; margin-top: 0; }
  .footer-social { gap: 24px; }
}
/* The language menu: claude.com's locale picker, a list that opens upward from the button and joins it. The button and the list
   draw as the product's fields and menus do, a line's edge on the hover ground (correction 8), and the list keeps the button's edge
   so the two read as one. Under the pointer the button's words darken, as the product's ⋮ does. Its colours change in the
   picker's .3s, its caret turns in .2s, and the list opens at once, as claude.com's do. */
.lang-switch { position: relative; }
.lang-switch > button {
  display: flex; align-items: center; gap: .5em; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--hover); color: var(--quiet); font-size: .75rem; line-height: var(--leading-small); letter-spacing: .01em; white-space: nowrap;
  cursor: pointer; transition: color .3s, background-color .3s;
}
.lang-switch > button:hover { color: var(--ink); }
.lang-switch > button svg { flex-shrink: 0; width: 20px; height: 20px; }
.lang-switch > button .caret { transition: transform .2s; }
.lang-switch > button[aria-expanded="true"] { border-top-color: transparent; border-radius: 0 0 var(--radius) var(--radius); }
.lang-switch > button[aria-expanded="true"] .caret { transform: rotate(180deg); }
.lang-switch .lang-menu {
  position: absolute; inset: auto 0 100%; min-width: 100%; margin: 0; padding: 8px; list-style: none;
  border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: var(--hover); visibility: hidden;
}
.lang-menu.is-open { visibility: visible; }
.lang-menu a { display: block; padding: 8px 12px; border-radius: var(--radius-small); color: var(--ink); font-size: .75rem; line-height: var(--leading-small); letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.lang-menu a:hover { background: var(--float-hover); }
/* claude.ai/login's light footer: its padding. */
.site-footer--light { padding-block: 64px; }

/* ── Contact sales (claude.com/contact-sales, the shorter of the two forms Claude serves) ── */
.contact { padding: clamp(5rem, 5rem + 48 * (100vw - 20rem) / 960, 8rem) 0 clamp(6rem, 6rem + 48 * (100vw - 20rem) / 960, 9rem); }
.contact-grid { --card-gap: clamp(3.5rem, 3.5rem + 32 * (100vw - 20rem) / 960, 5.5rem); display: grid; grid-template-columns: minmax(0, 35.25rem); justify-content: center; }
/* The title stands alone over the form, which says what the page is for (Jack's rule, correction 8). */
.contact-title { font-size: var(--display-2); font-weight: var(--weight-strong); line-height: var(--leading-tight); }
:lang(zh) .contact-title { letter-spacing: .02em; }
/* The page's own rises, as claude.com/contact-sales has them: the title 16px; the cards 20px, .1s apart. */
.contact-title { --reveal-y: 16px; }
.contact-card, .contact-help { --reveal-y: 20px; }
.contact-help { --reveal-index: 1; }
/* The form's card is a surface, raised from the page and outlined. Its fields draw as the product's do, a line's edge on the
   hover ground (correction 8). */
.contact-card { margin-top: var(--card-gap); padding: clamp(1.5rem, 1.5rem + 24 * (100vw - 20rem) / 960, 3rem); border-radius: var(--radius-large); background: var(--raised); border: 1px solid var(--line); }
.contact-form, .contact-more { display: flex; flex-direction: column; gap: 32px; }
.contact-more[hidden] { display: none; }
.contact-field { display: flex; flex-direction: column; gap: 16px; }
.contact-field > label { color: var(--ink); font-size: .9375rem; font-weight: var(--weight-strong); line-height: var(--leading-tight); }
/* A required field is not a failure, so its mark is quiet, not the failure's red. */
.req { margin-left: 2px; color: var(--quiet); }
:lang(zh) .req { margin-left: 0; }
.contact-hint { margin-top: -12px; color: var(--quiet); font-size: .8125rem; line-height: var(--leading-small); }
/* A field's outline changes in the time claude.com's form gives its fields (.3s). */
.contact-field input:not([type="checkbox"]), .contact-field textarea, .contact-select select {
  width: 100%; min-height: 56px; padding: 16px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--hover);
  color: var(--ink); font-size: .9375rem; line-height: var(--leading-tight);
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.contact-field textarea { min-height: 136px; resize: vertical; font: inherit; font-size: .9375rem; line-height: var(--leading-body); }
.contact-select { position: relative; }
.contact-select select { appearance: none; padding-right: 56px; cursor: pointer; }
.contact-select .chev { position: absolute; top: 50%; right: 24px; width: 16px; height: 16px; margin-top: -8px; color: var(--quiet); pointer-events: none; }
/* As specific as the fields' own rule above, so a field that failed shows the failure's colour. */
.contact-field :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--bad); }
.contact-error { margin-top: -8px; color: var(--bad); font-size: .8125rem; line-height: var(--leading-small); }
.contact-check { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; color: var(--ink); font-size: .9375rem; line-height: var(--leading-body); cursor: pointer; }
.contact-check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--act); }
.contact-check a { color: var(--act); white-space: nowrap; text-underline-offset: 3px; }
/* The button opens the seller's own mail program on the message; the address beside it serves a device that opens none
   (correction 15). The line under them says where the message went, and takes no room until then. */
.contact-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.contact-submit { height: 40px; padding: 8px 24px; font-size: 1.0625rem; }
.contact-mail { color: var(--act); font-size: .9375rem; line-height: var(--leading-tight); white-space: nowrap; text-underline-offset: 3px; }
.contact-status:not(:empty) { margin-top: 16px; color: var(--ink); font-size: .9375rem; line-height: var(--leading-body); }
/* "More help": a full-width card under the form, or on a wide screen a small one in the left margin beside it. The theme draws
   a surface by its outline, never a shadow. */
.contact-help {
  display: flex; flex-direction: column; align-items: flex-start; margin-top: 24px; padding: 24px 24px 32px; border-radius: var(--radius-large);
  background: var(--raised); border: 1px solid var(--line); color: var(--quiet); font-size: 1.0625rem; line-height: var(--leading-body);
}
.contact-help-title { color: var(--ink); font-size: inherit; font-weight: var(--weight-strong); line-height: inherit; }
.contact-help .btn { width: 100%; height: 40px; margin-top: 28px; padding: 8px 24px; font-size: 1.0625rem; }
@media (min-width: 1180px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) 35.25rem minmax(0, 1fr); }
  .contact-grid > * { grid-column: 2; }
  .contact-help {
    grid-column: 1; grid-row: 2; align-self: start; justify-self: start; width: 13.4375rem; margin-top: calc(var(--card-gap) - 40px); padding: 16px;
    font-size: .8125rem; line-height: var(--leading-small);
  }
  .contact-help .btn { width: auto; height: 28px; margin-top: 12px; padding: 0 10px; font-size: .8125rem; }
}

/* The dark band that closes Claude's contact page, in the theme's dark set. */
.cta-band { padding-block: clamp(8rem, 8rem + 84 * (100vw - 20rem) / 1120, 12.5rem); background: var(--ground); color: var(--ink); text-align: center; }
.cta-title { max-width: 73rem; margin: 0 auto; font-size: var(--display-2); font-weight: var(--weight-strong); line-height: var(--leading-tight); text-wrap: balance; }
:lang(zh) .cta-title { letter-spacing: .02em; }
/* Each part of the title is held whole while it fits, so a narrower screen breaks the title between its parts first: the
   Chinese at its comma, the English before "operations to cx". cx and its figure take sign-in.css's .hero-cx rules, so the
   figure draws as on sign-in's heading, and "to cx" and the figure never part. */
.cta-clause { display: inline-block; }
.cta-button { height: 40px; margin-top: 40px; padding: 8px 24px; font-size: 1.0625rem; }
@media (max-width: 767px) { .cta-button { width: 100%; } }