/* ==========================================================================
   ascendai.us — LAYOUT + COMPONENTS
   --------------------------------------------------------------------------
   Everything with a class name lives here, in the same order the sections
   appear in index.html so you can scroll both together.

     1.  Layout primitives (container, section, ambient light, eyebrow)
     2.  Buttons
     3.  Masthead / navigation
     4.  Hero
     5.  Section 01 — The problem
     6.  Section 02 — What Ascend AI does
     7.  Section 03 — Continuo (flagship)
     8.  Section 04 — Practical AI
     9.  Section 05 — Beyond Continuo
     10. Section 06 — Company + A.S.C.E.N.D.
     11. Section 07 — Close
     12. Footer
     13. Scroll reveal

   ---- HOW THIS PAGE IS BUILT ----------------------------------------------
   Dark ground, layered surfaces, glass panels, and large soft warm glows
   sitting behind content. Depth comes from elevation + border + light, not
   from heavy shadows.

   Three rules that keep it from tipping into decoration:
     * Ambient glows are always behind content and always low-alpha.
     * The accent is an emphasis tool. If a section has more than two or
       three accent-coloured elements, it is shouting.
     * Motion is short, one-shot, and never blocks reading.
   ========================================================================== */


/* ==========================================================================
   1. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: var(--z-content);
}

.section {
  padding-block: var(--space-section);
  position: relative;
}

/* A hairline that fades out at both ends — a hard edge-to-edge rule looks
   heavy on a dark ground. */
.section--ruled::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glass-border) 18%,
    var(--glass-border) 82%,
    transparent
  );
}

/* Slightly lifted section ground. */
.section--raised {
  background: linear-gradient(180deg, var(--surface-1), var(--void) 70%);
}

/* ---- Ambient light ------------------------------------------------------
   Large soft radial washes. Purely atmospheric: always aria-hidden in the
   markup, always behind content, never carrying information.

   pointer-events: none matters — these are big enough to swallow clicks. */
.ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-ambient);
  filter: blur(70px);
}

.ambient--warm {
  background: radial-gradient(circle, var(--glow-warm), transparent 70%);
}

.ambient--cool {
  background: radial-gradient(circle, var(--glow-cool), transparent 70%);
}

/* ---- Section eyebrow ---------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--space-lg);
  max-width: none;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-2xl);
}

/* Rhythm for a section head that runs to a second paragraph after its lede.
   Only the Company section does today. This replaces an inline
   style="margin-top:..." attribute, which had to go so that the
   Content-Security-Policy can ship style-src without unsafe-inline. */
.section-head .lede + p {
  margin-top: var(--space-lg);
}

.lede {
  font-size: var(--step-lg);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: var(--measure);
  margin-top: var(--space-lg);
}

/* ---- Glass card ---------------------------------------------------------
   The workhorse surface. Used for capability cards, the Continuo panel, and
   the assistant. The inset highlight on the top edge is what sells "glass"
   rather than "grey box" — do not remove it. */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--glass-strong), var(--glass));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transition: border-color var(--dur-med) var(--ease),
    transform var(--dur-med) var(--ease),
    box-shadow var(--dur-med) var(--ease);
}

@supports (backdrop-filter: blur(10px)) {
  .card {
    backdrop-filter: blur(10px);
  }
}

.card--interactive:hover {
  border-color: var(--glass-border-bright);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   2. BUTTONS
   Two variants. If a third is ever needed, question the page first.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.85rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-med) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:hover {
  /* 1px. A press, not a bounce. */
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-arrow {
  transition: transform var(--dur-fast) var(--ease);
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* Primary — solid accent with a warm cast of its own light beneath it. */
.btn--primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: var(--text-on-accent);
  box-shadow: var(--shadow-accent);
}

.btn--primary:hover {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-bright));
  color: var(--text-on-accent);
  box-shadow: 0 14px 40px rgba(232, 162, 76, 0.32);
}

/* Secondary — glass. */
.btn--secondary {
  background: var(--glass);
  border-color: var(--glass-border);
  color: var(--text);
}

.btn--secondary:hover {
  background: var(--glass-strong);
  border-color: var(--glass-border-bright);
  color: var(--text);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}


/* ==========================================================================
   3. MASTHEAD / NAVIGATION
   Transparent at rest over the hero; glass bar once scrolled or once the
   mobile menu is open. Both states are driven by classes added in site.js.
   ========================================================================== */

.site-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-med) var(--ease),
    border-color var(--dur-med) var(--ease);
}

.site-nav.is-scrolled,
.site-nav.is-menu-open {
  background-color: rgba(8, 9, 12, 0.72);
  border-bottom-color: var(--glass-border);
}

@supports (backdrop-filter: blur(14px)) {
  .site-nav.is-scrolled,
  .site-nav.is-menu-open {
    background-color: rgba(8, 9, 12, 0.55);
    backdrop-filter: blur(14px) saturate(1.5);
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
}

/* ---- Logo slot ----------------------------------------------------------
   THE ONLY PLACE THE ASCEND AI LOGO IS STYLED.

   The approved identity is the charcoal A-shaped monogram with the amber
   internal form. The production vector package has NOT been delivered yet,
   so the site currently renders a clearly-marked placeholder.

   WHEN THE REAL ASSET ARRIVES: drop the file into
   assets/brand/ascend-ai/ and swap the placeholder <span> for an <img> in
   the three logo slots (see assets/brand/ascend-ai/README.md). Nothing in
   this block needs to change — .ascend-logo sizes an <img> and the
   placeholder identically, which is what makes the swap layout-safe.

   Do NOT recreate the logo here in CSS, and do not restore the previous
   ascending-steps mark. It has been removed on purpose. */
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  line-height: 1;
  flex-shrink: 0;
}

.wordmark:hover {
  color: var(--text);
}

/* Sizing contract. An <img class="ascend-logo"> and the placeholder below
   both obey these, so the final artwork lands in exactly the same box.
   Heights follow the handoff's suggested sizing. */
.ascend-logo {
  display: inline-flex;
  align-items: center;
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

.ascend-logo--footer {
  height: 36px;
}

@media (max-width: 767px) {
  .ascend-logo {
    height: 28px;
  }

  .ascend-logo--footer {
    height: 32px;
  }
}

/* ---- Masthead lockup ----------------------------------------------------
   The transparent A mark plus the company name.

   NO tile, NO plate, NO circle, NO card behind the mark — the asset carries
   its own branding. Do not add a container.

   The mark is CSS-cropped to the symbol region of the transparent lockup,
   because the standalone symbol has not been delivered and fabricating one
   is not permitted. Crop maths is documented in assistant.css.

   The "Ascend AI" text beside it is a STAND-IN, not the final wordmark. The
   delivered lockup's own wordmark cannot be used on a dark background — its
   letter counters are painted white rather than cut out, so they render as
   solid blobs. Replace this text with the horizontal lockup as soon as it
   is delivered. */
.ascend-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 32px;
}

.ascend-logo-symbol {
  position: relative;
  display: inline-block;
  /* 1.406:1 — the symbol's own aspect ratio, so it fills the box instead
     of floating in empty space. Keep width/height in this ratio. */
  width: 34px;
  height: 24px;
  flex-shrink: 0;
  overflow: hidden;
}

.ascend-logo-symbol img {
  /* Crop window: x 526, y 433, w 998, h 709 of the 2048 canvas.
     Derived from the SYMBOL bounds (x 570.6-1478.2, y 465.5-1110.9) plus
     45/32 units of padding. The wordmark begins at y 1209.4, so the crop
     bottom (1143) clears it by 66 units.

     An earlier crop ran to y 1290 and pulled the tops of the wordmark
     letters into the mark. If you see stray shapes under the A, the crop
     has drifted back into the wordmark band. */
  position: absolute;
  width: 205.31%;
  height: 288.66%;
  left: -52.7%;
  top: -61.1%;
  max-width: none;
}

.ascend-logo-name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--text);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ascend-logo { height: 28px; }
  .ascend-logo-symbol { width: 30px; height: 21px; }
  .ascend-logo-name { font-size: 0.98rem; }
}

/* ---- Links -------------------------------------------------------------- */
.nav-links {
  display: none;             /* shown at >=900px */
  align-items: center;
  gap: clamp(1.25rem, 0.5rem + 1.7vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: var(--step-sm);
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.nav-links a:hover {
  color: var(--text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.nav-actions .btn {
  padding: 0.62rem 1.1rem;
}

/* ---- Mobile disclosure --------------------------------------------------
   A plain <button> toggling a [hidden] panel. The panel sits immediately
   after the button in the DOM, so tab order is already correct and no focus
   trap is needed. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text);
}

.nav-toggle:hover {
  border-color: var(--glass-border-bright);
}

.nav-toggle-bars {
  position: relative;
  width: 16px;
  height: 10px;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 4.25px; }
.nav-toggle-bars span:nth-child(3) { top: 8.5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(4.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-4.25px) rotate(-45deg);
}

.nav-panel {
  position: fixed;
  top: var(--nav-h);
  inset-inline: 0;
  /* FULLY OPAQUE, deliberately. This panel opens directly over the hero,
     whose headline is near white at ~40px. At the 0.97 alpha this used to
     carry, the remaining 3% was still clearly legible against the dark
     ground, so the hero headline ghosted through the menu labels and two
     lines of text competed in the same place. rgba(13,15,21,1) is exactly
     --surface-1, so this is the same colour, just without the bleed.
     The glass treatment stays on the bar itself (.site-nav), which sits
     above the page rather than over a block of type. */
  background-color: var(--surface-1);
  border-bottom: 1px solid var(--glass-border);
  padding: var(--space-lg) var(--gutter) var(--space-xl);
  box-shadow: var(--shadow-lg);
}

.nav-panel[hidden] {
  display: none;
}

.nav-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}

.nav-panel a {
  display: block;
  padding: var(--space-sm) 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--glass-border);
}

.nav-panel .btn {
  width: 100%;
  margin-top: var(--space-lg);
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-panel { display: none !important; }
}

@media (max-width: 460px) {
  .nav-actions .btn { display: none; }
}


/* ==========================================================================
   4. HERO
   Two columns: the promise, and a live "system" visual. The visual is the
   reason this hero is not text floating in empty space.
   ========================================================================== */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 1rem + 6vw, 5.5rem));
  padding-bottom: clamp(3rem, 1.5rem + 6vw, 6rem);
  overflow: hidden;
}

/* Ambient wash behind the hero. Oversized and offset so the falloff never
   shows an edge. */
.hero-glow-a {
  width: 780px;
  height: 780px;
  top: -320px;
  right: -180px;
  opacity: 0.9;
}

.hero-glow-b {
  width: 620px;
  height: 620px;
  bottom: -380px;
  left: -220px;
  opacity: 0.75;
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Small capsule above the headline. Says what the company IS, in one line,
   before the promise lands. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  font-size: var(--step-xs);
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: var(--space-lg);
  max-width: none;
}

.hero-badge b {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(232, 162, 76, 0.16);
  color: var(--accent-bright);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 13ch;
}

/* The promise gets a warm gradient on its final line. One gradient, on the
   single most important phrase on the site — not scattered across the page. */
.hero h1 .accent-text {
  background: linear-gradient(100deg, var(--accent-bright), var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* If background-clip:text is unsupported the text would vanish, so restate
     a solid colour first and let the clip override it where it works. */
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .accent-text {
    color: var(--accent-bright);
    -webkit-text-fill-color: var(--accent-bright);
  }
}

.hero-lede {
  font-size: var(--step-lg);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 50ch;
  margin-top: var(--space-lg);
}

/* ---- Hero visual --------------------------------------------------------
   A glass panel containing an animated flow: fragmented inputs on the left
   resolving into one continuous, ordered stream on the right.

   Decorative — aria-hidden in the markup. It restates the copy, it does not
   add information. */
.hero-visual {
  position: relative;
  width: 100%;
}

.hero-panel {
  position: relative;
  padding: var(--space-lg);
  overflow: hidden;
}

.hero-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  max-width: none;
}

/* Three dots, the leftmost pulsing — reads as "a system that is running". */
.hero-panel-dots {
  display: inline-flex;
  gap: 5px;
}

.hero-panel-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glass-border-bright);
}

.hero-panel-dots i:first-child {
  background: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-panel-dots i:first-child {
    animation: pulse-dot 2.4s var(--ease) infinite;
  }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232, 162, 76, 0.5); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 5px rgba(232, 162, 76, 0); }
}

.hero-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Stroke roles inside the hero SVG. */
.hv-frag   { stroke: rgba(255, 255, 255, 0.17); }
.hv-link   { stroke: rgba(255, 255, 255, 0.3); }
.hv-out    { stroke: var(--accent); }
.hv-node   { fill: rgba(255, 255, 255, 0.5); }
.hv-node-a { fill: var(--accent); }
.hv-chip   { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.13); }
.hv-core   { fill: rgba(232, 162, 76, 0.1); stroke: rgba(232, 162, 76, 0.45); }
.hv-label  {
  fill: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

/* Flowing dashes along the connectors — the "data is moving" signal. */
@media (prefers-reduced-motion: no-preference) {
  .hv-flow {
    stroke-dasharray: 4 10;
    animation: flow-dash 2.4s linear infinite;
  }
  .hv-flow--b { animation-duration: 3.1s; }
  .hv-flow--c { animation-duration: 2.7s; }

  .hv-pulse {
    animation: core-pulse 3.4s var(--ease) infinite;
    transform-origin: center;
  }
}

@keyframes flow-dash {
  to { stroke-dashoffset: -28; }
}

@keyframes core-pulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}


/* ==========================================================================
   5. SECTION 01 — THE PROBLEM
   ========================================================================== */

.problem-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .problem-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.problem-card .card-heading {
  margin-bottom: var(--space-xs);
}

.problem-card p {
  font-size: var(--step-sm);
  color: var(--text-dim);
  margin: 0;
}

.problem-icon {
  width: 30px;
  height: 30px;
  margin-bottom: var(--space-md);
  color: var(--accent);
  opacity: 0.9;
}

/* Closing statement for the section. */
.statement {
  font-family: var(--font-display);
  font-size: var(--step-xl);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--track-tight);
  color: var(--text);
  max-width: 38ch;
  margin-top: var(--space-2xl);
  padding-left: var(--space-lg);
  border-left: 2px solid var(--accent);
}


/* ==========================================================================
   6. SECTION 02 — WHAT ASCEND AI DOES
   Four capabilities. The first spans two columns on wide screens so the grid
   has a focal point instead of four identical boxes.
   ========================================================================== */

.capability-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 700px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capability:first-child { grid-column: span 2; }
}

.capability {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.capability-index {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  color: var(--accent);
  letter-spacing: 0.1em;
}

.capability h3 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: var(--track-tight);
}

.capability p {
  font-size: var(--step-sm);
  color: var(--text-dim);
  margin: 0;
}


/* ==========================================================================
   7. SECTION 03 — CONTINUO (FLAGSHIP)

   One panel. Continuo is named, the problem is stated, the visitor leaves for
   continuo.ascendai.us.

   Earlier versions of this section carried a product lockup with Continuo's
   own logo, a four-step how-it-works flow, a channel chip row and an orbit
   figure. All of that was removed on purpose:

     * Continuo's logo belongs on Continuo's site. Here the product is named
       in Ascend AI's own typography so the corporate page keeps one identity.
     * The product story belongs on the product site, which stays current.
       A second copy here would drift.

   So this section is deliberately short. It is still visually prominent —
   a full-width glass panel with its own ambient glow — because prominence and
   verbosity are different things. Do not rebuild the removed pieces.
   ========================================================================== */

.continuo {
  position: relative;
  overflow: hidden;
}

.continuo-glow {
  width: 720px;
  height: 720px;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.7;
}

/* The panel. Generous padding — with this little content, whitespace is what
   makes it read as important rather than as an afterthought. */
.product-feature {
  padding: clamp(2rem, 1.2rem + 4vw, 4rem);
  text-align: center;
}

.product-feature .eyebrow {
  justify-content: center;
}

/* Continuo set in Ascend AI's display face. This is the substitute for the
   product logo, and it is intentional — see the block comment above. */
.product-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: var(--space-lg);
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--text);
}

.product-by {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

.product-feature h2 {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
}

.product-feature .lede {
  margin-inline: auto;
  max-width: 54ch;
}

.product-feature .btn-row {
  justify-content: center;
}

/* ==========================================================================
   8. SECTION 04 — PRACTICAL AI
   ========================================================================== */

.principles {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 700px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.principle {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.principle-glyph {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(232, 162, 76, 0.1);
  border: 1px solid rgba(232, 162, 76, 0.22);
  color: var(--accent);
}

.principle-glyph svg {
  width: 17px;
  height: 17px;
}

.principle .card-heading {
  margin-bottom: var(--space-2xs);
}

.principle p {
  font-size: var(--step-sm);
  color: var(--text-dim);
  margin: 0;
}


/* ==========================================================================
   9. SECTION 05 — BEYOND CONTINUO
   ========================================================================== */

.beyond {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .beyond { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
}

.beyond-note p {
  font-size: var(--step-sm);
  color: var(--text-dim);
  margin: 0;
}


/* ==========================================================================
   10. SECTION 06 — COMPANY + A.S.C.E.N.D.
   The acronym stays quiet. It is heritage, not a methodology, and the brand
   does not depend on explaining it. Do not promote it into a heading.
   ========================================================================== */

/* NO internal rules in this section. The only separators are the section's
   own top and bottom ones, consistent with the rest of the homepage.
   Structure is carried by spacing and typography instead. */
.ascend-origin {
  margin-top: var(--space-2xl);
}

/* The intro line only ("The name came from six words…").
   Scoped with :first-of-type deliberately: .ascend-payoff is also a direct
   <p> child of .ascend-origin, and an unscoped `.ascend-origin > p` outranks
   `.ascend-payoff` on specificity — it was silently overriding the payoff's
   size and colour. Do not widen this selector back. */
.ascend-origin > p:first-of-type {
  font-size: var(--step-sm);
  color: var(--text-faint);
  margin-bottom: var(--space-lg);
}

.ascend-list {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}

@media (min-width: 620px) {
  .ascend-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}

@media (min-width: 1000px) {
  .ascend-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ascend-list > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}

.ascend-letter {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  width: 1.1ch;
  flex-shrink: 0;
}

.ascend-word {
  font-size: var(--step-sm);
}

.ascend-word b {
  display: block;
  font-weight: 600;
  color: var(--text);
}

.ascend-word span {
  color: var(--text-dim);
}

/* ---- The A.S.C.E.N.D. payoff -------------------------------------------
   The closing beat of the section: the six principles are Ascend, this line
   is the AI. Set full width beneath its own divider so it reads as the
   conclusion, not a seventh acronym item — it deliberately has no letter
   column and does not sit in the grid.

   NOTE: never set this as "ASCEND + AI" or add any operator glyph. The brand
   is Ascend AI; a plus sign here would leak into how people write the name. */
/* The concluding statement. Centred beneath the six principles so the
   section resolves to a single point: A S C E N D -> AI.

   Deliberately NO border-top. This is the payoff of the A.S.C.E.N.D. section,
   not a subsection — a rule here would cut it off from the principles it
   belongs to. It is tied to them by spacing and typography instead.
   DO NOT add a divider back.

   Spacing is balanced by hand: the margin above roughly answers the section's
   own padding below, so the line sits between the principles and the bottom
   boundary rather than drifting toward either. */
.ascend-payoff {
  margin: var(--space-3xl) auto 0;
  max-width: 34rem;
  text-align: center;
  /* Matched to .ascend-word b — the principle labels (Automate, Elevate…):
     same family, same size, same weight, same colour. The sentence plays the
     label role, so it must not compete with AI for size. */
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text);
}

/* "AI" is treated as the seventh initial — same amber, same display face and
   weight as the A/S/C/E/N/D letters above, slightly larger than the sentence
   around it so it reads as the thing the six principles resolve into.

   Emphasis comes from colour, weight and scale ONLY. Never a plus sign,
   never an equals sign, never any operator glyph — the brand is Ascend AI,
   and a symbol here would leak into how people write the name. */
.ascend-payoff-ai {
  /* Identical to .ascend-letter — the A/S/C/E/N/D initials. Same family,
     same 1.4rem, same weight, same amber. Absolute rem, not em, so it stays
     locked to the initials rather than scaling with the sentence. If you
     change .ascend-letter, change this with it. */
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0;
  margin-right: 0.12em;
}


/* ==========================================================================
   11. SECTION 07 — CLOSE
   ========================================================================== */

.close-panel {
  position: relative;
  padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  text-align: center;
  overflow: hidden;
}

.close-glow {
  width: 620px;
  height: 460px;
  bottom: -300px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.85;
}

.close-panel h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.close-panel .lede {
  margin-inline: auto;
  text-align: center;
}

.close-panel .btn-row {
  justify-content: center;
}

.contact-line {
  margin: var(--space-xl) auto 0;
  font-size: var(--step-sm);
  color: var(--text-faint);
  text-align: center;
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  border-top: 1px solid var(--glass-border);
  padding-block: var(--space-2xl) var(--space-xl);
  background: var(--surface-1);
}

.footer-grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

.footer-brand p {
  margin-top: var(--space-md);
  font-size: var(--step-sm);
  color: var(--text-faint);
  max-width: 32ch;
}

.footer-col .card-heading {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-md);
}

/* Reset explicitly — these <ul>s carry no class, so the ul[class] rule in
   base.css does not reach them. */
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.footer-col a {
  font-size: var(--step-sm);
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-base {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--step-xs);
  color: var(--text-faint);
}

.footer-base p {
  margin: 0;
  max-width: none;
  color: var(--text-faint);
}

/* The provisional-identity disclosure. Small, but it should not be removed
   until a real corporate logo is approved. */
.footer-provisional {
  margin-top: var(--space-md);
  font-size: 0.7rem;
  color: var(--text-faint);
  opacity: 0.75;
  max-width: 60ch;
}


/* ==========================================================================
   13. SCROLL REVEAL

   IMPORTANT: the hidden state is applied by site.js adding .js-reveal-ready
   to <html>, NOT by this stylesheet alone. If JavaScript never runs, the
   class never lands and every [data-reveal] element stays visible. Content
   is never dependent on JS.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out-soft),
      transform var(--dur-slow) var(--ease-out-soft);
  }

  .js-reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   14. LEGAL PAGES
   Used by privacy.html. A single readable column — legal text is read
   linearly, so it gets none of the homepage's layout machinery.
   ========================================================================== */

.legal {
  padding-top: calc(var(--nav-h) + var(--space-2xl));
  padding-bottom: var(--space-section);
}

.legal-inner {
  max-width: 46rem;
}

.legal-title {
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  margin-bottom: var(--space-md);
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  color: var(--text-faint);
  margin-bottom: var(--space-xl);
}

.legal h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--glass-border);
}

.legal h3 {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.legal p {
  margin-bottom: var(--space-md);
  max-width: none;
}

/* Unclassed <ul> would keep its bullets (see base.css §1) — here we WANT
   bullets, so this only handles spacing and colour. */
.legal-list {
  margin: 0 0 var(--space-md);
  padding-left: 1.25rem;
  color: var(--text-dim);
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--step-md);
}

.legal-list li::marker {
  color: var(--accent);
}


/* ---- Footer lockup ------------------------------------------------------
   Same construction as the masthead, scaled up to sit above the company
   description. Still no tile, plate or container of any kind.

   The old .ascend-logo-art rule (the 128px full-lockup image) is gone: the
   delivered lockup cannot be shown on a dark surface until a reversed or
   transparent wordmark exists — its letter counters are painted white and
   read as blobs. See the note in index.html. */
.ascend-logo--footer {
  height: 44px;
  gap: 0.7rem;
}

.ascend-logo--footer .ascend-logo-symbol {
  width: 48px;
  height: 34px;
}

.ascend-logo--footer .ascend-logo-name {
  font-size: 1.4rem;
}

@media (max-width: 767px) {
  .ascend-logo--footer { height: 38px; }
  .ascend-logo--footer .ascend-logo-symbol { width: 42px; height: 30px; }
  .ascend-logo--footer .ascend-logo-name { font-size: 1.22rem; }
}