/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */
/* ==========================================================================
   The shell: what every Qder page is made of.

   The design that arrived in September lived inside site.css, which is the
   landing page's stylesheet — so a second page could have the same header
   only by loading the landing page's hero, band, tab strip and pricing grid
   to get it, or by copying the rules and letting the two drift. Six pages
   took a third option and kept the design they already had, which is why
   /contact still looked like the film.

   This file is the shared half: the tokens, the ground, the type, the
   announcement strip, the header, the buttons and the footer. site.css
   imports it and keeps only what belongs to the landing page. Every other
   page loads this and then its own small sheet.

   A page that wants the standard chrome writes the same markup the landing
   page writes — <nav class="nav">, <footer><div class="foot">, .btn,
   .btn-primary — and gets the same object, because it IS the same rule.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  /* Qder's own accent and neutrals, straight from public/brand.css. */
  --cobalt:       #0B3FD9;
  --cobalt-press: #0830A8;
  --cobalt-lift:  #3767ED;
  --cobalt-wash:  #EDF2FE;
  --cobalt-line:  #C7D5FB;
  --cobalt-deep:  #0A2FA6;

  --ink:    #080D1C;
  --ink-2:  #1F2942;
  --body:   #4A5570;
  /* 4.83:1 on the ground behind it, 5.09:1 on white. It was #7A849C, which
     is 3.55:1 — below the 4.5:1 this size of text has to clear. */
  --muted:  #646E88;
  --line:   #E4E9F4;
  --line-2: #F0F3FA;
  --bg:     #FFFFFF;
  --ground: #F7F9FE;   /* their page ground, in our blue-leaning neutral */
  --card:   #F9FBFF;

  --ok:   #0E7C4A;
  --warn: #A15C00;
  --crit: #C0341D;
  --ok-bg:   #E6F4F1;
  --warn-bg: #FFF4DC;
  --crit-bg: #FDE8E8;

  /* The measured geometry. */
  --shell: 1440px;
  --gutter: 64px;
  --section-y: 84px;
  --nav-h: 64px;
  --r-card: 16px;
  --r-pill: 32px;
  --r-win: 12px;

  /* Latin from Instrument Sans, Hebrew from Assistant: both are loaded with
     unicode-range, so the browser picks per character with no help from us.
     Heebo is here for the one thing it is better at — a heavy Hebrew number. */
  /* One family in two scripts: Instrument Sans carries the Latin, IBM Plex
     Sans Hebrew the Hebrew (its faces claim only the Hebrew range), so a mixed
     line — "₪1,190 לסניף" — comes out in one voice. Both are declared in
     /next.css, which this page loads first. */
  --font: "Instrument Sans", "Plex Hebrew", "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: 0; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

/* --------------------------------------------------------------- the strip */

/* 32px tall, the page's accent wash, one sentence and a way out of it. */
.strip {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  background: var(--cobalt-wash);
  color: var(--cobalt-deep);
  font-size: 13px;
  font-weight: 500;
}
.strip a { text-decoration: underline; text-underline-offset: 2px; }
.strip button {
  /* The trailing edge, whichever way the page reads. */
  position: absolute; inset-inline-end: 18px;
  background: none; border: 0; cursor: pointer;
  color: var(--cobalt-deep); font-size: 15px; line-height: 1; padding: 4px;
}
.strip-wrap { position: relative; }

/* ---------------------------------------------------------- the highlight */

/*
 * A selection should not be the browser's blue.
 *
 * The chrome — the bar, the strip, the nav — is furniture, not content, so a
 * stray tap-drag there leaves nothing behind at all: white on the ink that is
 * already there. In the body a selection still has to be visible to be
 * useful, so it gets our own wash instead of the operating system's blue.
 */
.bar ::selection, .strip ::selection, .nav ::selection,
.bar::selection, .strip::selection, .nav::selection {
  background: #FFFFFF;
  color: var(--ink);
}
::selection { background: var(--cobalt-wash); color: var(--ink); }

/* ------------------------------------------------------------------- header */

header {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: var(--ground);
}
.nav {
  max-width: var(--shell);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav .brand { display: flex; align-items: center; gap: 8px; margin-inline-end: 8px; }
.nav .brand img { height: 20px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a, .nav .quiet {
  font-size: 14px; font-weight: 500; line-height: 18px; color: var(--body);
  transition: color .15s var(--ease);
}
.nav-links a:hover, .nav .quiet:hover { color: var(--ink); }
.nav .right { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
/* The labels in the right-hand cluster stay on one line whatever language they
   are in. They are short in English and longer in Hebrew, and a label that
   wraps in one and not the other changes the header's height at the moment the
   words are swapped after the first paint — which moves the entire page. */
.nav .right a { white-space: nowrap; }

/* Their nav pill: a near-white fill on a hairline, not the accent. */
.pill-quiet {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 20px;
  background: #FAFBFF; border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 14px; font-weight: 500; color: var(--body);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.pill-quiet:hover { border-color: var(--cobalt-line); color: var(--ink); }

/*
 * `hidden` means hidden.
 *
 * `.btn { display: inline-flex }` outranks the user agent's `[hidden] {
 * display: none }`, so a button the script had hidden — step one's "Back", the
 * passkey button on a device without one — stayed on screen. This is the one
 * place `!important` is the right tool: the attribute is the instruction.
 */
[hidden] { display: none !important; }

/*
 * An anchor lands below the header, not behind it.
 *
 * The header is 64px and sticky, so without this the top of every section a
 * link points at — #how, #house, #pricing, #faq — arrived hidden underneath
 * it, and the reader saw the middle of the section they had just asked for.
 * 12px of air so the heading is not touching the bar.
 */
:target, [id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 20px;
  border-radius: var(--r-pill);
  font-family: inherit; font-size: 14px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.btn-primary { background: var(--cobalt); color: #fff; }
.btn-primary:hover { background: var(--cobalt-press); }
.btn-ghost { background: transparent; border-color: #D8DFF0; color: var(--ink); }
.btn-ghost:hover { border-color: var(--cobalt-line); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------- footer */

footer { background: #F9FAFE; border-top: 1px solid var(--line); }
.foot {
  max-width: var(--shell); margin: 0 auto; padding: 56px var(--gutter) 28px;
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px;
}
.foot .foot-h { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.foot a { display: block; font-size: 14px; color: var(--body); padding: 4px 0; }
.foot a:hover { color: var(--cobalt); }
.foot .about p { font-size: 14px; color: var(--muted); margin-top: 12px; max-width: 280px; }
/*
 * The lockup starts on the same line as the column headings beside it.
 *
 * Both columns begin at the same y, which lines up their boxes — and the
 * lockup is far bigger than 13px type, so without this its letters begin
 * 3.9px higher and the row reads ragged. Measured, not guessed: a heading's
 * cap top sits 5.8px below its box top (half-leading, plus the font's ascent
 * running above its capitals), and the lockup's sits 1.9px below its own,
 * because the top of its viewBox is the dot on the i rather than the cap
 * line. The difference is the nudge.
 */
/*
 * `width: auto` is load-bearing, not tidiness.
 *
 * Without it the used width is the lockup's intrinsic 439px, `max-width: 100%`
 * clamps the BOX to the column's 307px, the explicit height keeps it at 22,
 * and the SVG centres itself inside a box of the wrong shape - the artwork
 * ends up 100px in from the column edge while the sentence below starts at it.
 * The element aligns; the ink does not. `.nav .brand img` has always had it.
 */
.foot .about img { height: 22px; width: auto; margin-top: 4px; }
.legal {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter) 40px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 13px; color: var(--muted);
}

/* ------------------------------------------------------------------ motion */

/* Sections do not fade in. They are painted where they are and stay there —
   the founder's call, 18 September, and it takes a class, a rule, a scroll
   sweep and a <noscript> fallback out of the page with it. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------- narrower */

@media (max-width: 1100px) {
  :root { --gutter: 32px; --section-y: 64px; }
  .foot { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; --section-y: 48px; }
  /* The strip becomes two lines on a phone, so it stops pretending to be a
     32px bar and the dismiss moves out of the text's way. */
  .strip { height: auto; min-height: 32px; padding: 7px 34px; text-align: center; flex-wrap: wrap; }
  .strip button { top: 4px; inset-inline-end: 8px; }
  .btn, .pill-quiet { height: 44px; }              /* a thumb, not a cursor */
  .nav-links { display: none; }
  /*
   * The brand is the mark here, served by the <picture> in the markup. The
   * size is stated rather than inferred, so a browser that ignores a
   * <source>'s width/height cannot fall back to the lockup's 439:90 and
   * letterbox a square inside it.
   */
  .nav .brand img { width: 20px; height: 20px; }
  .foot { grid-template-columns: 1fr 1fr; }
}