/* CV Mojo v3: the /first-cv page (includes/site/v3/pages/first-cv.php) and the "First CV?" band on
   the v3 homepage (includes/site/v3/pages/home.php). Prefix v-fc-. Builds on v3.css (bands, lockups,
   points, badges, v-list, v-qa, sheet); only the question-card art, the "done more than you think"
   cards and the put-on / leave-off cards are new. Palette rules as in v3.css (no red, no purple). */

/* The question card art (hero and homepage band). */
.v-fc-art { position: relative; width: 100%; max-width: 560px; min-height: 460px; margin-left: auto; }
.v-fc-art__disc { position: absolute; inset: 8% 2% 0 12%; transform: rotate(-10deg); }
.v-fc-q { position: absolute; z-index: 2; left: 0; top: 7%; display: grid; gap: 12px; width: min(80%, 390px); padding: 22px 20px 18px; background: var(--paper); border-radius: 24px; box-shadow: 0 24px 48px rgba(30, 42, 90, .22); transform: rotate(-3deg); }
.v-fc-q p { margin: 0; }
.v-fc-q__step { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.v-fc-q__step i { width: 8px; height: 8px; background: #E6E0D2; border-radius: 999px; }
.v-fc-q__step i:first-of-type { margin-left: 6px; }
.v-fc-q__step i.is-on { width: 22px; background: var(--navy); }
.v-fc-q__h { font-family: var(--display); font-size: 36px; line-height: .95; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.v-fc-q__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v-fc-q__opt { display: grid; gap: 2px; padding: 10px 12px; background: var(--cream); border: 2px solid transparent; border-radius: 14px; }
.v-fc-q__opt b { font-size: 13.5px; font-weight: 900; line-height: 1.25; color: var(--navy); }
.v-fc-q__opt small { font-size: 12px; line-height: 1.3; color: var(--grey); }
.v-fc-q__opt.is-on { background: var(--sun-l); border-color: var(--navy); }
.v-fc-q__say { padding: 9px 12px; font-size: 13.5px; font-weight: 700; color: var(--navy); background: var(--mint); border-radius: 12px; }
.v-fc-sheet { position: absolute; z-index: 3; right: 2%; bottom: 3%; width: 42%; transform: rotate(6deg); }
.v-fc-art__badge { --bs: 118px; position: absolute; z-index: 4; right: -2%; top: -2%; transform: rotate(10deg); animation: v-bob 6s ease-in-out infinite; }

/* You've done more than you think: paper cards on the tangerine band. */
.v-fc-did { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(44px, 5vw, 64px); list-style: none; }
.v-fc-did li { display: grid; align-content: start; gap: 12px; padding: 24px 22px 22px; background: var(--paper); border-radius: 22px; box-shadow: 0 16px 34px rgba(90, 40, 0, .2); }
.v-fc-did li:nth-child(odd) { transform: rotate(-1.2deg); }
.v-fc-did li:nth-child(even) { transform: rotate(1deg); }
.v-fc-did h3 { margin: 0; font-family: var(--display); font-size: 30px; line-height: .92; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.v-fc-did p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.v-fc-did .v-chip { margin-right: 6px; vertical-align: 1px; }

/* Put on / leave off. */
.v-fc-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin-top: clamp(52px, 6vw, 72px); }
.v-fc-card { position: relative; padding: 38px 32px 32px; background: var(--paper); border-radius: 26px; box-shadow: var(--shadow); }
.v-fc-card:nth-child(1) { transform: rotate(-1deg); }
.v-fc-card:nth-child(2) { transform: rotate(1deg); }
.v-fc-card .v-badge { --bs: 108px; position: absolute; top: -42px; right: -16px; transform: rotate(10deg); }
.v-fc-card h3 { max-width: 12ch; margin: 0 0 20px; font-family: var(--display); font-size: clamp(40px, 3.8vw, 52px); line-height: .9; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.v-fc-card .v-list, .v-fc-no { font-size: 17px; }
.v-fc-no { display: grid; gap: 10px; list-style: none; }
.v-fc-no li { position: relative; padding-left: 34px; }
.v-fc-no li::before { content: ''; position: absolute; left: 0; top: .2em; width: 23px; height: 23px; background: var(--v-fc-x) center / contain no-repeat; }
:root { --v-fc-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23B34A00'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Homepage band: "First CV? We'll help you make it." */
.v-fc-home__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.v-fc-home .v-lede { color: var(--text); }
.v-fc-home .v-ticks li { color: var(--text); }

@media (max-width: 1100px) {
  .v-fc-did { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .v-fc-art { margin: 8px auto 0; min-height: 430px; }
  .v-fc-home__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .v-fc-art { min-height: 400px; }
  .v-fc-q { width: 88%; padding: 18px 16px 16px; }
  .v-fc-q__h { font-size: 30px; }
  .v-fc-sheet { width: 46%; bottom: 0; }
  .v-fc-art__badge { --bs: 96px; right: -4px; top: -4%; }
  .v-fc-did { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .v-fc-lists { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .v-fc-card { padding: 36px 22px 26px; }
  .v-fc-card .v-badge { --bs: 92px; right: -4px; }
}
@media (prefers-reduced-motion: reduce) { .v-fc-art__badge { animation: none; } }

/* "No CV yet?" under the hero bullets on the homepage and /cv-checker (includes/site/pages/_nocv.php).
   Secondary swatch buttons (mint, paper) on a pale sunshine panel, so the navy check stays the main action. */
.v-nocv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 520px; margin-top: 24px; padding: 14px 20px 16px; background: var(--sun-l); border-radius: 22px; }
.v-nocv__q { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--text); }
.v-nocv__q b { font-weight: 900; color: var(--navy); }
.v-nocv__btns { display: flex; flex-wrap: wrap; gap: 10px 14px; }
@media (max-width: 640px) {
  .v-nocv { margin-top: 22px; padding: 12px 14px 14px; }
  .v-nocv__q { font-size: 15.5px; }
  .v-nocv__btns { flex-wrap: nowrap; gap: 8px; }
  .v-nocv__btns .v-btn { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .5em .7em .36em; font-size: 19px; white-space: normal; }
}