/* Auto Applier — mobile-first app UI in the style of Luma (iOS), navy & electric blue palette: light by default, dark when the system is dark.
   Phone: avatar + title header with round glass buttons, plain feeds with "poster" thumbnails and status badges,
   day headings ("8 Oct / Wednesday"), inset grouped settings, floating glass pill tab bar, floating bottom sheet,
   solid pill toasts. Desktop (>=1024px): sidebar.
   No inline styles anywhere (CSP style-src 'self'): every look lives here.
   Right-to-left (Hebrew, <html dir="rtl">): layout uses logical properties (inline-start/end), so it mirrors by
   itself; the few physical bits (icons, transforms, gradients) are flipped under [dir="rtl"] near the end. */

/* Original Plex Sans / Plex Sans Hebrew typography, registered as the site's public family name.
   Only font names change; glyphs, weights, metrics and language coverage stay the same. */
@font-face {
  font-family: "Yesh Avoda Font";
  src: url("fonts/yesh-avoda-font-latin-wght.woff2") format("woff2");
  font-weight: 100 700; font-style: normal; font-display: swap;
}
/* Match Hebrew's explicit weights so both scripts form one segmented family.
   Each Latin face uses the same cached variable font at the requested weight. */
@font-face {
  font-family: "Yesh Avoda Font";
  src: url("fonts/yesh-avoda-font-latin-wght.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Yesh Avoda Font";
  src: url("fonts/yesh-avoda-font-latin-wght.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Yesh Avoda Font";
  src: url("fonts/yesh-avoda-font-latin-wght.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Yesh Avoda Font";
  src: url("fonts/yesh-avoda-font-latin-wght.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Yesh Avoda Font";
  src: url("fonts/yesh-avoda-font-hebrew-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Yesh Avoda Font";
  src: url("fonts/yesh-avoda-font-hebrew-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Yesh Avoda Font";
  src: url("fonts/yesh-avoda-font-hebrew-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Yesh Avoda Font";
  src: url("fonts/yesh-avoda-font-hebrew-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* Hebrew-only alias for --mono: keeps Latin code in the existing monospace stack. */
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  src: url("fonts/yesh-avoda-font-hebrew-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  src: url("fonts/yesh-avoda-font-hebrew-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  src: url("fonts/yesh-avoda-font-hebrew-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  src: url("fonts/yesh-avoda-font-hebrew-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* --- theme ---------------------------------------------------------------------------------------------
   Navy & electric blue: deep navy brand (--ink: primary buttons, app icon, active tab; --brand: the status card and
   landing CTA band), electric blue accent for links and focus, cool neutrals, an amber highlight. All type is
   IBM Plex Sans / Plex Sans Hebrew (headings are the same face, bolder).
   --bg page, --card grouped cards, --fill controls on a card, --fill-soft cards inside the sheet.
   Settings pages: grey page, white cards. Feed pages (home, applications, public): near-white page, grey cards. */
:root {
  color-scheme: light dark; interpolate-size: allow-keywords;
  --bg: #f4f6fa; --card: #ffffff; --fill: #eceff5; --fill-2: #e1e6ee; --fill-soft: #f4f6fa; --sheet: #ffffff;
  --hair: rgba(11, 18, 32, .08); --hair-2: rgba(11, 18, 32, .14);
  --text: #0b1220; --text-2: #5a6476; --text-3: #9aa3b2;
  --ink: #0b1f4b; --on-ink: #ffffff; --ink-hover: #142c63;
  --accent: #2463eb; --gold: #f59e0b;
  --dot: rgba(11, 18, 32, .12); --ring-line: rgba(255, 255, 255, .07);
  /* Brand surface (home status card, landing CTA band): navy with light text in both themes; --brand-hi highlights on it. */
  --brand: #0b1f4b; --on-brand: #eef3ff; --on-brand-2: rgba(238, 243, 255, .68); --brand-hi: #8cc3ff;
  --green: #12804f; --orange: #c2700c; --red: #d93f3f; --purple: #7655c2; --blue: #2463eb; --pink: #c44a8a;
  --switch-on: #2463eb;
  --field-bg: #f7f9fc; --field-line: rgba(11, 18, 32, .2);
  --badge-base: #ffffff;
  --green-bg: color-mix(in srgb, var(--green) 13%, var(--badge-base));
  --orange-bg: color-mix(in srgb, var(--orange) 14%, var(--badge-base));
  --red-bg: color-mix(in srgb, var(--red) 12%, var(--badge-base));
  --purple-bg: color-mix(in srgb, var(--purple) 13%, var(--badge-base));
  --blue-bg: color-mix(in srgb, var(--blue) 12%, var(--badge-base));
  --float: rgba(255, 255, 255, .78); --float-line: rgba(11, 18, 32, .07); --pill-on: rgba(36, 99, 235, .08);
  --shadow-float: 0 8px 30px rgba(11, 18, 32, .10), 0 1px 3px rgba(11, 18, 32, .06);
  --shadow-lg: 0 24px 60px rgba(11, 18, 32, .18);
  --toast-ok: #0b1f4b; --toast-err: #c93a3a;
  --term-text: #333b4a;
  --r-xl: 30px; --r-lg: 22px; --r: 16px; --r-sm: 12px;
  --ease: cubic-bezier(.32, .72, 0, 1); --spring: cubic-bezier(.34, 1.4, .64, 1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar: 62px; --sidebar: 256px;
  /* Plex Sans Hebrew covers only Hebrew letters, so Hebrew in monospace boxes uses it instead of a wide monospace fallback. */
  --mono: "IBM Plex Sans Hebrew", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.page-dashboard, .page-applications, body.public { --bg: #fbfcfe; --card: #f1f4f9; --fill: #e7ebf2; --fill-2: #dbe1ea; }

/* Dark: when the device is dark (unless Light was picked in Account > Appearance), or when Dark was picked. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070b14; --card: #0f1626; --fill: #1a2336; --fill-2: #243049; --fill-soft: #141c2e; --sheet: #0f1626;
    --hair: rgba(226, 232, 245, .08); --hair-2: rgba(226, 232, 245, .15);
    --text: #eef2fa; --text-2: rgba(226, 232, 245, .62); --text-3: rgba(226, 232, 245, .38);
    --ink: #8cc3ff; --on-ink: #061433; --ink-hover: #a8d2ff;
    --accent: #5b9bff; --gold: #fbbf24;
    --dot: rgba(226, 232, 245, .08); --ring-line: rgba(255, 255, 255, .06);
    --brand: #13244d; --on-brand: #eef3ff; --on-brand-2: rgba(238, 243, 255, .66); --brand-hi: #8cc3ff;
    --green: #4fd69b; --orange: #f5b142; --red: #ff6b6b; --purple: #b79cff; --blue: #5b9bff; --pink: #f082b8;
    --switch-on: #3b82f6;
    --field-bg: rgba(226, 232, 245, .04); --field-line: rgba(226, 232, 245, .22);
    --badge-base: #0f1626;
    --float: rgba(20, 28, 46, .76); --float-line: rgba(226, 232, 245, .08); --pill-on: rgba(140, 195, 255, .1);
    --shadow-float: 0 10px 34px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .06);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --toast-ok: #1d3f8a; --toast-err: #c93a3a;
    --term-text: #c9d2e3;
  }
  :root:not([data-theme="light"]) :is(.page-dashboard, .page-applications, body.public) {
    --bg: #070b14; --card: #0f1626; --fill: #1a2336; --fill-2: #243049; }
  :root:not([data-theme="light"]) :is(.role-search, .company-search) input[type=search]::-webkit-search-cancel-button { filter: invert(1); }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b14; --card: #0f1626; --fill: #1a2336; --fill-2: #243049; --fill-soft: #141c2e; --sheet: #0f1626;
  --hair: rgba(226, 232, 245, .08); --hair-2: rgba(226, 232, 245, .15);
  --text: #eef2fa; --text-2: rgba(226, 232, 245, .62); --text-3: rgba(226, 232, 245, .38);
  --ink: #8cc3ff; --on-ink: #061433; --ink-hover: #a8d2ff;
  --accent: #5b9bff; --gold: #fbbf24;
  --dot: rgba(226, 232, 245, .08); --ring-line: rgba(255, 255, 255, .06);
  --brand: #13244d; --on-brand: #eef3ff; --on-brand-2: rgba(238, 243, 255, .66); --brand-hi: #8cc3ff;
  --green: #4fd69b; --orange: #f5b142; --red: #ff6b6b; --purple: #b79cff; --blue: #5b9bff; --pink: #f082b8;
  --switch-on: #3b82f6;
  --field-bg: rgba(226, 232, 245, .04); --field-line: rgba(226, 232, 245, .22);
  --badge-base: #0f1626;
  --float: rgba(20, 28, 46, .76); --float-line: rgba(226, 232, 245, .08); --pill-on: rgba(140, 195, 255, .1);
  --shadow-float: 0 10px 34px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .06);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  --toast-ok: #1d3f8a; --toast-err: #c93a3a;
  --term-text: #c9d2e3;
}
:root[data-theme="dark"] :is(.page-dashboard, .page-applications, body.public) {
  --bg: #070b14; --card: #0f1626; --fill: #1a2336; --fill-2: #243049; }
:root[data-theme="dark"] :is(.role-search, .company-search) input[type=search]::-webkit-search-cancel-button { filter: invert(1); }
:root[data-theme="light"] { color-scheme: light; }

/* --- base --------------------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
/* Page scrollbar (mouse devices): accent thumb on the page colour. Firefox: scrollbar-color; Chrome / Safari:
   the ::-webkit-scrollbar parts (Chrome ignores them once scrollbar-color is set, hence the @supports). */
@media (hover: hover) and (pointer: fine) {
  @supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--accent) var(--bg); } }
  html::-webkit-scrollbar { width: 12px; background: var(--bg); }
  html::-webkit-scrollbar-thumb { border: 3px solid var(--bg); border-radius: 999px; background: var(--accent); }
  html::-webkit-scrollbar-thumb:hover { background: var(--ink); }
}
/* Scroll areas inside the page (tables, logs, mail, lists; mouse devices): a thin muted bar, no track, no arrows.
   The sidebar's shows only while the pointer is over it; a fade at its end says more is below (see .side-nav).
   Never <body>: Chrome draws the page scrollbar with <body>'s style before <html>'s (it turned the page bar grey). */
@media (hover: hover) and (pointer: fine) {
  :root { --thumb: color-mix(in srgb, var(--text-3) 55%, transparent); }
  .side-nav:not(:hover) { --thumb: transparent; }
  @supports not selector(::-webkit-scrollbar) { :not(html, body) { scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; } }
  :not(html, body)::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
  :not(html, body)::-webkit-scrollbar-button { display: none; }
  :not(html, body)::-webkit-scrollbar-corner { background: transparent; }
  :not(html, body)::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--thumb); }
}
/* Sidebar end fade: driven by its own scroll, so it is there only while it can scroll and lifts at the end. */
@property --side-fade { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes side-fade { from, 85% { --side-fade: 1; } to { --side-fade: 0; } }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 16px/1.45 "Yesh Avoda Font", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
body.sheet-open { overflow: hidden; }
/* Background texture: a fine dot grid across the top of every page, fading out as the page goes down. */
body { position: relative; isolation: isolate; }
body::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 560px; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(#000 0, rgba(0, 0, 0, .5) 45%, transparent 100%);
  mask-image: linear-gradient(#000 0, rgba(0, 0, 0, .5) 45%, transparent 100%); }
a { color: var(--accent); text-decoration: none; }
/* Links inside text look like links (the plain `a` above is for rows, tabs and buttons): accent, underlined. */
.field-help a, .group-foot a, .ai-note a, .auth-fine a, .sheet-foot a, .legal a {
  color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; }
@media (hover: hover) { .field-help a:hover, .group-foot a:hover, .ai-note a:hover, .auth-fine a:hover, .sheet-foot a:hover,
  .legal a:hover { text-decoration-thickness: 2px; } }
p { margin: 0 0 10px; }
h1, h2, h3 { margin: 0; letter-spacing: -.025em; }
/* Display type: the text face, bold and a little tighter (one family across the app). */
.serif, .top h1, .section-title.big h2, .brand, .wordmark, .setup-head h2, .empty b, .day,
  .auth-hero h1, .land-copy h1, .land-h2, .land-cta h2, .legal h1, .legal h2, .mock-top b, .mock-title {
  font-weight: 700; letter-spacing: -.02em; }
/* Big numbers: tabular, tight. */
.hero-num, .tile b, .mock-hero b { font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
code { font-family: var(--mono); font-size: .86em; background: var(--fill); border-radius: 6px; padding: 1px 5px;
  color: var(--text); letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
.ic-color { stroke: none; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }
/* "Skip to content": clipped to nothing until reached with Tab, then shown at the top corner. Clipped, not moved
   off screen: phones showed a pushed-up link when the page bounced at the top. */
.skip-link { position: fixed; z-index: 100; inset-block-start: calc(8px + var(--safe-t)); inset-inline-start: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; }
.skip-link:not(:focus-visible) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; opacity: 0; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline-form { margin: 0; }

/* --- layout ------------------------------------------------------------------------------------------- */
.content { max-width: 640px; margin: 0 auto;
  padding: calc(var(--safe-t) + 14px) 16px calc(var(--tabbar) + var(--safe-b) + 44px); }
/* Page changes: browsers with cross-document view transitions slide the new page in under a fixed tab bar / sidebar
   and move the active-tab pill to its new place; others fade the content in. */
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes leave { to { opacity: 0; } }
@supports not (view-transition-name: none) { .content { animation: enter .4s var(--ease) both; } }
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .38s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: leave .16s ease-out both; }
::view-transition-new(root) { animation: enter .38s var(--ease) both; }
.tabbar { view-transition-name: tabbar; }
.tab-pill { view-transition-name: tab-pill; }
.sidebar { view-transition-name: sidebar; }
.side-pill { view-transition-name: side-pill; }
/* While it slides, the pill's snapshot is drawn above the whole sidebar's: blended in, the labels stay on top of it
   (light: the darker colour wins, dark: the lighter one), as on the page itself. */
::view-transition-group(side-pill) { mix-blend-mode: darken; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])::view-transition-group(side-pill) { mix-blend-mode: lighten; } }
:root[data-theme="dark"]::view-transition-group(side-pill) { mix-blend-mode: lighten; }
.toasts { view-transition-name: toasts; }
::view-transition-old(toasts) { display: none; }
::view-transition-new(toasts) { animation: none; }

/* Page header (Luma): avatar, title, round glass buttons at the end. */
.top { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; min-height: 44px; }
.top h1 { flex: 1; min-width: 0; font-size: 28px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.lead { color: var(--text-2); font-size: 15px; margin: -8px 2px 20px; line-height: 1.45; }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--fill-2); color: var(--text); font-weight: 600; font-size: 16px; object-fit: cover; }
.avatar.lg { width: 52px; height: 52px; font-size: 20px; }
.avatar.xl { width: 84px; height: 84px; font-size: 34px; }
.avatar-btn { flex: none; border-radius: 50%; display: inline-flex; transition: transform .25s var(--spring); }
.avatar-btn:active { transform: scale(.92); }
/* Plan tag next to the account's name (sidebar, More sheet) and on the phone header avatar. */
.me-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.me-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-tag { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 18px; padding: 0 6px;
  border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap;
  background: var(--fill-2); color: var(--text-2); }
.plan-tag .ic { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.plan-tag.plan-pro { background: linear-gradient(135deg, #fcd34d, var(--gold)); color: #3b2300; }
.plan-tag.plan-trial { background: color-mix(in srgb, var(--accent) 14%, var(--badge-base)); color: var(--accent); }
.avatar-btn { position: relative; }
.plan-tag.on-avatar { position: absolute; inset-inline: 0; bottom: -5px; width: fit-content; margin: 0 auto;
  height: 15px; padding: 0 4px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--bg); }
.plan-tag.on-avatar .ic { width: 9px; height: 9px; }
.round-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--float); color: var(--text); box-shadow: var(--shadow-float); border: 1px solid var(--float-line);
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  transition: transform .25s var(--spring); }
.round-btn:active { transform: scale(.9); }
.round-btn .ic { width: 20px; height: 20px; }

/* Section titles: settings pages use a quiet grey label ("Basic Info"); feeds use a bold title with a chevron. */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 4px 8px; }
.section-title h2 { font-size: 15px; font-weight: 500; color: var(--text-2); letter-spacing: -.01em; }
.section-title.big { margin: 30px 0 6px; }
.section-title.big h2 { font-size: 23px; color: var(--text); }
.section-title a { font-size: 15px; font-weight: 500; }
.section-title .faint { font-size: 14px; }
.title-link { display: inline-flex; align-items: center; gap: 2px; color: var(--text); }
.section-title a.title-link { font-size: inherit; font-weight: inherit; }
.title-link .chev { width: 20px; height: 20px; stroke-width: 2.4; color: var(--text-3); transition: transform .2s var(--ease); }
@media (hover: hover) { .title-link:hover .chev { transform: translateX(2px); } }
.group-foot { color: var(--text-3); font-size: 13px; margin: 8px 16px 0; line-height: 1.45; }

/* --- floating tab bar (phone) --------------------------------------------------------------------------- */
.tabbar { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--safe-b) + 12px); transform: translateX(-50%);
  width: min(calc(100% - 32px), 420px); height: var(--tabbar); padding: 5px; border-radius: 999px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
  background: var(--float); border: 1px solid var(--float-line); box-shadow: var(--shadow-float);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 999px; color: var(--text-3); font-size: 10.5px; font-weight: 600; letter-spacing: 0; isolation: isolate;
  transition: color .25s, transform .25s var(--spring); }
.tabbar a .ic { width: 22px; height: 22px; }
.tabbar a.on { color: var(--ink); }
.tabbar a.on .ic { stroke-width: 2.1; }
.tabbar a:active { transform: scale(.9); transition-duration: .08s; }
.nav-pill { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.tab-pill { background: var(--pill-on); }
.live-dot { position: absolute; top: 8px; inset-inline-end: calc(50% - 16px); width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 2px var(--card); animation: ping 1.6s infinite; }
/* unread replies on the Inbox tab */
.count-dot { position: absolute; top: 3px; inset-inline-start: calc(50% + 4px); min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; font-style: normal;
  text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--card); }

/* --- floating bottom sheet ("More") ------------------------------------------------------------------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .32); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease); }
.sheet { position: fixed; z-index: 51; left: 8px; right: 8px; bottom: calc(var(--safe-b) + 8px); margin: 0 auto; max-width: 520px;
  max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 14px 18px;
  background: var(--sheet); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  transform: translateY(calc(100% + 24px)); visibility: hidden;
  transition: transform .38s var(--ease), visibility 0s linear .38s; will-change: transform; }
.sheet.open { transform: none; visibility: visible; transition: transform .48s var(--ease); }
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.grabber { position: relative; width: 36px; height: 5px; border-radius: 999px; background: var(--hair-2); margin: 2px auto 14px;
  cursor: grab; touch-action: none; }
.grabber::before { content: ""; position: absolute; inset: -14px -48px; }  /* a finger-sized place to grab */
/* Dragged down (app.js): the sheet follows the finger and the backdrop fades with it; let go, it animates on. */
.sheet.open.dragging, .sheet-backdrop.dragging { transition: none; }
.sheet .group { margin-bottom: 12px; background: var(--fill-soft); }
.sheet-me { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r);
  background: var(--fill-soft); color: var(--text); }
.sheet-me > span:not(.avatar) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sheet-me b { font-size: 17px; font-weight: 600; }
.sheet-me small { color: var(--text-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-foot { text-align: center; color: var(--text-3); font-size: 13px; margin: 6px 0 0; }

/* --- sidebar (desktop) ---------------------------------------------------------------------------------- */
.sidebar { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 19px; }
.app-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: #0b1f4b; color: #ffffff; --mark-tip: #7cb7ff; box-shadow: inset 0 0 0 1px var(--hair); }
/* The app icon is always the real one: navy tile, "יש" white, "!" light blue (filled shapes from the sprite). */
.app-icon .ic { width: 64%; height: 64%; fill: currentColor; stroke: none; }
.mark-tip { fill: var(--mark-tip); }

@media (min-width: 1024px) {
  .tabbar, .sheet, .sheet-backdrop { display: none; }
  .sidebar { display: flex; flex-direction: column; position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar);
    padding: 22px 14px 16px; background: var(--bg); border-inline-end: 1px solid var(--hair); z-index: 30; }
  .sidebar .brand { padding: 0 8px; margin-bottom: 26px; }
  .side-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), rgb(0 0 0 / calc(1 - var(--side-fade)))); }
  @supports (animation-timeline: scroll()) { .side-nav { animation: side-fade linear both; animation-timeline: scroll(self); } }
  .side-nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; flex: none;
    border-radius: var(--r-sm); color: var(--text-2); font-size: 15px; font-weight: 500; isolation: isolate;
    transition: background .15s, color .15s; }
  .side-nav a:hover { background: var(--pill-on); color: var(--text); }
  .side-nav a.on { color: var(--text); font-weight: 600; }
  .side-nav a.on .ic { color: var(--ink); }
  .side-nav a.on:hover { background: none; }
  .side-pill { background: var(--pill-on); }
  .side-nav .live-dot { position: static; margin-inline-start: auto; box-shadow: none; }
  .side-nav .count-dot { position: static; margin-inline-start: auto; box-shadow: none; }
  .side-label { margin: 22px 12px 6px; font-size: 13px; font-weight: 500; color: var(--text-3); }
  .side-nav button.side-link { justify-content: flex-start; gap: 12px; height: 42px; min-height: 0; padding: 0 12px; flex: none;
    border-radius: var(--r-sm); background: none; color: var(--text-2); font-size: 15px; font-weight: 500;
    letter-spacing: normal; transition: background .15s, color .15s; }
  .side-nav button.side-link:hover { background: var(--pill-on); color: var(--text); }
  .side-nav button.side-link:active { transform: none; }
  .side-nav button.side-link .ic { width: 20px; height: 20px; }
  .side-me { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r); color: var(--text);
    background: var(--card); }
  .side-me:hover, .side-me.on { background: var(--fill); }
  .side-me .avatar { width: 36px; height: 36px; font-size: 15px; }
  .side-me-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .side-me-text b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-me-text small { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content { max-width: none; margin: 0; margin-inline-start: var(--sidebar); padding: 40px 56px 72px; }
  .page { max-width: 1080px; margin: 0 auto; }
  .page-profile .page, .page-keys .page, .page-search .page, .page-account .page, .page-logs .page,
  .page-applications .page { max-width: 720px; }
  .toasts { left: calc(50% + var(--sidebar) / 2); top: 20px; }
  .top { margin-top: 0; }
  .top h1 { font-size: 34px; }
  .top .avatar-btn { display: none; }
}

/* --- grouped lists -------------------------------------------------------------------------------------- */
.group { background: var(--card); border-radius: var(--r); overflow: hidden; margin: 0; }
.group > :is(.cell, .field, .toggle, .step) { position: relative; }
.group > :is(.cell, .field, .toggle, .step) ~ :is(.cell, .field, .toggle, .step)::before { content: ""; position: absolute;
  top: 0; inset-inline: 16px 0; height: 1px; background: var(--hair); }
.group > .cell:has(.cell-icon) ~ .cell::before, .group > .cell:has(.logo) ~ .cell::before { inset-inline-start: 60px; }
.cell { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 11px 16px; color: var(--text); width: 100%;
  text-align: start; background: none; border: 0; border-radius: 0; font: inherit; font-weight: 400; letter-spacing: inherit; }
a.cell:active, button.cell:active { background: var(--pill-on); transform: none; }
@media (hover: hover) { a.cell:hover, button.cell:hover { background: var(--pill-on); } }
.cell-main { flex: 1; min-width: 0; font-size: 16px; font-weight: 400; }
.cell-main small { display: block; color: var(--text-2); font-size: 13.5px; font-weight: 400; margin-top: 1px; }
.cell-value { color: var(--text-2); font-size: 15px; white-space: nowrap; }
.chev { width: 16px; height: 16px; color: var(--text-3); stroke-width: 2.2; }
/* Row icons are quiet: grey tile, dark glyph (red only for destructive rows). */
.cell-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--fill); color: var(--ink); }
.cell-icon .ic { width: 17px; height: 17px; stroke-width: 2.1; }
.cell-btn { cursor: pointer; justify-content: flex-start; white-space: normal; }
.danger-text, .danger-text .cell-main { color: var(--red); }
.cell-icon.tint-red { background: var(--red-bg); color: var(--red); }
.me-group .cell { padding-block: 14px; }
.me-group .cell-main { font-size: 17px; font-weight: 600; }

/* --- form fields (labels inside grouped cards) -------------------------------------------------------- */
/* Each input is a visible box (border, light fill) so it reads as a place to type, empty or not; focus turns the border
   accent with a soft ring. */
.field { display: block; padding: 12px 16px; }
.field > label, .field-label { display: block; color: var(--text-2); font-size: 13px; font-weight: 500; margin: 0 0 6px;
  letter-spacing: -.005em; transition: color .15s; }
.field:focus-within > label { color: var(--accent); }
.field input:not([type=checkbox]):not([type=file]), .field textarea, .field select {
  display: block; width: 100%; padding: 10px 12px; margin: 0; border: 1px solid var(--field-line); outline: 0;
  background-color: var(--field-bg); color: var(--text); font: inherit; font-size: 16px; line-height: 1.4;
  letter-spacing: -.015em; min-height: 46px; border-radius: 12px; -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s; }
@media (hover: hover) {
  .field :is(input:not([type=checkbox]):not([type=file]), textarea, select):hover { border-color: var(--text-3); } }
.field :is(input:not([type=checkbox]):not([type=file]), textarea, select):focus {
  border-color: var(--accent); background-color: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field textarea { min-height: 110px; resize: vertical; }
/* Read-only values (the app mail address) stay plain text: no box, so they don't invite typing */
.field :is(input, textarea):is([readonly], :disabled) { border-color: transparent; background-color: transparent;
  padding-inline: 0; min-height: 26px; padding-block: 0; box-shadow: none; }
.field textarea.tall { min-height: 220px; }
.field textarea.mono { font-family: var(--mono); font-size: 14.5px; letter-spacing: 0; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field select { cursor: pointer; padding-inline-end: 36px; background-repeat: no-repeat; background-size: 14px;
  background-position: right 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); }
[dir="rtl"] .field select { background-position: left 12px center; }
.field select option { background: var(--card); color: var(--text); }
.field-help { color: var(--text-3); font-size: 12.5px; margin: 6px 0 0; line-height: 1.4; }
.field-help a { white-space: nowrap; }
/* Inline field: label at the start, short input at the end (numbers) */
.field.inline { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.field.inline > label { flex: 1; color: var(--text); font-size: 16px; font-weight: 400; margin: 0; }
.field.inline:focus-within > label { color: var(--text); }
.field.inline input:not([type=checkbox]) { width: 84px; text-align: end; font-variant-numeric: tabular-nums;
  border-radius: 10px; padding: 6px 10px; min-height: 40px; }
.field.inline .unit { color: var(--text-2); font-size: 15px; width: 34px; }
/* File picker: the native input covers the whole row (so a click anywhere opens it) but is invisible; the button and the
   file name under it are in the page's language. */
.file-pick { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; margin-top: 4px; }
.file-pick input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-pick .btn { flex: none; pointer-events: none; }
.file-pick:focus-within .btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 15px;
  unicode-bidi: plaintext; }
.file-name.is-set { color: var(--text); }
@media (hover: hover) { .file-pick:hover .btn { background: var(--fill-2); } }
/* Upload progress under the button (app.js, form[data-upload]) */
.upload-progress { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border: 0; border-radius: 2px;
  background: var(--fill); color: var(--accent); overflow: hidden; }
.upload-progress::-webkit-progress-bar { background: var(--fill); }
.upload-progress::-webkit-progress-value { background: var(--accent); transition: width .2s; }
.upload-progress::-moz-progress-bar { background: var(--accent); }

/* Choice row (one of several): <label class="cell choice">…<input type=radio><span class="choice-mark">✓</span></label> */
.choice { cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice-mark { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--hair-2); color: transparent; transition: background .15s, border-color .15s, color .15s; }
.choice-mark .ic { width: 14px; height: 14px; stroke-width: 3; }
.choice input:checked + .choice-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .choice:hover { background: var(--pill-on); } }

/* Toggle row: <label class="toggle"><span class="cell-main">…</span><input type=checkbox><span class="switch"></span></label> */
.toggle { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 11px 16px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch { position: relative; width: 51px; height: 31px; flex: none; border-radius: 999px; background: var(--fill-2);
  transition: background .25s var(--ease); }
.switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform .3s var(--ease); }
input:checked + .switch { background: var(--switch-on); }
input:checked + .switch::after { transform: translateX(20px); }
input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }
input:disabled + .switch { opacity: .4; }

/* Chip checkboxes (Luma category chips) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 14px; }
.chip-check { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--hair-2); color: var(--text); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .15s; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip-check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- buttons -------------------------------------------------------------------------------------------- */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--fill); color: var(--text); font: inherit; font-size: 16px;
  font-weight: 600; letter-spacing: -.015em; cursor: pointer; white-space: nowrap; touch-action: manipulation;
  transition: transform .15s var(--ease), background .15s, opacity .15s; }
button:active, .btn:active { transform: scale(.97); }
@media (hover: hover) { button:hover, .btn:hover { background: var(--fill-2); } }
.btn.primary, button.primary { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) { .btn.primary:hover, button.primary:hover { background: var(--ink-hover); } }
.btn.accent, button.accent { background: var(--accent); color: #fff; }
@media (hover: hover) { .btn.accent:hover, button.accent:hover { background: var(--accent); filter: brightness(1.08); } }
.btn.danger, button.danger { background: var(--red-bg); color: var(--red); }
@media (hover: hover) { button.danger:hover { background: color-mix(in srgb, var(--red) 20%, var(--badge-base)); } }
.btn.ghost, button.ghost { background: transparent; color: var(--text-2); }
.btn.block, button.block { width: 100%; }
.btn.sm, button.sm { min-height: 34px; padding: 0 14px; font-size: 14px; }
button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
button .ic, .btn .ic { width: 18px; height: 18px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* Sticky bottom action (save) that floats above the tab bar */
.dock { position: sticky; z-index: 20; bottom: calc(var(--tabbar) + var(--safe-b) + 24px); margin-top: 26px; }
.dock button { width: 100%; box-shadow: var(--shadow-lg); }
@media (min-width: 1024px) { .dock { bottom: 24px; } }

/* --- status (text with a dot), pills and badges (Luma "Going" / "Waitlisted" tags) ------------------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--text-2); text-transform: capitalize; letter-spacing: -.005em; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill, .badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px;
  background: var(--fill); color: var(--text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  text-transform: capitalize; letter-spacing: -.005em; }
:is(.status, .pill, .badge, .cat-ic):is(.s-applied, .s-succeeded, .s-running, .s-active, .s-saved) { color: var(--green); }
:is(.status, .pill, .badge, .cat-ic):is(.s-manual, .s-captcha, .s-queued, .s-pending) { color: var(--orange); }
:is(.status, .pill, .badge, .cat-ic):is(.s-failed, .s-disabled, .s-cancelled) { color: var(--red); }
:is(.status, .pill, .badge, .cat-ic).s-admin { color: var(--purple); }
:is(.pill, .badge, .cat-ic):is(.s-applied, .s-succeeded, .s-running, .s-active, .s-saved) { background: var(--green-bg); }
:is(.pill, .badge, .cat-ic):is(.s-manual, .s-captcha, .s-queued, .s-pending) { background: var(--orange-bg); }
:is(.pill, .badge, .cat-ic):is(.s-failed, .s-disabled, .s-cancelled) { background: var(--red-bg); }
:is(.pill, .badge, .cat-ic).s-admin { background: var(--purple-bg); }

/* --- toasts (solid pills, top centre) --------------------------------------------------------------- */
.toasts { position: fixed; z-index: 60; top: calc(var(--safe-t) + 12px); left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 24px), 440px); display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 18px 10px 14px; border-radius: 22px;
  pointer-events: auto; background: var(--toast-ok); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  font-size: 15px; font-weight: 600; line-height: 1.35; animation: toast-in .5s var(--ease) both; }
.toast .ic { color: #fff; stroke-width: 2.6; width: 18px; height: 18px; }
.toast.error { background: var(--toast-err); }
.toast.out { animation: toast-out .35s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-24px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-24px) scale(.96); } }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); font-size: 14.5px;
  background: var(--red-bg); color: var(--text); margin: 0; }
.note .ic { color: var(--red); margin-top: 1px; }
.note.info { background: color-mix(in srgb, var(--accent) 11%, var(--badge-base)); }
.note.info .ic { color: var(--accent); }

/* --- home ----------------------------------------------------------------------------------------------- */
.dash { display: flex; flex-direction: column; }
.dash-col { display: contents; }
.o-hero { order: 1; } .o-actions { order: 2; } .o-setup { order: 3; } .o-tiles { order: 4; } .o-recent { order: 5; }
.o-auto { order: 6; } .o-live { order: 7; } .o-cycles { order: 8; }

/* Status card: badge, the big number, a meta row (like a Luma event card) */
.hero { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 18px 18px 16px; isolation: isolate;
  background: var(--brand); color: var(--on-brand); }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.hero-link { display: inline-flex; align-items: center; gap: 2px; color: var(--on-brand-2); font-size: 14.5px; font-weight: 500; }
.hero-link .chev { width: 16px; height: 16px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 8px;
  background: var(--fill); color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.state-running { background: var(--green-bg); color: var(--green); }
.chip.state-running .dot { animation: ping 1.6s infinite; }
.chip.state-queued { background: var(--orange-bg); color: var(--orange); }
.chip.state-waiting { background: var(--purple-bg); color: var(--purple); }
.chip.state-off { color: var(--text-2); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.hero-num { font-size: 64px; line-height: 1; }
.hero-label { color: var(--on-brand-2); font-size: 15px; font-weight: 500; margin: 6px 0 0; }
.hero-top { margin-bottom: 10px; }
.hero-body { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hero-text { min-width: 0; }
/* What the bot is doing, in a sentence (Wolt's "That's it, we've got your order!" line) */
.hero-live { display: flex; flex-direction: column; gap: 3px; margin: 14px 0 0; padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--on-brand) 14%, transparent); }
.hero-live b { font-size: 16.5px; font-weight: 700; letter-spacing: -.012em; }
.hero-live span { color: var(--on-brand-2); font-size: 14px; line-height: 1.4; }
.hero-live.swap > * { animation: rise .45s var(--ease) backwards; }
.hero-live.swap > span { animation-delay: 60ms; }

/* The dial (Wolt order tracking): a ring of fine ticks; a mask shows the lit part. Gold while it waits for the next
   cycle (fills as the time passes), light blue while a cycle runs (an arc sweeps while it searches, then fills as it
   applies), a check when the cycle is done. app.js renderLive / tickClock keep it current. */
.dial { position: relative; flex: none; display: grid; place-items: center; width: 128px; height: 128px; }
.dial > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.dial-ticks { fill: none; stroke-width: 11; stroke-dasharray: 1.15 1.85; }
.dial-track { stroke: color-mix(in srgb, var(--on-brand) 15%, transparent); }
.dial-fill { stroke: var(--brand-hi); transition: stroke .5s; }
.dial.t-wait .dial-fill { stroke: var(--gold); animation: breathe 3.2s ease-in-out infinite; }
.dial-arc { fill: none; stroke: #fff; stroke-width: 18; transform-box: view-box; transform-origin: 60px 60px;
  transition: stroke-dashoffset .9s var(--ease); }
.dial:is(.k-time, .k-fill) .dial-arc { animation: dial-in 1.3s .2s var(--ease) backwards; }
.dial.k-spin .dial-arc { animation: dial-sweep 1.5s linear infinite; }
.dial.t-wait.k-spin .dial-arc { animation-duration: 2.6s; }
.dial.k-done .dial-arc { stroke-dashoffset: 0 !important; }
.dial.k-off .dial-fill { display: none; }
@keyframes dial-in { from { stroke-dashoffset: 100; } }
@keyframes dial-sweep { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: .72; } }
.dial-center { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 86px;
  text-align: center; }
.dial-center b { display: inline-block; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; }
.dial-center b.bump { animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }
.dial-center small { margin-top: 5px; color: var(--on-brand-2); font-size: 11px; font-weight: 500; line-height: 1.2; }
.dial-center small:empty { display: none; }
.dial.k-off .dial-center b { font-size: 19px; color: var(--on-brand-2); letter-spacing: 0; }
.dial-check { display: none; }
.dial.k-done :is(.dial-center b, .dial-center small) { display: none; }
.dial.k-done .dial-check { display: grid; color: var(--brand-hi); animation: bump .55s cubic-bezier(.3, 1.6, .5, 1); }
.dial-check .ic { width: 46px; height: 46px; stroke-width: 2.6; }

.hero .meta, .hero .meta .ic { color: var(--on-brand-2); }
.hero .chip { background: color-mix(in srgb, var(--on-brand) 12%, transparent); color: var(--on-brand); }
.hero .chip.state-running { color: var(--brand-hi); }
.hero .chip.state-queued, .hero .chip.state-waiting { color: var(--gold); }
@media (hover: hover) { .hero-link:hover { color: var(--on-brand); } }

/* A running cycle: the hero count bumps as each application goes out (app.js showProgress) */
.hero-num { display: inline-block; }
.hero-num.bump { animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 40% { transform: scale(1.22); } }
.badge.s-matched { background: color-mix(in srgb, var(--accent) 14%, var(--badge-base)); color: var(--accent); }
.badge.s-rehearsed { background: var(--purple-bg); color: var(--purple); }

/* Meta row: grey icon + text (Luma's clock / location rows) */
.meta { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: var(--text-2); font-size: 14px; }
.meta .ic { width: 15px; height: 15px; color: var(--text-3); stroke-width: 2; }
.meta > span, .meta > bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); flex: none; }

/* Action buttons (Luma "Register / Contact / More") */
.acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.act { flex-direction: column; gap: 5px; min-height: 64px; padding: 10px 4px 9px; border-radius: 14px; background: var(--card);
  color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: normal; text-align: center; }
.act .ic { width: 21px; height: 21px; }
.act > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .act:hover { background: var(--fill); } }
.act.primary { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) { .act.primary:hover { background: var(--ink-hover); } }
.act.stop { background: var(--red-bg); color: var(--red); }
a.act { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.act { transition: background .15s, transform .15s var(--ease); }
:is(a.act, button.act:not(:disabled)):active { transform: scale(.97); }
.act-hint { color: var(--text-3); font-size: 12.5px; text-align: center; margin: 10px 8px 0; }

/* Overview: category-chip cards with a tinted icon */
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cat { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--hair-2); background: var(--bg); color: var(--text); font-size: 15px; font-weight: 500;
  transition: background .15s, transform .15s var(--ease); }
.cat:active { transform: scale(.98); }
@media (hover: hover) { .cat:hover { background: var(--card); } }
.cat-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--fill);
  color: var(--text-2); }
.cat-ic .ic { width: 17px; height: 17px; stroke-width: 2; }
.cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }

.ring { width: 56px; height: 56px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .ring-bg { stroke: var(--fill); }
.ring .ring-fg { stroke: var(--accent); stroke-linecap: round; animation: ring-in 1s .15s var(--ease) both; }
@keyframes ring-in { from { stroke-dashoffset: 150.8; } }
.ring-wrap { position: relative; display: grid; place-items: center; flex: none; }
.ring-wrap b { position: absolute; font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.setup-head { display: flex; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid var(--hair); }
.setup-head h2 { font-size: 20px; }
.setup-head p { color: var(--text-2); font-size: 14px; margin: 2px 0 0; }
.step { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; color: var(--text); }
.step:active { background: var(--pill-on); }
.group > .step ~ .step::before { inset-inline-start: 58px; }
.tick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 2px solid var(--fill-2); color: transparent; }
.tick .ic { width: 15px; height: 15px; stroke-width: 3; }
.step.done .tick { background: var(--switch-on); border-color: var(--switch-on); color: #fff; }
.step.done .cell-main { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-3); }
/* Guided setup (setup.html): the step bar, "how it works" rows, Back / Finish later */
.setup-bar { margin: -6px 0 22px; }
.setup-count { margin: 0 2px 8px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.setup-bar ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.setup-bar a { display: flex; flex-direction: column; gap: 6px; color: var(--text-3); font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.setup-bar .on a { color: var(--text); }
.setup-seg { height: 4px; border-radius: 2px; background: var(--hair-2); }
.setup-bar .done .setup-seg { background: var(--switch-on); }
.setup-bar .on .setup-seg { background: var(--accent); }
.setup-label { display: flex; align-items: center; gap: 3px; min-width: 0; }
.setup-label .ic { width: 12px; height: 12px; flex: none; stroke-width: 3; color: var(--switch-on); }
.setup-how b { display: block; font-weight: 600; }
.setup-how small { display: block; margin-top: 2px; color: var(--text-2); font-size: 13.5px; }
.setup-how.glyph-first li + li::before { inset-inline-start: 60px; }
.setup-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.setup-back .ic { width: 16px; height: 16px; transform: rotate(180deg); }
[dir="rtl"] .setup-back .ic { transform: none; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { display: block; padding: 14px 16px; border-radius: var(--r); background: var(--card); color: var(--text);
  transition: background .15s, transform .15s var(--ease); }
.tile:active { transform: scale(.98); }
@media (hover: hover) { a.tile:hover { background: var(--fill); } }
.tile .status { font-size: 13.5px; }
.tile b { display: block; font-size: 30px; margin-top: 8px; line-height: 1;
  font-variant-numeric: tabular-nums; }

/* Log output */
.term { border-radius: var(--r); background: var(--card); overflow: hidden; }
.term-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hair);
  color: var(--text-2); font-size: 13px; font-weight: 600; }
.term-head .grow { flex: 1; }
.term-head .dots { display: inline-flex; gap: 6px; }
.term-head .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--fill-2); }
.term pre { margin: 0; padding: 14px 16px; max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--term-text); letter-spacing: 0; }
.term pre.tall { max-height: none; min-height: 50vh; }
@media (min-width: 1024px) { .term pre.tall { max-height: calc(100vh - 240px); } }

/* --- feed (Luma event list): poster thumbnail with a status badge, org, title, meta rows ---------------- */
.job-list { display: flex; flex-direction: column; }
.day { font-size: 18px; margin: 22px 0 2px; }
.day:first-child { margin-top: 2px; }
.day span { color: var(--text-3); font-weight: 400; }
.show-more { display: flex; width: fit-content; margin: 10px auto 4px; color: var(--accent); }
.anchor { display: block; scroll-margin-top: 24px; }
.job { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 12px 0 14px; color: var(--text);
  transition: opacity .15s; }
.job + .job::before { content: ""; position: absolute; top: 0; inset-inline: 80px 0; height: 1px; background: var(--hair); }
a.job:active { opacity: .6; }
@media (hover: hover) { a.job:hover .job-title { text-decoration: underline; text-decoration-color: var(--text-3);
  text-underline-offset: 3px; } }
.thumb { position: relative; display: grid; place-items: center; width: 66px; height: 66px; flex: none; border-radius: 11px;
  color: #fff; font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; margin-bottom: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.thumb-letter { position: relative; text-shadow: 0 1px 8px rgba(0, 0, 0, .15); }
/* The company website's icon (logos.py) over the letter, once it has loaded (app.js); the letter stays without one. */
.thumb-logo { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14%; border-radius: inherit;
  background: #fff; object-fit: contain; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); opacity: 0;
  transition: opacity .2s; }
.thumb-logo.on { opacity: 1; }
.thumb .badge { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); height: 20px; padding: 0 7px;
  border-radius: 6px; font-size: 11.5px; max-width: 76px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 0 0 2px var(--bg); }
.job-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.job-org { color: var(--text-2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-title { font-size: 17px; font-weight: 600; line-height: 1.28; letter-spacing: -.018em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-detail { color: var(--text-3); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Rows in grouped cards (cycles, resumes, users) */
.logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none; color: #fff;
  font-size: 17px; font-weight: 700; text-transform: uppercase; }
.logo .ic { width: 19px; height: 19px; }
.logo.plain { background: var(--fill); color: var(--text-2); }
.logo.ok { background: var(--green-bg); color: var(--green); }
.logo.warn { background: var(--orange-bg); color: var(--orange); }
.logo.bad { background: var(--red-bg); color: var(--red); }
/* Company initials on flat, muted colours */
.t0 { background: #4f5bd5; } .t1 { background: #2f6fbf; } .t2 { background: #2b8a5e; }
.t3 { background: #c4642a; } .t4 { background: #c2414a; } .t5 { background: #8a5a9e; }
.feed-main { flex: 1; min-width: 0; }
.feed-title { display: block; font-size: 16px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; letter-spacing: -.015em; }
.feed-sub { display: block; color: var(--text-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-detail { color: var(--text-3); font-size: 13px; margin-top: 4px; line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.feed-meta small { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell.feed { padding-top: 12px; padding-bottom: 12px; }
.cell.feed:has(.feed-detail) { align-items: flex-start; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 24px;
  color: var(--text-2); font-size: 15px; }
.empty-ic, .empty .logo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 8px;
  background: var(--card); color: var(--text-2); }
.group .empty-ic { background: var(--fill); }
.empty-ic .ic { width: 24px; height: 24px; }
.empty b { color: var(--text); font-size: 19px; }

/* Filter pills (Luma's scrollable chip row) */
.seg { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 10px; padding: 2px 16px; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: 16px; }
.seg::-webkit-scrollbar { display: none; }
.seg a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; flex: none;
  background: var(--bg); border: 1px solid var(--hair-2); color: var(--text); font-size: 14.5px; font-weight: 500;
  text-transform: capitalize; scroll-snap-align: start; transition: all .15s; }
.seg a em { font-style: normal; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.seg a.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.seg a.on em { color: var(--on-ink); opacity: .55; }
@media (min-width: 1024px) { .seg { margin-left: 0; margin-right: 0; padding: 2px 0; flex-wrap: wrap; } }
.mark-all { display: flex; justify-content: flex-end; margin: 0 0 -10px; }  /* Inbox: under the filters */

/* --- admin --------------------------------------------------------------------------------------------- */
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inline-input { display: flex; align-items: center; gap: 10px; padding: 8px; padding-inline-start: 16px; }
.inline-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit;
  font-size: 16.5px; }
.inline-input input::placeholder { color: var(--text-3); }
.user-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.user-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 16px; padding-inline-start: 70px; }
/* The admins' announcement banner on top of every signed-in page (base.html, announce.py) */
.announce { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 8px 10px 14px;
  padding-inline-start: 14px; border-radius: var(--r); background: var(--card); color: var(--text); font-size: 14.5px;
  line-height: 1.45; box-shadow: inset 0 0 0 1px var(--hair); }
.announce[hidden] { display: none; }
.announce > .ic { flex: none; width: 18px; height: 18px; color: var(--accent); }
.announce.warning { background: var(--red-bg); box-shadow: none; }
.announce.warning > .ic { color: var(--red); }
.announce > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.announce .announce-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; min-height: 0;
  padding: 0; border: 0; border-radius: 999px; background: none; color: var(--text-3); box-shadow: none; cursor: pointer; }
@media (hover: hover) { .announce .announce-close:hover { background: var(--fill); color: var(--text); } }
.announce-close .ic { width: 16px; height: 16px; }
/* An admin's "See as a user" switch: a form around one button (sidebar, More sheet), and the banner that ends it */
.view-as { display: contents; }
.announce.as-user { flex-wrap: wrap; }
.announce.as-user > span { min-width: 12em; }
/* Saved AI keys, one row each with a remove box (admin.html AI keys) */
.field .key-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.field .key-row .faint { margin-inline-start: auto; font-size: 13px; }
/* "They paid" next to Set plan (admin.html, admin_user.html) */
.chip-check.chip-sm { height: 34px; padding: 0 12px; font-size: 13.5px; font-weight: 600; }
/* Admin page jump links (admin.html) */
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.jump a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--fill); color: var(--text-2); font-size: 13.5px; font-weight: 600; }
@media (hover: hover) { .jump a:hover { background: var(--pill-on); color: var(--text); } }
:is(#business, #ops, #settings, #users, #activity) { scroll-margin-top: 72px; }
/* Admin user list search + filters (admin.html) */
.find-row { flex-wrap: wrap; gap: 8px; min-height: 0; padding-top: 4px; }
.find-row .sm-link { font-size: 14px; font-weight: 600; margin-inline-start: 4px; }
/* Admin user page controls (admin_user.html): label on one side, buttons / small forms on the other, wrapping */
.control-row { flex-wrap: wrap; row-gap: 10px; }
.control-row .user-actions { padding: 0; }
.control-row .cell-main { min-width: 120px; }
input.num-sm { width: 76px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--fill);
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
input.num-sm.money { width: 104px; }
/* Admin numbers (admin.html "Business"): tile sub-line, funnel / per-day bars (<progress>, no inline widths) */
.tile-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
@media (max-width: 560px) { .tiles.biz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); line-height: 1.35; }
.bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin-top: 6px; border: 0;
  border-radius: 3px; background: var(--fill); color: var(--accent); overflow: hidden; }
.bar::-webkit-progress-bar { background: var(--fill); }
.bar::-webkit-progress-value { background: var(--accent); border-radius: 3px; }
.bar::-moz-progress-bar { background: var(--accent); border-radius: 3px; }
.day-row { min-height: 40px; padding-block: 8px; }
.day-row .day-label { flex: none; width: 46px; color: var(--text-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.day-row .bar { flex: 1; margin-top: 0; }
.day-row .cell-value { min-width: 28px; text-align: end; font-variant-numeric: tabular-nums; }
.audit { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.audit td { padding: 12px 16px; border-top: 1px solid var(--hair); vertical-align: top; color: var(--text-2); }
.audit tr:first-child td { border-top: 0; }
.audit td:nth-child(2) { color: var(--text); font-weight: 500; white-space: nowrap; }
.audit td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-3); }
.audit td.mono { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- key / secret --------------------------------------------------------------------------------------- */
.secret-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.secret-row code { font-size: 15px; padding: 4px 8px; background: var(--fill); }

/* --- desktop dashboard ------------------------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .dash { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 36px; align-items: start; }
  .dash-col { display: flex; flex-direction: column; }
  .hero-num { font-size: 80px; }
  .dial { width: 152px; height: 152px; }
  .dial-center b { font-size: 36px; }
}

/* --- public pages (sign-in, pending, legal) -------------------------------------------------------------- */
.public-main { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + 16px) 20px calc(var(--safe-b) + 20px); }
.auth { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 420px; margin: 0 auto;
  animation: enter .5s var(--ease) both; }
.auth-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 12px 0 28px; }
.auth-hero > .app-icon { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 24px; }
.auth-hero h1 { font-size: 42px; line-height: 1.05; letter-spacing: -.025em; margin-bottom: 14px;
  text-wrap: balance; }
html:lang(he) .auth-hero h1 { font-size: clamp(28px, 9.2vw, 40px); line-height: 1.1; }
.auth-hero h1 span, .land-copy h1 span { color: var(--accent); }
.auth-hero p { color: var(--text-2); font-size: 16px; line-height: 1.5; max-width: 330px; margin: 0; }
.auth-hero .perks { margin-top: 18px; max-width: none; font-size: 13.5px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 17px; margin: 0 0 14px !important; }
.wordmark .app-icon { width: 24px; height: 24px; border-radius: 7px; }
.auth-actions { display: flex; flex-direction: column; gap: 10px; }
.auth-actions .btn, .auth-actions button { width: 100%; min-height: 54px; font-size: 17px; }
.auth-actions .ic-color { width: 22px; height: 22px; }
.auth-fine { color: var(--text-3); font-size: 13px; text-align: center; margin: 16px 8px 0; line-height: 1.5; }
.perks { display: flex; justify-content: center; gap: 4px 10px; flex-wrap: wrap; margin: 22px 0 0; color: var(--text-2); font-size: 13.5px; }
.perks span + span::before { content: "\B7"; margin-inline-end: 10px; color: var(--text-3); }
.or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; margin: 6px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hair-2); }
#email-form { display: flex; flex-direction: column; gap: 10px; }
#email-form input { width: 100%; height: 54px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--field-line);
  background: var(--card); color: var(--text); font: inherit; font-size: 17px; outline: 0; }
#email-form input:focus { border-color: var(--accent); background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.dev { margin-top: 18px; }
.dev .group { margin: 8px 0 10px; }
.auth .note { margin-bottom: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.pending-icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; margin-bottom: 26px;
  background: var(--orange-bg); color: var(--orange); }
.pending-icon .ic { width: 34px; height: 34px; }
.legal { max-width: 760px; width: 100%; margin: 0 auto; padding: 28px 22px; background: var(--card);
  border-radius: var(--r-lg); color: var(--text-2); line-height: 1.6; }
.legal h1 { color: var(--text); font-size: 32px; margin-bottom: 6px; }
.legal h2 { color: var(--text); font-size: 18px; margin: 28px 0 8px; }
.legal li { margin: 6px 0; }
.legal b { color: var(--text); }
.legal-reveal { margin: 4px 0 12px; }
/* Guides (templates/guides/): the legal page's article plus an example box, the role lists and a closing call. */
.guide .crumbs { margin-bottom: 10px; }
.guide .crumbs a { color: inherit; text-decoration: none; }
.guide-example { margin: 12px 0; padding: 14px 18px; background: var(--fill-soft); border-radius: var(--r-sm);
  border-inline-start: 3px solid var(--hair-2); color: var(--text); unicode-bidi: plaintext; }
.guide-example p { margin: 0 0 8px; }
.guide-example p:last-child { margin-bottom: 0; }
.guide-roles { margin-top: 0; }
.guide-list { list-style: none; padding: 0; margin: 12px 0 0; }
.guide-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--hair); margin: 0; }
.guide-list li:first-child { border-top: 0; }
.guide-list a { font-weight: 600; }
.guide-list span { font-size: 14px; }
.guide-cta { margin: 32px 0 8px; padding: 20px; border-radius: var(--r-lg); background: var(--fill-soft); }
.guide-cta b { display: block; font-size: 18px; margin-bottom: 4px; }
.guide-cta p { margin: 0 0 14px; }
.legal .guide-cta a.btn { text-decoration: none; font-weight: 600; }
.back { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 16px; max-width: 760px; width: 100%; font-weight: 600; }
.back .ic { transform: rotate(180deg); width: 16px; height: 16px; }
@media (min-width: 700px) { .auth-hero { flex: 0; padding-top: 8vh; } }

/* Home: tiles, actions and rows rise in one after another; a row a running cycle adds slides in lit */
.page-dashboard :is(.acts, .cats, .job-list) > * { animation: rise .45s var(--ease) backwards; }
.page-dashboard :is(.acts, .cats, .job-list) > :nth-child(2) { animation-delay: 40ms; }
.page-dashboard :is(.acts, .cats, .job-list) > :nth-child(3) { animation-delay: 80ms; }
.page-dashboard :is(.acts, .cats, .job-list) > :nth-child(4) { animation-delay: 120ms; }
.page-dashboard :is(.acts, .cats, .job-list) > :nth-child(5) { animation-delay: 160ms; }
.page-dashboard :is(.acts, .cats, .job-list) > :nth-child(n+6) { animation-delay: 200ms; }
.page-dashboard .job-list > .job.is-new { animation: row-in .6s var(--ease) both, row-lit 2.4s ease-out; border-radius: 14px; }
.job.is-new .thumb { animation: bump .6s .15s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes row-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes row-lit { 0%, 35% { background: color-mix(in srgb, var(--accent) 9%, transparent); } }
.cat b.bump { display: inline-block; animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
}

/* Home blocks keep their spacing whatever order they end up in */
.blk { margin-top: 26px; }
/* An application's own page (application.html): its list row on top, then where, the job's page, the ad. */
.app-one .job { padding-bottom: 6px; }
.app-one .job-title { display: block; -webkit-line-clamp: unset; }
.app-place { margin: 0 0 14px; color: var(--text-2); font-size: 14px; }
.app-go { margin: 4px 0 6px; }
.app-ad { padding: 14px 16px; }
.app-next { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; margin-top: 4px; }
.app-next p { margin: 0; color: var(--text-2); line-height: 1.45; }
.app-next .app-next-when { color: var(--text); font-weight: 600; }
.app-ad p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; color: var(--text); }
.blk.o-hero, .blk.o-actions { margin-top: 0; }
.blk.o-actions { margin-bottom: 4px; }
.blk > .section-title:first-child { margin-top: 0; }
@media (min-width: 1024px) { .dash-col > .blk:first-child { margin-top: 0; } }
.spaced-term { margin-top: 16px; }
.group-foot p { margin: 0 0 6px; }
.group-foot b { color: var(--text-2); font-weight: 600; }
.field > .label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.label-row .pill { height: 20px; font-size: 11.5px; padding: 0 7px; }
.field .clear { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--text-2); font-size: 13.5px;
  cursor: pointer; }
.field .clear input { width: 18px; height: 18px; accent-color: var(--red); }
details.group > summary { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 11px 16px; cursor: pointer;
  list-style: none; font-weight: 500; }
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary .chev { margin-inline-start: auto; transition: transform .3s var(--ease); }
details.group::details-content { block-size: 0; overflow: clip;
  transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
details.group[open]::details-content { block-size: auto; }
details.group[open] > summary .chev { transform: rotate(90deg); }
details.group[open] > summary { border-bottom: 1px solid var(--hair); }
.field-label.pad { padding: 14px 16px 0; margin: 0; }
.field-help.pad { padding: 12px 16px 0; margin: 0; }
.spaced-details { margin-top: 26px; }
.spaced-group { margin-top: 16px; }
.version-details { margin-top: 10px; }
.cv-row { padding-inline-end: 10px; }
.cv-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: inherit; }
.cv-row form { margin: 0; }
/* Resume viewer (cv_view.html): pages drawn by static/cv-view.js, white paper in both themes */
.cv-head { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto 16px; }
.cv-title { margin: 0; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-view { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.pdf-wait { display: grid; place-items: center; min-height: 50vh; }
.pdf-page { display: block; width: 100%; height: auto; background: #fff; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 6px 20px rgba(0, 0, 0, .06); }
.pdf-error { color: var(--text-2); text-align: center; padding: 36px 16px; margin: 0; }
button.icon-btn { width: 40px; padding: 0; justify-content: center; }
@media (hover: hover) { button.icon-btn:hover { color: var(--red); background: var(--red-bg); } }
.spaced-reset { margin-top: 36px; }
.small-note { font-size: 13px; font-weight: 400; margin-inline-start: auto; }
details.group > summary .small-note + .chev { margin-inline-start: 0; }
.cell-form { margin: 0; display: block; position: relative; }
.group > .cell-form ~ .cell-form::before, .group > .cell ~ .cell-form::before { content: ""; position: absolute; top: 0;
  inset-inline: 60px 0; height: 1px; background: var(--hair); z-index: 1; }
.mono-sm { font-family: var(--mono); font-size: 13px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
.section-title .pill { align-self: center; }

/* --- busy buttons (any form while it submits, AI requests) ------------------------------------------------ */
.is-busy { position: relative; pointer-events: none; }
button.is-busy:not(.act):not(.cell) { color: transparent !important; }
button.is-busy:not(.act)::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid var(--text-2); border-inline-start-color: transparent;
  animation: spin .7s linear infinite; }
button.primary.is-busy::after { border-color: var(--on-ink); border-inline-start-color: transparent; }
button.accent.is-busy::after { border-color: #fff; border-inline-start-color: transparent; }
.act.is-busy .ic { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.88); opacity: .6; } }

/* --- toasts made by app.js (with an action button) --------------------------------------------------------- */
.toast-action { margin-inline-start: auto; min-height: 30px; padding: 0 12px; font-size: 13.5px; background: rgba(255, 255, 255, .22);
  color: #fff; }
@media (hover: hover) { .toast-action:hover { background: rgba(255, 255, 255, .32); } }
.toast .grow { flex: 1; min-width: 0; }

/* --- AI assistant (profile) ---------------------------------------------------------------------------------- */
.ai-note { margin-bottom: 12px; }
.ai-note .ic { color: var(--text-2); }
.section-title .pill .ic { width: 13px; height: 13px; }
.ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ai-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px;
  min-height: 0; height: 100%; padding: 16px; border-radius: var(--r); white-space: normal; text-align: start; overflow: hidden;
  background: var(--card); border: 1px solid transparent; color: var(--text); font-weight: 400;
  transition: transform .25s var(--spring), border-color .2s, background .2s; }
.ai-card::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: var(--pill-on); }
@media (hover: hover) { .ai-card:hover { background: var(--card); border-color: var(--hair-2); }
  .ai-card:hover::before { opacity: 1; } }
.ai-card:active { transform: scale(.97); }
.ai-card[aria-expanded="true"] { border-color: var(--text); }
.ai-card[aria-expanded="true"]::before { opacity: 1; }
.ai-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ai-card b { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.ai-card small { color: var(--text-2); font-size: 13px; line-height: 1.4; }
button.ai-card.is-busy { color: var(--text) !important; border-color: var(--hair-2); }
.ai-card.is-busy::before { opacity: 1; animation: shimmer 1.4s ease-in-out infinite; }
button.ai-card.is-busy::after { content: none; }
.ai-card.is-busy .cell-icon { animation: pulse 1s ease-in-out infinite; }
@keyframes shimmer { 50% { opacity: .35; } }
.ai-panel, .ai-result { margin-top: 12px; animation: rise .4s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.ai-result { padding: 16px; border-radius: var(--r); background: var(--card);
  border: 1px solid var(--hair-2); }
.ai-result-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ai-result-head b { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.ai-result-head button { min-height: 34px; width: 34px; padding: 0; }
.ai-result h3 { font-size: 14px; font-weight: 500; color: var(--text-2); margin: 18px 0 8px; letter-spacing: -.01em; }
.ai-result p { color: var(--text-2); font-size: 15px; line-height: 1.5; margin: 0; }
.ai-result ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ai-result li { position: relative; padding-inline-start: 22px; font-size: 15px; line-height: 1.45; }
.ai-result li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .55em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3); }
.ai-result li.good::before { background: var(--green); }
.ai-result li.fix::before { background: var(--orange); }
.ai-result li.fix b { display: block; font-weight: 600; }
.ai-result .fix-how { margin-top: 4px; }
.ai-result .fix-example { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px;
  padding: 10px 12px; border-radius: var(--r-sm); background: var(--fill); }
.ai-result .fix-example small { color: var(--text-3); font-size: 12.5px; }
.ai-result .fix-example p { color: var(--text); }
.ai-result .chips { padding: 0; }
.ai-result .chip { background: var(--fill); color: var(--text); font-weight: 500; }
.ai-result textarea { width: 100%; min-height: 260px; padding: 14px; border-radius: var(--r-sm); border: 1px solid var(--hair-2);
  background: var(--bg); color: var(--text); font: inherit; font-size: 15.5px; line-height: 1.55; resize: vertical; outline: 0; }
.ai-result textarea:focus { border-color: var(--accent); }
.ai-result .row-actions { margin-top: 12px; }
.score { display: flex; align-items: center; gap: 16px; }
.score .ring { width: 64px; height: 64px; }
.score .ring .ring-fg { animation-name: score-in; stroke: var(--red); }
.score .ring-wrap b { font-size: 18px; }
.score .ring-fg.ok { stroke: var(--orange); }
.score .ring-fg.good { stroke: var(--green); }
@keyframes score-in { from { stroke-dashoffset: 150.8; } }
.suggest { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.suggest:first-child { border-top: 0; padding-top: 0; }
.suggest-text { flex: 1; min-width: 0; }
.suggest-text small { display: block; color: var(--text-2); font-size: 13px; font-weight: 600; }
.suggest-text span { display: block; font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.suggest button { flex: none; }
.ai-inline { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 16px 14px; }
select.select-sm, .field.inline select.select-sm { width: auto; min-height: 34px; padding: 0 30px 0 12px; border-radius: 999px;
  background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  color: var(--text); border: 0; font: inherit; font-size: 14px; font-weight: 600; -webkit-appearance: none; appearance: none; cursor: pointer; }
.field.inline select.select-sm { max-width: 62%; text-overflow: ellipsis; }
.field.ai-filled, .toggle.ai-filled { animation: filled 2.4s var(--ease) both; }
@keyframes filled { 0%, 30% { background: color-mix(in srgb, var(--accent) 12%, transparent); } }
.field.ai-filled > label::after { content: " · filled by AI"; color: var(--accent); }
textarea[data-autogrow] { overflow: hidden; }

/* --- sizing: small phones, tablets ------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .content { padding-left: 12px; padding-right: 12px; }
  .seg { margin-inline: -12px; padding-inline: 12px; }
  .top h1 { font-size: 23px; }
  .hero { padding: 16px; }
  .hero-num { font-size: 50px; }
  .dial { width: 112px; height: 112px; }
  .dial-center b { font-size: 25px; }
  .act { font-size: 12px; min-height: 60px; }
  .cat { padding: 9px 10px; gap: 8px; font-size: 14px; }
  .cat-ic { width: 26px; height: 26px; }
  .thumb { width: 58px; height: 58px; font-size: 22px; }
  .job + .job::before { inset-inline-start: 72px; }
  .job-title { font-size: 16px; }
  .tile { padding: 12px; }
  .tile b { font-size: 24px; }
  .tiles.three .tile .status { font-size: 12px; }
  .feed-meta small { font-size: 11.5px; }
  .cell { gap: 12px; padding-left: 14px; padding-right: 14px; }
  .logo { width: 38px; height: 38px; font-size: 16px; }
  .ai-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-card { flex-direction: row; align-items: center; padding: 14px; }
  .user-actions { padding-inline-start: 16px; }
  .auth-hero h1 { font-size: 34px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .content { max-width: 720px; padding-left: 24px; padding-right: 24px; }
  .tabbar { width: 460px; }
}
@media (min-width: 1440px) {
  .content { padding-left: 72px; padding-right: 72px; }
}

/* --- language switch ---------------------------------------------------------------------------------------- */
.public-bar { display: flex; justify-content: flex-end; width: 100%; max-width: 760px; margin: 0 auto; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--hair-2); color: var(--text); font-size: 14px; font-weight: 500; }
.lang-switch .ic { width: 16px; height: 16px; color: var(--text-2); }
@media (hover: hover) { .lang-switch:hover { background: var(--card); } }
.sidebar .lang-switch { align-self: flex-start; margin: 0 0 12px; margin-inline-start: 8px; }
.lang-check { color: var(--accent); stroke-width: 2.4; }

/* --- right-to-left (Hebrew) and mixed-direction text ------------------------------------------------------- */
/* Hebrew reads best with normal tracking: negative letter-spacing crowds Hebrew letters. */
html:lang(he) *, html:lang(he) *::before, html:lang(he) *::after { letter-spacing: normal !important; }
/* Text people write (keyword boxes, the live feed) in the sans face on Hebrew pages: --mono takes Hebrew letters
   from Plex Sans Hebrew but spaces and punctuation from a monospace font, which spread Hebrew words apart. */
html:lang(he) :is(.field textarea.mono, .term pre) { font-family: inherit; }
/* An empty dir=auto field has no text to take a direction from and falls back to LTR: its Hebrew placeholder
   follows the page instead (typing switches back to the text's own direction) */
html[dir=rtl] :is(textarea, input)[dir=auto]:placeholder-shown { direction: rtl; }
/* A Latin term with inner hyphens or parentheses inside Hebrew text (AES-256-GCM, Google API): kept in one piece,
   in its own direction. */
.ltr-term { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.field.ai-filled > label:lang(he)::after { content: " \B7  \5DE \5D5 \5DC \5D0  \5E2 \5F4 \5D9  AI"; }

/* Values that are always left-to-right (code, emails, links, keys) keep their order inside right-to-left text. */
code { direction: ltr; unicode-bidi: isolate; }
input[type=email], input[type=url], input[type=password] { direction: ltr; }
[dir="rtl"] :is(input[type=email], input[type=url], input[type=password], input[dir="ltr"]) { text-align: right; }
/* A value in its own direction (dir="auto": names, job titles, typed text) still lines up with the right-to-left
   page; when it is too long it overflows at its own end, so an English title is cut at its end, not its start. */
[dir="rtl"] [dir="auto"]:not(textarea, .reply-body, .fb-text > p) { text-align: right; }
/* One-line values cut with "…": right-aligned English text that is too long spills out of its START (left) side, so
   "Check Point Software…" showed as "k Point Software Technologies". Such a value shrinks to its text and sits on the
   right instead; aligned to its own start, it overflows (and gets the "…") at its own end. */
[dir="rtl"] :is(.job-org, .feed-title, .feed-sub, .sheet-me small, .side-me-text small)[dir="auto"] {
  width: fit-content; max-width: 100%; margin-left: auto; margin-right: 0; text-align: start; }
[dir="rtl"] .me-name b[dir="auto"] { text-align: start; }
/* Free text that may be in either language: each line (paragraph) takes the direction of its own first letter. */
textarea, .term pre, .suggest-text span, .ai-result :is(p, li, .chip) { unicode-bidi: plaintext; }

/* Mirrored for right-to-left: "forward" chevrons, the back link, the sign-out arrow, switches, progress rings. */
[dir="rtl"] .chev { transform: rotate(180deg); }
@media (hover: hover) { [dir="rtl"] .title-link:hover .chev { transform: rotate(180deg) translateX(2px); } }
[dir="rtl"] .back .ic { transform: none; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
[dir="rtl"] input:checked + .switch::after { transform: translateX(-20px); }
[dir="rtl"] .ring { transform: scaleX(-1) rotate(-90deg); }
[dir="rtl"] .dial > svg { transform: scaleX(-1) rotate(-90deg); }
[dir="rtl"] select.select-sm, [dir="rtl"] .field.inline select.select-sm { padding: 0 12px 0 30px; background-position: left 10px center; }
@media (min-width: 1024px) { [dir="rtl"] .toasts { left: calc(50% - var(--sidebar) / 2); } }

/* --- job search: roles ---------------------------------------------------------------------------------------- */
.legacy-note { align-items: center; margin-bottom: 8px; }
.legacy-note .ic { color: var(--text-2); }
.legacy-note .grow { flex: 1; min-width: 0; }
.legacy-note button { flex: none; }
.role-suggest { margin-bottom: 12px; }
.rs-card { width: 100%; flex-direction: row; align-items: center; }
/* Profile: each AI tool sits with what it works on (resume, About you, cover letters) */
.ai-tool { margin: 12px 0; }
:is(#resume, #about, #cover-letter) { scroll-margin-top: 72px; }
.rs-result { margin-top: 12px; padding: 16px; animation: rise .4s var(--ease) both;
  background: var(--card); border: 1px solid var(--hair-2); }
.rs-head { display: flex; align-items: center; gap: 12px; }
.rs-head b { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.rs-head button { min-height: 34px; width: 34px; padding: 0; }
.rs-summary { color: var(--text-2); font-size: 15px; line-height: 1.5; margin: 12px 0 4px; unicode-bidi: plaintext; }
.rs-result .chips { padding: 8px 0 0; }
.rs-extra { margin-top: 12px; }
.rs-extra .field-label { margin: 0; }
.rs-chip { min-height: 36px; padding: 0 14px 0 10px; gap: 6px; font-size: 14px; font-weight: 500; background: var(--card);
  border: 1px solid var(--hair-2); color: var(--text); }
.rs-chip .ic { width: 15px; height: 15px; stroke-width: 2.4; opacity: .25; }
.rs-chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.rs-chip.on .ic { opacity: 1; color: var(--switch-on); }
.rs-level { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--fill-soft); font-size: 14.5px; }
.rs-level .grow { flex: 1; min-width: 0; }
.rs-level button.on { background: var(--green-bg); color: var(--green); }
.rs-actions { margin-top: 14px; }
.picked-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; min-height: 60px; align-items: center; }
.role-tag { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding-inline: 14px 4px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 500; animation: rise .25s var(--ease) both; }
.role-x { min-height: 28px; width: 28px; padding: 0; background: transparent; color: var(--on-ink); opacity: .6; }
@media (hover: hover) { .role-x:hover { background: color-mix(in srgb, var(--on-ink) 18%, transparent); opacity: 1; } }
.role-x .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.picked-empty { color: var(--text-3); font-size: 14.5px; padding: 0 4px; }
.role-cat { position: relative; }
.role-cat::before { content: ""; position: absolute; top: 0; inset-inline: 16px 0; height: 1px; background: var(--hair); }
.role-cat > summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 16px; cursor: pointer;
  list-style: none; font-weight: 500; }
.role-cat > summary::-webkit-details-marker { display: none; }
.role-cat > summary .chev { margin-inline-start: auto; transition: transform .3s var(--ease); }
.role-cat[open] > summary .chev { transform: rotate(90deg); }
.cat-name { min-width: 0; }
.cat-count:not(:empty) { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 700; }
.role-cat .chips { padding-top: 2px; }
.region-chips { padding-top: 14px; }
.group > .region-chips + .toggle::before { content: ""; position: absolute; top: 0; inset-inline: 16px 0; height: 1px;
  background: var(--hair); }
.role-none { color: var(--text-3); font-size: 14.5px; padding: 4px 16px 16px; margin: 0; }
/* Companies to skip: tags like the picked roles, a search box, its suggestions listed under it */
.company-picker .picked-chips { min-height: 0; }
.company-picker .picked-chips + .field { border-top: 1px solid var(--hair); }
.company-list { display: flex; flex-direction: column; max-height: 264px; overflow-y: auto; border-top: 1px solid var(--hair);
  padding: 4px 0; }
.company-opt { justify-content: flex-start; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 0; background: transparent;
  color: var(--text); font-size: 15px; font-weight: 500; text-align: start; }
.company-opt .ic { width: 17px; height: 17px; color: var(--accent); }
.company-opt.on { background: var(--fill-soft); }
@media (hover: hover) { .company-opt:hover { background: var(--fill-soft); } }
/* Send feedback: screenshot picker and thumbnails (app.js form[data-feedback]) */
.shot-pick { cursor: pointer; }
.shot-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.shot-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.shot-pick.drag-on { background: var(--accent-soft); }
@media (hover: hover) { .shot-pick:hover { background: var(--pill-on); } }
.shots { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
.shots + .shot-pick::before { content: ""; position: absolute; top: 0; inset-inline: 60px 0; height: 1px; background: var(--hair); }
.shot { position: relative; margin: 0; width: 84px; height: 116px; border-radius: 10px; overflow: hidden;
  background: var(--fill); border: 1px solid var(--hair); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot-x { position: absolute; top: 4px; inset-inline-end: 4px; width: 28px; min-height: 28px; height: 28px; padding: 0;
  border-radius: 50%; background: rgba(11, 18, 32, .72); color: #fff; }
.shot-x .ic { width: 14px; height: 14px; stroke-width: 2.6; }
/* Admin: a message's screenshots */
.fb-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-inline-start: 44px; }
.fb-shots a { display: block; width: 72px; height: 100px; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair);
  background: var(--fill); }
.fb-shots img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fb-device { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }

/* Admin: feedback list */
.fb-item { padding: 14px 16px; }
.fb-item + .fb-item { border-top: 1px solid var(--hair); }
.fb-item.is-done { opacity: .6; }
.fb-head { display: flex; align-items: center; gap: 14px; }
.fb-head a { color: var(--text); font-weight: 600; }
.fb-text { margin-top: 10px; padding-inline-start: 44px; }
.fb-text p { margin: 0; text-align: start; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); }
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-inline-start: 44px; }
.fb-actions form { margin: 0; }
/* Applications: a row's "more" menu (Never apply to this company) sits at its end */
.job-wrap { position: relative; }
.job-wrap > .job .job-main { padding-inline-end: 40px; }
.job-wrap + .job::before, :is(.job, .job-wrap) + .job-wrap > .job::before { content: ""; position: absolute; top: 0;
  inset-inline: 80px 0; height: 1px; background: var(--hair); }
.job-menu { position: absolute; top: 10px; inset-inline-end: -8px; }
.job-menu[open] { z-index: 5; }
.job-menu > summary { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 999px; color: var(--text-3); list-style: none; cursor: pointer; }
.job-menu > summary::-webkit-details-marker { display: none; }
.job-menu > summary .ic { width: 20px; height: 20px; }
.job-menu[open] > summary { background: var(--fill); color: var(--text); }
@media (hover: hover) { .job-menu > summary:hover { background: var(--fill); color: var(--text); } }
.job-menu-pop { position: absolute; top: 44px; inset-inline-end: 0; width: max-content; max-width: min(300px, calc(100vw - 32px));
  padding: 6px; border-radius: var(--r-sm); background: var(--sheet); border: 1px solid var(--hair);
  box-shadow: var(--shadow-float); animation: menu-in .14s var(--ease) both; }
.job-menu.up .job-menu-pop { top: auto; bottom: 44px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .job-menu-pop { animation: none; } }
.job-menu-item { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px;
  padding: 10px 12px; border-radius: 8px; background: transparent; color: var(--text); font-size: 15px; font-weight: 600;
  text-align: start; white-space: normal; }
.job-menu-item .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--red); }
.job-menu-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.job-menu-item small { color: var(--text-3); font-size: 12.5px; font-weight: 500; }
@media (hover: hover) { .job-menu-item:hover { background: var(--fill-soft); } }
.board-label { margin: 16px 16px 6px; }

/* --- public home page (landing.html) ----------------------------------------------------------------------- */
/* Plain and editorial on purpose: solid colours, a product shot of the app, numbered steps and ruled lists. */
.page-landing .public-main { padding-top: calc(var(--safe-t) + 10px); }
.site-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 1120px;
  margin: 0 auto; min-height: 48px; }
.site-bar-end { display: flex; align-items: center; gap: 8px; }
.site-bar .brand { font-size: 16px; white-space: nowrap; }
.site-bar .app-icon { width: 30px; height: 30px; border-radius: 9px; }
@media (max-width: 359px) { .site-bar .brand > span:not(.app-icon) { display: none; } }
.landing { width: 100%; max-width: 1120px; margin: 0 auto; overflow-x: clip; animation: enter .5s var(--ease) both; }

.land-hero { display: grid; gap: 36px; align-items: center; padding: 40px 0 8px; }
.land-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.land-copy h1 { font-size: 48px; line-height: 1.02; letter-spacing: -.03em; margin-bottom: 20px;
  text-wrap: balance; }
.land-lead { color: var(--text-2); font-size: 17px; line-height: 1.55; max-width: 460px; margin: 0 0 26px; text-wrap: pretty; }
.land-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.land-ctas .btn { min-height: 50px; padding: 0 26px; }
.land-copy .perks { margin-top: 20px; }

/* Product shot: the app's home screen standing in a plain panel, cut off at the bottom edge */
.land-art { position: relative; height: 440px; overflow: hidden; border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1.4px);
  background-size: 18px 18px;
  display: flex; justify-content: center; padding-top: 44px; }
.phone { position: relative; flex: none; width: 260px; height: 520px; border-radius: 44px; padding: 10px;
  background: #1c1917; box-shadow: 0 24px 60px rgba(11, 31, 75, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
  animation: phone-rise .7s var(--ease) both; }
@keyframes phone-rise { from { opacity: 0; translate: 0 30px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 20px 50px rgba(0, 0, 0, .5); }
}
:root[data-theme="dark"] .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 20px 50px rgba(0, 0, 0, .5); }
.phone-notch { position: absolute; z-index: 2; top: 18px; left: 50%; width: 76px; height: 22px; border-radius: 999px;
  background: #1c1917; transform: translateX(-50%); }
.phone-screen { height: 100%; overflow: hidden; border-radius: 34px; background: var(--bg); padding: 46px 14px 14px;
  text-align: start; }
.mock-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mock-top .avatar { width: 26px; height: 26px; font-size: 12px; }
.mock-top b { font-size: 18px; }
.mock-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 14px;
  background: var(--brand); color: var(--on-brand); }
.mock-hero .chip { height: 20px; padding: 0 7px; font-size: 10px; border-radius: 6px; gap: 5px; margin-bottom: 6px; }
.mock-hero .chip .dot { width: 5px; height: 5px; }
.mock-hero .chip.state-waiting { background: color-mix(in srgb, var(--on-brand) 12%, transparent); color: var(--gold); }
.mock-hero b { font-size: 36px; line-height: 1; }
.mock-hero small { color: var(--on-brand-2); font-size: 11px; font-weight: 500; }
.mock-title { font-size: 15px; margin: 14px 0 0; }
.phone .job { gap: 10px; padding: 8px 0 10px; }
.phone .job + .job::before { inset-inline-start: 54px; }
.phone .thumb { width: 44px; height: 44px; border-radius: 8px; font-size: 18px; margin-bottom: 6px; }
.phone .thumb .badge { height: 15px; padding: 0 5px; font-size: 8.5px; border-radius: 4px; bottom: -7px; }
.phone .job-main { gap: 1px; }
.phone .job-org { font-size: 10px; }
.phone .job-title { font-size: 12.5px; }
.phone .meta { font-size: 10.5px; gap: 4px; }
.phone .meta .ic { width: 11px; height: 11px; }

.land-section { padding-top: 72px; }
.land-h2 { font-size: 30px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 8px; text-wrap: balance; }
/* Steps and features: ruled lists, no cards or icon tiles */
.steps3, .feats { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 32px; }
.steps3 li, .feat { display: flex; flex-direction: column; gap: 6px; padding: 20px 0 22px; border-top: 1px solid var(--hair-2); }
.steps3 b, .feat b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.steps3 p, .feat p { color: var(--text-2); font-size: 15px; line-height: 1.55; margin: 0; text-wrap: pretty; }
.step-n { color: var(--accent); font-size: 26px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.step-n::before { content: "0"; }
.land-cta { margin-top: 72px; padding: 48px 24px; border-radius: var(--r-xl); text-align: center; background: var(--brand);
  color: var(--on-brand); }
.land-cta h2 { font-size: 34px; letter-spacing: -.02em; margin-bottom: 8px; text-wrap: balance; }
.land-cta p { color: var(--on-brand-2); font-size: 16px; margin: 0 auto 24px; max-width: 420px;
  text-wrap: pretty; }
.land-cta .btn { min-height: 50px; padding: 0 28px; background: #ffffff; color: #0b1f4b; }
@media (hover: hover) { .land-cta .btn:hover { background: #e6efff; } }
.land-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 48px;
  padding: 22px 0 6px; border-top: 1px solid var(--hair); }
.land-foot .brand { font-size: 15px; color: var(--text-2); }
.land-foot .app-icon { width: 26px; height: 26px; border-radius: 8px; }
.land-foot nav { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.land-foot nav a, .land-foot .foot-link { color: var(--text-2); font-size: 14px; }
.land-foot .foot-link { min-height: 0; padding: 0; border-radius: 0; background: none; font-weight: inherit;
  letter-spacing: inherit; white-space: normal; }  /* a link-looking button, not the app's pill */
@media (hover: hover) { .land-foot nav a:hover, .land-foot .foot-link:hover { color: var(--text); background: none; } }

@media (min-width: 700px) {
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .land-copy h1 { font-size: 62px; }
  .land-art { height: 480px; }
}
@media (min-width: 1024px) {
  .page-landing .public-main { padding-left: 40px; padding-right: 40px; }
  .land-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 56px; }
  .land-copy { text-align: start; align-items: flex-start; }
  .land-copy h1 { font-size: 78px; }
  .land-ctas, .land-copy .perks { justify-content: flex-start; }
  .land-art { height: 560px; padding-top: 60px; }
  .phone { width: 290px; height: 580px; }
  .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .land-section { padding-top: 96px; }
  .land-h2 { font-size: 40px; margin-bottom: 14px; }
}
@media (max-width: 380px) {
  .land-copy h1 { font-size: 38px; }
  .land-art { height: 400px; padding-top: 32px; }
  .phone { width: 236px; height: 472px; }
}

/* Hebrew home page: Hebrew words are wider than English ones, so the title is sized to keep "Your job hunt," on one line. */
html:lang(he) .land-copy h1 { font-size: clamp(30px, 9.6vw, 46px); line-height: 1.1; }
@media (min-width: 700px) { html:lang(he) .land-copy h1 { font-size: 56px; } }
@media (min-width: 1024px) { html:lang(he) .land-copy h1 { font-size: min(58px, calc((100vw - 120px) / 18)); } }

/* --- installed app ----------------------------------------------------------------------------------------- */
/* Home card offering the app (phones; app.js shows it when installing is possible) */
.install-card { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 12px;
  padding-inline-end: 40px; border-radius: var(--r); background: var(--card); border: 1px solid var(--hair); }
/* Home asks one thing at a time (install, notifications, email offers): only the first card that is showing. */
.install-card:not([hidden]) ~ .install-card { display: none; }
.install-card .app-icon { width: 44px; height: 44px; border-radius: 12px; }
.install-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.install-card-text b { font-size: 15.5px; font-weight: 600; }
.install-card-text span { color: var(--text-2); font-size: 13px; }
.install-card .btn { flex: none; }
.install-x { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; min-height: 28px; height: 28px; padding: 0;
  border-radius: 50%; background: transparent; color: var(--text-3); }
.install-x .ic { width: 16px; height: 16px; }
@media (hover: hover) { .install-x:hover { background: var(--fill); color: var(--text); } }
@media (min-width: 1024px) { .install-card { display: none; } .install-card.ask-card { display: flex; } }
/* Grow your search: roles that would find more jobs (Job search page rows, Home card) */
.grow-hint { align-items: flex-start; flex-wrap: wrap; row-gap: 10px; }
.grow-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 600; }
.grow-name .status { text-transform: none; }
.cell-main small.grow-ex { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow-acts { display: flex; gap: 8px; flex: none; align-self: center; }
.install-card.grow-card { padding-inline-end: 12px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .grow-acts { width: 100%; }
  .grow-acts button, .grow-card .btn { flex: 1; }
  .grow-card .install-card-text { flex-basis: calc(100% - 56px); }
}
/* Desktop never shows the install / notification cards before it, so they must not hide it either. */
@media (min-width: 1024px) { .install-card.ask-card.grow-card { display: flex; } }
/* Notifications: Home card icon, and the per-device controls on the Job search page (app.js [data-push]) */
.install-card .push-card-icon { width: 44px; height: 44px; border-radius: 12px; }
.install-card .push-card-icon .ic { width: 22px; height: 22px; }
.push-panel .cell .btn { flex: none; }
.group.push-panel > .cell::before { content: none; }  /* one state shows at a time: no row dividers */
.push-actions { justify-content: flex-end; gap: 8px; padding-top: 0; min-height: 0; }
/* Landing: quiet "Install the app" link under the buttons */
.install-link { min-height: 36px; margin-top: 14px; padding: 0 4px; gap: 6px; background: none; color: var(--accent);
  font-size: 15px; font-weight: 600; }
.install-link .ic { width: 17px; height: 17px; }
@media (hover: hover) { .install-link:hover { background: none; text-decoration: underline; text-underline-offset: 3px; } }
/* iPhone install guide (bottom sheet) */
.install-head { display: flex; align-items: center; gap: 14px; margin: 4px 4px 18px; }
.install-head .app-icon { width: 56px; height: 56px; border-radius: 14px; }
.install-head h2 { font-size: 19px; line-height: 1.25; }
.install-head p { color: var(--text-2); font-size: 14px; margin: 3px 0 0; }
.install-steps { list-style: none; margin: 0 0 18px; padding: 0; border-radius: var(--r); background: var(--fill-soft); }
.install-steps li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px;
  font-size: 15.5px; line-height: 1.35; }
.install-steps li + li::before { content: ""; position: absolute; top: 0; inset-inline: 52px 0; height: 1px; background: var(--hair); }
.install-steps li > span:nth-child(2) { flex: 1; min-width: 0; }
.step-badge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--on-ink); font-size: 13.5px; font-weight: 700; }
.install-glyph { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--card); color: var(--accent); }
.install-glyph.app-icon { background: #0b1f4b; }
/* Offline page (made by the service worker) */
.offline-icon { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 24px; }
.offline-en { margin-top: 10px !important; color: var(--text-3) !important; font-size: 14px !important; }
/* Running installed: no text callouts / selection on app chrome, like a native app */
@media (display-mode: standalone) {
  .tabbar, .sidebar, .top, .act, .btn, button, .cell, .sheet .grabber { -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; }
}

/* --- plans (plans.html, dashboard banner, locked features) ---------------------------------------------------- */
.plan-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r);
  background: var(--card); color: var(--text); text-decoration: none; }
.blk.plan-banner { margin: 10px 0 0; }
.plan-banner .cell-main { flex: 1; min-width: 0; }
.plan-banner .btn { flex: none; }
.act.locked { color: var(--text-3); }
.locked-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r);
  background: var(--card); color: var(--text-2); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.locked-row > span { flex: 1; min-width: 0; }
.locked-row .ic { width: 18px; height: 18px; }
/* Free: the AI card is a link to Plans. Pale accent card + accent edge, so it still reads as something to tap
   (it was faded grey, owner 2026-10-29); the solid blue is kept for the tools that run. */
.ai-card.locked { text-decoration: none; background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding-inline-end: 72px; }
.ai-card.locked .cell-icon { background: var(--accent); color: #fff; }
.ai-card.locked b { color: var(--accent); }
@media (hover: hover) { .ai-card.locked:hover { background: var(--accent-soft-2);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent); } }
.ai-lock { position: absolute; top: 12px; inset-inline-end: 12px; }
.section-title a.pill { text-decoration: none; }
.badge.s-missed, .pill.s-missed { background: var(--fill); color: var(--text-2); }
.plan-form { padding-top: 0; }

/* --- Inbox: employers' replies (inbox.html; the tag on job rows, macros job_row) -------------------------- */
details.reply > summary { list-style: none; cursor: pointer; }
details.reply > summary::-webkit-details-marker { display: none; }
@media (hover: hover) { details.reply > summary:hover { background: var(--pill-on); } }
details.reply + details.reply { border-top: 1px solid var(--hair); }
details.reply[open] > summary .feed-sub { white-space: normal; }
.thumb.sm { width: 42px; height: 42px; border-radius: 10px; font-size: 17px; }
.reply-who { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.reply-who bdi, .reply-job bdi { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
details.reply.new .reply-who, details.reply.new .feed-sub { color: var(--text); font-weight: 650; }
.new-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--blue); }
.reply-job { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.reply-job .ic { width: 13px; height: 13px; flex: none; }
.reply-body { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; margin: 0;
  padding: 2px 16px 12px 72px; color: var(--text-2); font-size: 14.5px; line-height: 1.55;
  /* An email may be English, Hebrew or both: each paragraph reads and aligns in the direction of its own first letter. */
  unicode-bidi: plaintext; text-align: start; }
[dir="rtl"] .reply-body { padding: 2px 72px 12px 16px; }
.reply-body a { text-decoration: underline; text-underline-offset: 2px; }
/* An HTML email on white, as its sender made it (mail.page); app.js sets the height. */
.reply-frame { padding: 2px 16px 12px; padding-inline-start: 72px; }
.reply-frame iframe { display: block; width: 100%; height: 160px; border: 1px solid var(--hair); border-radius: 10px;
  background: #fff; }
@media (max-width: 600px) { .reply-frame { padding-inline-start: 16px; } }
.reply-from { margin: 0; padding: 0 16px 12px; padding-inline-start: 72px; color: var(--text-3); font-size: 12.5px;
  overflow-wrap: anywhere; }
.reply-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; padding-inline-start: 72px; }
.reply-actions .ic { width: 16px; height: 16px; }
/* An admin's answers from the business address (sent from the Inbox), then the form for another one. */
.reply-answer { margin: 0 16px 12px; margin-inline-start: 72px; padding: 10px 12px; border-radius: 10px;
  background: var(--fill-soft); }
.reply-answer-head { margin: 0 0 4px; color: var(--text-3); font-size: 12.5px; }
.reply-answer-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); font-size: 14.5px;
  line-height: 1.55; unicode-bidi: plaintext; text-align: start; }
.reply-answer-head .ic { width: 13px; height: 13px; vertical-align: -2px; }
/* Writing email like Gmail (compose.html): the form under a message, opened by Reply / Reply all / Forward. */
.compose-in { border-top: 1px solid var(--hair); padding-top: 4px; }
.compose-in .compose-fields, .compose-in .compose-title { padding-inline-start: 56px; }
.compose-title { margin: 8px 16px 0; font-weight: 650; }
.compose-from { margin: 8px 16px 0; color: var(--text-3); font-size: 13px; overflow-wrap: anywhere; }
.compose-more > summary { margin: 0 16px; padding: 4px 0; color: var(--accent); font-size: 13px; font-weight: 600;
  cursor: pointer; list-style: none; }
.compose-more > summary::-webkit-details-marker { display: none; }
.field > label.compose-files { display: flex; align-items: center; gap: 6px; }
.compose input[type=file] { max-width: 100%; color: var(--text-3); font: inherit; font-size: 13px; }
.compose input[type=file]::file-selector-button { margin-inline-end: 10px; min-height: 34px; padding: 0 14px;
  border: 0; border-radius: 10px; background: var(--fill); color: var(--text); font: inherit; font-weight: 600;
  cursor: pointer; }
.compose-files .ic { width: 15px; height: 15px; }
.compose-note { margin: -4px 16px 8px; color: var(--text-3); font-size: 12.5px; }
.seg.mail-boxes a { height: 32px; font-size: 13px; text-transform: none; }
.mail-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 16px 12px; padding-inline-start: 72px; }
.mail-files .btn { max-width: 100%; }
.mail-files bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .reply-answer { margin-inline-start: 16px; }
  .compose-in .compose-fields, .compose-in .compose-title { padding-inline-start: 0; }
  .mail-files, .compose-in .reply-actions { padding-inline-start: 16px; }
}
.empty .btn { margin-top: 12px; }
.reply-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.reply-tag .ic { color: currentColor; }
:is(.pill, .reply-tag).k-interview { color: var(--green); }
:is(.pill, .reply-tag).k-rejection, :is(.pill, .reply-tag).k-bounce { color: var(--red); }
:is(.pill, .reply-tag).k-reply { color: var(--purple); }
:is(.pill, .reply-tag).k-received { color: var(--blue); }
:is(.pill, .reply-tag).k-action { color: var(--orange); }
.pill.k-interview { background: var(--green-bg); }
.pill.k-rejection, .pill.k-bounce { background: var(--red-bg); }
.pill.k-reply { background: var(--purple-bg); }
.pill.k-received { background: var(--blue-bg); }
.pill.k-action { background: var(--orange-bg); }
@media (max-width: 520px) {
  .reply-body, .reply-from, .reply-actions, [dir="rtl"] .reply-body { padding-inline: 16px; }
}

/* ============================================================================================================
   v4 — Wolt (2026-10-12; Mobbin reference: Wolt Delivery iOS). Owner: "feel more alive and professional".
   White pages, big heavy titles that hand over to a compact bar on scroll, "See all" pills, bordered white boxes
   for lists and forms, solid accent buttons and pale-accent secondary ones, horizontal card carousels, a
   flat bottom tab bar, a full-width bottom sheet, and the order-tracking dial on Home. Same palette tokens.
   ============================================================================================================ */
:root {
  --bg: #ffffff; --card: #ffffff; --fill: #f1f3f7; --fill-2: #e4e8ef; --fill-soft: #f6f7fa;
  --hair: rgba(11, 18, 32, .07); --hair-2: rgba(11, 18, 32, .12);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, #ffffff);
  --accent-soft-2: color-mix(in srgb, var(--accent) 16%, #ffffff);
  /* Call-to-action fill (primary buttons, AI cards). Light: the accent itself. */
  --cta: var(--accent); --cta-hover: color-mix(in srgb, var(--accent) 90%, #ffffff); --cta-edge: 0 0 #0000;
  --cta-glow: 0 10px 30px color-mix(in srgb, var(--accent) 35%, transparent);
  --ai-bg: var(--cta); --ai-bg-hover: var(--cta-hover); --ai-line: transparent; --ai-line-hover: transparent;
  --ai-title: #fff; --ai-text: rgba(255, 255, 255, .86); --ai-chip: #fff; --ai-chip-ic: var(--accent); --ai-chev: #fff;
  --ai-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
  --shadow-card: 0 1px 2px rgba(11, 18, 32, .05), 0 4px 16px rgba(11, 18, 32, .07);
  --shadow-press: 0 1px 2px rgba(11, 18, 32, .06);
  --r-lg: 18px; --r: 14px; --r-sm: 10px;
  --tabbar: 58px;
}
.page-dashboard, .page-applications, body.public { --bg: #ffffff; --card: #ffffff; --fill: #f1f3f7; --fill-2: #e4e8ef; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) :is(.page-dashboard, .page-applications, body.public) {
    --bg: #070b14; --card: #0e1524; --fill: #18213a; --fill-2: #222d47; --fill-soft: #111a2c;
    --accent-soft: color-mix(in srgb, var(--accent) 16%, #070b14);
    --accent-soft-2: color-mix(in srgb, var(--accent) 24%, #070b14);
    --shadow-card: 0 0 0 1px rgba(226, 232, 245, .07), 0 6px 20px rgba(0, 0, 0, .35);
    --shadow-press: 0 0 0 1px rgba(226, 232, 245, .07);
    /* Dark (owner 2026-11-01: the pastel #5b9bff fill was too vibrant): a deeper blue with a soft top highlight for
       buttons, no coloured glow; AI cards are a blue-tinted card with a hairline accent edge, a solid icon chip and an
       accent chevron, so they read as tappable without a neon block. */
    --cta: #2b5fd6; --cta-hover: #3469e0; --cta-edge: inset 0 1px 0 rgba(255, 255, 255, .12);
    --cta-glow: 0 8px 24px rgba(0, 0, 0, .45);
    --ai-bg: color-mix(in srgb, #2b5fd6 20%, var(--card)); --ai-bg-hover: color-mix(in srgb, #2b5fd6 28%, var(--card));
    --ai-line: color-mix(in srgb, var(--accent) 38%, transparent); --ai-line-hover: color-mix(in srgb, var(--accent) 50%, transparent);
    --ai-title: var(--text); --ai-text: var(--text-2); --ai-chip: #2b5fd6; --ai-chip-ic: #fff; --ai-chev: var(--accent);
    --ai-shadow: none;
  }
}
:root[data-theme="dark"], :root[data-theme="dark"] :is(.page-dashboard, .page-applications, body.public) {
  --bg: #070b14; --card: #0e1524; --fill: #18213a; --fill-2: #222d47; --fill-soft: #111a2c;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, #070b14);
  --accent-soft-2: color-mix(in srgb, var(--accent) 24%, #070b14);
  --shadow-card: 0 0 0 1px rgba(226, 232, 245, .07), 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-press: 0 0 0 1px rgba(226, 232, 245, .07);
  /* Dark (owner 2026-11-01: the pastel #5b9bff fill was too vibrant): a deeper blue with a soft top highlight for
     buttons, no coloured glow; AI cards are a blue-tinted card with a hairline accent edge, a solid icon chip and an
     accent chevron, so they read as tappable without a neon block. */
  --cta: #2b5fd6; --cta-hover: #3469e0; --cta-edge: inset 0 1px 0 rgba(255, 255, 255, .12);
  --cta-glow: 0 8px 24px rgba(0, 0, 0, .45);
  --ai-bg: color-mix(in srgb, #2b5fd6 20%, var(--card)); --ai-bg-hover: color-mix(in srgb, #2b5fd6 28%, var(--card));
  --ai-line: color-mix(in srgb, var(--accent) 38%, transparent); --ai-line-hover: color-mix(in srgb, var(--accent) 50%, transparent);
  --ai-title: var(--text); --ai-text: var(--text-2); --ai-chip: #2b5fd6; --ai-chip-ic: #fff; --ai-chev: var(--accent);
  --ai-shadow: none;
}
body::before { content: none; }

/* Titles: big and heavy (Wolt "Restaurants", "Hi Sam!"); section titles bold with a "See all" pill. */
.top { margin: 6px 0 20px; }
.top h1 { font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.lead { margin-top: -10px; }
.section-title.big { align-items: center; margin: 32px 0 12px; }
.section-title.big h2 { font-size: 22px; letter-spacing: -.03em; }
.see-all { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); font-size: 14.5px !important; font-weight: 600 !important;
  transition: background .15s, transform .15s var(--ease); }
.see-all:active { transform: scale(.95); }
@media (hover: hover) { .see-all:hover { background: var(--accent-soft-2); } }
.section-title:not(.big) h2 { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.section-title:not(.big) { margin: 30px 2px 10px; }
.round-btn { width: 40px; height: 40px; background: var(--fill); border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Compact title bar (phone): fades in when the big title scrolls away. */
.mini-bar { position: fixed; z-index: 35; inset: 0 0 auto; height: calc(var(--safe-t) + 50px);
  padding-top: var(--safe-t); display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .3s var(--ease); }
.mini-bar span { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
body.scrolled .mini-bar { opacity: 1; transform: none; }
@media (min-width: 1024px) { .mini-bar { display: none; } }

/* Lists and forms: white boxes with a hairline border (Wolt's "Wolt+ / Order history / Credits" box). */
.group { background: var(--card); border: 1px solid var(--hair-2); border-radius: var(--r); }
.group > :is(.cell, .field, .toggle, .step) ~ :is(.cell, .field, .toggle, .step)::before { inset-inline-end: 0; }
.cell { min-height: 56px; }
.cell-main { font-weight: 500; }
.cell-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--fill); }
.cell-icon .ic { width: 17px; height: 17px; }
.group > .cell:has(.cell-icon) ~ .cell::before { inset-inline-start: 64px; }
a.cell, button.cell, .step, label.toggle { transition: background .15s, transform .2s var(--ease); }
a.cell:active, button.cell:active, .step:active { background: var(--fill-soft); }
.sheet .group { background: var(--card); }

/* Buttons: solid accent call to action, pale accent secondary (Wolt "Order together" / "See all"). */
button, .btn { border-radius: 12px; min-height: 50px; }
.btn.sm, button.sm { border-radius: 10px; }
.btn.primary, button.primary { background: var(--cta); color: #fff; box-shadow: var(--cta-edge); }
@media (hover: hover) { .btn.primary:hover, button.primary:hover { background: var(--cta-hover); } }
/* secondary buttons (no variant class): pale accent */
:is(button, .btn):not(:where(.primary, .accent, .danger, .ghost, .cell, .act, .install-x, .icon-btn, .ai-card, .role-x,
  .install-link, .rs-chip, .rs-card, .company-opt, .job-menu-item, .shot-x)) { background: var(--accent-soft); color: var(--accent); }
@media (hover: hover) {
  :is(button, .btn):not(:where(.primary, .accent, .danger, .ghost, .cell, .act, .install-x, .icon-btn, .ai-card, .role-x,
    .install-link, .rs-chip, .rs-card, .company-opt, .job-menu-item, .shot-x)):hover { background: var(--accent-soft-2); } }
/* AI action cards (Fill in from my resume, Write it with AI, Suggest roles…) are solid accent buttons like the primary
   button: white title and text, white icon chip, a chevron at the end (owner 2026-10-29: a pale card still did not
   read as a button). Locked (Free) and disabled cards stay grey. */
.ai-card:not(.locked) { background: var(--ai-bg); border: 1px solid var(--ai-line); color: var(--ai-title);
  box-shadow: var(--ai-shadow); padding-inline-end: 40px; }
.ai-card:not(.locked)::before { background: rgba(255, 255, 255, .14); }
.ai-card:not(.locked) .cell-icon { background: var(--ai-chip); color: var(--ai-chip-ic); }
.ai-card:not(.locked) b { color: var(--ai-title); }
.ai-card:not(.locked) small { color: var(--ai-text); }
.ai-card:not(.locked)::after { content: ""; position: absolute; inset-inline-end: 18px; top: 50%; width: 8px; height: 8px;
  border: solid var(--ai-chev); border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
.ai-card:not(.locked):dir(rtl)::after { transform: translateY(-50%) rotate(-135deg); }
@media (hover: hover) { .ai-card:not(.locked):hover { background: var(--ai-bg-hover); border-color: var(--ai-line-hover); } }
.ai-card:not(.locked)[aria-expanded="true"] { border-color: var(--ai-line-hover); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.ai-card:not(.locked)[aria-expanded="true"]::after { transform: translateY(-75%) rotate(135deg); }
button.ai-card:not(.locked).is-busy { color: var(--ai-title) !important; border-color: var(--ai-line); }
.ai-card:disabled { background: var(--fill); border-color: transparent; box-shadow: none; filter: none; }
.ai-card:disabled .cell-icon { background: var(--fill-2); color: var(--text-2); }
.ai-card:disabled b { color: var(--text-2); }
.ai-card:disabled small { color: var(--text-2); }
.ai-card:disabled::after { border-color: var(--text-3, var(--text-2)); }
.plan-banner .btn:not(.primary), .install-card .btn:not(.primary) { background: var(--card); }
.dock button { box-shadow: var(--cta-edge), var(--cta-glow); }

/* Chips and filters: selected = accent outline on pale accent (Wolt "Rating" filter). */
.seg a, .chip-check { border-color: var(--hair-2); background: var(--card); }
.seg a.on, .chip-check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.seg a.on em { color: var(--accent); opacity: .7; }

/* Pale accent panels for offers and tips (Wolt "50% off your first 2 orders"). */
.plan-banner, .install-card, .note.info { background: var(--accent-soft); border: 0; }
.plan-banner .cell-icon, .install-card .cell-icon { background: var(--card); color: var(--accent); }
.plan-banner { transition: transform .2s var(--ease); }
.plan-banner:active { transform: scale(.98); }

/* Bottom tab bar: a floating frosted-glass panel (monday.com iOS): inset from the screen edges, rounded, the page
   blurred through it, a light rim and a soft shadow. The active tab sits on a pale accent pill that slides to the
   new tab on every page change (the tab-pill view transition, with a small overshoot; app.js slides it where
   cross-page transitions aren't supported) and its icon pops. */
.tabbar { left: 12px; right: 12px; bottom: calc(var(--safe-b) + 10px); transform: none; width: auto; max-width: 480px;
  margin: 0 auto; height: var(--tabbar); padding: 6px; border-radius: 24px; gap: 0;
  background: var(--glass); border: 1px solid var(--glass-rim); box-shadow: var(--shadow-glass);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
.tabbar a { border-radius: 18px; color: var(--text-3); font-size: 11px; font-weight: 500; gap: 3px; }
.tabbar a .ic { width: 23px; height: 23px; }
.tabbar a.on { color: var(--accent); font-weight: 700; }
.tabbar a.on .ic { stroke-width: 2.2; animation: tab-pop .5s var(--spring); }
.tab-pill { background: var(--glass-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  transition: transform .45s var(--spring); }
@keyframes tab-pop { 40% { transform: translateY(-3px) scale(1.12); } }
::view-transition-group(tab-pill) { animation-duration: .5s; animation-timing-function: cubic-bezier(.34, 1.22, .64, 1); }
:root {
  --tabbar: 64px;
  --glass: rgba(255, 255, 255, .72); --glass-rim: rgba(255, 255, 255, .85);
  --glass-pill: color-mix(in srgb, var(--accent) 11%, transparent);
  --shadow-glass: 0 0 0 .5px rgba(11, 18, 32, .10), 0 10px 32px rgba(11, 18, 32, .13), 0 2px 6px rgba(11, 18, 32, .05),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(18, 26, 44, .72); --glass-rim: rgba(226, 232, 245, .10);
    --glass-pill: color-mix(in srgb, var(--accent) 22%, transparent);
    --shadow-glass: 0 12px 36px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}
:root[data-theme="dark"] {
  --glass: rgba(18, 26, 44, .72); --glass-rim: rgba(226, 232, 245, .10);
  --glass-pill: color-mix(in srgb, var(--accent) 22%, transparent);
  --shadow-glass: 0 12px 36px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.content { padding-bottom: calc(var(--tabbar) + var(--safe-b) + 40px); }
.dock { bottom: calc(var(--tabbar) + var(--safe-b) + 22px); }
/* Desktop has the sidebar, no tab bar: no room kept for it (the Save bar floated 70px above the window edge). */
@media (min-width: 1024px) { .content { padding-bottom: 72px; } .dock { bottom: 24px; } }

/* Bottom sheet: full width, attached to the bottom, round close (Wolt). */
.sheet { left: 0; right: 0; bottom: 0; max-width: 560px; border-radius: 22px 22px 0 0;
  padding-bottom: calc(var(--safe-b) + 18px); }
.sheet-me { background: var(--fill-soft); }

/* Desktop sidebar: the current page on pale accent. */
@media (min-width: 1024px) {
  .side-pill { background: var(--accent-soft); }
  .side-nav a.on, .side-nav a.on .ic { color: var(--accent); }
  .side-me { background: var(--fill-soft); }
  .top h1 { font-size: 40px; }
}

/* --- Home -------------------------------------------------------------------------------------------- */
/* Status card = Wolt's order tracking: white card, big dial in the middle, the sentence under it, and the
   applications count as a footer row. */
.hero { background: var(--card); background-image: none !important; color: var(--text); box-shadow: var(--shadow-card);
  padding: 16px 18px 6px; text-align: center; }
.hero-top { justify-content: center; margin-bottom: 8px; }
.hero .chip { background: var(--fill); color: var(--text-2); }
.hero .chip.state-running { background: var(--accent-soft); color: var(--accent); }
.hero .chip.state-running .dot { animation: ping-accent 1.6s infinite; }
.hero .chip.state-queued, .hero .chip.state-waiting { background: color-mix(in srgb, var(--gold) 16%, var(--card));
  color: color-mix(in srgb, var(--gold) 70%, var(--text)); }
@keyframes ping-accent { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.hero .dial { width: 196px; height: 196px; margin: 4px auto 0; }
.dial-ticks { stroke-width: 10; stroke-dasharray: 1.1 1.9; }
.dial-track { stroke: var(--fill-2); }
.dial-fill { stroke: var(--accent); }
.dial.t-wait .dial-fill { stroke: var(--gold); }
.dial.k-done .dial-fill { stroke: var(--green); }
.dial-center { max-width: 120px; }
.dial-center b { font-size: 46px; font-weight: 700; letter-spacing: -.04em; color: var(--text); }
.dial-center small { color: var(--text-2); font-size: 12.5px; margin-top: 6px; }
.dial.k-off .dial-center b { font-size: 26px; color: var(--text-3); }
.dial.k-done .dial-check { color: var(--green); }
.dial-check .ic { width: 64px; height: 64px; }
.hero-live { align-items: center; border-top: 0; margin: 10px auto 0; padding: 0 8px; max-width: 420px; }
.hero-live b { font-size: 19px; letter-spacing: -.025em; }
.hero-live span { color: var(--text-2); font-size: 14.5px; }
.hero-stat { display: flex; align-items: center; gap: 10px; margin: 16px -18px 0; padding: 14px 18px;
  border-top: 1px solid var(--hair); color: var(--text); text-align: start; transition: background .15s; }
.hero-stat:active { background: var(--fill-soft); }
.hero-stat .hero-num { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.04em; }
.hero-stat .hero-label { flex: 1; margin: 0; color: var(--text-2); font-size: 15px; font-weight: 500; }
@media (max-width: 380px) { .hero .dial { width: 168px; height: 168px; } .dial-center b { font-size: 38px; } }
@media (min-width: 1024px) { .hero .dial { width: 220px; height: 220px; } .dial-center b { font-size: 52px; }
  .hero-stat .hero-num { font-size: 38px; } }

/* Run buttons: pale accent tiles, the main one solid (Wolt "Delivery 40-50 min"). */
.acts { gap: 8px; margin-top: 12px; }
.act { background: var(--accent-soft); color: var(--accent); border-radius: 14px; min-height: 70px; }
@media (hover: hover) { .act:hover { background: var(--accent-soft-2); } }
.act.primary { background: var(--cta); color: #fff; box-shadow: var(--cta-edge); }
@media (hover: hover) { .act.primary:hover { background: var(--cta-hover); } }
.act.locked { background: var(--fill); color: var(--text-3); }
.act:disabled { background: var(--fill); color: var(--text-3); opacity: 1; }

/* Overview: Wolt category cards (count big, label under). */
.cats { gap: 10px; }
.cat { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic num" "label label"; align-items: center;
  gap: 10px 8px; padding: 14px; border: 0; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-card); }
.cat-ic { grid-area: ic; width: 38px; height: 38px; border-radius: 12px; }
.cat-ic .ic { width: 19px; height: 19px; }
.cat b { grid-area: num; justify-self: end; font-size: 28px; letter-spacing: -.04em; }
.cat-label { grid-area: label; font-size: 14.5px; color: var(--text-2); }
.cat:active { transform: scale(.97); box-shadow: var(--shadow-press); }
@media (hover: hover) { .cat:hover { background: var(--card); } }
@media (min-width: 700px) { .page-dashboard .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) { .page-dashboard .cats.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .page-dashboard .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Recent / Missed: a horizontal carousel of job cards (Wolt venue cards: colour banner with a tag, white body). */
.job-list.carousel { flex-direction: row; gap: 12px; overflow-x: auto; margin: -6px -16px 0; padding: 6px 16px 18px;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.job-list.carousel::-webkit-scrollbar { display: none; }
.carousel > .job, .carousel > .locked-row { flex: none; width: 232px; scroll-snap-align: start; flex-direction: column;
  gap: 0; padding: 0; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s; }
.carousel > .job::before { content: none; }
.carousel > .job:active { transform: scale(.97); box-shadow: var(--shadow-press); opacity: 1; }
.carousel .thumb { width: 100%; height: 104px; margin: 0; border-radius: 0; font-size: 40px; }
.carousel .thumb .badge { left: auto; bottom: auto; top: 10px; inset-inline-start: 10px; transform: none; height: 24px;
  padding: 0 9px; border-radius: 8px; font-size: 12px; max-width: none; box-shadow: none; }
.carousel .job-main { padding: 12px 14px 14px; gap: 3px; }
.carousel .job-title { font-size: 16px; min-height: 2.56em; }
.carousel .job-detail { display: none; }
.carousel .meta { font-size: 13px; }
.carousel > .empty { flex: 1; }
.carousel > .locked-row { justify-content: center; align-items: center; gap: 8px; padding: 18px; text-align: center;
  background: var(--accent-soft); color: var(--accent); box-shadow: none; }
/* Bleed to the screen edge through the page gutter (12px small phones, 24px tablets), never past it. */
@media (max-width: 380px) { .job-list.carousel { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; } }
@media (min-width: 700px) and (max-width: 1023px) {
  .job-list.carousel { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
}
@media (min-width: 1024px) { .job-list.carousel { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
.page-dashboard .carousel > .job.is-new { border-radius: var(--r); }

/* Applications list rows: rounded thumbnail, bold title (Wolt search results). */
.job { gap: 14px; }
.thumb { border-radius: 14px; }
.job-title { font-weight: 700; letter-spacing: -.02em; }

/* --- Motion on every page: blocks rise in one after another; cards press. ----------------------------- */
.page > :is(.section-title, .group, .blk, form, .seg, .job-list, .note, .stack, .empty, details) {
  animation: rise .5s var(--ease) backwards; }
.page > :nth-child(3) { animation-delay: 30ms; } .page > :nth-child(4) { animation-delay: 60ms; }
.page > :nth-child(5) { animation-delay: 90ms; } .page > :nth-child(6) { animation-delay: 120ms; }
.page > :nth-child(7) { animation-delay: 150ms; } .page > :nth-child(n+8) { animation-delay: 180ms; }
.dash .blk { animation: rise .5s var(--ease) backwards; }
.dash .o-actions { animation-delay: 60ms; } .dash .o-setup, .dash .o-tiles { animation-delay: 110ms; }
.dash .o-recent { animation-delay: 160ms; } .dash :is(.o-auto, .o-live, .o-cycles) { animation-delay: 210ms; }
.page-dashboard .carousel > * { animation: card-in .55s var(--ease) backwards; }
.page-dashboard .carousel > :nth-child(3) { animation-delay: 220ms; } .page-dashboard .carousel > :nth-child(4) { animation-delay: 270ms; }
.page-dashboard .carousel > :nth-child(n+5) { animation-delay: 320ms; }
@keyframes card-in { from { opacity: 0; transform: translateX(24px) scale(.97); } }
[dir="rtl"] .page-dashboard .carousel > * { animation-name: card-in-rtl; }
@keyframes card-in-rtl { from { opacity: 0; transform: translateX(-24px) scale(.97); } }

/* --- v4 public pages: landing + sign-in (Wolt language: heavy type, accent CTAs, white cards, pale accent art) --- */
.site-bar { position: sticky; top: 0; z-index: 30; max-width: none; width: auto; margin: 0 -20px; padding: 10px 20px;
  padding-top: calc(var(--safe-t) + 10px); transition: background .25s, box-shadow .25s, backdrop-filter .25s; }
body.scrolled .site-bar { background: color-mix(in srgb, var(--bg) 86%, transparent); box-shadow: 0 1px 0 var(--hair);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); }
.site-bar > * { position: relative; }
.page-landing .public-main { padding-top: 0; }
.lang-switch { transition: background .15s, transform .15s var(--ease); }
.lang-switch:active { transform: scale(.95); }

.landing { animation: none; }
.eyebrow { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; margin: 0 0 18px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 600; }
.land-copy h1 { font-weight: 700; letter-spacing: -.04em; }
.land-copy > * { animation: rise .7s var(--ease) backwards; }
.land-copy > :nth-child(2) { animation-delay: 70ms; } .land-copy > :nth-child(3) { animation-delay: 140ms; }
.land-copy > :nth-child(4) { animation-delay: 210ms; } .land-copy > :nth-child(n+5) { animation-delay: 280ms; }
.land-ctas .btn { min-height: 54px; padding: 0 28px; font-size: 16.5px; }
.land-ctas .btn.primary { box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent); }
.perks span { display: inline-flex; align-items: center; gap: 5px; }
.perks span + span::before { content: none; }
.perks .ic { width: 15px; height: 15px; stroke-width: 2.6; color: var(--green); }
.perks { gap: 6px 16px; }

/* Art panel: pale accent, a big soft ring behind the phone (the dial's shape), the phone rises in. */
.land-art { display: flex; justify-content: center; align-items: flex-start; height: 470px; padding-top: 36px;
  border-radius: 28px; background: var(--accent-soft); background-image: none; overflow: hidden; isolation: isolate; }
.land-art::before, .auth-art::before { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; top: 50px;
  left: 50%; margin-left: -230px; border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 0 1.1deg, transparent 1.1deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 60.5% 70%, transparent 70.5%);
  mask: radial-gradient(circle, transparent 0 60%, #000 60.5% 70%, transparent 70.5%);
  animation: slow-spin 90s linear infinite; }
@keyframes slow-spin { to { transform: rotate(360deg); } }
.phone { animation: phone-rise .9s .15s var(--ease) backwards; background: #0b1220; }
.phone-screen { background: var(--bg); padding: 44px 12px 12px; position: relative; }
.mock-top { justify-content: space-between; margin-bottom: 10px; }
.mock-top b { font-size: 19px; letter-spacing: -.03em; }
.mock-card { display: flex; flex-direction: column; align-items: center; padding: 10px 10px 0; border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow-card); text-align: center; }
.mock-card .chip { height: 20px; padding: 0 8px; font-size: 9.5px; border-radius: 6px; gap: 5px;
  background: color-mix(in srgb, var(--gold) 16%, var(--card)); color: color-mix(in srgb, var(--gold) 70%, var(--text)); }
.mock-card .chip .dot { width: 5px; height: 5px; }
.mock-dial { width: 118px; height: 118px; margin: 6px 0 2px; }
.mock-dial .dial-center b { font-size: 28px; color: var(--text); }
.mock-dial .dial-center small { font-size: 8.5px; margin-top: 3px; max-width: 70px; }
.mock-dial .dial-ticks { stroke-width: 11; }
.mock-stat { display: flex; align-items: center; gap: 7px; align-self: stretch; margin: 8px -10px 0; padding: 8px 12px;
  border-top: 1px solid var(--hair); font-size: 10.5px; color: var(--text-2); text-align: start; }
.mock-stat b { display: inline-block; font-size: 20px; color: var(--text); letter-spacing: -.04em; }
.mock-stat b.bump { animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); }
.mock-title { font-size: 14px; margin: 12px 0 2px; }
.mock-list { display: flex; flex-direction: column; }
.phone .job { padding: 7px 0 9px; }
.phone .job-title { font-weight: 700; }
.phone.playing .job { display: none; }
.phone.playing .job.in { display: flex; animation: row-in .55s var(--ease) both, row-lit 2.2s ease-out; border-radius: 10px; }
.demo-toast { position: absolute; z-index: 3; top: 40px; left: 10px; right: 10px; display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 12px; background: var(--toast-ok); color: #fff; font-size: 10.5px; font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2); opacity: 0; transform: translateY(-12px); pointer-events: none; }
.demo-toast .ic { width: 12px; height: 12px; stroke-width: 3; color: #fff; }
.demo-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-toast.show { animation: demo-toast 2.2s var(--ease) both; }
@keyframes demo-toast { 0% { opacity: 0; transform: translateY(-12px) scale(.96); } 14%, 78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-12px) scale(.96); } }

/* Steps and features: white cards (Wolt), round pale-accent icons, lift on hover. */
.steps3, .feats { gap: 14px; }
.steps3 li, .feat { position: relative; padding: 22px 20px 22px; border: 0; border-radius: 20px; background: var(--card);
  box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s; }
@media (hover: hover) { .steps3 li:hover, .feat:hover { transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(11, 18, 32, .05), 0 16px 36px rgba(11, 18, 32, .10); } }
.step-n { position: absolute; top: 20px; inset-inline-end: 20px; font-size: 44px; color: var(--fill-2); letter-spacing: -.05em; }
.step-n::before { content: "0"; }
.step-ic, .feat-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); }
.step-ic .ic, .feat-ic .ic { width: 22px; height: 22px; stroke-width: 2; }
.steps3 b, .feat b { font-size: 18px; font-weight: 700; }
.land-h2 { font-weight: 700; letter-spacing: -.035em; margin-bottom: 22px; }

/* Call to action: solid accent band with a white button. */
.land-cta { background: var(--accent); background-image: none !important; color: #fff; }
.land-cta p { color: rgba(255, 255, 255, .82); }
.land-cta .btn { background: #fff; color: var(--accent); }
@media (hover: hover) { .land-cta .btn:hover { background: #fff; transform: translateY(-2px); } }
.land-cta::after { content: ""; position: absolute; z-index: -1; inset: auto -90px -170px auto; width: 380px; height: 380px;
  border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 1.1deg, transparent 1.1deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 60.5% 70%, transparent 70.5%);
  mask: radial-gradient(circle, transparent 0 60%, #000 60.5% 70%, transparent 70.5%);
  animation: slow-spin 120s linear infinite; pointer-events: none; }
.land-cta { position: relative; overflow: hidden; isolation: isolate; }
[dir="rtl"] .land-cta::after { inset: auto auto -160px -80px; }

/* Scroll reveal (browsers with scroll-driven animations; others just show the content). */
@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes reveal { from { opacity: 0; transform: translateY(36px) scale(.98); } }
}

/* Sign-in: the form, and on wide screens the phone picture beside it. */
.auth-split { flex: 1; display: flex; width: 100%; }
.auth-art { display: none; }
.auth-hero h1 { font-weight: 700; letter-spacing: -.04em; }
.auth-actions .btn.primary:has(.ic-color), .auth-actions button.primary:has(.ic-color) { background: var(--card);
  color: var(--text); box-shadow: inset 0 0 0 1.5px var(--hair-2), var(--shadow-card); }
@media (hover: hover) { .auth-actions .btn.primary:has(.ic-color):hover, .auth-actions button.primary:has(.ic-color):hover {
  filter: none; box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-card); } }
#email-form input { background: var(--field-bg); }
.auth-actions > * { animation: rise .6s var(--ease) backwards; }
.auth-actions > :nth-child(n+3) { animation-delay: 80ms; } .auth-actions > :nth-child(n+5) { animation-delay: 160ms; }
@media (min-width: 1024px) {
  .page-login .public-main { padding: 24px 32px 32px; }
  .page-login .public-bar { max-width: none; }
  .auth-split { gap: 56px; align-items: stretch; max-width: 1160px; margin: 0 auto; }
  .auth-art { position: relative; display: flex; justify-content: center; align-items: center; flex: 1.1; min-height: 640px;
    border-radius: 28px; background: var(--accent-soft); overflow: hidden; isolation: isolate; }
  .auth-art::before { top: 50%; margin-top: -220px; }
  .auth { flex: 1; justify-content: center; }
  .auth-hero { flex: 0; padding-top: 0; }
}
@media (min-width: 700px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .land-art { height: 600px; padding-top: 64px; }
  .land-hero { min-height: calc(100vh - 80px); padding-top: 24px; }
}
@media (min-width: 1024px) {
  .page-landing .site-bar { margin-inline: -40px; padding-inline: max(40px, calc((100% - 1040px) / 2)); }
}

.hero .chip.state-off { background: var(--fill); color: var(--text-2); }
.tile { background: var(--card); box-shadow: var(--shadow-card); }
/* Desktop: cards lift under the pointer. */
@media (hover: hover) {
  .carousel > .job:hover, .cat:hover, a.tile:hover, .hero-stat:hover { transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(11, 18, 32, .05), 0 14px 32px rgba(11, 18, 32, .10); }
  .hero-stat:hover { transform: none; box-shadow: none; background: var(--fill-soft); }
  .carousel > .job:hover .job-title { text-decoration: none; }
}

/* ============================================================================================================
   v4.1 (2026-10-12): owner — the applications count is the main thing on Home (not the timer), users never apply
   by hand (autopilot is a switch that saves itself), carousels must drag on the web, and the app needs texture and
   depth.
   ============================================================================================================ */
/* Texture: a pale accent wash and a fine accent dot grid across the top of every page, fading out. */
body::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 520px; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1.5px),
    linear-gradient(var(--accent-soft), transparent);
  background-size: 20px 20px, 100% 100%;
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, .55) 50%, transparent);
  mask-image: linear-gradient(#000, rgba(0, 0, 0, .55) 50%, transparent); }
.mini-bar { background: color-mix(in srgb, var(--bg) 80%, transparent); }

/* Home status card: the count first and big; a faint tick ring in the corner; two cards stacked under it (depth). */
.hero { text-align: start; padding: 18px 20px 16px; isolation: isolate;
  box-shadow: 0 1px 2px rgba(11, 18, 32, .05), 0 10px 30px rgba(11, 18, 32, .08),
    0 9px 0 -4px color-mix(in srgb, var(--accent) 9%, var(--bg)), 0 17px 0 -8px color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.hero { margin-bottom: 18px; }
.hero::before { content: ""; position: absolute; z-index: -1; top: -150px; inset-inline-end: -150px; width: 340px; height: 340px;
  border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 10%, transparent) 0 1deg, transparent 1deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 58.5% 70%, transparent 70.5%);
  mask: radial-gradient(circle, transparent 0 58%, #000 58.5% 70%, transparent 70.5%);
  animation: slow-spin 120s linear infinite; }
.hero-top { justify-content: flex-start; margin-bottom: 6px; }
.hero-count { display: flex; flex-direction: column; align-items: flex-start; color: var(--text); width: fit-content; }
.hero-count .hero-num { font-size: 84px; line-height: .95; font-weight: 700; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.hero-count .hero-label { display: inline-flex; align-items: center; gap: 2px; margin: 4px 0 0; color: var(--text-2);
  font-size: 16px; font-weight: 600; }
.hero-count .chev { width: 18px; height: 18px; transition: transform .2s var(--ease); }
@media (hover: hover) { .hero-count:hover .chev { transform: translateX(3px); } [dir="rtl"] .hero-count:hover .chev { transform: rotate(180deg) translateX(3px); } }
/* Tracking strip: small dial + what it is doing (Wolt ETA box) */
.track { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px; border-radius: 16px;
  background: var(--fill-soft); box-shadow: inset 0 0 0 1px var(--hair); }
.hero .track .dial { width: 86px; height: 86px; margin: 0; flex: none; }
.track .dial-ticks { stroke-width: 12; }
.track .dial-center b { font-size: 20px; letter-spacing: -.03em; }
.track .dial-center small { display: none; }
.track .dial.k-off .dial-center b { font-size: 14px; }
.track .dial-check .ic { width: 34px; height: 34px; }
.track .hero-live { align-items: flex-start; text-align: start; margin: 0; padding: 0; max-width: none; flex: 1; min-width: 0; }
.track .hero-live b { font-size: 16.5px; }
.track .hero-live span { font-size: 14px; }
@media (min-width: 1024px) {
  .hero-count .hero-num { font-size: 104px; }
  .hero .track .dial { width: 96px; height: 96px; }
  .track .dial-center b { font-size: 22px; }
}
@media (max-width: 380px) { .hero-count .hero-num { font-size: 68px; } .hero .track .dial { width: 74px; height: 74px; } }

/* Autopilot: the main control, right under the card; lit when on. */
.o-auto { order: 2; } .o-actions { order: 3; } .o-setup { order: 4; } .o-tiles { order: 5; } .o-recent { order: 6; }
.o-live { order: 7; } .o-cycles { order: 8; }
.blk.o-auto { margin-top: 0; }
.o-auto .group { transition: background .25s, border-color .25s, box-shadow .25s; box-shadow: var(--shadow-card); border-color: transparent; }
.o-auto .group:has(input:checked) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.auto-toggle { min-height: 72px; padding: 14px 16px; }
.auto-toggle .cell-main { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.auto-toggle .cell-main .pill { margin-inline-start: 8px; vertical-align: 2px; }
.auto-toggle .cell-icon { width: 42px; height: 42px; background: var(--card); color: var(--accent); box-shadow: var(--shadow-card); }
.o-auto .group:has(input:checked) .cell-icon { background: var(--accent); color: #fff; }
.o-auto .group:has(input:checked) .cell-icon .ic { animation: tab-pop .5s var(--spring); }
.o-auto form.is-saving, .setup-switch form.is-saving { opacity: .6; pointer-events: none; transition: opacity .2s; }
/* Set up but off ("armed"): the switch is the next thing to do, so it is lit and its track pulses; on Home it comes
   right under the status card, above the plan card. */
.auto-armed { border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow-card) !important; }
.auto-armed .auto-toggle .cell-main small { color: var(--accent); font-weight: 600; }
.auto-armed .switch { animation: armed 2s ease-out infinite; }
@keyframes armed { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .auto-armed .switch { animation: none; } }
.dash:has(.auto-armed) .plan-banner { order: 3; }
.setup-switch { margin: 4px 0 20px; }
.setup-switch .group { box-shadow: var(--shadow-card); }
.setup-switch .group:has(input:checked) { background: var(--accent-soft); }
.setup-switch .auto-toggle .cell-icon { width: 42px; height: 42px; background: var(--accent); color: #fff; }
/* Done page: the switch flips on as the page opens, so it is plain that setup turned autopilot on */
.auto-fresh input:checked + .switch { animation: fresh-track .5s .45s both; }
.auto-fresh input:checked + .switch::after { animation: fresh-knob .5s .45s var(--spring) both; }
.auto-fresh .group:has(input:checked) { animation: fresh-glow 1.2s .45s both; }
@keyframes fresh-track { from { background: var(--fill-2); } }
@keyframes fresh-knob { from { transform: none; } }
@keyframes fresh-glow { from { background: var(--card); } 40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .auto-fresh *, .auto-fresh .group, .gift-on-dot { animation: none !important; } }
.o-auto .group-foot { margin-inline: 4px; }

/* Run buttons: as many columns as there are buttons (users have no "Apply now"). */
.acts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* Carousels: grab cursor and drag on the web; round arrows next to "See all" on wide screens. */
@media (hover: hover) and (pointer: fine) { .job-list.carousel { cursor: grab; } }
.job-list.carousel.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.job-list.carousel.dragging > * { pointer-events: none; }
.car-nav { display: inline-flex; gap: 6px; margin-inline-start: auto; }
.section-title.big:has(.car-nav) h2 { flex: 1; }
.car-btn { width: 34px; min-height: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--fill) !important;
  color: var(--text) !important; }
.car-btn .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.car-prev .ic { transform: rotate(180deg); }
[dir="rtl"] .car-prev .ic { transform: none; }
[dir="rtl"] .car-next .ic { transform: rotate(180deg); }
.car-btn:disabled { opacity: .35; }
@media (hover: none), (pointer: coarse) { .car-nav { display: none; } }

/* Job card banners: fine diagonal stripes over the colour, a shade at the bottom (texture). */
.carousel .thumb::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 11px),
    linear-gradient(transparent 55%, rgba(0, 0, 0, .14)); }
.carousel .thumb-letter { font-size: 44px; }

/* Depth: overview and job cards sit on a soft, two-layer shadow. */
.cat, .carousel > .job { box-shadow: 0 1px 2px rgba(11, 18, 32, .05), 0 6px 18px rgba(11, 18, 32, .07); }

/* --- v4.1 public home: texture, floating notifications, live counter, moving fields, prices, questions --- */
/* Hero texture: a fine grid of lines fading out from the centre (Browserbase / Spade). */
.land-hero { position: relative; isolation: isolate; }
.land-hero::before { content: ""; position: absolute; z-index: -1; inset: -40px -50vw 0; pointer-events: none;
  background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 75%); }
.land-art { position: relative; overflow: visible; }
.land-art .phone { position: relative; z-index: 1; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px rgba(11, 18, 32, .28),
  0 8px 20px rgba(11, 18, 32, .12); }
.land-art { -webkit-mask: none; }
.land-art > .phone { margin-top: 0; }

/* Notifications floating around the phone, drifting gently (not tilted). */
.bubble { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px;
  border-radius: 16px; background: var(--card); box-shadow: 0 2px 4px rgba(11, 18, 32, .06), 0 16px 34px rgba(11, 18, 32, .14);
  font-size: 13px; line-height: 1.25; white-space: nowrap; animation: bubble-in .8s var(--spring) backwards, drift 6s ease-in-out infinite; }
.bubble b { display: block; font-size: 13.5px; }
.bubble small { color: var(--text-2); font-size: 12px; }
.bubble-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent); }
.bubble-ic .ic { width: 17px; height: 17px; stroke-width: 2.1; }
.bubble.b1 { top: 18%; inset-inline-start: -4%; animation-delay: .9s, .9s; }
.bubble.b2 { top: 46%; inset-inline-end: -6%; animation-delay: 1.3s, 2.2s; }
.bubble.b2 .bubble-ic { background: color-mix(in srgb, var(--green) 14%, var(--card)); color: var(--green); }
.bubble.b3 { bottom: 14%; inset-inline-start: 2%; animation-delay: 1.7s, 3.4s; }
.bubble.b3 .bubble-ic { background: color-mix(in srgb, var(--purple) 14%, var(--card)); color: var(--purple); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes drift { 50% { transform: translateY(-8px); } }
@media (max-width: 699px) { .bubble { transform-origin: center; font-size: 12px; padding: 8px 12px 8px 8px; }
  .bubble.b1 { top: 9%; inset-inline-start: 2%; } .bubble.b2 { top: 52%; inset-inline-end: 2%; } .bubble.b3 { display: none; }
  .bubble-ic { width: 28px; height: 28px; } }

/* Live counter: navy band, dot texture, split-flap digits that roll. */
.land-live { position: relative; overflow: hidden; isolation: isolate; margin-top: 72px; padding: 44px 20px 30px; border-radius: 28px;
  background: #0b1f4b; color: #eef3ff; text-align: center; }
.land-live::before { content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: radial-gradient(rgba(140, 195, 255, .22) 1px, transparent 1.5px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 75%); }
.land-live::after { content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; top: -330px; left: 50%; margin-left: -310px;
  border-radius: 50%; background: repeating-conic-gradient(rgba(140, 195, 255, .2) 0 1deg, transparent 1deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 62.5% 70%, transparent 70.5%);
  mask: radial-gradient(circle, transparent 0 62%, #000 62.5% 70%, transparent 70.5%); animation: slow-spin 140s linear infinite; }
.live-tag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; margin: 0 0 18px; border-radius: 999px;
  background: rgba(79, 214, 155, .14); color: #4fd69b; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.live-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: ping-green 1.6s infinite; }
@keyframes ping-green { 0% { box-shadow: 0 0 0 0 rgba(79, 214, 155, .6); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.odo { display: flex; justify-content: center; align-items: center; gap: .06em; font-size: clamp(58px, 15vw, 128px); font-weight: 700;
  line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.odo-cell { position: relative; display: inline-block; height: 1.18em; width: .74em; overflow: hidden; border-radius: .14em;
  background: linear-gradient(rgba(255, 255, 255, .09), rgba(255, 255, 255, .04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 .06em .18em rgba(0, 0, 0, .35); }
.odo-cell::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: rgba(0, 0, 0, .35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05); }
.odo-strip { display: flex; flex-direction: column; transition: transform 2.2s cubic-bezier(.16, .9, .12, 1); }
.odo-strip > span { display: block; height: 1.18em; line-height: 1.18em; text-align: center; }
.odo-sep { opacity: .5; margin: 0 -.04em; align-self: flex-end; padding-bottom: .1em; }
.live-label { max-width: 460px; margin: 18px auto 30px; color: rgba(238, 243, 255, .75); font-size: 17px; line-height: 1.5; text-wrap: balance; }
.live-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 18px; overflow: hidden;
  background: rgba(255, 255, 255, .1); max-width: 860px; margin: 0 auto; }
.live-facts > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; background: #0b1f4b; }
.live-facts b { font-size: 32px; font-weight: 700; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.live-facts span { color: rgba(238, 243, 255, .65); font-size: 13.5px; }
@media (min-width: 700px) { .live-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .land-live { padding: 56px 40px 40px; } }

/* Every field of work, moving by: two rows in opposite directions, edges fading; pauses under the pointer. */
.land-fields { display: flex; flex-direction: column; gap: 12px; margin: 56px -20px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee { display: flex; }
.marquee-track { display: flex; gap: 10px; flex: none; padding-inline-end: 10px; animation: marquee 70s linear infinite; }
.marquee.rev .marquee-track { animation-direction: reverse; animation-duration: 80s; }
.land-fields:hover .marquee-track { animation-play-state: paused; }
/* "Pause animations" (footer; app.js [data-motion-toggle], WCAG 2.2.2) stops every looping animation on the page */
.motion-paused .landing *, .motion-paused .landing *::before, .motion-paused .landing *::after { animation-play-state: paused !important; }
.motion-toggle .when-paused, .motion-paused .motion-toggle .when-moving { display: none; }
.motion-paused .motion-toggle .when-paused { display: inline; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
.field-chip { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; flex: none;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 15px; font-weight: 600; white-space: nowrap; }
.marquee:nth-child(2) .field-chip:nth-child(3n+1) { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.marquee:nth-child(1) .field-chip:nth-child(4n+2) { background: var(--accent); color: #fff; box-shadow: none; }
@media (min-width: 1024px) { .land-fields { margin-inline: -40px; } }

/* Prices (2026-10-14, same language as /plans): period switch, trial card, Pro on navy. */
.lpx { margin-top: 18px; }
.period-switch { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 26px; padding: 4px;
  border-radius: 999px; background: var(--fill); }
.period-switch input { position: absolute; opacity: 0; pointer-events: none; }
.period-switch label { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px;
  color: var(--text-2); font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.period-switch input:checked + label { background: var(--card); color: var(--text); box-shadow: var(--shadow-card); }
.period-switch input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-save { color: var(--green); font-size: 12.5px; font-weight: 700; }
.land-prices { display: grid; gap: 18px; }
.lp { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; background: var(--card);
  box-shadow: var(--shadow-card); }
.lp-name { color: var(--text-2); font-size: 15px; font-weight: 600; }
.lp-num { display: flex; align-items: baseline; gap: 6px; font-size: 46px; font-weight: 750; letter-spacing: -.04em; line-height: 1.05;
  font-variant-numeric: tabular-nums; }
.lp-num small { color: var(--text-2); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.lp-perks { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; padding: 0; flex: 1; font-size: 15px; }
.lp-perks li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.lp-perks .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--green); }
.lp-btn { align-self: stretch; justify-content: center; height: 50px; }
.lp-pro { padding-top: 30px; background: var(--brand); color: var(--on-brand); isolation: isolate; overflow: visible;
  box-shadow: 0 0 0 2px var(--accent), 0 24px 50px color-mix(in srgb, var(--accent) 26%, transparent); }
.lp-pro .pro-badge { align-self: flex-start; }
.lp-pro .lp-num { color: #fff; }
.lp-pro .lp-num small, .lp-bill { color: var(--on-brand-2); }
.lp-bill { font-size: 14px; }
.lp-bill s { opacity: .7; }
.lp-pro .lp-perks .ic { color: var(--brand-hi); }
.lp-price { display: none; flex-direction: column; gap: 4px; }
.lpx:has(#lp-m:checked) .lp-m, .lpx:has(#lp-q:checked) .lp-q, .lpx:has(#lp-y:checked) .lp-y { display: flex; }
.lp-pro a.pro-cta { margin-top: 0; background: #fff; color: #0b1f4b; box-shadow: none; }  /* as on setup's trial page */
@media (max-width: 699px) { .lp-pro { order: -1; } }
@media (min-width: 700px) { .land-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }

/* Questions: bordered boxes that open smoothly. */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.faq-item > summary { min-height: 64px; padding: 16px 20px; font-size: 16.5px; font-weight: 700; }
.faq-item > p { margin: 0; padding: 4px 20px 20px; color: var(--text-2); line-height: 1.6; }
.faq-item[open] > summary { border-bottom: 0; }
.faq-item { box-shadow: var(--shadow-card); border-color: transparent; }
.land-art { height: auto !important; padding: 48px 0 52px !important; }
.bubble.b1 { inset-inline-start: 4%; }
.bubble.b2 { inset-inline-end: 3%; }
.bubble.b3 { inset-inline-start: 6%; }
@media (min-width: 1024px) { .bubble.b1 { inset-inline-start: 1%; } .bubble.b2 { inset-inline-end: 0; } }

/* --- v4.2 public home: nothing clipped, centred questions, premium scrolling --- */
/* Cards and their shadows reach the page edges; only the page itself clips (the hero grid / marquee bleed). */
.landing { overflow-x: visible; }
.page-landing .public-main { overflow-x: clip; }
/* Questions: centred under a centred title. */
.land-faq .land-h2 { text-align: center; }
.land-faq .faq { margin: 0 auto; width: 100%; max-width: 760px; }
.faq-item > summary { justify-content: space-between; }
.faq-item > summary .chev { transform: rotate(90deg); }
.faq-item[open] > summary .chev { transform: rotate(-90deg); }
.faq-item > p { animation: rise .4s var(--ease) both; }
/* Section links in the bar (wide screens), lit for the section on screen. */
.site-links { display: none; }
@media (min-width: 1024px) {
  .site-links { display: flex; gap: 4px; margin-inline: auto; }
  .site-links a { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px;
    color: var(--text-2); font-size: 14.5px; font-weight: 600; transition: background .2s, color .2s; }
  .site-links a:hover { color: var(--text); background: var(--fill); }
  .site-links a.on { color: var(--accent); background: var(--accent-soft); }
}
.land-section, .land-live { scroll-margin-top: 84px; }
/* Reading progress: a thin accent line under the bar (scroll-driven, no JS). Phones only: desktops have the
   page scrollbar (accent-coloured below) and the line looked doubled. */
.scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (hover: none), (pointer: coarse) { .scroll-progress { display: block; } }
  .scroll-progress { position: absolute; inset: auto 0 -1px; height: 2px; background: var(--accent);
    transform-origin: left; transform: scaleX(0); animation: read-progress linear both; animation-timeline: scroll(root); }
  [dir="rtl"] .scroll-progress { transform-origin: right; }
  @keyframes read-progress { to { transform: scaleX(1); } }
  /* Depth while scrolling: the phone drifts down slower than the page, the notifications rise faster. */
  .land-art .phone { animation: phone-rise .9s .15s var(--ease) backwards, phone-px linear both;
    animation-timeline: auto, scroll(root); animation-range: normal, 0 900px; }
  .land-art .bubble { animation: bubble-in .8s var(--spring) backwards, drift 6s ease-in-out infinite, bubble-px linear both;
    animation-timeline: auto, auto, scroll(root); animation-range: normal, normal, 0 900px; }
  .bubble.b1 { animation-delay: .9s, .9s, 0s; } .bubble.b2 { animation-delay: 1.3s, 2.2s, 0s; } .bubble.b3 { animation-delay: 1.7s, 3.4s, 0s; }
  @keyframes phone-px { to { translate: 0 60px; } }
  @keyframes bubble-px { to { translate: 0 -70px; } }
}
.site-bar { position: sticky; }

/* --- "יש!" loader (macros.html loader()) ------------------------------------------------------------------ */
/* The exclamation mark's dot hops right to left (the way Hebrew reads): it lands on י and lights it, hops to ש and
   lights it, drops into its place and the bar slams down above it: "יש!" — a little "yes!" pop, then again.
   SVG user units: the dot rests at (70, 548); landing on a letter's top = translateY(-618). */
.yl { --yl-ink: var(--text); --yl-tip: var(--accent); --yl-t: 2.8s; display: inline-block; width: 96px; line-height: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .yl { --yl-tip: #7cb7ff; } }
:root[data-theme="dark"] .yl { --yl-tip: #7cb7ff; }
.yl.sm { width: 60px; }
.yl.on-navy { --yl-ink: #ffffff; --yl-tip: #7cb7ff; }
.yl svg { display: block; width: 100%; height: auto; overflow: visible; animation: yl-yes var(--yl-t) var(--ease) infinite; }
.yl-shin, .yl-yod { fill: var(--yl-ink); transform-box: fill-box; transform-origin: 50% 50%; opacity: .16; }
.yl-yod { animation: yl-yod var(--yl-t) linear infinite; }
.yl-shin { animation: yl-shin var(--yl-t) linear infinite; }
.yl-bar, .yl-dot { fill: var(--yl-tip); transform-box: fill-box; }
.yl-bar { transform-origin: 50% 0; animation: yl-bar var(--yl-t) linear infinite; }
.yl-dot { transform-origin: 50% 100%; animation: yl-squash var(--yl-t) linear infinite; }
.yl-hop-x { animation: yl-hop-x var(--yl-t) linear infinite; }
.yl-hop-y { animation: yl-hop-y var(--yl-t) infinite; }
@keyframes yl-hop-x {
  0%, 9% { transform: translateX(1023px); } 30% { transform: translateX(501px); }
  52%, 94% { transform: translateX(0); } 95%, 100% { transform: translateX(1023px); } }
@keyframes yl-hop-y {
  0% { transform: translateY(-1240px); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  9% { transform: translateY(-618px); animation-timing-function: cubic-bezier(.1, .5, .5, 1); }
  19.5% { transform: translateY(-1240px); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  30% { transform: translateY(-618px); animation-timing-function: cubic-bezier(.1, .5, .5, 1); }
  40% { transform: translateY(-1240px); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  52%, 94% { transform: translateY(0); } 95%, 100% { transform: translateY(-1240px); } }
@keyframes yl-squash {
  0% { opacity: 0; } 4% { opacity: 1; }
  9%, 30%, 52% { transform: scale(1.32, .68); } 12%, 33%, 56% { transform: scale(.9, 1.1); }
  7%, 15%, 28%, 36%, 50%, 60% { transform: none; }
  82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes yl-yod { 0%, 8.9% { opacity: .16; transform: none; } 9% { opacity: 1; transform: scale(1.14); }
  15%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: .16; } }
@keyframes yl-shin { 0%, 29.9% { opacity: .16; transform: none; } 30% { opacity: 1; transform: scale(1.08); }
  36%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: .16; } }
@keyframes yl-bar { 0%, 52% { opacity: 0; transform: scaleY(0); } 52.1% { opacity: 1; }
  57% { transform: scaleY(1.1); } 61% { transform: scaleY(.96); } 64%, 82% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; } }
@keyframes yl-yes { 0%, 60% { transform: none; } 66% { transform: scale(1.07) rotate(-2deg); } 74%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .yl svg, .yl-hop-x, .yl-hop-y, .yl-dot, .yl-bar, .yl-yod, .yl-shin { animation: none; }
  .yl-shin, .yl-yod { opacity: 1; }
  .yl svg { animation: breathe 1.6s ease-in-out infinite; }
}

/* Full-screen wait (app.js): Continue with Google right away (data-loading), any page that takes a while to open. */
.page-loader { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); opacity: 0; visibility: hidden;
  backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
  transition: opacity .25s var(--ease), visibility 0s linear .25s; }
.page-loader.on { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
.page-loader-box { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.page-loader-box p { margin: 0; color: var(--text-2); font-size: 15px; font-weight: 500; }
.page-loader-box p:empty { display: none; }
.page-loader:not(.on) .yl * { animation-play-state: paused; }
/* Sign-in pages (Signing you in): the loader in place of the old ring. */
.auth-hero > .yl { margin-bottom: 26px; }

/* Busy buttons: three of the logo's "!" dots hop in a wave, the way the page reads (instead of a ring). A list row
   (Sign out, Install the app…) keeps its text and shows them at its end, in its own colour. */
button.is-busy:not(.act)::after { width: 26px; height: 14px; border: 0; border-radius: 0; --bang: var(--text-2);
  background: radial-gradient(circle closest-side, var(--bang) 92%, transparent) 0 100% / 6px 6px no-repeat,
    radial-gradient(circle closest-side, var(--bang) 92%, transparent) 50% 100% / 6px 6px no-repeat,
    radial-gradient(circle closest-side, var(--bang) 92%, transparent) 100% 100% / 6px 6px no-repeat;
  animation: dots-ltr .9s ease-in-out infinite; }
[dir="rtl"] button.is-busy:not(.act)::after { animation-name: dots-rtl; }
button.primary.is-busy::after { border: 0; --bang: #fff; }
button.accent.is-busy::after { border: 0; --bang: #fff; }
button.cell.is-busy::after { --bang: currentColor; inset: 0; inset-inline-start: auto; inset-inline-end: 18px; margin: auto 0; }
button.cell.is-busy .chev { visibility: hidden; }  /* the dots take the chevron's place */
@keyframes dots-ltr {
  0%, 80%, 100% { background-position: 0 100%, 50% 100%, 100% 100%; } 20% { background-position: 0 0, 50% 100%, 100% 100%; }
  40% { background-position: 0 100%, 50% 0, 100% 100%; } 60% { background-position: 0 100%, 50% 100%, 100% 0; } }
@keyframes dots-rtl {
  0%, 80%, 100% { background-position: 0 100%, 50% 100%, 100% 100%; } 20% { background-position: 0 100%, 50% 100%, 100% 0; }
  40% { background-position: 0 100%, 50% 0, 100% 100%; } 60% { background-position: 0 0, 50% 100%, 100% 100%; } }
@media (prefers-reduced-motion: reduce) { button.is-busy:not(.act)::after { animation: breathe 1.2s ease-in-out infinite; } }

/* --- Plans (paywall, 2026-10-14; Mobbin: Fabric / Babbel / Fixtured; navy theme 2026-10-24) ---------------------- */
/* Navy card (rings like the Home status card) with the user's own reason to upgrade and, on the trial, the trial
   timeline; perks on one quiet tint, plan rows with a radio (3 months picked, "Most popular" tag), a navy CTA that
   names the price, then Free vs Pro with the Pro column tinted. Same look as setup's trial page (.gift). */
.pro-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: 20px 20px 22px;
  background: var(--brand); color: var(--on-brand); box-shadow: 0 14px 34px rgba(11, 31, 75, .22); }
.pro-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.pro-badge { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: #fbbf24; color: #3b2300; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; }  /* 700: the Hebrew font has no heavier face (800 fell back to a serif system font) */
.pro-badge .ic { width: 14px; height: 14px; }
.pro-state { color: var(--on-brand-2); font-size: 13.5px; font-weight: 600; text-align: end; }
.pro-title { margin: 0; color: #fff; font-size: 30px; line-height: 1.12; font-weight: 750; letter-spacing: -.03em; }
.pro-lead { margin: 10px 0 0; color: var(--on-brand-2); font-size: 16px; line-height: 1.45; }
.pro-lead b { color: var(--brand-hi); font-size: 1.2em; font-weight: 750; font-variant-numeric: tabular-nums; }
.pro-usage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin-top: 18px; padding: 12px 14px;
  border-radius: var(--r-sm); background: rgba(255, 255, 255, .08); font-size: 13.5px; }
.pro-usage-label { color: var(--on-brand-2); }
.pro-usage-val { font-weight: 650; font-variant-numeric: tabular-nums; }
.pro-meter { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.pro-meter-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: #fbbf24; }
.m-1 { width: 10%; } .m-2 { width: 20%; } .m-3 { width: 30%; } .m-4 { width: 40%; } .m-5 { width: 50%; } .m-6 { width: 60%; } .m-7 { width: 70%; } .m-8 { width: 80%; } .m-9 { width: 90%; } .m-10 { width: 100%; }
.pro-perks { list-style: none; margin: 14px 0 0; padding: 4px 16px; border-radius: var(--r); background: var(--card);
  box-shadow: var(--shadow-card); }
.pro-perks li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--hair); }
.pro-perks li:first-child { border-top: 0; }
.pro-perks li > span:last-child { color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.pro-perks b { display: block; color: var(--text); font-size: 15.5px; font-weight: 650; }
.pro-perk-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-soft); color: var(--ink); }
.pro-perk-ic .ic { width: 19px; height: 19px; }
.plan-pick { display: flex; flex-direction: column; gap: 10px; }
.plan-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r);
  background: var(--card); border: 2px solid var(--hair); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, box-shadow .15s, transform .2s var(--spring); }
.plan-opt.popular { margin-top: 12px; padding-top: 20px; }
.plan-opt:has(input:checked) { border-color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 12%, transparent), var(--shadow-card); }
.plan-opt:active { transform: scale(.985); }
.plan-opt input { position: absolute; opacity: 0; pointer-events: none; }
.plan-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.plan-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--hair-2); transition: border .15s; }
.plan-opt:has(input:checked) .plan-radio { border: 7px solid var(--ink); }
.plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plan-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text); font-size: 16.5px; font-weight: 700; }
.plan-note { color: var(--text-2); font-size: 13px; line-height: 1.35; }
.plan-cost { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.plan-month { color: var(--text); font-size: 22px; font-weight: 750; letter-spacing: -.03em; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.plan-month small { margin-inline-start: 3px; color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.plan-total { color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.plan-total s { color: var(--text-3); }
.popular-tag { position: absolute; top: -12px; inset-inline-start: 14px; display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 700; }
.popular-tag .ic { width: 13px; height: 13px; }
button.pro-cta, a.pro-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px;
  margin-top: 16px; border: 0; border-radius: 999px; color: #fff; font-size: 17px; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 34%, transparent); }
@media (hover: hover) { .pro-cta:hover { filter: brightness(1.07); } }
#get-pro .pro-cta { background: var(--ink); color: var(--on-ink); box-shadow: 0 10px 24px rgba(11, 31, 75, .24);
  transition: transform .2s var(--spring); }
#get-pro .pro-cta:active { transform: scale(.98); }
@media (hover: hover) { #get-pro .pro-cta:hover { filter: none; background: var(--ink-hover); } }
/* PayPal's buttons (plans.html, app.js) sit straight on the page. Their frames are transparent only while their
   container is light, the scheme PayPal's page uses; in dark mode browsers otherwise paint a dark backdrop behind
   them. PayPal stops its buttons at 750px wide, pinned to one side, so they get centered. On phones the card button
   opens PayPal's card form in the same frame, drawn for a light page: while it is open (.open) it gets a white card.
   .pay-wait covers the buttons from a click until PayPal's window or form is up. */
.pay-box { margin-top: 16px; }
.pay-box[hidden] { display: none; }
.pay-sum { margin: 0 4px 12px; font-size: 17px; font-weight: 700; text-align: center; }
.pay-frame { position: relative; max-width: 750px; margin-inline: auto; }
.pay-buttons { isolation: isolate; min-height: 110px; border-radius: 22px; color-scheme: light; }
.pay-buttons.open { padding: 12px 12px 4px; background: #fff; box-shadow: var(--shadow-card); }
.pay-wait { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; border-radius: 22px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); }
.pay-wait[hidden] { display: none; }
.pay-error { margin: 4px 4px 10px; color: var(--red); font-size: 14px; text-align: center; }
button.pro-cta[hidden] { display: none; }
.pro-assure { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 10px 8px 0; color: var(--text-2);
  font-size: 13px; line-height: 1.4; text-align: center; }
.pro-assure .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--green); }
.pay-terms { margin: 6px 8px 0; color: var(--text-2); font-size: 13px; text-align: center; }
.pay-terms a { color: inherit; text-decoration: underline; }
.pro-compare { overflow: hidden; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-card); }
.pc-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 100px; gap: 6px; padding-inline-start: 16px;
  border-top: 1px solid var(--hair); font-size: 14.5px; }
.pc-row:first-child { border-top: 0; }
.pc-label { align-self: center; padding-block: 12px; color: var(--text); line-height: 1.35; }
.pc-row > span:not(.pc-label) { display: grid; place-items: center; padding: 10px 4px; color: var(--text-2); font-size: 13px;
  line-height: 1.3; text-align: center; }
.pc-head > span:not(.pc-label) { font-size: 13px; font-weight: 700; }
.pc-row > span.pc-pro { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); font-weight: 650; }
.pc-head > span.pc-pro { background: var(--ink); color: var(--on-ink); font-size: 14.5px; }
.pc-val .ic { width: 18px; height: 18px; }
.pc-row > .pc-val.no { color: var(--text-3); }
@media (max-width: 380px) { .pc-row { grid-template-columns: minmax(0, 1fr) 70px 86px; } .pro-title { font-size: 26px; } }
@media (min-width: 900px) { .pro-perks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .pro-perks li:nth-child(2) { border-top: 0; } }
/* The trial hook under the landing CTAs and on /plans before the trial starts: its days only count from the first
   application, so trying it costs nothing. */
.trial-hook { display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 460px; margin: 16px 0 0;
  padding: 10px 14px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--text); font-size: 14px;
  font-weight: 550; line-height: 1.45; text-align: start; }
.trial-hook .ic, .pro-hook .ic { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--accent); }
.pro-hook { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: var(--on-brand); font-size: 14.5px;
  font-weight: 600; line-height: 1.45; }
.pro-hook .ic { color: var(--brand-hi); }
/* Phones: the two hero CTAs stack at one width, the same as the trial hook under them. */
@media (max-width: 699px) {
  .land-ctas { flex-direction: column; width: 100%; max-width: 460px; }
  .land-ctas .btn { width: 100%; }
  .land-copy .trial-hook { width: 100%; }
}

/* The trial as a timeline on a brand surface (macros trial_rail: setup's trial page, the /plans hero; Mobbin:
   Deepstash / Mimo). Done steps are lit and quiet, "now" is a white node with a halo, later steps are outlined; the
   line under "now" fades from lit to dim. */
.trial-rail { list-style: none; margin: 20px 0 0; padding: 0; }
.trial-rail li { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.trial-rail li:last-child { padding-bottom: 0; }
.trial-rail li::before { content: ""; position: absolute; top: 36px; bottom: 4px; inset-inline-start: 15px; width: 2px;
  border-radius: 1px; background: color-mix(in srgb, var(--on-brand) 18%, transparent); }
.trial-rail li:last-child::before { display: none; }
.trial-rail li.tr-done::before { background: var(--brand-hi); }
.trial-rail li.tr-now::before { background: linear-gradient(var(--brand-hi), color-mix(in srgb, var(--on-brand) 18%, transparent)); }
.tr-node { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: var(--on-brand-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-brand) 26%, transparent); }
.tr-node .ic { width: 16px; height: 16px; }
.tr-done .tr-node { background: var(--brand-hi); color: var(--brand); box-shadow: none; }
.tr-now .tr-node { background: #fff; color: #0b1f4b; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-hi) 28%, transparent); }
.tr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 5px; }
.tr-text b { color: #fff; font-size: 16px; font-weight: 650; line-height: 1.3; }
.tr-done .tr-text b { color: var(--on-brand-2); }
.tr-text small { color: var(--on-brand-2); font-size: 14px; line-height: 1.45; }
.tr-text .pro-meter { display: block; max-width: 320px; margin-top: 8px; }

/* Setup's trial page (2026-10-24): the gift of the trial on a navy card, its timeline, a white CTA. */
.gift { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; margin-top: 8px;
  padding: 26px 22px 22px; border-radius: var(--r-xl); background: var(--brand); color: var(--on-brand);
  box-shadow: 0 18px 40px rgba(11, 31, 75, .24); }
.gift .pro-badge { align-self: flex-start; }
.gift-title { margin: 18px 0 0; color: #fff; font-size: 32px; line-height: 1.1; font-weight: 750; letter-spacing: -.03em;
  text-wrap: balance; }
.gift-lead { margin: 10px 0 0; color: var(--on-brand-2); font-size: 16px; line-height: 1.45; }
/* "Autopilot is on" on the trial card: setup just switched it on and started the days (owner 2026-10-29) */
.gift-on { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 14px 0 0;
  padding: 6px 12px; border-radius: 999px; background: rgba(34, 197, 94, .16); color: #86efac; font-size: 14px;
  font-weight: 650; }
.gift-on-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: armed-dot 1.8s ease-out infinite; }
@keyframes armed-dot { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.gift .trial-rail { margin: 26px 0 28px; }
.gift-cta { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 999px; background: #fff;
  color: #0b1f4b; font-size: 17px; font-weight: 700; transition: transform .2s var(--spring); }
.gift-cta:active { transform: scale(.98); }
.gift-fine { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--on-brand-2);
  font-size: 13px; line-height: 1.4; text-align: center; }
.gift-fine .ic { flex: none; width: 15px; height: 15px; color: var(--brand-hi); }
.gift-more { margin: 18px 0 0; text-align: center; font-size: 15px; font-weight: 600; }
.gift-more a { color: var(--accent); }
/* The steps come in one after another, the way the trial will go. */
.gift .trial-rail li { animation: enter .5s var(--ease) both; }
.gift .trial-rail li:nth-child(2) { animation-delay: .12s; }
.gift .trial-rail li:nth-child(3) { animation-delay: .24s; }
.gift .trial-rail li:nth-child(4) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .gift .trial-rail li { animation: none; } }
@media (min-width: 700px) { .gift { max-width: 560px; margin: 24px auto 0; padding: 36px 36px 28px; }
  .gift-title { font-size: 38px; } }

/* Invite friends (invite.html, 2026-10-25): setup's navy gift card with the link, WhatsApp as the white CTA, copy /
   share under it. Coupons (plans.html): a folded field, or the applied code with Remove. */
.invite-card .trial-rail { margin: 24px 0 22px; }
.invite-link input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid rgba(238, 243, 255, .22);
  border-radius: var(--r); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 15px;
  text-align: center; text-overflow: ellipsis; }
.invite-link input:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 2px; }
.invite-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.invite-actions .gift-cta { gap: 8px; }
.invite-actions .gift-cta .ic { width: 20px; height: 20px; }
.invite-row { display: flex; gap: 10px; }
.invite-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  border: 1px solid rgba(238, 243, 255, .28); border-radius: 999px; background: transparent; color: #fff; font: inherit;
  font-size: 15px; font-weight: 650; cursor: pointer; }
.invite-btn .ic { width: 18px; height: 18px; }
.invite-btn:active { transform: scale(.98); }
.invite-banner { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 14px 16px;
  border-radius: var(--r); background: var(--brand); color: var(--on-brand); font-size: 14.5px; line-height: 1.4; }
.invite-banner > .ic:first-child { flex: none; width: 24px; height: 24px; color: var(--brand-hi); }
.invite-banner span { flex: 1; }
.invite-banner b { display: block; color: #fff; font-size: 15.5px; }
.invite-banner .chev { flex: none; color: var(--on-brand-2); }
.coupon { margin: 0 0 12px; }
.coupon > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent);
  font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.coupon > summary::-webkit-details-marker { display: none; }
.coupon > summary .ic { width: 18px; height: 18px; }
.coupon .group { margin-top: 4px; }
.coupon .inline-input input { text-transform: uppercase; letter-spacing: .04em; }
.coupon .inline-input input::placeholder { text-transform: none; letter-spacing: 0; }
.coupon-on { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding-block: 12px; padding-inline: 16px 12px;
  border-radius: var(--r); background: color-mix(in srgb, var(--green) 12%, var(--card)); }
.coupon-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); }
.coupon-ic .ic { width: 18px; height: 18px; }
.coupon-text { flex: 1; min-width: 0; }
.coupon-text b { display: block; font-size: 16px; letter-spacing: .04em; }
.coupon-text small { display: block; color: var(--text-2); font-size: 13.5px; }
.coupon-row.is-off .feed-title { color: var(--text-3); }
.invite-tiles .tile-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.invite-tiles .tile { padding-inline: 12px; }
fieldset.field { margin: 0; border: 0; min-width: 0; }
fieldset.field .chips { margin-top: 8px; }

/* --- Social studio (social.html): its own full-screen layout, admins only -----------------------------------
   Top bar (title, Instagram account, the publishing / approval switches, full screen, new post); below it the week
   calendar (7 day columns on wide screens, a day list on phones) and a side panel (the chosen post, a new post, or
   what needs attention). Phones: the panel covers the calendar while a post is open. */
.studio-body { min-height: 100dvh; background: var(--bg); }
.studio { display: flex; flex-direction: column; min-height: 100dvh; }
.st-bar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 18px; padding: calc(var(--safe-t) + 10px) 16px 10px; background: var(--float); border-bottom: 1px solid var(--hair);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.st-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-title h1 { margin: 0; font-size: 20px; letter-spacing: -.02em; white-space: nowrap; }
.st-acct { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.st-dot.on { background: var(--green); }
.st-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-switch .toggle { min-height: 44px; padding: 4px 6px 4px 14px; gap: 12px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--hair); }
[dir="rtl"] .st-switch .toggle { padding: 4px 14px 4px 6px; }
.st-switch .cell-main { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.st-switch .cell-main small { color: var(--text-2); font-size: 12px; font-weight: 500; }
.st-switch.is-saving { opacity: .6; }
.st-back { transform: rotate(180deg); }
[dir="rtl"] .st-back { transform: none; }
[dir="rtl"] .st-fwd { transform: rotate(180deg); }

.st-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 0; }
.st-cal { min-width: 0; padding: 16px; }
.st-weekbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.st-weeknav { display: flex; gap: 6px; }
.st-goals { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-goals li { padding: 6px 12px; border-radius: 999px; background: var(--orange-bg); color: var(--orange); font-size: 13.5px; font-weight: 500; }
.st-goals li.met { background: var(--green-bg); color: var(--green); }
.st-goals b { font-variant-numeric: tabular-nums; }
.st-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }
.st-day { display: flex; flex-direction: column; gap: 8px; min-height: 240px; padding: 10px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--hair); }
.st-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.st-day.past { opacity: .72; }
.st-day h2 { display: flex; flex-direction: column; gap: 1px; margin: 0 2px 2px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.st-day h2 b { color: var(--text); font-size: 15px; font-weight: 700; }
.st-card { display: flex; gap: 10px; padding: 8px; border-radius: var(--r-sm); background: var(--bg); color: var(--text);
  text-decoration: none; border: 1px solid var(--hair); transition: border-color .15s, background .15s; }
@media (hover: hover) { .st-card:hover { border-color: var(--accent); } }
.st-card.on { border-color: var(--accent); background: var(--pill-on); }
.st-card.st-cancelled { opacity: .55; }
.st-card .st-media { flex: none; width: 54px; height: 72px; border-radius: 8px; }
/* In the week columns: the picture on top, full width. */
.st-week .st-card { flex-direction: column; gap: 8px; }
.st-week .st-card .st-media { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 190px; }
.st-week .st-card.st-reel .st-media, .st-week .st-card.st-story .st-media { aspect-ratio: 9 / 14; }
.st-media { display: block; object-fit: cover; background: var(--fill); }
.st-gone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-3); text-align: center; }
.st-gone small { font-size: 12.5px; padding: 0 12px; }
.st-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.st-card-top { font-size: 13.5px; }
.st-kind { color: var(--text-2); font-weight: 500; }
.st-caption { font-size: 12.5px; color: var(--text-2); line-height: 1.35; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.st-slot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px dashed var(--hair-2);
  color: var(--text-2); font-size: 13px; text-decoration: none; }
.st-slot .ic { width: 16px; height: 16px; flex: none; }
@media (hover: hover) { .st-slot:hover { border-color: var(--accent); color: var(--accent); } }
.st-empty { margin: 4px 2px; color: var(--text-3); font-size: 13px; }
.pill:is(.sp-draft) { color: var(--text-2); }
.pill:is(.sp-approved, .sp-publishing) { color: var(--blue); background: var(--blue-bg); }
.pill.sp-published { color: var(--green); background: var(--green-bg); }
.pill.sp-failed { color: var(--red); background: var(--red-bg); }
.pill.sp-cancelled { color: var(--text-3); }

.st-panel { position: sticky; top: 65px; align-self: start; max-height: calc(100dvh - 65px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; padding: 16px; border-inline-start: 1px solid var(--hair); background: var(--bg); }
.st-panel > * { flex: none; }
.st-panel-head { display: flex; align-items: center; gap: 10px; }
.st-panel-head h2 { margin: 0; font-size: 19px; }
.st-close { order: 3; margin-inline-start: auto; }
.st-preview { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r); }
.st-preview .st-media { flex: none; width: 100%; max-height: 420px; aspect-ratio: 4 / 5; border-radius: var(--r); scroll-snap-align: start; object-fit: contain; background: #000; }
.st-preview.tall .st-media { aspect-ratio: 9 / 16; max-height: 520px; }
.st-preview .st-media:only-child { width: 100%; }
.st-preview:has(.st-media + .st-media) .st-media { width: 82%; }
.st-error { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--red-bg); color: var(--red);
  font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.st-error .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.st-note { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.st-caption-read { white-space: pre-wrap; padding: 12px 14px; border-radius: var(--r-sm); background: var(--card); font-size: 14.5px; line-height: 1.5; }
.st-edit, .st-new, .st-connect { display: flex; flex-direction: column; gap: 4px; border-radius: var(--r); background: var(--card); padding-bottom: 14px; }
.st-edit > button, .st-new > button, .st-connect > button { margin: 6px 16px 0; width: auto; }
.st-connect { background: none; padding: 0; }
.st-connect .field { padding: 8px 0; }
.st-connect > button { margin: 4px 0 0; }
.st-new progress { width: 100%; margin-top: 8px; accent-color: var(--accent); }
.field-help.over { color: var(--red); }
.st-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 14px 16px 4px; border: 0; }
.st-kinds legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; color: var(--text-2); font-size: 13px; font-weight: 500; }
.st-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-actions form:last-child:nth-child(odd) { grid-column: 1 / -1; }
.st-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--card); }
.st-box h2 { margin: 0; font-size: 16px; }
.st-box details summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 500; }
.st-box .st-card { background: var(--bg); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; color: var(--text);
  text-decoration: none; font-size: 14px; border-top: 1px solid var(--hair); }
.st-row:first-of-type { border-top: 0; }

/* Mid widths: the week wraps into fewer columns. */
@media (max-width: 1400px) { .st-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .st-main { grid-template-columns: minmax(0, 1fr) 360px; } .st-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: one column; the day list, then the panel below it, or over everything while a post is open. */
@media (max-width: 760px) {
  .st-bar { position: static; padding-inline: 12px; }  /* three switches + buttons: too tall to keep on screen */
  .st-title { width: 100%; }
  .st-acct { margin-inline-start: auto; min-width: 0; }
  .st-acct > span { overflow: hidden; text-overflow: ellipsis; }
  .st-controls { width: 100%; }
  .st-switch { flex: 1 1 100%; min-width: 0; }
  .studio .btn.sm { min-height: 40px; }
  .st-panel summary { display: flex; align-items: center; min-height: 40px; }
  .st-switch .toggle { width: 100%; justify-content: space-between; }
  .st-controls > .btn { flex: 1; }
  .st-main { display: block; }
  .st-cal { padding: 12px; }
  .st-week { grid-template-columns: minmax(0, 1fr); }
  .st-day { min-height: 0; }
  .st-week .st-card { flex-direction: row; }
  .st-week .st-card .st-media, .st-week .st-card:is(.st-reel, .st-story) .st-media { width: 64px; height: 84px; aspect-ratio: auto; }
  .st-panel { position: static; max-height: none; border: 0; padding: 12px; }
  /* align-self: stretch: browsers now apply the desktop's `start` to fixed boxes too, which made the panel as tall as
     its content, so its bottom (Save, Delete...) couldn't be scrolled to */
  .studio.has-panel .st-panel { position: fixed; inset: 0; align-self: stretch; z-index: 40; overflow-y: auto;
    padding: calc(var(--safe-t) + 12px) 12px calc(var(--safe-b) + 24px); }
  .studio.has-panel { overflow: hidden; height: 100dvh; }
}

/* Brand surfaces (status card, landing CTA, Pro): thin concentric rings from the top corner, like a radar sweep.
   Keep this rule last: the `background` shorthands above would reset it. */
.hero, .land-cta, .mock-hero, .pro-hero, .gift, .lp-pro { background-image: repeating-radial-gradient(circle at 100% 0, transparent 0 26px,
  var(--ring-line) 26px 27px); }
[dir="rtl"] :is(.hero, .land-cta, .mock-hero, .pro-hero, .gift, .lp-pro) { background-image: repeating-radial-gradient(circle at 0 0, transparent 0 26px,
  var(--ring-line) 26px 27px); }