/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */
/* ==========================================================================
   Qder.ai, the public floor.

   Typographic poster grammar: no photography, no footage, no generated
   imagery. Type is the imagery and scale contrast does every job a picture
   would have done. Grounds are painted per section and cut hard, because the
   page is chapters rather than one continuous place, and interpolating
   between two chapter grounds is exactly the softness chapters refuse.

   Shared by index, business, contract, login and signup. Page-specific act
   CSS stays in the page.
   ========================================================================== */

:root {
  /* Six roles, one hue. The accent carries two lightnesses because these
     pages hard-cut between a bone ground and a navy one, and no single cobalt
     clears 4.5:1 on both. Same hue, keyed to the ground. */
  --sc-canvas:     #F7F8FC;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #0A1330;
  --sc-ink-soft:   #4A5578;
  --sc-accent:     #0B3FD9;
  --sc-accent-ink: #FFFFFF;

  --bone:      #F7F8FC;
  --bone-deep: #EDF1FA;
  --navy:      #080F28;
  --line:      #D9E0EF;
  --line-2:    #E9EDF7;

  --sc-font-display: "Heebo", "Arial Hebrew", system-ui, sans-serif;
  --sc-font-text:    "Assistant", "Segoe UI", system-ui, sans-serif;
  --lockup: "Readex Pro", "Heebo", system-ui, sans-serif;

  /* Hebrew at weight 900 does not want Latin display tracking. At -0.035em
     the final letters collide with the ones before them. */
  --sc-track-tight: -0.018em;
  --sc-r-sm: 6px; --sc-r-md: 10px; --sc-r-lg: 16px;
  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bone); color: var(--sc-ink);
  font-family: var(--sc-font-text); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--sc-font-display); font-weight: 900; margin: 0;
  line-height: 1.08; letter-spacing: var(--sc-track-tight);
  text-wrap: balance; color: inherit;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--sc-accent); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--sc-accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--sc-accent); color: #fff; }
::marker { color: var(--sc-ink-soft); }

.wrap { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: var(--sc-gutter, clamp(1.25rem, 5vw, 5.5rem)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------- the poster scale
   These carry the face themselves. Most of the big type on these pages is a
   <p> or an <li>, and a size-only class leaves those in the text face at 400. */
.t-mega, .t-huge, .t-big, .t-mid {
  font-family: var(--sc-font-display); font-weight: 900;
  letter-spacing: var(--sc-track-tight); line-height: 1.08;
  text-wrap: balance;
}
.t-mega { font-size: clamp(2.6rem, min(10.5vw, 12.4vh), 8.4rem); }
.t-huge { font-size: clamp(2.2rem, 7.4vw, 6.2rem); }
.t-big  { font-size: clamp(1.7rem, 4.4vw, 3.4rem); }
.t-mid  { font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 800; line-height: 1.3; }
.lede   { font-size: clamp(1.05rem, 1.5vw, 1.32rem); color: var(--sc-ink-soft); line-height: 1.55; }
.fine   { font-size: .87rem; color: var(--sc-ink-soft); }

/* Kinetic line masks have to reserve descender room or Hebrew final letters
   (ק ן ף ך ץ) get sheared off at the baseline. */
.t-mega, .t-huge { padding-block-end: .08em; }

/* ------------------------------------------------------------------ grounds
   Redefining --sc-ink on a subtree does not re-ink text whose colour already
   resolved on body, so `color` is restated on the same rule every time. */
.ground-navy {
  background: var(--navy);
  --sc-ink: #F2F5FF; --sc-ink-soft: #97A3C8; --sc-accent: #93AEFF;
  --line: rgba(147,174,255,.22); --line-2: rgba(147,174,255,.12);
  color: var(--sc-ink);
}
.ground-bone { background: var(--bone); color: var(--sc-ink); }
.ground-deep { background: var(--bone-deep); color: var(--sc-ink); }

/* ------------------------------------------------------------------- lockup
   Readex Pro SemiBold, the face specified for the Qder.ai identity. It carries
   Hebrew as well as Latin, so unlike the previous Poppins wordmark it can sit
   beside Hebrew display type without a second fallback. The only place a third
   face appears, and it is a lockup rather than typography. */
.lockup {
  direction: ltr;
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--lockup); font-weight: 600; font-size: 1.12rem;
  letter-spacing: -.035em; text-decoration: none;
  /* Cobalt, as the logo is drawn. var(--sc-accent) rather than the literal so
     the dark sections get their lighter stop: #0B3FD9 on navy is unreadable,
     and the wordmark must not be the one thing on the page that fails. */
  color: var(--sc-accent);
}
.lockup img { width: 28px; height: auto; }

.top { display: flex; align-items: center; gap: 1rem; padding-block: 1.5rem .5rem; }
.top .lockup { order: 1; }
.top nav { order: 0; }
.top nav { margin-inline-end: auto; display: flex; gap: 1.4rem; }
.top nav a { color: var(--sc-ink-soft); font-weight: 700; font-size: .93rem; text-decoration: none; }
.top nav a:hover { color: var(--sc-ink); }

/* -------------------------------------------------------------------- close
   The poster close inverts the page: after all that volume, the smallest type
   on the site and the action as a plain underlined line of text. */
.close { display: grid; place-items: center; text-align: center; }
.close__inner { display: grid; gap: 1.1rem; justify-items: center; }
.close h2 { font-size: clamp(1.3rem, 2.6vw, 2.1rem); max-width: 22ch; }
a.act {
  font-family: var(--sc-font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--sc-accent); text-decoration: underline;
  text-underline-offset: .32em; text-decoration-thickness: 2px;
}
a.act:hover { color: #0830A8; }
.foot { margin-top: clamp(2.5rem, 6vh, 5rem); display: flex; gap: 1rem 1.6rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.foot a { color: var(--sc-ink-soft); font-weight: 600; font-size: .88rem; text-decoration: none; }
.foot a:hover { color: var(--sc-ink); }

/* ------------------------------------------------------------------- fields
   Forms are forms. They inherit the floor's type, ground and accent, but a
   contract form is not a poster and pretending otherwise would cost the
   person filling it in. */
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label, .field > .lbl {
  font-family: var(--sc-font-display); font-weight: 800; font-size: .86rem; color: var(--sc-ink);
}
.field .hint { font-size: .82rem; color: var(--sc-ink-soft); }
input, select, textarea {
  font: inherit; color: var(--sc-ink); background: var(--sc-surface);
  border: 1.5px solid var(--line); border-radius: var(--sc-r-md);
  padding: .62rem .8rem; width: 100%;
  transition: border-color 150ms var(--sc-ease-out), box-shadow 150ms var(--sc-ease-out);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 18%, transparent);
}
input::placeholder, textarea::placeholder { color: #8A94B0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--sc-accent); color: #fff;
  font-family: var(--sc-font-display); font-weight: 800; font-size: .98rem;
  padding: .7rem 1.4rem; border-radius: var(--sc-r-md); text-decoration: none;
  transition: background 150ms var(--sc-ease-out), transform 110ms var(--sc-ease-out);
}
.btn:hover { background: #0830A8; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-quiet {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--sc-ink); font-family: var(--sc-font-display); font-weight: 800; font-size: .93rem;
  padding: .62rem 1.05rem; border-radius: var(--sc-r-md);
  border: 1.5px solid var(--line); background: var(--sc-surface); text-decoration: none;
  transition: border-color 150ms var(--sc-ease-out), background 150ms var(--sc-ease-out);
}
.btn-quiet:hover { border-color: var(--sc-accent); background: #F1F5FE; color: var(--sc-ink); }

.banner { border-radius: var(--sc-r-md); padding: .7rem .9rem; font-size: .92rem; font-weight: 600; }
.banner.err { background: #FDEDED; color: #8B1D1D; }
.banner.ok  { background: #E6F4F1; color: #06584F; }
[hidden] { display: none !important; }

@media (max-width: 700px) {
  .t-mega { font-size: clamp(2.3rem, min(12vw, 10vh), 3.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Form pages: contract, login, signup.

   Same floor, no scroll acts. A person filling in a contract form is doing a
   job, and turning that job into a poster would cost them time for nothing.
   What carries over is the ground, the type ramp, the accent and the lockup.
   ========================================================================== */

.nav { border-bottom: 1px solid var(--line-2); background: var(--sc-surface); }
.nav .inner { display: flex; align-items: center; gap: 1rem; height: 64px; }
.nav .inner .logo { direction: ltr; order: 1; }
.nav .inner nav { order: 0; }
.nav .inner nav { margin-inline-end: auto; display: flex; gap: 1.3rem; }
.nav .inner nav a { color: var(--sc-ink-soft); font-weight: 700; font-size: .92rem; text-decoration: none; }
.nav .inner nav a:hover { color: var(--sc-ink); }
.logo {
  direction: ltr;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--lockup); font-weight: 600; font-size: 1.12rem;
  letter-spacing: -.035em; color: var(--sc-ink); text-decoration: none;
}
.logo img { width: 26px; height: auto; }

main.formmain { display: grid; place-items: start center; padding-block: clamp(2rem, 6vh, 4rem) clamp(4rem, 10vh, 7rem); }
.panel { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: 1.5rem; }
.panel--wide { max-width: 42rem; }
.panel h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }

.eyebrow {
  font-family: var(--sc-font-display); font-weight: 800; font-size: .82rem;
  color: var(--sc-accent); letter-spacing: .04em;
}
.alt { font-size: .93rem; color: var(--sc-ink-soft); }
.alt a { font-weight: 700; }

form { display: flex; flex-direction: column; gap: 1.1rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }

fieldset {
  border: 1px solid var(--line); border-radius: var(--sc-r-lg);
  padding: 1.1rem 1.15rem; margin: 0;
  display: flex; flex-direction: column; gap: .9rem; background: var(--sc-surface);
}
legend { font-family: var(--sc-font-display); font-weight: 800; font-size: .85rem; padding-inline: .45rem; }

.btn-lg { padding: .85rem 1.6rem; font-size: 1.04rem; }
.checks { display: flex; flex-wrap: wrap; gap: .4rem; }
.checks label {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  background: var(--sc-surface); border: 1px solid var(--line); border-radius: 100px;
  padding: .35rem .8rem; font-size: .9rem; font-weight: 600; color: var(--sc-ink-soft);
  transition: border-color 150ms var(--sc-ease-out), background 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out);
}
.checks label:hover { border-color: var(--sc-accent); }
.checks label:has(input:checked) { border-color: var(--sc-accent); background: #F1F5FE; color: #0830A8; }
.checks input { accent-color: var(--sc-accent); width: auto; }

/* Choice tiles: contract's business kind, signup's account type. One shape,
   used for both, so the two pages do not grow separate vocabularies. */
.roles, .kinds { display: grid; gap: .6rem; }
.kinds { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .kinds { grid-template-columns: 1fr; } }
.role, .kind {
  text-align: start; border: 1.5px solid var(--line); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); padding: .9rem 1rem;
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; width: 100%;
  transition: border-color 150ms var(--sc-ease-out), background 150ms var(--sc-ease-out);
}
.role:hover, .kind:hover { border-color: var(--sc-accent); }
.role[aria-pressed="true"], .kind[aria-pressed="true"] { border-color: var(--sc-accent); background: #F1F5FE; }
.role .ic { width: 21px; height: 21px; color: var(--sc-accent); flex: 0 0 auto; margin-top: .15rem; }
.role > span, .kind > span:not(.ic) { display: grid; gap: .15rem; }
.role b, .kind b { font-family: var(--sc-font-display); font-weight: 800; }
.role span span, .kind span { font-size: .87rem; color: var(--sc-ink-soft); }

/* contract only */
.steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.stepchip {
  display: flex; align-items: center; gap: .45rem;
  background: var(--bone-deep); border: 1px solid var(--line); border-radius: 100px;
  padding: .3rem .75rem; font-size: .84rem; color: var(--sc-ink-soft);
}
.stepchip b { font-family: var(--sc-font-display); font-weight: 800; color: var(--sc-accent); }
.done { text-align: center; padding: 2.5rem 1rem; display: flex; flex-direction: column; gap: 1rem; align-items: center;
        border: 1px solid var(--line); border-radius: var(--sc-r-lg); background: var(--sc-surface); }
.done .tick { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #E6F4F1; color: #06584F; display: grid; place-items: center; }
.done .tick svg { width: 22px; height: 22px; }

/* ==========================================================================
   Site footer.

   Two bands, the shape Stripe uses: a closing offer on top, then the site map
   underneath, separated by hairlines that also run vertically between the
   columns. What makes it read as that footer is not the colour, it is the
   restraint: small type, generous column gutters, links a step lighter than
   the headings, and nothing in it competing with the page above.

   Every link here points at a page or an anchor that exists. A site map is a
   promise about what the site contains, and a column padded out with plausible
   labels that 404 is worse than a short honest one.
   ========================================================================== */

.sitefoot { background: var(--bone); border-top: 1px solid var(--line); }
.sitefoot .wrap { padding-block: 0; }

/* ------------------------------------------------------------- closing band */
/* One column: the two explainer cards that used to sit beside this are gone,
   so a three-column grid would leave two empty tracks. */
.sf-cta { padding-block: clamp(2.6rem, 5vw, 4rem); }

.sf-cta h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.sf-cta p { color: var(--sc-ink-soft); margin-top: .6rem; max-width: 34ch; font-size: .96rem; }
.sf-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }


/* ----------------------------------------------------------------- site map */
.sf-map {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px dashed var(--line);
  padding-block: clamp(2.2rem, 4vw, 3.2rem);
  gap: clamp(1.4rem, 3vw, 2.5rem) 0;
}
.sf-col { padding-inline: clamp(1rem, 2.4vw, 2rem); border-inline-start: 1px dashed var(--line); min-width: 0; }
.sf-col:first-child { padding-inline-start: 0; border-inline-start: 0; }
@media (max-width: 700px) {
  .sf-col { padding-inline: 0; border-inline-start: 0; }
}

.sf-col h3 {
  font-family: var(--sc-font-display); font-weight: 800; font-size: .92rem;
  margin-bottom: .8rem;
}
.sf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sf-col a {
  color: var(--sc-ink-soft); font-size: .92rem; text-decoration: none;
  transition: color 140ms var(--sc-ease-out);
}
.sf-col a:hover { color: var(--sc-accent); text-decoration: underline; text-underline-offset: .22em; }

/* --------------------------------------------------------------- bottom bar */
.sf-base {
  border-top: 1px dashed var(--line);
  padding-block: clamp(1.2rem, 2.4vw, 1.8rem);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.sf-locale {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; color: var(--sc-ink-soft); font-weight: 600;
}
.sf-locale svg { width: 14px; height: 14px; }
.sf-copy { font-size: .88rem; color: var(--sc-ink-soft); }
.sf-base .lockup { order: -1; margin-inline-end: auto; font-size: .95rem; }
.sf-base .lockup img { width: 21px; height: auto; }

/*
 * The AI disclaimer.
 *
 * Legible, not buried: a warning styled to be overlooked is worth less than no
 * warning at all, in court and to the diner. Small but at full contrast, and
 * the allergy sentence is bold because that is the line that actually protects
 * somebody.
 */
.ai-note {
  margin-top: .7rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--sc-ink-soft, #4A5578);
  max-width: 52ch;
}
.ai-note strong { color: var(--sc-ink, #111A33); font-weight: 700; }

/* ─────────────────────────────────────────────── touch ergonomics (guest)
 *
 * poster.css is loaded by the public pages a diner sees, never by the staff
 * panels (they use panel.css), so raising these to a thumb-friendly size
 * cannot affect a dashboard.
 */
a.act, .btn, .btn-quiet { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Hover belongs to a mouse. On a touch screen it either never fires or sticks
   after a tap, leaving a button looking permanently pressed. */
@media (hover: none) {
  a.act:hover { transform: none; }
  a.act:active { transform: scale(.98); }
}

/* ------------------------------------------------------------ legal lines
   Two shapes, and both are deliberately quiet. `.consent` states what a
   button is about to commit somebody to and belongs beside that button;
   `.minifoot` is the standing footer for the pages that carry no site map.
   Neither is decoration, so neither is allowed to be so faint that it reads
   as decoration — #4A5578 on bone clears AA comfortably. */

.consent {
  margin-top: .9rem; max-width: 46ch;
  font-size: .82rem; line-height: 1.6; color: var(--sc-ink-soft);
}
.consent a { color: var(--sc-accent); text-underline-offset: .18em; }

.minifoot {
  border-top: 1px solid var(--line);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-block: 1.2rem;
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  font-size: .84rem; color: var(--sc-ink-soft);
}
.minifoot a {
  color: var(--sc-ink-soft); text-decoration: none;
  transition: color 140ms var(--sc-ease-out);
}
.minifoot a:hover { color: var(--sc-accent); text-decoration: underline; text-underline-offset: .2em; }
.minifoot .mf-copy { margin-inline-start: auto; }
@media (max-width: 560px) { .minifoot .mf-copy { margin-inline-start: 0; width: 100%; } }

/* ═══════════════════════════════════════════════════ moving between pages

   The public floor is one place, so the pages that make it up hand over to
   each other rather than cutting. Chrome and Safari do the whole thing
   themselves once both documents carry this rule; the named parts below then
   morph instead of cross-fading, and the front page ask box travels down the
   screen and becomes the composer in the table chat.

   Browsers without it get the fade in `html.leaving`, which the page triggers
   itself just before navigating. Same length, same feel, no dependency. */

@view-transition { navigation: auto; }

.top    { view-transition-name: qder-topbar; }
.askbox { view-transition-name: qder-composer; }
.said   { view-transition-name: qder-thread; }

/* `.said` is display:none until it holds something, and a name on a box that
   is not rendered is simply ignored — which is the behaviour we want: nothing
   to morph from, so the thread fades in on its own. */

html.leaving body { opacity: 0; transition: opacity 220ms var(--sc-ease-out); }

@media (prefers-reduced-motion: reduce) {
  html.leaving body { transition: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 1ms !important; }
}


/* ----------------------------------------------------------- screenshots
   Real screens from the product, framed the way the panels frame their own
   cards. Phones sit in a row that stacks on a phone; desktop screens in a
   two-column grid that collapses to one. Captions are the only copy. */
.shots { display: grid; gap: 1.4rem; margin-top: 2rem; }
.shots.phones { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; max-width: 880px; }
.shots.shotgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shots figure { margin: 0; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.shots figure.wide { grid-column: 1 / -1; }
.shots img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--sc-line, #E4E9F4); background: #fff;
  box-shadow: 0 24px 60px -28px rgba(11, 63, 217, .35), 0 4px 16px -6px rgba(8, 13, 28, .12); }
.shots.phones img { border-radius: 26px; }
.shots figcaption { font-size: .92rem; line-height: 1.5; color: var(--sc-ink-soft, #4A5570); }
.shots figcaption b { color: var(--sc-ink, #080D1C); }
@media (max-width: 760px) {
  .shots.phones { grid-template-columns: 1fr; max-width: 360px; }
  .shots.shotgrid { grid-template-columns: 1fr; }
}