/* CV & LinkedIn Checker styles, on top of cbc.css (CBC brand framework v2.0).
   Theme: matches the look of CBC's live website (career-bootcamp.net, October 2026):
   dark navy #0C1224, gold #F4C553, light grey sections, Poppins, 5px corners. */

/* Poppins (SIL OFL, see /assets/fonts/OFL-Poppins.txt), self-hosted. */
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/fonts/poppins-latin-600-normal.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
    --cbc-navy: #0C1224;
    --cbc-dark-alt: #1B2235;
    --cbc-gold: #F4C553;
    --cbc-gold-hover: #E6B53F;
    --cbc-gold-light: #FDF6E3;
    --cbc-text: #2F2E2E;
    --cbc-text-light: #707070;
    --cbc-bg-light: #F5F5F5;
    --cbc-border: #E8E6E6;
    --radius-sm: 5px;
    --radius-md: 5px;
    --font: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body, button, input, textarea { font-family: var(--font); }
body { color: var(--cbc-text); }

h1, h2, h3, h4, h5, h6,
.stat-number, .metric, .data-point, .footer-col h4, .score-number, .plan-price, .step-number {
    font-family: var(--font);
    font-weight: 600;
}
h1, h2 { letter-spacing: -0.5px; }

.hero, .bg-dark-gradient { background: linear-gradient(160deg, #1B2235 0%, var(--cbc-navy) 70%); }
.btn-primary, .btn-secondary-dark { font-weight: 500; }
.btn-primary { color: var(--cbc-navy); }
.btn-secondary-dark { border-color: var(--cbc-navy); }

/* Dark sections, as on the live site */
.section-dark { background: var(--cbc-navy); color: #E8E6E6; }
.section-dark h2 { color: #fff; }
.section-dark h3 { color: var(--cbc-gold); }
.section-dark .section-header p { color: #B4B4B4; }

/* Draft banner sits inside the fixed header */
.draft-banner {
    background: var(--cbc-warning);
    color: #000;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.4rem var(--space-md);
    margin: -0.875rem 0 0.875rem;
}

.pending {
    outline: 2px dashed var(--cbc-warning);
    outline-offset: 3px;
    cursor: help;
}

/* Header navigation */
.site-nav a:not(.btn-primary) {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    padding: var(--space-sm) 0.75rem;
    border-radius: var(--radius-sm);
}
.site-nav a:not(.btn-primary):hover { background: rgba(255,255,255,0.1); }
.site-nav .lang-switch { border: 1px solid rgba(255,255,255,0.3); }
.site-nav .btn-primary { margin-left: var(--space-sm); }
/* cbc.css hides nav below 968px for a hamburger menu; this page has no menu, so keep the language switch visible */
@media (max-width: 968px) { nav.site-nav { display: flex; } }

/* Hero */
.hero { min-height: auto; padding-top: 9rem; }
.hero h1 { color: #fff; margin-bottom: var(--space-lg); }
.hero-lead { font-size: 1.15rem; color: rgba(255,255,255,0.85); max-width: 720px; margin: 0 auto var(--space-lg); }
.hero-points {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-xl);
    margin-bottom: var(--space-2xl);
    color: #fff;
    font-size: 0.95rem;
}
.hero-points li::before { content: "– "; color: var(--cbc-gold); }

.start-form { max-width: 560px; margin: 0 auto; text-align: left; }
.start-form label { display: block; color: #fff; font-weight: 600; margin-bottom: var(--space-sm); }
.start-row { display: flex; gap: var(--space-sm); }
.start-row input {
    flex: 1;
    min-width: 0;
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
}
.start-row input:focus-visible { outline: 3px solid var(--cbc-gold); outline-offset: 2px; }
.start-row button:disabled { opacity: 0.5; cursor: not-allowed; }
/* .hero p in cbc.css sets large type and margins; reset for the small hero lines */
.hero .hero-eyebrow { display: inline-block; color: var(--cbc-gold); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; background: var(--cbc-navy); border: 1px solid rgba(232,230,230,0.2); border-radius: 999px; padding: 0.5rem 1.5rem; margin-bottom: 1.5rem; max-width: none; }
.hero .start-small { color: rgba(255,255,255,0.7); font-size: 0.85rem; margin: var(--space-sm) 0 0; }
.hero .ai-note { color: rgba(255,255,255,0.6); font-size: 0.8rem; margin: var(--space-lg) auto 0; }
.hero .tagline {
    font-family: var(--font);
    color: var(--cbc-gold);
    font-weight: 500;
    letter-spacing: 1px;
    margin: var(--space-xl) auto 0;
}

/* Lists with dashes (brand: dashes, not bullets) */
.dash-list { list-style: none; margin-top: var(--space-md); }
.dash-list li { padding-left: 1.25rem; position: relative; margin-bottom: 0.4rem; }
.dash-list li::before { content: "–"; position: absolute; left: 0; color: var(--cbc-gold); font-weight: 700; }

.section-header p { color: var(--cbc-text-light); max-width: 640px; margin: var(--space-md) auto 0; }
.tools h3, .swiss-item h3 { margin-bottom: var(--space-md); }
.swiss-item { border-top: 2px solid var(--cbc-gold); padding-top: var(--space-lg); }

/* Sample report */
.sample { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-2xl); }
.sample-person { font-weight: 600; color: var(--cbc-navy); }
.score { display: flex; flex-direction: column; margin-bottom: var(--space-xl); }
.score-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--cbc-text-light); }
.score-number { font-size: 3.5rem; font-weight: 700; color: var(--cbc-navy); line-height: 1.1; }
.score-potential .score-number { color: var(--cbc-gold); }
.score-badge {
    align-self: flex-start;
    background: var(--cbc-gold-light);
    color: var(--cbc-navy);
    border: 1px solid var(--cbc-gold);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.flag { border-left: 4px solid var(--cbc-warning); background: #fffbeb; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); margin-bottom: var(--space-lg); }
.flag p { margin-bottom: 0; }
.flag-title { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.rewrite { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.rewrite > div { background: var(--cbc-bg-light); border-radius: var(--radius-md); padding: var(--space-md); }
.rewrite-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--cbc-text-light); margin-bottom: var(--space-xs); }
.rewrite-before { color: var(--cbc-text-light); margin-bottom: 0; }
.rewrite-after { color: var(--cbc-navy); font-weight: 600; margin-bottom: 0; }
.placeholder-note { font-size: 0.85rem; color: var(--cbc-text-light); margin: var(--space-sm) 0 var(--space-lg); }
.plan { list-style: none; margin-top: var(--space-md); }
.plan li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--cbc-border); }
.plan-when { display: inline-block; min-width: 8.5rem; font-weight: 700; color: var(--cbc-navy); }

/* Steps */
.steps { list-style: none; }
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--cbc-navy);
    color: var(--cbc-gold);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
}
.step h3 { margin-bottom: var(--space-sm); }

/* Pricing */
.pricing { align-items: stretch; }
.plan-card { display: flex; flex-direction: column; position: relative; }
.plan-card .dash-list { flex: 1; margin-bottom: var(--space-lg); }
.plan-badge {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cbc-gold);
    color: var(--cbc-navy);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.2rem 0.8rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.plan-text { color: var(--cbc-text-light); font-size: 0.9rem; min-height: 2.8em; }
.plan-price { font-size: 2.25rem; font-weight: 700; color: var(--cbc-navy); margin-bottom: 0; line-height: 1.1; }
.plan-currency { font-size: 1rem; font-weight: 500; }
.plan-per { font-size: 0.8rem; color: var(--cbc-text-muted); }
.plan-button { text-align: center; padding: 0.9rem 1rem; }

/* Stats */
.stats-section .stats-bar { border-top: none; padding-top: 0; }
.stats-section .stat-item { text-align: center; }

/* FAQ with native details/summary: works without JavaScript */
.faq-entry {
    background: #fff;
    border: 1px solid var(--cbc-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}
.faq-entry summary {
    cursor: pointer;
    padding: 1.1rem 1.5rem;
    font-weight: 600;
    color: var(--cbc-navy);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
}
.faq-entry summary::-webkit-details-marker { display: none; }
.faq-entry summary::after { content: "+"; color: var(--cbc-gold); font-size: 1.4rem; line-height: 1; }
.faq-entry[open] summary::after { content: "–"; }
.faq-entry p { padding: 0 1.5rem 1.25rem; margin: 0; color: var(--cbc-text-light); }

.final h2 { margin-bottom: var(--space-xl); }

/* Footer */
.footer-grid { grid-template-columns: 2fr 1fr 1.5fr; }
.footer-brand img { height: 36px; width: auto; margin-bottom: var(--space-md); }
.footer-col p, .footer-col a { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.footer-bottom p { font-size: 0.8rem; color: var(--cbc-text-muted); margin: 0; }

/* Responsive */
@media (max-width: 968px) {
    .grid-4.pricing { grid-template-columns: repeat(2, 1fr); }
    .sample { grid-template-columns: 1fr; gap: var(--space-lg); }
    .site-nav a[href^="#"]:not(.btn-primary) { display: none; }
}
@media (max-width: 768px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    section { padding: var(--space-2xl) var(--space-md); }
    .header-container { padding: 0 var(--space-md); }
    .hero { padding-top: 8rem; }
    .start-row { flex-direction: column; }
    .grid-4.pricing { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .rewrite { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .logo img { height: 30px; }
    .site-nav .btn-primary { display: none; }
}

/* Anchor targets clear the fixed header (with draft banner) */
section[id] { scroll-margin-top: 120px; }

/* Sign-up flow pages */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.flow { background: var(--cbc-bg-light); }
.flow-main { padding: 9rem var(--space-md) var(--space-4xl); }
.flow-card { max-width: 640px; margin: 0 auto; }
.flow-card h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-bottom: var(--space-md); }
.flow-note { font-size: 0.85rem; color: var(--cbc-text-light); }
.form-error { background: #fef2f2; border-left: 4px solid var(--cbc-error); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); }
.test-box { background: #fffbeb; border: 1px dashed var(--cbc-warning); padding: var(--space-md); border-radius: var(--radius-md); word-break: break-all; }
.test-box p:last-child { margin-bottom: 0; }
.test-box a { color: var(--cbc-navy); text-decoration: underline; }
.check { display: flex; gap: var(--space-sm); align-items: flex-start; margin-bottom: var(--space-md); cursor: pointer; }
.check input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--cbc-navy); }
.check a { color: var(--cbc-navy); text-decoration: underline; }
.doc-choice { border: none; margin-bottom: var(--space-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.doc-choice legend { font-weight: 600; margin-bottom: var(--space-sm); color: var(--cbc-navy); }
.doc-option { border: 2px solid var(--cbc-border); border-radius: var(--radius-lg); padding: var(--space-md); cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; }
.doc-option:has(input:checked) { border-color: var(--cbc-gold); background: var(--cbc-gold-light); }
.doc-option input { accent-color: var(--cbc-navy); }
.doc-name { font-weight: 700; color: var(--cbc-navy); }
.doc-hint { font-size: 0.85rem; color: var(--cbc-text-light); }
.flow-card .form-group label { display: block; font-weight: 600; margin-bottom: var(--space-xs); color: var(--cbc-navy); }
.flow-card input[type="text"], .flow-card textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--cbc-border); border-radius: var(--radius-md); font: inherit; }
.flow-card input:focus-visible, .flow-card textarea:focus-visible { outline: 3px solid var(--cbc-gold); outline-offset: 1px; }
@media (max-width: 600px) { .doc-choice { grid-template-columns: 1fr; } .flow-main { padding-top: 8rem; } }

/* Live-site header and hero (career-bootcamp.net): transparent header on a slate hero,
   no fixed bar. The live hero is a background video; here a navy blue gradient (no grey). */
body:not(.flow) header { position: absolute; background: transparent; box-shadow: none; }
body:not(.flow) section[id] { scroll-margin-top: 0; }
.hero {
    background:
        radial-gradient(ellipse at 78% 90%, #070B17 0%, rgba(7, 11, 23, 0) 55%),
        linear-gradient(180deg, #1A2B55 0%, #13204A 50%, #0C1224 100%);
    padding-top: 10rem;
    margin-top: 0; /* cbc.css offsets the hero for a fixed header; this header is not fixed */
}
.hero .hero-eyebrow { background: #0C1224; }
.hero h1 .accent { color: var(--cbc-gold); display: block; }
.site-nav a:not(.btn-primary) { color: #E8E6E6; font-size: 0.875rem; }
.site-nav .btn-primary { padding: 0.6rem 1.1rem; font-size: 0.875rem; }

/* Draft label: small corner badge instead of a bar across the top */
.draft-banner {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 2000;
    max-width: 300px;
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 5px;
    font-size: 0.75rem;
    text-align: left;
    box-shadow: var(--shadow-lg);
}