.body-content { padding: 0; }
.jofibo-footer .animate__pulse { animation: fp-footer-pulse 1s ease-in-out infinite; }
@keyframes fp-footer-pulse { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .jofibo-footer .animate__pulse { animation: none; } }

.frontpage {
    --fp-ink: #142f49;
    --fp-muted: #586b7e;
    --fp-accent: #2463a4;
    --fp-button: #00845d;
    --fp-button-hover: #006d4d;
    --fp-button-ink: #fff;
    --fp-button-outline: #00845d;
    font-family: inherit;
    color: var(--fp-ink);
    background: #fff;
}

.frontpage h1, .frontpage h2, .frontpage h3 { color: var(--fp-ink); font-family: inherit; font-weight: 700; margin-top: 0; }
.frontpage h2 { font-size: clamp(2.4rem, 4vw, 3.65rem); line-height: 1.08; letter-spacing: -.045em; }
.frontpage p { line-height: 1.75; }
.frontpage a, .frontpage button, .frontpage summary { -webkit-tap-highlight-color: transparent; }
.frontpage a:focus-visible, .frontpage button:focus-visible, .frontpage summary:focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 5px; }
.fp-section { padding: 5.5rem 0; }
.frontpage .fp-eyebrow { color: var(--fp-accent); font-size: .85rem; font-weight: 700; line-height: 1.5; letter-spacing: .065em; text-transform: uppercase; margin-bottom: 1rem; }
.fp-section-heading { max-width: 740px; margin: 0 auto 3rem; }
.fp-section-heading > p:last-child:not(.fp-eyebrow) { margin: 1.25rem 0 0; color: var(--fp-muted); font-size: 1.05rem; }
.fp-hero { --fp-muted: #4a6073; position: relative; padding: 5rem 0 4rem; background: linear-gradient(115deg, #f5f8fc 30%, #e5eff9); }
.fp-hero > .container, .fp-mentions > .container { position: relative; z-index: 1; }
.frontpage h1 { font-size: clamp(3.2rem, 5.5vw, 5.25rem); line-height: 1.02; letter-spacing: -.06em; max-width: 620px; margin-bottom: 1.5rem; }
.frontpage h1 > span { color: var(--fp-accent); display: block; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; }
.fp-intro { color: var(--fp-muted); max-width: 520px; font-size: 1.1rem; margin-bottom: 1.8rem; }
.fp-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.fp-actions .fp-resume-import { display: flex; margin: 0; }
.fp-actions .fp-resume-import .btn { width: 100%; }
.frontpage .btn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; border-radius: 6px; font-size: .95rem; font-weight: 700; padding: 1.05rem 1.4rem; min-height: 56px; white-space: normal; }
.frontpage .fp-primary { background: var(--fp-button); border: 1px solid var(--fp-button); color: var(--fp-button-ink); box-shadow: 0 5px 14px #0076531f; }
.frontpage .fp-primary:hover { background: var(--fp-button-hover); border-color: var(--fp-button-hover); color: var(--fp-button-ink); }
.frontpage .fp-secondary { border: 1px solid var(--fp-button-outline); background: #fff; color: var(--fp-button-outline); }
.frontpage .fp-secondary:hover { border-color: var(--fp-button-outline); background: #e5f8f0; color: var(--fp-button-outline); }
.fp-hero .fp-actions { align-items: center; }
.frontpage .fp-benefits { padding: 0; margin: 1.35rem 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; font-size: .8rem; color: var(--fp-muted); }
.frontpage .fp-benefits li { margin: 0; }
.fp-benefits li::before { content: '✓'; color: var(--fp-accent); font-weight: 700; margin-right: .4rem; }
.fp-resume-import button:disabled { opacity: .6; cursor: wait; }
.fp-import-spinner { width: 28px; height: 28px; flex-shrink: 0; border: 3px solid #ffffff66; border-top-color: currentColor; border-radius: 50%; animation: fp-import-spin .75s linear infinite; }
.fp-import-spinner[hidden] { display: none; }
@keyframes fp-import-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fp-import-spinner { animation: none; } }
.fp-hero-preview { display: block; position: relative; height: 520px; max-width: 560px; margin: 0 auto; color: var(--fp-ink); }
.fp-preview-orbit { position: absolute; width: 96%; aspect-ratio: 1; border-radius: 50%; background: #dceaf8; top: 4%; right: -4%; }
.fp-paper { position: absolute; width: 57%; height: auto; box-shadow: 0 18px 48px #193b5026; border: 1px solid #dde5e8; border-radius: 3px; }
.fp-paper-back { left: 8%; top: 8%; transform: rotate(-10deg); }
.fp-paper-front { right: 5%; top: 14%; transform: rotate(8deg); }
.fp-preview-note { position: absolute; bottom: 3%; left: 9%; display: flex; align-items: center; gap: .8rem; max-width: 85%; padding: 1rem 1.25rem; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; box-shadow: 0 8px 30px #193b5012; font-weight: 700; font-size: .85rem; }
.fp-note-icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; background: #e2eefb; color: var(--fp-accent); border-radius: 50%; }
.fp-section.fp-steps { padding: 3rem 0; }
.fp-steps .fp-section-heading { margin-bottom: 2rem; }
.fp-mentions { position: relative; z-index: 1; padding: 2.5rem 0; background: rgba(255, 255, 255, .6); text-align: center; }
.fp-hero + .fp-mentions { background: #fff; }
.frontpage .fp-mentions .fp-eyebrow { margin: 0 0 1.5rem; letter-spacing: .055em; }
.fp-mentions-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 2rem; padding: 0; margin: 0; list-style: none; }
.frontpage .fp-mentions-logos li { display: flex; align-items: center; justify-content: center; min-height: 72px; margin: 0; }
.fp-mentions-logos img { display: block; max-width: 100%; max-height: 72px; height: auto; object-fit: contain; filter: grayscale(100%) brightness(80%); opacity: .8; }
.fp-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.fp-step-grid { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.fp-step-grid li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-content: start; column-gap: 1rem; }
.fp-step-number { display: grid; place-items: center; grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 10px; background: #e5effb; color: var(--fp-accent); font-size: .85rem; font-weight: 700; }
.fp-step-grid h3 { grid-column: 2; font-size: 1.15rem; margin-bottom: .5rem; }
.fp-step-grid p { grid-column: 2; margin-bottom: 0; color: var(--fp-muted); font-size: .9rem; }
.fp-templates { background: #f0f5f9; scroll-margin-top: 100px; overflow: hidden; }
.clt-template-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 740px; margin: 2rem auto 0; padding: .5rem; border: 1px solid #d6e3ef; border-radius: 12px; background: #fff; }
.frontpage .clt-template-nav a { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: .85rem 1rem; color: var(--fp-accent); font-size: .9rem; font-weight: 700; border-radius: 8px; text-decoration: none; }
.frontpage .clt-template-nav a:hover { background: #e5effb; }
.frontpage .clt-template-nav a[aria-current="page"] { color: var(--fp-button-ink); background: var(--fp-button); box-shadow: 0 4px 12px #0076531a; }
.fp-template-stage { position: relative; }
.fp-template-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 1.25rem 1rem; }
.fp-template-slide { width: 380px; flex: 0 0 380px; padding: 8px 12px; scroll-snap-align: start; }
.fp-carousel-arrow { position: absolute; z-index: 2; top: calc(50% - 60px); display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--fp-button); border-radius: 50%; background: var(--fp-button); color: var(--fp-button-ink); box-shadow: 0 4px 18px #183b6326; font-size: 1.5rem; cursor: pointer; }
.fp-carousel-arrow:hover { background: var(--fp-button-hover); border-color: var(--fp-button-hover); color: var(--fp-button-ink); }
.fp-carousel-previous { left: 24px; }
.fp-carousel-next { right: 24px; }
.frontpage .fp-carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; list-style: none; padding: 0 1rem; margin: 1.5rem 0 0; }
.frontpage .fp-carousel-dots li { margin: 0; }
.fp-carousel-dots button { display: grid; place-items: center; width: 28px; height: 36px; border: 0; padding: 0; background: transparent; font-size: 0; cursor: pointer; }
.fp-carousel-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #9ab4d2; transition: background .2s, transform .2s; }
.fp-carousel-dots button[aria-current="true"]::before { background: var(--fp-button-outline); transform: scale(1.4); }
.fp-carousel-dots button:hover::before { background: var(--fp-button-outline); }
.fp-template-card { display: block; color: var(--fp-ink); text-decoration: none; }
.fp-template-card:hover { color: var(--fp-ink); text-decoration: none; }
.fp-template-image { position: relative; padding: 1.25rem; background: #dfe7ee; border: 1px solid #d7e1e8; border-radius: 12px; overflow: hidden; transition: background .2s, border-color .2s; }
.fp-template-image img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 679; object-fit: contain; background: #fff; box-shadow: 0 5px 18px #193b5020; transition: transform .2s; }
.fp-template-select { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 90%; padding: .7rem 1rem; border-radius: 6px; background: var(--fp-button); color: var(--fp-button-ink); font-size: .85rem; font-weight: 700; box-shadow: 0 3px 16px #193b5026; opacity: 0; transition: opacity .2s; }
.fp-template-card:hover .fp-template-image, .fp-template-card:focus-visible .fp-template-image { border-color: var(--fp-accent); background: #dceafb; }
.fp-template-card:hover img { transform: translateY(-5px); }
.fp-template-card:hover .fp-template-select, .fp-template-card:focus-visible .fp-template-select, .fp-template-card:focus-within .fp-template-select { opacity: 1; }
.fp-template-caption { margin: 1rem .25rem 0; }
.fp-template-caption h3 { font-size: 1.2rem; margin: 0; }
.fp-template-caption p { margin: .65rem 0 0; color: var(--fp-muted); font-size: .9rem; }
.fp-gallery-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 3rem; }
.fp-text-link { color: var(--fp-accent); font-weight: 700; text-underline-offset: 5px; }
.fp-cover-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; background: #edf4fc; border-radius: 12px; padding: 3rem; overflow: hidden; }
.fp-cover-preview { position: relative; height: 350px; }
.fp-cover-preview img { position: absolute; width: 48%; height: auto; box-shadow: 0 10px 30px #193b501c; }
.fp-cover-preview img:first-child { left: 5%; top: 0; transform: rotate(-7deg); }
.fp-cover-preview img:last-child { right: 4%; top: 30px; transform: rotate(7deg); }
.fp-cover-copy > p:not(.fp-eyebrow) { margin: 1.25rem 0 1.5rem; color: var(--fp-muted); }
.fp-testimonials { padding-top: 0; }
.fp-testimonial-stage { position: relative; }
.fp-testimonial-carousel { margin: 0 -.75rem; }
.fp-testimonial-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.fp-testimonial-carousel > .fp-testimonial-slide { flex: 0 0 33.333%; }
.fp-testimonial-slide { display: flex; flex-shrink: 0; min-width: 0; padding: 0 .75rem; scroll-snap-align: start; }
.fp-testimonial-stage .fp-carousel-arrow { top: auto; bottom: -6px; }
.fp-testimonial-stage .fp-carousel-previous { left: 0; }
.fp-testimonial-stage .fp-carousel-next { right: 0; }
.fp-testimonial-stage .fp-carousel-dots { padding: 0 3.5rem; }
.fp-testimonial-slide .fp-quote { width: 100%; }
.fp-quote { display: flex; flex-direction: column; margin: 0; padding: 1.75rem; border: 1px solid #e1e8ec; border-radius: 12px; }
.fp-quote-mark { font-family: Georgia, serif; color: #00845d; font-size: 2rem; line-height: 0; vertical-align: -.2em; }
.fp-quote blockquote { flex: 1; font-size: .9rem; margin: 0 0 1.5rem; }
.fp-quote blockquote p { margin: 0; }
.fp-quote figcaption { display: flex; align-items: center; gap: .75rem; font-size: .85rem; font-weight: 700; }
.fp-quote figcaption img { border-radius: 50%; object-fit: cover; }
.fp-quote-rating { display: flex; gap: .25rem; margin-top: .4rem; color: #00845d; font-size: 1.25rem; }
.fp-ai { background: linear-gradient(135deg, #f0f6fc, #e2edf9); }
.fp-ai-label { display: flex; align-items: center; gap: .6rem; }
.fp-ai-label img { flex-shrink: 0; }
.fp-ai .fp-section-heading .fp-ai-label { justify-content: center; }
.fp-ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.fp-ai-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #d6e3f0; border-radius: 12px; overflow: hidden; }
.fp-ai-visual { display: flex; align-items: center; justify-content: center; gap: 1.25rem; min-height: 280px; padding: 2rem; background: #e5effa; }
.fp-ai-import-visual { background: radial-gradient(ellipse at center, #f6faff, #e3edf9); }
.fp-ai-source { width: 120px; flex-shrink: 0; padding: 1.25rem 1rem; background: #fff; border: 1px solid #d6e3f0; border-radius: 10px; box-shadow: 0 8px 20px #194b8510; transform: rotate(-5deg); }
.fp-ai-file-icon { display: grid; place-items: center; width: 38px; height: 44px; margin-bottom: .8rem; background: #e5effb; color: var(--fp-accent); border-radius: 6px; font-size: 1.6rem; }
.fp-ai-source strong { display: block; font-size: .75rem; margin-bottom: 1rem; }
.fp-ai-line { display: block; height: 5px; margin-top: .5rem; border-radius: 3px; background: #d9e5f1; }
.fp-ai-line-short { width: 65%; }
.fp-ai-transfer { color: var(--fp-accent); font-size: 1.75rem; }
.fp-ai-document { width: 200px; min-width: 0; padding: 1.25rem; background: #fff; border: 1px solid #cfdfef; border-radius: 10px; box-shadow: 0 12px 30px #194b8517; transform: rotate(3deg); }
.fp-ai-document-title { display: block; font-size: .9rem; font-weight: 700; }
.fp-ai-field { margin-top: 1rem; padding: .7rem; border: 1px solid #dce7f3; border-radius: 5px; color: var(--fp-accent); font-size: .7rem; font-weight: 700; }
.fp-ai-check-preview { width: 340px; max-width: 100%; padding: 1.25rem 1.5rem; border: 1px solid #cfdfef; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px #194b8517; }
.fp-ai-check-heading { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; font-size: .95rem; }
.fp-ai-scan-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; background: #e5effb; border-radius: 10px; color: var(--fp-accent); }
.fp-ai-check-row { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-top: 1px solid #e8eef5; font-size: .8rem; }
.fp-ai-check-row > span { color: var(--fp-accent); font-weight: 700; font-size: .7rem; }
.fp-ai-card-body { display: flex; flex: 1; flex-direction: column; padding: 2rem; }
.fp-ai-card-body h3, .fp-ai-writing h3 { font-size: 1.6rem; letter-spacing: -.02em; }
.fp-ai-card-body > p:not(.fp-eyebrow), .fp-ai-writing > div > p:not(.fp-eyebrow) { color: var(--fp-muted); margin: .75rem 0 1.5rem; font-size: .95rem; }
.fp-ai-import-form, .fp-ai-check-action { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: auto; }
.fp-ai-formats { color: var(--fp-muted); font-size: .75rem; }
.fp-ai-import-status { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--fp-accent); }
.fp-ai-writing { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; margin-top: 1.5rem; padding: 2rem; border: 1px solid #d1dfef; border-radius: 12px; background: #ffffffa6; }
.fp-ai-writing-icon { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #d6e3f0; border-radius: 12px; background: #fff; }
.fp-ai-writing .fp-eyebrow { margin-bottom: .5rem; }
.fp-ai-writing > div > p:not(.fp-eyebrow) { margin-bottom: 0; }
.fp-ai-writing > .btn { max-width: 240px; }
.fp-faq { background: #f7f9fb; }
.fp-faq-list { max-width: 840px; margin: 0 auto; }
.fp-faq details { border-bottom: 1px solid #dce5eb; padding: 1.3rem 0; }
.fp-faq summary { cursor: pointer; font-weight: 600; padding-right: 1rem; line-height: 1.5; }
.fp-faq details p { color: var(--fp-muted); font-size: .95rem; margin: 1rem 0 0; }
.fp-closing { background: #e3eefb; }
.fp-closing p { color: var(--fp-muted); margin: 1.25rem 0 1.75rem; }

@media (min-width: 1400px) { .fp-hero-preview { height: 560px; } }
@media (max-width: 1199.98px) {
    .fp-hero-preview { height: 440px; }
    .fp-cover-panel { padding: 2rem; gap: 2rem; }
    .fp-cover-preview { height: 290px; }
}
@media (max-width: 991.98px) {
    .fp-hero { padding: 3rem 0; }
    .fp-hero-copy { text-align: center; }
    .frontpage h1, .fp-intro { margin-left: auto; margin-right: auto; }
    .fp-actions, .fp-benefits { justify-content: center; }
    .fp-hero-preview { max-width: 470px; height: 460px; }
    .fp-section { padding: 4rem 0; }
    .fp-template-slide { width: 340px; flex-basis: 340px; }
    .fp-step-grid { gap: 1.5rem; }
    .fp-cover-panel { grid-template-columns: 1fr; }
    .fp-cover-preview { max-width: 410px; width: 100%; height: 320px; margin: 0 auto; }
    .fp-cover-copy { text-align: center; }
    .fp-testimonials { padding-top: 0; }
    .fp-testimonial-carousel > .fp-testimonial-slide { flex-basis: 50%; }
    .fp-ai-grid { grid-template-columns: 1fr; }
    .fp-ai-writing { grid-template-columns: auto minmax(0, 1fr); }
    .fp-ai-writing > .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 575.98px) {
    .clt-template-nav { flex-direction: column; }
    .fp-testimonial-carousel > .fp-testimonial-slide { flex-basis: 100%; }
    .fp-mentions { padding: 2rem 0; }
    .fp-mentions-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .frontpage .container { padding-left: 1.25rem; padding-right: 1.25rem; }
    .fp-hero .row { --bs-gutter-x: 2.5rem; }
    .fp-section { padding: 3rem 0; }
    .frontpage h1 { font-size: clamp(2.75rem, 11vw, 3.45rem); }
    .frontpage h2 { font-size: 2.5rem; }
    .fp-actions { flex-direction: column; }
    .fp-hero .fp-actions > .fp-primary { width: 100%; }
    .fp-hero-preview { height: 380px; max-width: 360px; }
    .fp-preview-note { bottom: 5%; left: 4%; padding: .75rem; font-size: .75rem; }
    .fp-section-heading { margin-bottom: 2rem; }
    .fp-step-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .fp-template-slide { width: 82vw; flex-basis: 82vw; padding: 8px; }
    .fp-template-image { padding: 1rem; }
    .fp-template-caption h3 { font-size: 1.1rem; }
    .fp-carousel-arrow { width: 40px; height: 40px; font-size: 1.25rem; }
    .fp-carousel-previous { left: 8px; }
    .fp-carousel-next { right: 8px; }
    .fp-carousel-dots button { width: 24px; }
    .fp-cover-panel { padding: 1.5rem; }
    .fp-cover-preview { height: 255px; }
    .fp-testimonials { padding-top: 0; }
    .fp-ai-visual { min-height: 240px; padding: 1.5rem 1rem; gap: .75rem; }
    .fp-ai-source { width: 90px; padding: .85rem; }
    .fp-ai-document { width: 160px; padding: .85rem; }
    .fp-ai-transfer { font-size: 1.25rem; }
    .fp-ai-check-preview { padding: 1rem; }
    .fp-ai-card-body, .fp-ai-writing { padding: 1.5rem; }
    .fp-ai-writing { grid-template-columns: 1fr; }
    .fp-ai-writing > .btn { grid-column: 1; max-width: 100%; }
}
@media (max-width: 359.98px) { .fp-hero-preview { height: 320px; } .fp-cover-preview { height: 210px; } }
@media (prefers-reduced-motion: reduce) { .frontpage *, .frontpage *::before, .frontpage *::after { transition: none !important; } }

/* Native tracks keep the same geometry before and after JavaScript starts. */
.frontpage .fp-template-carousel, .frontpage .fp-testimonial-carousel { overflow-y: hidden; scrollbar-width: none !important; -ms-overflow-style: none; }
.frontpage .fp-template-carousel::-webkit-scrollbar, .frontpage .fp-testimonial-carousel::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.fp-carousel-controls { position: relative; min-height: 60px; }
.fp-carousel-controls .fp-carousel-dots { margin: 0; padding-top: 24px; }
.fp-carousel-controls .fp-carousel-arrow { top: auto; bottom: 0; }
.fp-template-stage > .fp-carousel-controls { padding: 0 64px; }
.fp-icon { display: inline-block; pointer-events: none; fill: currentColor; vertical-align: -.125em; flex-shrink: 0; }
.fp-icon.fa-fw { width: 1.25em; }
.fp-icon.fa-lg { font-size: 1.333em; }
.fp-icon.fa-3x { font-size: 3em; }
.fp-icon.fa-stack-1x, .fp-icon.fa-stack-2x { position: absolute; inset: 0; width: 100%; height: 100%; }
.fp-icon.fa-stack-1x { padding: .5em; }
@media (max-width: 575.98px) {
    .fp-template-stage > .fp-carousel-controls { padding: 0 48px; }
}

/* Size stacked/modal icons without the Font Awesome stylesheet. */
.fa-stack { display: inline-block; position: relative; width: 2.5em; height: 2em; vertical-align: middle; }
.fa-stack.fa-3x { font-size: 3em; }
.fp-icon.fa-spin { animation: fp-icon-spin 2s linear infinite; }
@keyframes fp-icon-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fp-icon.fa-spin { animation: none; } }