/* ==========================================================================
   Jobfuse marketing site: redesign stylesheet (handoff v1, 2026-10-01)
   - Classes only. No inline style="" anywhere (HARDENED_CSP refuses them).
   - No transitions or animation, so nothing to switch off for reduced motion.
   - Logical properties throughout (inline/block), so dir="rtl" mirrors cleanly.
   - Layout responds to the .jfm-site container (container queries), so the same
     rules work full-page in production and inside fixed-width review frames.
   - Fonts: self-host in /vendor/fonts (§NO-CDN-RUNTIME). Files listed below.
   ========================================================================== */

/* ---------- Fonts: self-hosted Bricolage Grotesque (SIL Open Font License, see fonts/OFL.txt) ---------- */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/bricolage-grotesque-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/bricolage-grotesque-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/bricolage-grotesque-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/bricolage-grotesque-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/bricolage-grotesque-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/bricolage-grotesque-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
.jfm-site {
  --jfm-font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --jfm-header-bg: #14123A;      /* header, hero, launch band (variant A) */
  --jfm-navy: #14123A;           /* ink + dark surfaces */
  --jfm-page: #FBFAF7;           /* page background */
  --jfm-white: #FFFFFF;          /* cards */
  --jfm-ink: #14123A;            /* headings on light */
  --jfm-body: #3B3863;           /* body text on light (>= 9.1:1 on every light surface) */
  --jfm-label: #3730A3;          /* section labels on light */
  --jfm-label-green: #365314;    /* section label on lime tint */
  --jfm-label-orange: #7C2D12;   /* section label on peach / page (help) */
  --jfm-indigo: #4F46E5;         /* brand: logo tile, decorative only */
  --jfm-indigo-700: #4338CA;     /* text-bearing indigo fills (white text 7.9:1) */
  --jfm-indigo-800: #3730A3;     /* indigo hover/active */
  --jfm-lime: #D9F99D;           /* buttons + pills on dark */
  --jfm-lime-hover: #C5F27A;
  --jfm-lime-active: #B4E85C;
  --jfm-lavender: #EDE9FE;
  --jfm-lime-tint: #ECFCCB;
  --jfm-peach: #FFEDD5;
  --jfm-on-dark: #E0DEFF;        /* body text on navy */
  --jfm-on-dark-muted: #C4C1E8;  /* secondary text on navy */
  --jfm-logo-fuse: #A5B4FC;      /* "fuse" on dark */
  --jfm-bolt: #FBBF24;           /* logo bolt */
  --jfm-line: #E0DEF0;           /* card borders (decorative) */
  --jfm-line-strong: #8B87B5;    /* control borders (3.37:1, meets 1.4.11) */
  --jfm-focus: #4338CA;          /* focus ring on light */
  --jfm-focus-dark: #D9F99D;     /* focus ring on dark */

  --jfm-r-sm: 8px; --jfm-r-md: 12px; --jfm-r-lg: 20px; --jfm-r-xl: 28px; --jfm-r-pill: 999px;
  --jfm-s-1: 4px; --jfm-s-2: 8px; --jfm-s-3: 12px; --jfm-s-4: 16px; --jfm-s-5: 20px; --jfm-s-6: 24px; --jfm-s-8: 32px; --jfm-s-10: 40px; --jfm-s-12: 48px;
  --jfm-wrap: 1168px;
  --jfm-gutter: 32px;
  --jfm-shadow-card: 0 1px 0 rgba(20, 18, 58, .04);
  --jfm-shadow-raised: 0 18px 40px rgba(20, 18, 58, .28);
}

/* ---------- Base ---------- */
body.jfm-page { margin: 0; background: #FBFAF7; }
body.jfm-export { margin: 0; background: #FBFAF7; }
body.jfm-export > .jfm-site { min-block-size: 100vh; display: none; }
/* Export file only: behaves like a clickable prototype. One page shows at a time; menu links (#page-…) switch pages. */
body.jfm-export > .jfm-site:target, body.jfm-export > .jfm-site:has(:target) { display: flex; }
body.jfm-export:not(:has(.jfm-site:target, .jfm-site :target)) > #page-home { display: flex; }
.jfm-site, .jfm-site * { box-sizing: border-box; }
.jfm-site {
  container-type: inline-size; container-name: site;
  background: var(--jfm-page); color: var(--jfm-body);
  font-family: var(--jfm-font); font-size: 16px; line-height: 1.55; font-weight: 400;
  min-block-size: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* stop phone browsers enlarging the tiny CV text, which overflowed the page */
}
.jfm-site.jfm-site--header-alt { --jfm-header-bg: #111827; }
.jfm-site a { color: var(--jfm-indigo-700); }
.jfm-site a:hover { color: var(--jfm-indigo-800); }
.jfm-site img { max-inline-size: 100%; display: block; }
.jfm-site :focus-visible { outline: 3px solid var(--jfm-focus); outline-offset: 3px; border-radius: 4px; }
.jfm-dark :focus-visible, .jfm-header :focus-visible, .jfm-launch :focus-visible, .jfm-ember :focus-visible { outline-color: var(--jfm-focus-dark); }
.jfm-main { flex: 1 0 auto; }
.jfm-wrap { inline-size: 100%; max-inline-size: calc(var(--jfm-wrap) + 2 * var(--jfm-gutter)); margin-inline: auto; padding-inline: var(--jfm-gutter); }
.jfm-vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.jfm-holding-only { display: none; }
.jfm-site--holding .jfm-holding-only { display: revert; }
.jfm-site--holding .jfm-live-only { display: none; }

/* ---------- Skip link ---------- */
.jfm-skip {
  position: absolute; inset-inline-start: var(--jfm-s-4); inset-block-start: -100px; z-index: 100;
  background: var(--jfm-lime); color: var(--jfm-navy) !important; font-weight: 800; font-size: 15px; line-height: 1.2;
  padding: 12px 18px; border-radius: var(--jfm-r-md); text-decoration: none;
}
.jfm-skip:focus, .jfm-skip.is-focus { inset-block-start: var(--jfm-s-3); outline: 3px solid var(--jfm-white); outline-offset: 2px; }

/* ---------- Header ---------- */
.jfm-header { background: var(--jfm-header-bg); color: var(--jfm-white); position: sticky; inset-block-start: 0; z-index: 50; }
.jfm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--jfm-s-4); min-block-size: 72px; padding-block: var(--jfm-s-3); }
.jfm-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.jfm-logo__tile { inline-size: 32px; block-size: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--jfm-indigo), var(--jfm-indigo-700)); display: grid; place-items: center; }
.jfm-logo__tile svg { inline-size: 20px; block-size: 20px; display: block; }
.jfm-logo__word { font-size: 22px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--jfm-white); }
.jfm-logo__fuse { color: var(--jfm-logo-fuse); }
.jfm-nav { display: flex; align-items: center; gap: var(--jfm-s-1); flex-wrap: wrap; }
.jfm-nav__link {
  display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 14px; border-radius: var(--jfm-r-sm);
  color: var(--jfm-on-dark) !important; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.jfm-nav__link:hover, .jfm-nav__link.is-hover { background: rgba(255, 255, 255, .10); color: var(--jfm-white) !important; }
.jfm-nav__link[aria-current="page"] { background: var(--jfm-white); color: var(--jfm-navy) !important; }
.jfm-header__actions { display: flex; align-items: center; gap: var(--jfm-s-3); flex: none; }

/* Language picker (visual spec for lang_picker.js .jfm-lp-btn): 34px high */
.jfm-lang {
  display: inline-flex; align-items: center; gap: 8px; block-size: 34px; min-inline-size: 110px; padding-inline: 12px;
  background: rgba(255, 255, 255, .09); color: var(--jfm-on-dark); border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--jfm-r-sm);
  font: 600 14px/1 var(--jfm-font); cursor: pointer;
}
.jfm-lang::after { content: ""; inline-size: 0; block-size: 0; border-inline: 5px solid transparent; border-block-start: 6px solid currentColor; margin-inline-start: auto; }
.jfm-lang__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.jfm-lang__globe { inline-size: 14px; block-size: 14px; border: 1.5px solid currentColor; border-radius: 50%; flex: none; }
.jfm-lang:hover, .jfm-lang.is-hover { background: rgba(255, 255, 255, .16); color: var(--jfm-white); }
.jfm-lang:active, .jfm-lang.is-active { background: rgba(255, 255, 255, .22); }

/* Mobile menu: native <details>, keyboard works without JS */
.jfm-menu { display: none; position: relative; }
.jfm-menu__toggle {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; block-size: 40px; padding-inline: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--jfm-r-sm); color: var(--jfm-on-dark); font: 600 14px/1 var(--jfm-font);
}
.jfm-menu__toggle::-webkit-details-marker { display: none; }
.jfm-menu__bars { inline-size: 16px; block-size: 10px; border-block: 2px solid currentColor; position: relative; }
.jfm-menu__bars::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 2px; border-block-start: 2px solid currentColor; }
.jfm-menu__toggle:hover { background: rgba(255, 255, 255, .10); color: var(--jfm-white); }
.jfm-menu__panel {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 10px); inline-size: min(300px, 86cqi); z-index: 60;
  background: var(--jfm-header-bg); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--jfm-r-md); box-shadow: var(--jfm-shadow-raised);
  padding: var(--jfm-s-2); display: flex; flex-direction: column; gap: 2px;
}
.jfm-menu__panel .jfm-nav__link { min-block-size: 44px; }
.jfm-menu__panel .jfm-btn { margin-block-start: var(--jfm-s-2); }

/* ---------- Buttons ---------- */
.jfm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; padding: 10px 20px;
  border-radius: var(--jfm-r-md); border: 2px solid transparent; font: 600 16px/1.2 var(--jfm-font); text-decoration: none; cursor: pointer; text-align: center;
}
.jfm-btn--sm { min-block-size: 40px; padding: 8px 16px; font-size: 15px; }
.jfm-btn--primary { background: var(--jfm-indigo-700); color: var(--jfm-white) !important; }
.jfm-btn--primary:hover, .jfm-btn--primary.is-hover { background: var(--jfm-indigo-800); }
.jfm-btn--primary:active, .jfm-btn--primary.is-active { background: #312E81; }
.jfm-btn--lime { background: var(--jfm-lime); color: var(--jfm-navy) !important; }
.jfm-btn--lime:hover, .jfm-btn--lime.is-hover { background: var(--jfm-lime-hover); }
.jfm-btn--lime:active, .jfm-btn--lime.is-active { background: var(--jfm-lime-active); }
.jfm-btn.is-focus { outline: 3px solid var(--jfm-focus); outline-offset: 3px; }
.jfm-dark .jfm-btn.is-focus { outline-color: var(--jfm-focus-dark); }

/* ---------- Type ---------- */
.jfm-h1 { margin: 0; color: var(--jfm-white); font-size: clamp(36px, 4.6cqi, 60px); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.jfm-h1__line { display: block; }
.jfm-h1__hl { color: var(--jfm-lime); }
.jfm-h2 { margin: 0; color: var(--jfm-ink); font-size: clamp(28px, 3.2cqi, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.jfm-h3 { margin: 0; color: var(--jfm-ink); font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.jfm-eyebrow { margin: 0; color: var(--jfm-label); font-size: 13px; line-height: 1.3; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jfm-eyebrow--green { color: var(--jfm-label-green); }
.jfm-eyebrow--orange { color: var(--jfm-label-orange); }
.jfm-eyebrow--on-dark { color: var(--jfm-lime); }
.jfm-copy { margin: 0; color: var(--jfm-body); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.jfm-text { margin: 0; color: var(--jfm-body); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.jfm-small { margin: 0; font-size: 14px; line-height: 1.5; }

/* ---------- Hero ---------- */
.jfm-hero { background: var(--jfm-header-bg); color: var(--jfm-on-dark); overflow: clip; }
.jfm-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--jfm-s-8); align-items: center; padding-block: var(--jfm-s-8) var(--jfm-s-10); }
.jfm-hero__text { display: flex; flex-direction: column; gap: var(--jfm-s-5); align-items: flex-start; }
.jfm-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--jfm-lime); color: var(--jfm-navy); font-size: 14px; line-height: 1.3; font-weight: 600; padding: 7px 14px; border-radius: var(--jfm-r-pill); }
.jfm-lead { margin: 0; color: var(--jfm-on-dark); font-size: clamp(16px, 1.6cqi, 19px); line-height: 1.5; max-inline-size: 34em; text-wrap: pretty; }
.jfm-note { margin: 0; color: var(--jfm-on-dark-muted); font-size: 15px; line-height: 1.5; max-inline-size: 36em; text-wrap: pretty; }
.jfm-hero__art { display: flex; flex-direction: column; gap: var(--jfm-s-5); }
.jfm-hero__stack { position: relative; inline-size: 100%; aspect-ratio: 1 / 1; min-inline-size: 0; }
.jfm-hero__cv { position: absolute; inline-size: 66%; block-size: auto; aspect-ratio: 794 / 1122; object-fit: cover; object-position: top; border-radius: 8px; box-shadow: var(--jfm-shadow-raised); background: var(--jfm-white); }
.jfm-hero__cv--back { inset-inline-start: 0; inset-block-start: 6%; rotate: -3deg; }
.jfm-hero__cv--front { inset-inline-end: 0; inset-block-start: 0; }
[dir="rtl"] .jfm-hero__cv--back { rotate: 3deg; }
.jfm-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.jfm-tag { display: inline-flex; align-items: center; gap: 10px; background: var(--jfm-lime); color: var(--jfm-navy); font-size: 15px; line-height: 1.25; font-weight: 800; padding: 10px 16px; border-radius: var(--jfm-r-pill); box-shadow: var(--jfm-shadow-raised); }
.jfm-tag__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--jfm-navy); flex: none; }

/* ---------- Sections ---------- */
.jfm-section { padding-block: var(--jfm-s-10); }
.jfm-section--tight-top { padding-block-start: var(--jfm-s-8); }
.jfm-stack { display: flex; flex-direction: column; gap: var(--jfm-s-6); }
.jfm-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--jfm-s-4) var(--jfm-s-12); align-items: end; }
.jfm-intro__head { display: flex; flex-direction: column; gap: var(--jfm-s-3); }
.jfm-panel { border-radius: var(--jfm-r-xl); padding: var(--jfm-s-8); display: flex; flex-direction: column; gap: var(--jfm-s-6); }
.jfm-panel--lime { background: var(--jfm-lime-tint); }

.jfm-stack--tight { gap: var(--jfm-s-3); }
.jfm-copy--strong { color: var(--jfm-ink); font-weight: 600; }
.jfm-intro--top { align-items: start; }
.jfm-intro--top .jfm-intro__head { gap: var(--jfm-s-4); }
.jfm-launch .jfm-text, .jfm-on-dark-text { color: var(--jfm-on-dark); }

/* ---------- Grids ---------- */
.jfm-grid { display: grid; gap: var(--jfm-s-4); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.jfm-grid--2 { --cols: 2; } .jfm-grid--3 { --cols: 3; } .jfm-grid--4 { --cols: 4; } .jfm-grid--5 { --cols: 5; }
.jfm-grid--start { align-items: start; }

/* ---------- Cards ---------- */
.jfm-card { border-radius: var(--jfm-r-lg); padding: var(--jfm-s-6); display: flex; flex-direction: column; gap: var(--jfm-s-3); background: var(--jfm-white); border: 1.5px solid var(--jfm-line); color: var(--jfm-body); }
.jfm-card--lavender { background: var(--jfm-lavender); border-color: transparent; }
.jfm-card--lime { background: var(--jfm-lime-tint); border-color: transparent; }
.jfm-card--peach { background: var(--jfm-peach); border-color: transparent; }
.jfm-card--dark { background: var(--jfm-navy); border-color: transparent; color: var(--jfm-on-dark); }
.jfm-card--dark .jfm-h3 { color: var(--jfm-white); }
.jfm-card--dark .jfm-text { color: var(--jfm-on-dark); }
.jfm-card__head { display: flex; align-items: flex-end; min-block-size: 2.5em; padding-block-end: var(--jfm-s-3); border-block-end: 1.5px solid var(--jfm-lavender); }
a.jfm-card { text-decoration: none; }
a.jfm-card:hover, a.jfm-card.is-hover { border-color: var(--jfm-indigo-700); }
a.jfm-card:hover .jfm-h3, a.jfm-card.is-hover .jfm-h3 { text-decoration: underline; text-underline-offset: 3px; }
a.jfm-card:active, a.jfm-card.is-active { background-image: linear-gradient(rgba(20, 18, 58, .05), rgba(20, 18, 58, .05)); }
a.jfm-card.is-focus { outline: 3px solid var(--jfm-focus); outline-offset: 3px; }
.jfm-card--lavender, .jfm-card--lime, .jfm-card--peach { border-width: 1.5px; }

/* Icon tile (decorative). Directional arrows mirror in RTL. */
.jfm-icon { inline-size: 44px; block-size: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--jfm-white); font-size: 20px; font-weight: 800; line-height: 1; flex: none; }
.jfm-icon--indigo { background: var(--jfm-indigo-700); }
.jfm-icon--green { background: #3F6212; }
.jfm-icon--orange { background: #9A3412; }
.jfm-icon--bolt { background: var(--jfm-lime); inline-size: 56px; block-size: 56px; border-radius: 50%; }
.jfm-icon--bolt svg { inline-size: 26px; block-size: 26px; }
[dir="rtl"] .jfm-icon--dir { transform: scaleX(-1); }

/* Steps */
.jfm-step { border-radius: var(--jfm-r-lg); padding: var(--jfm-s-5); display: flex; flex-direction: column; gap: 6px; }
.jfm-step__n { color: var(--jfm-label); font-size: 24px; line-height: 1; font-weight: 800; margin-block-end: 4px; }
.jfm-step--lavender { background: var(--jfm-lavender); }
.jfm-step--lime { background: var(--jfm-lime-tint); } .jfm-step--lime .jfm-step__n { color: var(--jfm-label-green); }
.jfm-step--peach { background: var(--jfm-peach); } .jfm-step--peach .jfm-step__n { color: var(--jfm-label-orange); }

.jfm-steps { list-style: none; margin: 0; padding: 0; }
.jfm-step__link { color: var(--jfm-ink) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.jfm-step__link:hover { color: var(--jfm-indigo-800) !important; }

/* Tick list */
.jfm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jfm-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.45; color: var(--jfm-body); }
.jfm-list li::before { content: "✓"; color: var(--jfm-indigo-700); font-weight: 800; }

/* Chips (static labels, not controls) */
.jfm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--jfm-s-2); }
.jfm-chip { background: var(--jfm-white); border: 1.5px solid var(--jfm-line); border-radius: var(--jfm-r-sm); padding: 6px 12px; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--jfm-ink); }

/* ---------- CV image switcher (images only; not usable, editable or downloadable) ---------- */
.jfm-switcher { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: var(--jfm-s-8); align-items: start; }
.jfm-switcher__controls { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--jfm-s-3); }
.jfm-switcher__legend { padding: 0; margin-block-end: var(--jfm-s-3); }
.jfm-switcher__options { display: flex; flex-wrap: wrap; gap: var(--jfm-s-2); }
.jfm-switcher__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; }
.jfm-switcher__label {
  display: inline-flex; align-items: center; min-block-size: 40px; padding: 8px 14px; cursor: pointer;
  background: var(--jfm-white); border: 1.5px solid var(--jfm-line-strong); border-radius: var(--jfm-r-sm);
  font-size: 15px; line-height: 1.25; font-weight: 600; color: var(--jfm-ink);
}
.jfm-switcher__label:hover, .jfm-switcher__label.is-hover { border-color: var(--jfm-indigo-700); background: var(--jfm-lavender); }
.jfm-switcher__input:checked + .jfm-switcher__label, .jfm-switcher__label.is-active { background: var(--jfm-navy); border-color: var(--jfm-navy); color: var(--jfm-white); }
.jfm-switcher__input:focus-visible + .jfm-switcher__label, .jfm-switcher__label.is-focus { outline: 3px solid var(--jfm-focus); outline-offset: 3px; }
.jfm-switcher__subhead { margin-block-start: var(--jfm-s-4); }
.jfm-switcher__summary { margin: var(--jfm-s-3) 0 0; font-size: 15px; line-height: 1.5; color: var(--jfm-body); }
.jfm-switcher__stage { position: relative; background: #ECEBF3; border-radius: var(--jfm-r-xl); padding: var(--jfm-s-6); display: grid; justify-items: center; }
.jfm-switcher__fig { display: none; margin: 0; inline-size: 100%; max-inline-size: 560px; }
.jfm-switcher__fig img { inline-size: 100%; block-size: auto; aspect-ratio: 794 / 1122; border-radius: 6px; box-shadow: 0 24px 60px rgba(20, 18, 58, .18); background: var(--jfm-white); user-select: none; -webkit-user-drag: none; pointer-events: none; }
.jfm-sample { order: -1; justify-self: center; margin-block-end: var(--jfm-s-2); background: var(--jfm-navy); color: var(--jfm-white); font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--jfm-r-pill); }
.jfm-switcher:has(#cv-executive:checked) .jfm-switcher__fig--executive,
.jfm-switcher:has(#cv-tech:checked) .jfm-switcher__fig--tech,
.jfm-switcher:has(#cv-graduate:checked) .jfm-switcher__fig--graduate,
.jfm-switcher:has(#cv-creative:checked) .jfm-switcher__fig--creative,
.jfm-switcher:has(#cv-medical:checked) .jfm-switcher__fig--medical,
.jfm-switcher:has(#cv-sales:checked) .jfm-switcher__fig--sales,
.jfm-switcher:has(#cv-academic:checked) .jfm-switcher__fig--academic,
.jfm-switcher:has(#cv-trades:checked) .jfm-switcher__fig--trades,
.jfm-switcher:has(#cv-driver:checked) .jfm-switcher__fig--driver,
.jfm-switcher:has(#cv-finance:checked) .jfm-switcher__fig--finance { display: block; }

/* Live sample preview (added by cv-sample-preview.js; static images stay as the no-JS fallback) */
.jfm-switcher--live .jfm-switcher__fig { display: none !important; }
.jfm-sample--on-cv { z-index: 3; }
.jfm-switcher__group { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--jfm-s-2); margin-block-start: var(--jfm-s-4); }
.jfm-switcher__group > .jfm-switcher__subhead { margin-block-start: 0; padding: 0; }
.jfm-select {
  appearance: none; inline-size: 100%; min-block-size: 44px; padding: 10px 40px 10px 14px; cursor: pointer;
  background-color: var(--jfm-white); background-image: linear-gradient(45deg, transparent 50%, var(--jfm-ink) 50%), linear-gradient(-45deg, transparent 50%, var(--jfm-ink) 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
  border: 1.5px solid var(--jfm-line-strong); border-radius: var(--jfm-r-sm); color: var(--jfm-ink); font: 600 15px/1.25 var(--jfm-font);
}
[dir="rtl"] .jfm-select { padding: 10px 14px 10px 40px; background-position: 14px 50%, 20px 50%; }
.jfm-select:hover { border-color: var(--jfm-indigo-700); }
.jfm-swatches > legend { margin-block-end: var(--jfm-s-2); }
.jfm-swatches__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.jfm-swatch__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; }
.jfm-swatch { position: relative; display: grid; grid-template-rows: 28% 1fr; grid-template-columns: 34% 1fr; aspect-ratio: 28 / 36; border-radius: 4px; overflow: hidden; cursor: pointer; background: var(--jfm-white); box-shadow: 0 0 0 1px rgba(20, 18, 58, .22); }
.jfm-swatch__band { grid-column: 1 / -1; }
.jfm-swatch__side { grid-row: 2; grid-column: 1; }
.jfm-swatch__accent { grid-row: 2; grid-column: 2; align-self: start; margin: 22% 18% 0; block-size: 3px; border-radius: 2px; }
.jfm-swatch:hover { box-shadow: 0 0 0 2px var(--jfm-indigo-700); }
.jfm-swatch__input:checked + .jfm-swatch { box-shadow: 0 0 0 2px var(--jfm-page), 0 0 0 4px var(--jfm-navy); }
.jfm-swatch__input:focus-visible + .jfm-swatch { outline: 3px solid var(--jfm-focus); outline-offset: 4px; }
.jfm-swatches__current { margin: 2px 0 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--jfm-ink); }
.jfm-live { position: relative; overflow: hidden; border-radius: 6px; background: var(--jfm-white); box-shadow: 0 24px 60px rgba(20, 18, 58, .18); pointer-events: none; user-select: none; -webkit-user-select: none; }
.jfm-live__paper { position: absolute; top: 0; left: 0; inline-size: 794px; block-size: 1122px; overflow: hidden; background: var(--jfm-white); transform-origin: 0 0; }
@container site (max-width: 600px) { .jfm-swatches__grid { gap: 5px; } }

/* ---------- Ember ---------- */
.jfm-ember { background: var(--jfm-navy); color: var(--jfm-on-dark); border-radius: var(--jfm-r-lg); padding: var(--jfm-s-6) var(--jfm-s-8); display: flex; gap: var(--jfm-s-6); align-items: center; }
.jfm-ember .jfm-h3 { color: var(--jfm-white); font-size: 24px; }
.jfm-ember .jfm-text { color: var(--jfm-on-dark); }

/* ---------- Plans ---------- */
.jfm-plan { border-radius: var(--jfm-r-lg); padding: var(--jfm-s-6); display: flex; flex-direction: column; gap: var(--jfm-s-2); background: var(--jfm-white); border: 1.5px solid var(--jfm-line); }
.jfm-plan--featured { background: var(--jfm-indigo-700); border-color: var(--jfm-indigo-700); color: var(--jfm-white); }
.jfm-plan--featured .jfm-h3, .jfm-plan--featured .jfm-price, .jfm-plan--featured .jfm-text, .jfm-plan--featured .jfm-price__per { color: var(--jfm-white); }
.jfm-price { margin: 0; color: var(--jfm-ink); font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.jfm-price__per { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--jfm-body); }
.jfm-tbc { display: inline-flex; align-self: flex-start; background: var(--jfm-lime); color: var(--jfm-navy); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--jfm-r-pill); }
.jfm-bolts { background: var(--jfm-lavender); border-radius: var(--jfm-r-lg); padding: var(--jfm-s-3); }
.jfm-bolt { background: var(--jfm-white); border-radius: var(--jfm-r-md); padding: var(--jfm-s-4) var(--jfm-s-5); display: flex; flex-direction: column; gap: 2px; }
.jfm-bolt__name { margin: 0; color: var(--jfm-ink); font-size: 17px; line-height: 1.3; font-weight: 800; }
.jfm-bolt__price { margin: 0; color: var(--jfm-indigo-700); font-size: 20px; line-height: 1.3; font-weight: 800; white-space: nowrap; }
.jfm-trust { border-block-start: 2px solid var(--jfm-navy); padding-block-start: var(--jfm-s-4); display: flex; flex-direction: column; gap: 6px; }
.jfm-trust .jfm-h3 { font-size: 19px; }

/* ---------- Launch band (holding) + footer (live) ---------- */
.jfm-launch { background: var(--jfm-header-bg); color: var(--jfm-on-dark); }
.jfm-launch__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jfm-s-5) var(--jfm-s-8); padding-block: var(--jfm-s-10); }
.jfm-launch__text { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; flex: 1 1 420px; }
.jfm-launch__title { margin: 0; color: var(--jfm-white); font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; }
.jfm-launch__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--jfm-s-3); }
.jfm-copyright { margin: 0; color: var(--jfm-on-dark-muted); font-size: 14px; line-height: 1.4; }
.jfm-footer { background: var(--jfm-header-bg); color: var(--jfm-on-dark-muted); }
.jfm-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jfm-s-3) var(--jfm-s-6); padding-block: var(--jfm-s-6); }
.jfm-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--jfm-s-1) var(--jfm-s-2); }
.jfm-footer__link { display: inline-flex; align-items: center; min-block-size: 32px; padding-inline: 6px; color: var(--jfm-on-dark-muted) !important; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 6px; }
.jfm-footer__link:hover, .jfm-footer__link.is-hover { color: var(--jfm-white) !important; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive: tablet (container <= 960px) ---------- */
@container site (max-width: 960px) {
  .jfm-header .jfm-nav--primary { display: none; }
  .jfm-menu { display: block; }
  .jfm-grid--4, .jfm-grid--5 { --cols: 2; }
  .jfm-grid--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .jfm-intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .jfm-switcher { grid-template-columns: minmax(0, 1fr); }
  .jfm-tag { font-size: 14px; padding: 8px 14px; }
}
/* ---------- Responsive: phone (container <= 600px) ---------- */
@container site (max-width: 600px) {
  .jfm-wrap { padding-inline: var(--jfm-s-4); }
  .jfm-header__inner { min-block-size: 64px; gap: var(--jfm-s-2); }
  .jfm-logo__word { font-size: 20px; }
  .jfm-header__actions > .jfm-btn { display: none; }
  .jfm-lang { min-inline-size: 0; max-inline-size: 42cqi; }
  .jfm-menu__label { display: none; }
  .jfm-menu__toggle { inline-size: 44px; block-size: 44px; justify-content: center; padding: 0; }
  .jfm-logo { min-inline-size: 0; }
  .jfm-header__actions { flex: 0 1 auto; min-inline-size: 0; }
  .jfm-hero__grid { grid-template-columns: minmax(0, 1fr); padding-block: var(--jfm-s-6) var(--jfm-s-8); }
  .jfm-hero__art { display: none; }
  .jfm-grid--2, .jfm-grid--3, .jfm-grid--4 { --cols: 1; }
  .jfm-grid--5 { --cols: 1; }
  .jfm-grid--5 > :last-child:nth-child(odd) { grid-column: auto; }
  .jfm-section { padding-block: var(--jfm-s-8); }
  .jfm-panel { padding: var(--jfm-s-5); border-radius: var(--jfm-r-lg); }
  .jfm-ember { flex-direction: column; align-items: flex-start; padding: var(--jfm-s-5); }
  .jfm-switcher__stage { padding: var(--jfm-s-3); }
  .jfm-launch__aside { align-items: flex-start; }
  .jfm-bolts { padding: var(--jfm-s-2); }
}
@container site (min-width: 601px) { .jfm-menu__panel .jfm-btn { display: none; } }