/* Modals — one frame (draft 2, 2026-11-05). The template's values live here; the sheet's own chrome is at the end. */
@font-face { font-family: Figtree; font-style: normal; font-display: swap; font-weight: 300 800; src: url(fonts/figtree-latin.woff2) format("woff2"); }
@font-face { font-family: Sora; font-style: normal; font-display: swap; font-weight: 100 800; src: url(fonts/sora-latin.woff2) format("woff2"); }

:root {
  --ink: #0F131A; --muted: #0F131A9E; --muted-strong: #0F131AC9; --disabled: #0F131A5C;
  --line: #0F131A26; --line-hover: #0F131A80; --divider: #E8ECF0;
  --base: #F4F6F8; --card: #FFFFFF; --raised: #ECEFF3; --brand: #2563EB; --danger: #B3261E;
  --overlay: #0F131A73; --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  /* The product's `menu` shadow: the navigation islands', the sort menus' */
  --shadow-menu: 0 8px 32px 0 rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06);
  --ease-in: cubic-bezier(0.1, 0.9, 0.2, 1);
  /* The Settings tiles' plates (ui/settings-shell): Personalization violet, Edit Profile blue, Subscription green */
  --violet-bg: #F2ECFD; --violet: #936BF0; --blue-bg: #EDF2FD; --blue: #5A88EF; --green-bg: #E3FCEE; --green: #10A44E;
}
* { box-sizing: border-box; }

/* ── The layer: backdrop + where the panel stands ─────────────────────────────────────────────── */
.jm-root { position: fixed; inset: 0; z-index: 50; }
.jm-root[hidden] { display: none; }
.jm-backdrop { position: absolute; inset: 0; background: var(--overlay); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity 180ms linear; }
.jm-root.is-open .jm-backdrop { opacity: 1; transition: opacity 400ms linear(0, 0.158 9.09%, 0.415 18.18%, 0.63 27.27%, 0.78 36.36%, 0.875 45.45%, 0.932 54.55%, 0.964 63.64%, 0.982 72.73%, 0.992 81.82%, 0.997 90.91%, 1); }
.jm-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px 16px; pointer-events: none; }
.jm-layer > .jm { pointer-events: auto; }

/* ── The panel (desktop, from 640) ──────────────────────────────────────────────────────────────── */
.jm { position: relative; display: flex; flex-direction: column; width: 568px; max-width: 100%; max-height: calc(100dvh - 80px);
  background: var(--card); border-radius: 28px; outline: 1px solid var(--line); outline-offset: -1px; box-shadow: var(--shadow-md);
  font-family: Figtree, system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
.jm-root .jm { opacity: 0; transform: translateY(100px); transition: opacity 180ms linear, transform 0s linear 180ms; }
.jm-root.is-shown .jm { opacity: 1; transform: none; transition: opacity 75ms linear, transform 400ms var(--ease-in); }
.jm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 48px 48px 0; overscroll-behavior: contain; }
.jm.no-foot .jm-scroll { padding-bottom: 48px; }
/* 48 above the buttons (owner, draft 2: was 32), 48 to the bottom, 16 between, at the right by their text */
.jm-foot { flex: none; display: flex; gap: 16px; justify-content: flex-end; align-items: center; padding: 48px; }
.jm.is-scroll .jm-scroll { padding-bottom: 24px; }
.jm.is-scroll .jm-foot { padding-top: 24px; border-top: 1px solid var(--divider); }
.jm-foot .jm-foot-lead { margin-right: auto; }

/* The ✕ — the paywall's: a 44 target, its 36 disc, 20 from the top and right edges (the disc: 24 … 60) */
.jm-x { position: absolute; top: 20px; right: 20px; z-index: 2; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; border-radius: 9999px; cursor: pointer; }
.jm-x > span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; background: var(--base); border: 1px solid var(--line); color: var(--muted-strong); transition: border-color 150ms, color 150ms; }
@media (hover: hover) and (pointer: fine) { .jm-x:hover > span { border-color: var(--line-hover); color: var(--ink); } }

/* Type. With a ✕ the head ends 84 from the right edge: the disc's 24 to the edge, the same 24 between it and the text. */
.jm-step { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); }
.jm-title { margin: 0; font-family: Sora, Figtree, sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
.jm.has-x .jm-title, .jm.has-x .jm-step { padding-right: 36px; }
.jm-sub { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--muted-strong); }
/* Title → content: 24, or the dialog's own (--ct on the desktop, --ctp on a phone) */
.jm-content { margin-top: var(--ct, 24px); display: flex; flex-direction: column; gap: 20px; }
.jm-p { margin: 0; font-size: 16px; line-height: 24px; color: var(--muted-strong); }
.jm-note { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.jm-label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.jm-hint { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.jm-steps { display: flex; flex-direction: column; gap: 12px; }
.jm-steps > div { display: flex; gap: 12px; font-size: 16px; line-height: 24px; color: var(--muted-strong); }
.jm-steps i { flex: none; width: 24px; height: 24px; border-radius: 9999px; background: var(--raised); font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.jm-steps b { color: var(--ink); font-weight: 600; }
/* Green steps (Get the app, Auto Apply): the Subscription tile's plate, 40, its gem's green for an 18 digit.
   Get the app: the plate's top on the step's first line's (.top); Auto Apply: the text centred on the plate. */
.jm-steps.g { gap: 20px; }
.jm-steps.g > div { gap: 16px; align-items: center; }
.jm-steps.g.top > div { align-items: flex-start; }
.jm-steps.g i { width: 40px; height: 40px; background: var(--green-bg); color: var(--green); font-size: 18px; line-height: 1; font-weight: 600; }
.jm-steps.g.two b, .jm-steps.g.two .tx { display: block; }

/* A question (Step N of 3): the question 18/24, 4 to its hint 16/24, 20 to the control */
.jm-q { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); }
.jm-qhint { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: var(--muted); }
.jm-qctl { margin-top: 20px; }
/* …on a pale plate (v2): 24 from the window's sides (the ✕ disc's inset), its content back on the title's line */
.jm-plate { margin: 0 -24px; padding: 24px; border-radius: 20px; background: var(--base); }

/* Fields — the product's: 48, pill, hairline 15% → 50% under the pointer */
.jm-field { width: 100%; height: 48px; border-radius: 9999px; border: 1px solid var(--line); background: #fff; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.jm-field.ph { color: var(--muted); }
.jm-field svg { flex: none; color: var(--muted-strong); }
.jm-area { width: 100%; height: 128px; border-radius: 20px; border: 1px solid var(--line); background: #fff; padding: 14px 20px; font-size: 16px; line-height: 24px; color: var(--muted); }
.jm-row { display: flex; gap: 12px; }
.jm-row > .jm-field { flex: 1; min-width: 0; }
/* Step 1's field with Add inside it (owner, draft 4): Add 40 high, 4 from the field's top, bottom and right edges
   (3 + the hairline); the text stops 8 short of Add with an ellipsis */
.jm-addf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; height: 48px; border-radius: 9999px; border: 1px solid var(--line); background: #fff; }
.jm-addf > span { padding: 0 8px 0 20px; font-size: 16px; line-height: 24px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-addf > .b { height: 40px; margin-right: 3px; }
.jm-check { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; color: var(--ink); }
.jm-check i { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-hover); }
.jm-textlink { font-size: 16px; line-height: 24px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Choices: tiles, radio rows, pills — hairline 15%, chosen = ink 1.5 */
.jm-tiles { display: flex; flex-direction: column; gap: 12px; }
.jm-tile { display: block; text-align: left; width: 100%; border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 20px 24px; cursor: pointer; font: inherit; color: inherit; transition: border-color 150ms; }
@media (hover: hover) and (pointer: fine) { .jm-tile:hover { border-color: var(--line-hover); } }
.jm-tile b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.jm-tile .tx { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--muted); }
/* Tiles with the Settings plate on top (both variants): 23 + the 1px hairline = 24 from the tile's outer edge,
   title 18/24 16 under the plate, text 16/24. v1 adds the Settings cards' arrow 28 in the opposite corner. */
.jm-tile.ico { position: relative; padding: 23px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.jm-tile.ico b { margin-top: 16px; font-size: 18px; line-height: 24px; }
.jm-tile.ico .tx { font-size: 16px; line-height: 24px; }
.jm-tile .arr { position: absolute; top: 23px; right: 23px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--muted); }
.jm-tile .arr svg { width: 28px; height: 28px; }
/* v2: two tiles in a row, 24 from the window's sides and bottom (the ✕ disc's inset); the text on the title's line */
.jm-tiles.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 -24px; }
.jm.edge.no-foot .jm-scroll { padding-bottom: 24px; }
.ic { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; }
.ic svg { width: 24px; height: 24px; }
.ic-violet { background: var(--violet-bg); color: var(--violet); }
.ic-blue { background: var(--blue-bg); color: var(--blue); }
.ic-green { background: var(--green-bg); color: var(--green); }
.jm-radios { display: flex; flex-direction: column; gap: 4px; }
.jm-radio { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 16px; line-height: 24px; }
.jm-radio i { flex: none; width: 20px; height: 20px; border-radius: 9999px; border: 1.5px solid var(--line-hover); }
.jm-radio.on i { border: 6px solid var(--ink); }
.jm-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.jm-pill { height: 40px; padding: 0 16px; border-radius: 9999px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; font-size: 15px; }
.jm-pill.on { border: 1.5px solid var(--ink); }

/* Retention: the gift and the offer (non-button blue stays: the product's money colour) */
.jm-gift { display: flex; align-items: center; gap: 16px; border: 1px solid #C5D6FA; border-radius: 20px; padding: 16px 20px; }
.jm-gift b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.jm-gift span { display: block; font-size: 14px; line-height: 20px; color: var(--muted); }
.jm-gift em { margin-left: auto; font-style: normal; font-family: Sora, sans-serif; font-weight: 700; font-size: 20px; color: var(--brand); }
.jm-offer { border-radius: 20px; background: var(--brand); color: #fff; text-align: center; padding: 20px; }
.jm-offer small { display: block; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.jm-offer strong { display: block; font-family: Sora, sans-serif; font-size: 32px; line-height: 40px; font-weight: 700; }
.jm-plan { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 20px; padding: 16px 20px; }
.jm-plan.on { border: 1.5px solid var(--ink); }
.jm-plan i { flex: none; width: 20px; height: 20px; border-radius: 9999px; border: 1.5px solid var(--line-hover); }
.jm-plan.on i { border: 6px solid var(--ink); }
.jm-plan div { flex: 1; min-width: 0; }
.jm-plan b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.jm-plan span { display: block; font-size: 13px; line-height: 18px; color: var(--muted); }
.jm-plan s { display: block; font-size: 13px; color: var(--muted); text-align: right; }
.jm-plan em { font-style: normal; font-weight: 700; font-size: 18px; white-space: nowrap; }
.jm-timer { text-align: center; font-size: 16px; color: var(--muted-strong); }
.jm-timer b { font-family: ui-monospace, Menlo, monospace; color: var(--brand); font-size: 20px; }

/* Buttons — 48 high, 16 text, pills, 16 apart. No blue in a dialog (owner, draft 2). Hover with a mouse only. */
.b { height: 48px; padding: 0 24px; border-radius: 9999px; border: 1px solid transparent; font: 400 16px/1 Figtree, system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none; transition: opacity 150ms, border-color 150ms; }
.b-ink { background: var(--ink); color: #fff; }
.b-out { background: #fff; color: var(--ink); border-color: var(--line); }
.b-danger { background: var(--danger); color: #fff; }
/* "Yes, cancel": red text in the secondary's grey outline */
.b-out-danger { background: #fff; color: var(--danger); border-color: var(--line); }
@media (hover: hover) and (pointer: fine) {
  .b-ink:hover, .b-danger:hover { opacity: .9; }
  .b-out:hover, .b-out-danger:hover { border-color: var(--line-hover); }
}
.b[disabled] { opacity: .4; cursor: default; }

/* ── Phone, under 640: no ✕; text 32 from the edges and the top, buttons 20 from the edges and the bottom,
      28 between the text and the buttons, 12 between the buttons, the main one on top (thisnext-sextech's
      confirm popup; the text left-aligned and deeper than the buttons, as ours). Two kinds:
      a card in the middle (one question, two buttons) and a sheet from the bottom (everything else). ─── */
@media (max-width: 639px) {
  .jm-x { display: none; }
  .jm.has-x .jm-title, .jm.has-x .jm-step { padding-right: 0; }
  .jm-scroll { padding: 32px 32px 0; }
  .jm.no-foot .jm-scroll { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .jm-foot { flex-direction: column-reverse; align-items: stretch; gap: 12px; padding: 28px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .jm-foot .jm-foot-lead { margin: 4px 0 0; align-self: center; } /* 12 + 4 = 16 under Next */
  .jm.is-scroll .jm-scroll { padding-bottom: 16px; }
  .jm.is-scroll .jm-foot { padding-top: 16px; }
  .jm-title { font-size: 22px; line-height: 28px; }
  .jm-content { margin-top: var(--ctp, 20px); }
  .jm-tile { padding: 16px 20px; }
  .jm-tile.ico { padding: 19px; }
  .jm-tile .arr { top: 19px; right: 19px; }
  /* The v2 tiles: out to the buttons' 20, the text kept on the title's 32 */
  .jm-tiles.row { margin: 0 -12px; }
  .jm-tiles.row .jm-tile { padding: 11px; }
  .jm.edge.no-foot .jm-scroll { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  /* The plate: half the buttons' 20 from the screen's sides (10), its content still on 32 — 22 inside, all round */
  .jm-plate { margin: 0 -22px; padding: 22px; }
  /* The card: 314, the corners concentric with the buttons' (24 + 20) */
  .t-card .jm-layer { padding: 20px; }
  .t-card .jm { width: 314px; max-height: calc(100dvh - 40px); border-radius: 44px; }
  /* The sheet: the full width, 36 on top (owner, draft 3: softer than the card's 44), 40 clear of the top at most;
     slides in by its own height */
  .t-sheet .jm-layer { align-items: flex-end; padding: 40px 0 0; }
  .t-sheet .jm { width: 100%; max-height: calc(100dvh - 40px); border-radius: 36px 36px 0 0; }
  .t-sheet.jm-root .jm { opacity: 1; transform: translateY(100%); transition: transform 180ms linear; }
  .t-sheet.jm-root.is-shown .jm { transform: none; transition: transform 400ms var(--ease-in); }
}

/* ── Cookies — thisnext-sextech's notice: a card at the bottom, the text 28 from the side and 24 from the top,
      20 to the button. Desktop (owner, draft 3): corners 32; the button as far from the right edge as from the
      top and bottom — (card − 48) / 2, set by the script (--ck-pr) since it rides on the text's height.
      Phone: the button 16 from the edges, corners 40 (24 + 16). The navigation islands' shadow. No backdrop. ── */
.ck-root { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 16px max(16px, env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.ck-card { pointer-events: auto; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 16px var(--ck-pr, 16px) 16px 16px; border-radius: 32px; background: #fff; box-shadow: var(--shadow-menu);
  font-family: Figtree, system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
.ck-card p { flex: 1; margin: 0; padding: 8px 0 8px 12px; font-size: 15px; line-height: 22px; color: var(--muted-strong); }
.ck-card a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ck-card .b { flex: none; padding: 0 28px; }
.ck-root > .ck-card { transform: translateY(calc(100% + 32px)); transition: transform 180ms linear; }
.ck-root.is-shown > .ck-card { transform: none; transition: transform 400ms var(--ease-in); }
@media (max-width: 639px) {
  .ck-card { flex-direction: column; align-items: stretch; padding: 16px; border-radius: 40px; }
  .ck-card p { padding: 8px 12px 0; }
}

/* ── The sheet's own chrome (Russian labels: the system font — Figtree has no Cyrillic) ───────── */
body.sheet { margin: 0; background: #fff; font-family: -apple-system, system-ui, "Segoe UI", sans-serif; color: var(--ink); }
.sh-wrap { max-width: 1480px; margin: 0 auto; padding: 32px 24px 120px; }
.sh-h1 { font-size: 28px; line-height: 36px; margin: 0 0 6px; }
.sh-lead { margin: 0 0 20px; color: #555; font-size: 15px; line-height: 22px; max-width: 980px; }
.sh-list { margin: 0 0 20px; padding-left: 20px; color: #444; font-size: 14px; line-height: 21px; max-width: 1100px; }
.sh-list li { margin-bottom: 4px; }
.sh-h2 { font-size: 22px; margin: 48px 0 6px; padding-top: 16px; border-top: 1px solid #e5e5e5; }
.sh-h3 { font-size: 16px; margin: 28px 0 12px; color: #333; }
.sh-p { margin: 0 0 12px; color: #555; font-size: 14px; line-height: 20px; max-width: 980px; }
table.sh-t { border-collapse: collapse; font-size: 13px; line-height: 18px; margin: 8px 0 4px; }
.sh-t th, .sh-t td { border: 1px solid #e3e3e3; padding: 6px 10px; text-align: left; vertical-align: top; }
.sh-t th { background: #f6f6f6; font-weight: 600; }
.sh-t td.pick { background: #EEF4FF; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(680px, 1fr)); gap: 24px; align-items: start; }
.sh-tile { border: 1px solid #e3e3e3; border-radius: 12px; overflow: hidden; background: #fff; }
.sh-tile header { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid #eee; }
.sh-tile header b { font-size: 14px; }
.sh-tile header em { font-style: normal; background: #FFF3C4; border-radius: 6px; padding: 1px 6px; }
.sh-tile header span { color: #777; }
.sh-tile header button { margin-left: auto; border: 1px solid #ccc; background: #fff; border-radius: 9999px; padding: 4px 12px; font: inherit; cursor: pointer; }
.sh-stage { position: relative; display: flex; justify-content: center; padding: 48px 24px; background: #dfe3e8 url(bg/jobs-1440.png) top center / 1440px auto; overflow: hidden; }
.sh-stage::before { content: ''; position: absolute; inset: 0; background: var(--overlay); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sh-stage .jm { z-index: 1; max-height: none; }
.sh-phones { display: flex; flex-wrap: wrap; gap: 28px 24px; }
.sh-phone { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #444; }
.sh-phone em { font-style: normal; background: #FFF3C4; border-radius: 6px; padding: 1px 6px; }
.sh-phone iframe { width: 390px; height: 844px; border: 1px solid #d5d5d5; border-radius: 28px; background: #fff; }
.sh-now { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.sh-now figure { margin: 0; font-size: 12px; color: #666; }
.sh-now img { display: block; border: 1px solid #ddd; border-radius: 14px; }
.sh-ckstage { position: relative; height: 260px; background: #F4F6F8 url(bg/jobs-1440.png) top center / 1440px auto; overflow: hidden; border-radius: 0 0 12px 12px; }
.sh-ckstage .ck-root { position: absolute; }
/* Icon candidates */
.sh-icons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.sh-icons button { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 132px; padding: 12px 6px 10px; border: 1px solid #e3e3e3; border-radius: 12px; background: #fff; font: 12px/16px -apple-system, system-ui, sans-serif; color: #333; cursor: pointer; }
.sh-icons button small { color: #888; font-size: 11px; line-height: 14px; text-align: center; }
.sh-icons button.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.no-anim, .no-anim * { transition: none !important; }
/* Frame mode (the phone iframes and their replay) */
body.frame { margin: 0; min-height: 100dvh; background: #F4F6F8 url(bg/jobs-390.png) top center / 100% auto; overflow: hidden; }
.fr-replay { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; border: 0; border-radius: 9999px; background: var(--ink); color: #fff; padding: 8px 16px; font: 500 13px/1 -apple-system, system-ui, sans-serif; cursor: pointer; }