/* ============================================================================
   cronwell-ai.cn — 中文静态页 / the China static page
   ----------------------------------------------------------------------------
   SELF-CONTAINED BY REQUIREMENT. No @import, no external URL. This ships in an
   OSS bucket with no build step and is served to readers behind the GFW, so
   anything it fetches from a third party is either slow or dead.

   TOKENS ARE COPIED, NOT IMPORTED, out of the Cronwell design system. If a token
   moves there it does NOT move here. That is the accepted cost of the page being
   one folder you can drag into a bucket.

   NO color-mix(), DELIBERATELY. The design system uses it everywhere; this file
   spells the same values as rgba(). The audience is mainland browsers, where
   WeChat's webview, QQ Browser and older Android stock browsers still turn up.
   color-mix() needs Chrome 111 / Safari 16.2 and fails to a TRANSPARENT colour,
   which would drop every hairline and mute type to invisible. rgba costs nothing
   and cannot fail. Do not "modernise" this.

   ONE SCREEN. The page is a hero and a footer. Rules for blocks that were tried
   and removed went out with their markup rather than staying behind as dead CSS.
   ========================================================================= */

@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/barlow-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ground + ink — design-system/tokens/colors.css */
  --color-bg: #f2f2f3;
  --color-text: #1d1f20;
  --color-divider: rgba(29, 31, 32, 0.16);
  --text-muted: rgba(29, 31, 32, 0.62);

  /* brand navy — 500 is the logo navy, 700 the body-size-on-light value,
     800 the reversed-type field the footer sits on */
  --color-accent-500: #0830a5;
  --color-accent-600: #032593;
  --color-accent-700: #03217f;
  --color-accent-800: #021669;

  /* spacing — design-system/tokens/spacing.css (Industry's 0.85x density scale) */
  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;
  --space-12: 40.8px;
  --space-16: 54.4px;

  /* THE TYPE STACK, and the one real design decision in this file. Barlow
     Condensed carries the Latin and the numerals; Chinese falls through to the
     platform CJK face, which is what every Chinese site does — a CJK webfont is
     10MB+ per weight and this page has no build step to subset one. The mixed
     run is the point rather than a compromise: "AI 智能体" sets the initials in
     the brand face and the word in PingFang. */
  --font-heading: "Barlow Condensed", "PingFang SC", "Microsoft YaHei",
    "Noto Sans CJK SC", "Source Han Sans SC", "Heiti SC", system-ui, sans-serif;
  --font-body: "Barlow", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC",
    "Source Han Sans SC", "Heiti SC", system-ui, sans-serif;
}

/* ——— base ——— */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  /* 1.75, where the site runs 1.45. CJK glyphs are denser and carry no
     descenders, so a Latin leading closes the line up until the block reads as
     a grey slab. Every Chinese site of any quality sets between 1.7 and 1.8. */
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  /* Sticky footer: on a tall desktop the hero does not fill the viewport, and
     without this the navy band floated with paper beneath it. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
}

h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  /* NO text-transform. The site uppercases every heading by CSS; Chinese has no
     case, so the transform does nothing to the Chinese and shouts the Latin
     fragments sharing the line. This is the largest single adaptation here. */
  text-transform: none;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--color-accent-700);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--color-accent-500);
}

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

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--color-accent-500);
  outline-offset: 2px;
}

::selection {
  background: rgba(8, 48, 165, 0.22);
}

.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  background: var(--color-accent-700);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
}

/* ——— header ——— */

.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.nav {
  max-width: 1120px;
  margin-inline: auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.nav-brand {
  display: block;
  line-height: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 15px;
}
.nav-links a {
  text-decoration: none;
}

/* ——— hero ——— */

.hero {
  padding-block: clamp(var(--space-12), 7vw, 96px) var(--space-16);
}

/* The bilingual category label, in the site's kicker idiom: tracked, navy, and
   small. Tracking stays modest — 0.08em is comfortable on Latin caps and already
   airy on Chinese, and anything more starts to look like a filing header. */
.kicker {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-accent-700);
  margin-bottom: var(--space-4);
}

.display {
  /* FAR below the homepage's clamp(62px … 240px), and that is not timidity.
     That scale is tuned for uppercase condensed Latin, which has no descenders
     and half the ink; the same size in Chinese is a wall. 60px at the top is the
     largest size at which this line still reads as a sentence. */
  font-size: clamp(32px, 5.2vw, 60px);
  line-height: 1.28;
  letter-spacing: 0.005em;
  max-width: 18em;
}
/* The one accented run, following .quote-hl on the site: colour only, never
   weight. Bolding inside a heading already set at 600 makes a blot.

   nowrap because Chinese breaks between any two characters — unpinned, "AI 智能体"
   split after 智 at narrow widths, stranding two characters on their own line. */
.hl {
  color: var(--color-accent-500);
  white-space: nowrap;
}
/* A hand-placed break, phone only. The headline is a two-clause sentence and on
   a narrow screen it should break at the comma, which is where a reader pauses
   anyway, rather than wherever the column runs out. Inert above 600px. */
.br-phone {
  display: none;
}

.lede {
  margin-top: var(--space-8);
  max-width: 40em;
  font-size: 17px;
  color: rgba(29, 31, 32, 0.82);
}
.lede p + p {
  margin-top: var(--space-3);
}
/* The audience line, quieter than the claim above it — the site's .sub-who. */
.lede-who {
  color: var(--text-muted);
  font-size: 15.5px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

/* ——— buttons: square, hairline, no shadow. The system draws edges, it does not
       float things. ——— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid var(--color-divider);
  padding: var(--space-3) var(--space-6);
  color: var(--color-text);
  background: transparent;
  transition: background 90ms cubic-bezier(0.2, 0, 0.2, 1),
    color 90ms cubic-bezier(0.2, 0, 0.2, 1),
    border-color 90ms cubic-bezier(0.2, 0, 0.2, 1);
}
.btn-primary {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: #fff;
}
.btn-ghost {
  border-color: transparent;
  color: var(--color-accent-700);
  padding-inline: var(--space-1);
}
.btn-ghost:hover {
  background: rgba(8, 48, 165, 0.1);
}

/* ——— the capability row.
       Three cells on hairlines, the design system's wireframe-cell grammar. They
       exist for two reasons: they say what the product does without spending a
       section on it, and they keep the page from reading as a 空壳网站 — a filing
       spot-check wants a real site behind the number. ——— */

.caps {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}
.cap h2 {
  font-size: 18px;
  line-height: 1.4;
}
.cap p {
  margin-top: var(--space-3);
  font-size: 15px;
  color: rgba(29, 31, 32, 0.72);
}

/* ——— footer, on the navy field.
       The page ends on the brand ground. On cronwell.ai the footer lies over the
       closing band as a translucent panel; there is no closing band here, so it
       takes the navy directly and becomes the page's base. ——— */

.site-footer {
  background: var(--color-accent-800);
  color: #fff;
}
.site-footer .container {
  padding-block: var(--space-12);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}
.footer-logo {
  flex: none;
}
.footer-org {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
}
.footer-legal {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  justify-content: space-between;
}
.legal {
  font-size: 13.5px;
  line-height: 1.7;
  /* 0.68 white on #021669 measures ~7:1 — the filing line is small, and it is
     the one line on this page a regulator reads. */
  color: rgba(255, 255, 255, 0.68);
}
.legal a {
  color: rgba(255, 255, 255, 0.68);
  /* The line may wrap; the NUMBER may not. On a 360px screen an unwrapped run
     would otherwise push the whole page sideways. */
  white-space: nowrap;
}
.legal a:hover {
  color: #fff;
}

/* ——— the 404 ——— */

.notfound {
  padding-block: calc(var(--space-16) * 2);
}
.notfound h1 {
  font-size: clamp(28px, 4vw, 44px);
}
.notfound p {
  margin-top: var(--space-4);
  color: var(--text-muted);
}
.notfound .row {
  margin-top: var(--space-8);
}

/* ——— responsive. Two breakpoints, matching the design system's own documented
       collapses at 880 and 600. Nothing else — a page this simple that needs a
       third breakpoint has a layout problem, not a viewport problem. ——— */

@media (max-width: 880px) {
  .caps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .cap {
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--color-divider);
  }
  .cap:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 600px) {
  .br-phone {
    display: inline;
  }
  .nav-links {
    gap: var(--space-4);
  }
  .row {
    margin-top: var(--space-8);
  }
  .caps {
    margin-top: var(--space-12);
  }
  .footer-legal {
    gap: var(--space-3);
    margin-top: var(--space-8);
  }
}

/* There is no transform and no animation on this page at all, so the only thing
   reduced motion has to disable is the button transition. */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}