/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */
/*
 * The site in the same material as the product.
 *
 * Loaded LAST in the head of the landing, the business page and the order
 * page, after their inline styles, so an equal-weight rule here wins. Two
 * rooms, keyed by html[data-theme] (public/js/theme.js stamps it before
 * paint): the white room, bone lit by cobalt; and the dark room, near-black
 * lit by the same cobalt, with sheets of smoked glass. The same tokens and
 * the same numbers as panel.css, so a restaurant that reads the site and
 * then opens its panel sees one thing.
 *
 * What is a sheet here: the fixed bar (a floating pill), every white card
 * the pages draw (the four reasons, the plans, the nodes, the comparison,
 * the order's three decisions and its receipt), the money card, the tiles,
 * the quiet buttons and inputs. The film's own frames — the phone, the
 * dark product mock-ups, the kitchen scene — stay as they are: they are
 * pictures of the product, not chrome.
 */

/* ------------------------------------------------------------ the rooms */
:root {
  --sc-canvas: #EEF2FB;
  --line: rgba(10, 19, 48, .12);
  --wash: rgba(11, 63, 217, .10);
  --lg-bg:      linear-gradient(160deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .34) 100%);
  --lg-bg-hi:   linear-gradient(160deg, rgba(255, 255, 255, .76) 0%, rgba(255, 255, 255, .58) 50%, rgba(255, 255, 255, .52) 100%);
  --lg-inner:   rgba(255, 255, 255, .25);
  --lg-haze:    rgba(255, 255, 255, .05);
  --lg-rim-a:   rgba(255, 255, 255, .92);
  --lg-rim-b:   rgba(255, 255, 255, .18);
  --lg-edge:    rgba(10, 19, 48, .10);
  --lg-depth:   rgba(10, 19, 48, .10);
  --lg-shadow:  0 14px 36px -22px rgba(10, 19, 48, .24), 0 1px 2px rgba(10, 19, 48, .04);
  --lg-blur:    24px;
  --lg-sat:     1.5;
  --lg-ring:    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,.30) 62%, rgba(11,63,217,.30) 100%);
  --lg-ring-rtl: linear-gradient(225deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,.30) 62%, rgba(11,63,217,.30) 100%);
  --g-bar:      rgba(255, 255, 255, .55);
  /* The same pill over a dark act: it inverts rather than muddying to grey. */
  --g-bar-dark: rgba(7, 11, 28, .58);
  --g-in:       rgba(255, 255, 255, .62);
  --g-ctl:      rgba(255, 255, 255, .42);
  --g-ctl-hi:   rgba(255, 255, 255, .62);
  --mesh-0: #EEF2FB;
  --mesh-1: rgba(11, 63, 217, .34);
  --mesh-2: rgba(11, 63, 217, .18);
  --mesh-3: rgba(11, 63, 217, .14);
  --mesh-4: rgba(11, 63, 217, .08);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --sc-canvas: #070B1C; --sc-surface: #101832;
  --sc-ink: rgba(255, 255, 255, .94); --sc-ink-soft: rgba(255, 255, 255, .74);
  --muted: rgba(255, 255, 255, .70);
  --line: rgba(255, 255, 255, .12);
  --wash: rgba(11, 63, 217, .20);
  --lift: color-mix(in srgb, #0B3FD9 52%, white);
  --lg-bg:      linear-gradient(160deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .045) 45%, rgba(255, 255, 255, .03) 100%);
  --lg-bg-hi:   linear-gradient(160deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, .045) 100%);
  --lg-inner:   rgba(255, 255, 255, .06);
  --lg-haze:    rgba(6, 10, 28, .12);
  --lg-rim-a:   rgba(255, 255, 255, .20);
  --lg-rim-b:   rgba(255, 255, 255, .05);
  --lg-edge:    rgba(255, 255, 255, .11);
  --lg-depth:   rgba(0, 0, 0, .55);
  --lg-shadow:  0 28px 70px -34px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .35);
  --lg-sat:     1.35;
  --lg-ring:    linear-gradient(135deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.05) 62%, rgba(11,63,217,.40) 100%);
  --lg-ring-rtl: linear-gradient(225deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.05) 62%, rgba(11,63,217,.40) 100%);
  --g-bar:      rgba(7, 11, 28, .58);
  --g-in:       rgba(4, 8, 22, .55);
  --g-ctl:      rgba(255, 255, 255, .07);
  --g-ctl-hi:   rgba(255, 255, 255, .11);
  --mesh-0: #070B1C;
  --mesh-1: rgba(11, 63, 217, .78);
  --mesh-2: rgba(11, 63, 217, .42);
  --mesh-3: rgba(11, 63, 217, .30);
  --mesh-4: rgba(11, 63, 217, .20);
}
body { background: var(--mesh-0); color: var(--sc-ink); position: relative; isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(84rem 52rem at 72% -18%, var(--mesh-1), transparent 64%),
    radial-gradient(64rem 52rem at 4% 60%,   var(--mesh-2), transparent 64%),
    radial-gradient(70rem 28rem at 54% 108%, var(--mesh-3), transparent 62%),
    radial-gradient(36rem 30rem at 96% 46%,  var(--mesh-4), transparent 62%),
    var(--mesh-0);
}
/* The film's dark hero is its own room: the still, the scrim, the words. It stays. */
.dark { background: #080D1C; }

/* ------------------------------------------------------------ the sheet */
.bar,
.four article, .node, .cmp-scroll, .plan, .tile, .money, .money .price,
.order .card, .term, .stepper button, .stepper input, .tables input, .summary,
.btn-quiet, .hero-copy .go--quiet, .dock, .partners__row, .cmp-table tr,
.contact .card, .guide .card, .faq details, .qa details {
  background: var(--lg-bg);
  border: 1px solid var(--lg-edge);
  box-shadow:
    inset 0 0 0 1px var(--lg-inner),
    inset 0 1px 0 var(--lg-rim-a),
    inset 1px 0 0 var(--lg-rim-b),
    inset 0 -1px 0 var(--lg-rim-b),
    inset 0 -8px 16px -14px var(--lg-depth),
    inset 0 0 0 100vmax var(--lg-haze),
    var(--lg-shadow);
  color: var(--sc-ink);
}
/* Blur where it buys something: the bar, the big sheets. Not on a stepper button. */
.bar, .four article, .node, .cmp-scroll, .plan, .money, .order .card, .summary, .dock, .cmp-table tr {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  transform: translate3d(0, 0, 0);
}
.four article, .node, .cmp-scroll, .plan, .money, .order .card, .summary, .cmp-table tr { background: var(--lg-bg-hi); }
/* The ring, on the sheets that carry content. */
.four article, .node, .cmp-scroll, .plan, .money, .order .card, .summary, .cmp-table tr { position: relative; border-color: transparent; }
.four article::after, .node::after, .cmp-scroll::after, .plan::after, .money::after, .order .card::after, .summary::after, .cmp-table tr::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--lg-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
html[dir="rtl"] .four article::after, html[dir="rtl"] .node::after, html[dir="rtl"] .cmp-scroll::after, html[dir="rtl"] .plan::after, html[dir="rtl"] .money::after,
html[dir="rtl"] .order .card::after, html[dir="rtl"] .summary::after, html[dir="rtl"] .cmp-table tr::after { background: var(--lg-ring-rtl); }
.four article { overflow: visible; }
.cmp-scroll { overflow: visible; }
.cmp-scroll .cmp-table { border-radius: inherit; overflow: hidden; }
.cmp-table thead th { background: rgba(255,255,255,.04); color: var(--sc-ink-soft); }
html[data-theme="dark"] .cmp-table thead th { background: rgba(255,255,255,.035); }
html[data-theme="light"] .cmp-table thead th, html:not([data-theme="dark"]) .cmp-table thead th { background: rgba(255,255,255,.35); }
.cmp-table td, .cmp-table th { border-color: var(--line); }
.cmp-table tbody tr:hover td:not(.mine) { background: rgba(11,63,217,.05); }
html[data-theme="dark"] .cmp-table tbody tr:hover td:not(.mine) { background: rgba(255,255,255,.045); }
.cmp-table .mine { background: var(--wash); color: var(--sc-ink); }
.cmp-table thead .mine { background: #0B3FD9; color: #fff; }
.tile, .stepper button, .stepper input, .tables input, .term, .btn-quiet, .hero-copy .go--quiet, .partners__row { background: var(--g-ctl); }
.stepper input, .tables input { background: var(--g-in); }
.term[aria-pressed="true"], .plan--pick { border-color: #0B3FD9; box-shadow: inset 0 1px 0 var(--lg-rim-a), 0 0 0 3px var(--wash), var(--lg-shadow); }
.term:hover, .stepper button:hover:not(:disabled), .btn-quiet:hover, .hero-copy .go--quiet:hover { background: var(--g-ctl-hi); border-color: rgba(11,63,217,.5); }
html[data-theme="dark"] .term:hover, html[data-theme="dark"] .stepper button:hover:not(:disabled), html[data-theme="dark"] .btn-quiet:hover { border-color: rgba(255,255,255,.22); }
.stepper button:hover:not(:disabled) { color: var(--sc-ink); }
.planline, .card .n, .plan__tag { background: var(--wash); color: var(--sc-ink); }
.card .n { color: color-mix(in srgb, #0B3FD9 52%, white); }
html:not([data-theme="dark"]) .card .n { color: #0B3FD9; }
.money .price { background: none; border: 0; box-shadow: none; }
.money .price b, .total b { color: #0B3FD9; }
html[data-theme="dark"] .money .price b, html[data-theme="dark"] .total b, html[data-theme="dark"] .cmp-kicker, html[data-theme="dark"] .four .n,
html[data-theme="dark"] .crumbs a:hover, html[data-theme="dark"] a:not(.btn):not(.cta):not(.go):not(.lockup) { color: color-mix(in srgb, #0B3FD9 52%, white); }
.term .save { background: rgba(14, 124, 74, .16); color: #0B6B3A; }
html[data-theme="dark"] .term .save, html[data-theme="dark"] .lines .l.free b { color: #9EE8DA; }
html[data-theme="dark"] .term .save { background: rgba(95, 209, 191, .16); }
.total { border-top-color: var(--line); }
.tile small, .crumbs, .total small, .plans__fine, .partners__note { color: var(--muted); }
.tile .bars i { background: #0B3FD9; }

/* The one filled thing is the brand, cut from the same glass. */
.btn, .bar .cta, .go:not(.go--quiet), .money a, .hero-copy .go:not(.go--quiet), .plan .btn, .dock a:not(.wait) {
  background: #0B3FD9; color: #fff; border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.2), 0 12px 30px -12px rgba(11,63,217,.7);
  border-radius: 999px;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background .18s ease;
}
.btn:hover, .bar .cta:hover, .go:not(.go--quiet):hover, .money a:hover, .dock a:not(.wait):hover { background: color-mix(in srgb, #0B3FD9 86%, white); transform: translate3d(0, -1px, 0); }
.go.wait, .dock a.wait { background: var(--g-ctl); color: var(--sc-ink); border-color: var(--lg-edge); box-shadow: none; }
.btn-quiet, .hero-copy .go--quiet, .term, .stepper button, .stepper input, .tables input { border-radius: 999px; }
.term { border-radius: 18px; }
.stepper input, .tables input { border-radius: 14px; color: var(--sc-ink); }

/* ------------------------------------------------------------ the bar */
.bar {
  top: 10px; inset-inline: 12px; padding: .5rem .55rem .5rem 1rem;
  border-radius: 999px; pointer-events: auto;
  background: var(--g-bar);
  /* A pill that floats has something under it: a close, soft shadow and a
     wider, fainter one, dark enough to read over the film's hero. */
  box-shadow:
    inset 0 1px 0 var(--lg-rim-a), inset 0 0 0 1px var(--lg-inner),
    0 2px 6px rgba(10, 19, 48, .18),
    0 14px 30px -8px rgba(10, 19, 48, .42),
    0 30px 60px -20px rgba(10, 19, 48, .35);
}
html[data-theme="dark"] .bar {
  box-shadow:
    inset 0 1px 0 var(--lg-rim-a), inset 0 0 0 1px var(--lg-inner),
    0 2px 6px rgba(0, 0, 0, .35),
    0 14px 30px -8px rgba(0, 0, 0, .6),
    0 30px 60px -20px rgba(0, 0, 0, .7);
}
html[dir="rtl"] .bar { padding: .5rem 1rem .5rem .55rem; }
/*
 * The bar reads what is under it.
 *
 * bar.js puts on-light or on-dark on the pill from the colour of the act
 * beneath, and the pill answers: white glass with ink over a light act, dark
 * glass with white ink over the film's hero and the cobalt close. The mark is
 * one file inverted by filter, so nothing is refetched mid-scroll and there
 * is no frame where the old colour is still on screen.
 */
.bar .lockup, .bar nav a, .bar.on-light .lockup, .bar.on-light nav a { color: var(--sc-ink); }
.bar.on-dark { background: var(--g-bar-dark); }
.bar.on-dark, .bar.on-dark .lockup, .bar.on-dark nav a { color: #fff; }
.bar.on-dark .lockup img { filter: brightness(0) invert(1); }
.bar nav a { opacity: .9; }
.bar .cta, .bar.on-light .cta { color: #fff; padding: .5rem 1rem; }
html[data-theme="dark"] .bar .lockup img { filter: brightness(0) invert(1); }
@media (max-width: 640px) { .bar { top: 8px; inset-inline: 8px; } }
/* On a phone the mark alone is the brand: the wordmark was colliding with the account link. */
@media (max-width: 520px) { .bar .lockup { font-size: 0; gap: 0; } .bar .lockup img { width: 28px; height: 28px; } }

/* ------------------------------------------------------------ the footer */
/* The footer owns its ground. The closing act's cobalt slab is pinned behind
   it, and a transparent footer let the slab show through half of the links
   (the founder's screenshot): it stands on the room's floor, with the slab's
   light fading into its top edge so the join reads as one surface. */
.sitefoot {
  background: linear-gradient(180deg, rgba(11, 63, 217, .14) 0%, rgba(11, 63, 217, 0) 26%), var(--mesh-0);
  color: var(--sc-ink-soft); border-top: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 -24px 60px -30px rgba(10, 19, 48, .35);
}
html[data-theme="dark"] .sitefoot { background: linear-gradient(180deg, rgba(11, 63, 217, .22) 0%, rgba(11, 63, 217, 0) 26%), var(--mesh-0); border-top-color: rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.sitefoot__mark { color: var(--sc-ink); }
.sitefoot__mark img { filter: none; }   /* the dark mark, as the page now ships it */
html[data-theme="dark"] .sitefoot__mark img { filter: brightness(0) invert(1); }
.sitefoot__brand p { color: var(--sc-ink-soft); }
.sitefoot__cols h2 { color: var(--muted); }
.sitefoot__cols a, .sitefoot__bar, .sitefoot__bar a { color: var(--sc-ink-soft); }
.sitefoot__cols a:hover, .sitefoot__cols a:focus-visible, .sitefoot__bar a:hover { color: var(--sc-ink); }
.sitefoot__bar { border-top-color: var(--line); }

/* ------------------------------------------------------------ text on glass */
.lede, .split p, .four p, .node span, .card > .why, .term span, .check span, .has li, .lines .l span, .stepper .unit, .head p { color: var(--sc-ink-soft); }
.split h3, .four h3, .node b, .money h3, .card > h2, .summary h2, .term b, .check b, .has li b, .tile b, .head h1, .sc-display { color: var(--sc-ink); }
/* Headings on the dark room are white whatever a page's inline style said; the hero's own dark slab keeps its own. */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] .sc-display,
html[data-theme="dark"] .words .sc-display, html[data-theme="dark"] .head h1 { color: var(--sc-ink); }
/* The closing slab is cobalt with white on it, on every site page; the heading rule above must not reach it. */
.biz-close, .biz-close .sc-display, .biz-close .fine, .biz-close p, .close .sc-display, .close .fine { color: #fff; }
html[data-theme="dark"] .biz-close .sc-display, html[data-theme="dark"] .close .sc-display { color: #fff; }
::selection { background: #0B3FD9; color: #fff; }
:focus-visible { outline: 2.5px solid color-mix(in srgb, #0B3FD9 60%, white); outline-offset: 3px; }

/* ------------------------------------------------------------ standing down */
@media (prefers-reduced-transparency: reduce) {
  :root, html[data-theme="dark"] { --lg-bg: var(--sc-surface); --lg-bg-hi: var(--sc-surface); --lg-haze: transparent; --lg-blur: 0px; --g-bar: var(--sc-surface); --g-bar-dark: #070B1C; }
  body::before { background: var(--mesh-0); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, html[data-theme="dark"] { --lg-bg: var(--sc-surface); --lg-bg-hi: var(--sc-surface); --lg-haze: transparent; --g-bar: var(--sc-surface); --g-bar-dark: #070B1C; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .bar .cta:hover, .go:not(.go--quiet):hover, .money a:hover { transform: none; }
}
@media print {
  body::before { display: none; }
  body { background: #fff; color: #000; }
}