/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */
/* ==========================================================================
   The company page (2026-10-08, local preview only).

   The founder: Qder is the company, the waiter is a product, and the company
   gets a front page of its own, laid out the way cursor.com is laid out, in
   Qder's own style. What is taken from there is the GRAMMAR only, measured in
   the browser: a slim bar; a quiet one-sentence headline with two buttons over
   a large live product composition on a wallpaper; a boxed logo row; product
   rows of text beside a big demo on its own wallpaper; a grid of short cards;
   a dated changelog list; a company statement; highlight cards; a closing
   call; a column footer. No colour, type, copy, logo or picture of theirs.

   What is ours: the ground, the cobalt, Instrument Sans + IBM Plex Hebrew at
   500 (next.css / shell.css), and every product surface on the page, which is
   our real interface rebuilt in /mocks.css, not a picture.

   THE WALLPAPER. Theirs is a painted landscape behind each demo. Ours is the
   deep cobalt with a fine dot grid, flat, because brand.css rules out gradient
   heroes. A painted picture can replace it per panel: set --wall-img on the
   .wall (see the prompts in the NOTES of this branch).

   THE REWORK (2026-10-17). The page now speaks /waiter's language (site.css: .hero-v2, .trust, .proof,
   .steps3, .bento, .close-v2); what is left here is what only this page has: the stage under the hero,
   the product rows (their sides alternate), the changelog, the company statement and the reading cards.
   ========================================================================== */

.co main { display: block; }

/* The wallpaper every live composition sits on: the band's cobalt, with a fine dot grid. */
.wall {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background-color: var(--cobalt-deep);
  background-image:
    var(--wall-img, none),
    radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.2px),
    linear-gradient(158deg, var(--cobalt-lift) 0%, var(--cobalt) 46%, var(--cobalt-deep) 100%);
  background-size: cover, 22px 22px, cover;
  background-position: center, 0 0, center;
  isolation: isolate;
}
.wall::after {
  /* A hairline inside the edge, so the panel reads as an object on the page. */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  pointer-events: none;
}

/* ------------------------------------------------- the stage under the hero
   On the same 1440 card as /waiter's band: a 16px margin on a phone, 28px corners. */
.co-stage {
  width: min(var(--shell), calc(100% - 32px)); margin: 44px auto 0; border-radius: 28px;
  padding: clamp(20px, 4.4vw, 68px); min-height: 520px; display: grid; place-items: center;
}
.co-stage-inner {
  position: relative; width: 100%; max-width: 1040px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
}
.co-stage .win { box-shadow: 0 40px 80px -40px rgba(3, 10, 40, .65); border-color: rgba(255, 255, 255, .5); }
.co-stage .phone {
  margin-inline-start: -64px;              /* over the window's trailing edge */
  margin-bottom: -24px;
  box-shadow: 0 40px 80px -36px rgba(3, 10, 40, .75);
  position: relative; z-index: 2;
}

/* ----------------------------------------------------- product rows
   Text beside a live surface; every second row puts the surface first, so the eye zigzags down. */
.co-rows { display: grid; gap: 20px; }
.co-row {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  min-height: 480px;
}
.co-row:nth-child(even) .co-row-text { order: 2; }
.co-row-text { padding: 44px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.co-kicker { display: block; font-size: 13px; color: var(--cobalt); font-weight: 600; }
.co-row-text h3 { font-size: 26px; line-height: 34px; letter-spacing: -.01em; }
.co-row-text p { color: var(--body); font-size: 16px; line-height: 26px; }
.co-row-text p b { color: var(--ink); font-weight: 600; }
.co-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; }
.co-link { color: var(--cobalt); font-weight: 600; font-size: 15px; display: inline-flex; gap: 6px; }
.co-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.co-row .wall { border-radius: 0; display: grid; place-items: center; padding: 48px; }
.co-row .wall .phone { box-shadow: 0 40px 80px -36px rgba(3, 10, 40, .7); }
.co-row .wall .win { max-width: 640px; width: 100%; box-shadow: 0 40px 80px -40px rgba(3, 10, 40, .65); }

/* ------------------------------------------------------- the changelog */
.co-log { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; border-top: 1px solid var(--line); }
.co-log li { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.co-log time { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.co-log b { font-weight: 500; font-size: 17px; line-height: 25px; }
.co-log span { color: var(--cobalt-deep); background: var(--cobalt-wash); border-radius: 999px; padding: 2px 10px; font-size: 13px; white-space: nowrap; }

/* ------------------------------------------------- the company statement */
.co-about {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center;
}
.co-eyebrow { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--cobalt); margin-bottom: 14px; }
.co-about blockquote {
  margin: 0; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty;
}
.co-about blockquote span { color: var(--muted); }
.co-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.co-about .wall { aspect-ratio: 5 / 4; display: grid; place-items: center; border-radius: 28px; }
.co-about .wall img { width: 38%; filter: drop-shadow(0 30px 40px rgba(3, 10, 40, .45)); }

/* ---------------------------------------------------- the reading cards */
.co-high { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.co-high a {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; min-height: 180px;
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.co-high a:hover { border-color: var(--cobalt-line); transform: translateY(-2px); }
.co-high small { color: var(--muted); font-size: 13px; }
.co-high b { font-weight: 500; font-size: 17px; line-height: 1.4; }
.co-high em { font-style: normal; color: var(--cobalt); font-weight: 600; font-size: 14px; margin-top: auto; }

/* The bar's links stay on one line, the mark never shrinks for them (it was squeezed to a quarter of its
   width at 1081px), the gaps close up on a mid-size screen, and the links give way before they crowd. */
.co .nav-links a { white-space: nowrap; }
.co .nav .brand { flex: none; }
@media (max-width: 1320px) { .co .nav-links { gap: 1.05rem; } }
@media (max-width: 1140px) { .co .nav-links { display: none; } }

/* ----------------------------------------------------------- the motion */
.co-stage .msg, .co-stage .basket, .co-stage .chip-allergy { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.co-stage [data-step].is-hidden { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
  .co-stage [data-step].is-hidden { opacity: 1; transform: none; }
  .co-high a { transition: none; }
}

/* ------------------------------------------------------------ narrower */
@media (max-width: 1100px) {
  .co-row { grid-template-columns: 1fr; min-height: 0; }
  .co-row:nth-child(even) .co-row-text { order: 0; }
  .co-row .wall { padding: 32px 20px; }
  .co-high { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-about { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .co-stage-inner { grid-template-columns: 1fr; justify-items: center; }
  .co-stage .win { display: none; }          /* the phone alone, as a diner sees it */
  .co-stage .phone { margin: 0; }
  .co-stage { min-height: 0; padding: 28px 16px 36px; border-radius: 22px; }
}
@media (max-width: 680px) {
  .co-row { border-radius: 22px; }
  .co-row-text { padding: 26px 20px; }
  .co-row-text h3 { font-size: 22px; line-height: 30px; }
  .co-high { grid-template-columns: 1fr; }
  .co-log li { grid-template-columns: 1fr; gap: 4px; }
  .co-log li span { display: none; }
  .co-about .wall { aspect-ratio: 16 / 9; }
}