/*
 * 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 gives the layout, the structure, the spacing, the type scale and the
 * motion, and those values keep the names Claude's own stylesheet gives them; theme.css, the product's theme copied from main, gives
 * the faces, the colours by their jobs, the weights, the line heights, the selected text's colour and the radii, and this file draws
 * by its names.
 * This file holds the base: the reset, buttons, sections, the FAQ's list and things rising into view; the module chrome keeps it.
 * The pages load theme.css, then base, chrome, sign-in and pricing (README.md, "Modules").
 */

:root {
  /* Claude's own colours, kept only while sign-in.css and pricing.css still name them; each goes once its module draws by the
     theme's roles. Nothing in base.css or chrome.css names them. */
  --color-gray-000: #fff; --color-gray-050: #faf9f5; --color-gray-100: #f5f4ed; --color-gray-150: #f0eee6; --color-gray-200: #e8e6dc;
  --color-gray-250: #dedcd1; --color-gray-300: #d1cfc5; --color-gray-350: #c2c0b6; --color-gray-400: #b0aea5; --color-gray-450: #9c9a92;
  --color-gray-500: #87867f; --color-gray-550: #73726c; --color-gray-600: #5e5d59; --color-gray-650: #4d4c48; --color-gray-700: #3d3d3a;
  --color-gray-750: #30302e; --color-gray-800: #262624; --color-gray-850: #1f1e1d; --color-gray-900: #1a1918; --color-gray-950: #141413;
  --color-clay: #d97757; --color-clay-hover: #c6613f; --color-clay-dark: #c46849; --color-cactus: #bcd1ca; --color-sky: #6a9bcc;
  --color-heather: #cbcadb; --color-plum: #827dbd; --color-mineral: #629987; --color-peach: #ebc9b7;
  --shadow-sm: 0 2px 8px #0000000a; --shadow-md: 0 4px 20px #0000000a; --shadow-lg: 0 4px 16px #0000001a;

  /* Claude's role names, now the theme's roles, so whatever draws by them takes the product's colours, faces and radii. They are
     resolved here at the root, so inside a band that names [data-theme="dark"] they keep the light values: a dark band draws by the
     theme's own names. */
  --bg: var(--ground); --bg-secondary: var(--wash); --bg-tertiary: var(--wash);
  --fg: var(--ink); --fg-secondary: var(--quiet); --fg-tertiary: var(--quiet);
  --border: var(--line); --border-soft: var(--line);
  --surface: var(--raised); --input-bg: var(--raised); --link-fine: var(--act); --color-error: var(--bad);
  --button-radius: var(--radius); --control-radius: var(--radius); --card-radius: var(--radius-large);
  --font-serif: var(--font-ui); --font-sans: var(--font-ui);

  --sp-4: .25rem; --sp-8: .5rem; --sp-12: .75rem; --sp-16: 1rem; --sp-20: 1.25rem; --sp-24: 1.5rem; --sp-32: 2rem; --sp-40: 2.5rem;
  --sp-48: 3rem; --sp-56: 3.5rem; --sp-64: 4rem; --sp-80: 5rem; --sp-96: 6rem; --sp-128: 8rem;
  /* Claude's eases, by the names its stylesheet gives them (claude.com, read 2026-10-23). */
  --ease-out-power2: cubic-bezier(.25, 1, .5, 1); --ease-out-quart: cubic-bezier(.165, .84, .44, 1); --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1); --ease-in-out-power3: cubic-bezier(.645, .045, .355, 1);
  /* How long an FAQ answer takes to open or close, and on what curve: claude.com/pricing's. A list may set its own. */
  --faq-time: .5s; --faq-ease: var(--ease-out-expo);

  --container-max-width: 90rem;
  --container-margin: clamp(2rem, 2rem + 32 * (100vw - 20rem) / 1120, 4rem);
  --section-spacing-main: 6rem; --section-spacing-lg: 8rem;

  --display-2: clamp(2.25rem, 2.25rem + 28 * (100vw - 20rem) / 1120, 4rem);
  --headline-1: clamp(2.125rem, 2.125rem + 18 * (100vw - 20rem) / 1120, 3.25rem);
  --headline-2: clamp(1.875rem, 1.875rem + 14 * (100vw - 20rem) / 1120, 2.75rem);
  --headline-3: clamp(1.75rem, 1.75rem + 8 * (100vw - 20rem) / 1120, 2.25rem);
  --headline-4: clamp(1.4375rem, 1.4375rem + 9 * (100vw - 20rem) / 1120, 2rem);
  --headline-5: clamp(1.25rem, 1.25rem + 5 * (100vw - 20rem) / 1120, 1.5625rem);
  --headline-6: clamp(1rem, 1rem + 3 * (100vw - 20rem) / 1120, 1.1875rem);
  --body-large-2: clamp(1.25rem, 1.25rem + 3 * (100vw - 20rem) / 1120, 1.4375rem);
  --body-1: clamp(1.1875rem, 1.1875rem + 1 * (100vw - 20rem) / 1120, 1.25rem);
  --body-2: 1.0625rem; --body-3: .9375rem; --caption: .75rem;
  --hero-title: clamp(3.2rem, 3.2rem + 4.8 * (100vw - 20rem) / 1120, 3.5rem);
}

/* Chinese reading: Claude's Chinese sizes for the largest titles. */
:root:lang(zh) {
  --hero-title: clamp(2.5rem, 2.5rem + 6.4 * (100vw - 20rem) / 1120, 2.9rem);
  --headline-1: clamp(1.875rem, 1.875rem + 14 * (100vw - 20rem) / 1120, 2.75rem);
  --display-2: clamp(2rem, 2rem + 22 * (100vw - 20rem) / 1120, 3.375rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The theme's three line heights, by their jobs: words read in full, small words, and a title or a line that stands alone. */
body {
  margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-ui); font-size: var(--body-3); line-height: var(--leading-body);
  font-feature-settings: "liga", "lnum", "pnum"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--act-wash); }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
/* The theme holds two weights, so what a browser draws bold by itself takes the strong one. */
h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: var(--weight-strong); }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute; z-index: 100; left: var(--container-margin); top: 12px; transform: translateY(-200%);
  padding: 8px 12px; border: 1px solid var(--float-edge); border-radius: var(--radius); background: var(--ground); color: var(--ink);
  font-size: .75rem; line-height: var(--leading-small); text-decoration: none;
}
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-margin); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Where Claude's button is black, the theme's is forest: what a person acts on. A weight Claude sets at 500 takes the theme's
   strong weight, here and in every title below. The colours change in claude.com's buttons' times. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 8px 16px; border: 0;
  border-radius: var(--radius); font-size: .9375rem; font-weight: var(--weight-strong); line-height: var(--leading-tight); text-decoration: none; white-space: nowrap;
  transition: color .1s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
.btn-primary { background: var(--act); color: var(--act-ink); }
.btn-primary:hover { background: var(--act-hover); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.btn-outline:hover { background: var(--hover); }
.btn-block { width: 100%; }
.btn-xs { height: 26px; padding: 0 10px; font-size: .75rem; border-radius: var(--radius); }
.btn svg { flex: none; }

/* ── Sections ────────────────────────────────────────────────────────── */
.section { padding-block: var(--section-spacing-main); }
.section-title { font-size: var(--headline-1); font-weight: var(--weight-strong); line-height: var(--leading-tight); text-align: center; text-wrap: balance; }
:lang(zh) .section-title { letter-spacing: .02em; }
.section-icon { width: 64px; height: 64px; margin: 0 auto 24px; color: var(--ink); }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq-list { max-width: 660px; margin: 56px auto 0; padding: 0; list-style: none; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { margin: 0; font: inherit; }
.faq-button {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 28px 0; border: 0; background: none;
  color: var(--ink); font-size: 1.125rem; font-weight: var(--weight-strong); line-height: var(--leading-tight); text-align: left;
}
:lang(zh) .faq-button { font-size: 1.0625rem; }
.faq-button .plus { flex: none; width: 16px; height: 16px; color: var(--quiet); }
/* claude.com/pricing's FAQ (read 2026-10-25): an answer grows to its own height and shrinks back, clipped while it moves, and the
   plus's upright stroke turns flat to make a minus, both in the same time; nothing fades. Once the script has run, a closed answer
   stays in the page at no height and hidden from the keyboard and screen readers, and the script sets the height it moves to;
   without the script the answer keeps the hidden attribute. */
.plus .v { transform-origin: 8px 8px; transition: transform var(--faq-time) var(--faq-ease); }
[aria-expanded="true"] > .plus .v { transform: rotate(90deg); }
.faq-a[hidden] { display: none; }
.js .faq-a {
  height: 0; overflow: hidden; visibility: hidden;
  transition: height var(--faq-time) var(--faq-ease), visibility 0s linear var(--faq-time);
}
.js .faq-a.is-open { visibility: visible; transition-delay: 0s; }
/* Open and still, the answer takes its own height and stops clipping, so a link's focus ring at a line's start shows whole. */
.js .faq-a.is-shown { height: auto; overflow: visible; }
.faq-a-inner { padding: 0 40px 28px 0; color: var(--ink); font-size: 1rem; line-height: var(--leading-body); text-wrap: pretty; }
.faq-a-inner p + p { margin-top: 12px; }
.faq-a-inner a { color: var(--act); text-underline-offset: 3px; }
.chev-r { display: none; }

/* ── Motion ──────────────────────────────────────────────────────────── */
/* Things rise into place as they come into view, as claude.com's do (its AnimatedReveal, read from its script 2026-10-23): each
   rises 10px and fades in over .75s, once, when its top passes the line a fifth of the way up from the window's foot. A .reveal
   rises by itself; the children of a [data-reveal] rise one after another, .1s apart. Either may set its own --reveal-y,
   --reveal-duration, --reveal-delay and --reveal-stagger. They wait for the script, which says when each is in view. */
.js .reveal, .js [data-reveal] > * { opacity: 0; translate: 0 var(--reveal-y, 10px); }
.js .reveal.is-in, .js [data-reveal].is-in > * {
  opacity: 1; translate: none;
  animation: reveal-rise var(--reveal-duration, .75s) var(--ease-out-power2) calc(var(--reveal-delay, 0s) + var(--reveal-index, 0) * var(--reveal-stagger, .1s)) backwards;
}
/* A page comes in as claude.com's do: the main rises 20px and fades in as one block over 1s, .4s after the page opens. */
.page-enter { animation: page-rise 1s var(--ease-out-power2) .4s backwards; }
@keyframes reveal-rise { from { opacity: 0; translate: 0 var(--reveal-y, 10px); } }
@keyframes page-rise { from { opacity: 0; translate: 0 20px; } }
/* A title's words fade in one after another as it comes into view, as claude.com's closing titles do (its AnimatedHeading): each
   over 1s, the last one starting .2s after the first. The script splits the words and names the title by its whole text. A Chinese
   title's words stay inline, so its lines still break between characters. */
.word { display: inline-block; }
:lang(zh) .word { display: inline; }
.js [data-words] .word { opacity: 0; }
.js [data-words].is-in .word { opacity: 1; animation: word-fade 1s var(--ease-out-power2) calc(var(--word-index, 0) * var(--word-stagger, 0s)) backwards; }
@keyframes word-fade { from { opacity: 0; } }

/* In a picture (?still), what this file moves stands in its place at once; for a person who asks for less motion, everything does. */
.still :is(.reveal, [data-reveal] > *, .page-enter, .word, .faq-a, .plus .v) { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .reveal, .js [data-reveal] > *, .js [data-words] .word { opacity: 1; translate: none; }
}