/* Résumé Parfait hero: the selected brand concept, rendered with real product UI. */
body.conversion-home #hero.premium-hero {
 position:relative; display:grid; grid-template-columns:44% 56%; align-items:center;
 gap:0; width:calc(100% - 96px); max-width:1360px; min-height:720px;
 margin:0 auto; padding:34px 0 32px; isolation:isolate;
}
/* Keep the existing fabric video visible behind the entire hero. */
#hero.premium-hero::before {content:none}
html:has(.premium-hero),body.conversion-home:has(.premium-hero) {overflow-x:clip}
#hero.premium-hero .hero-copy {position:relative; z-index:3; padding-right:22px; min-width:0}
.premium-hero .hero-eyebrow {display:flex; align-items:center; gap:8px; margin-bottom:25px; color:var(--landing-muted); font-size:10px; font-weight:600; letter-spacing:.08em; line-height:1.5}
.hero-eyebrow>span:first-child {width:6px; height:6px; flex:none; border-radius:50%; background:var(--red)}
body.conversion-home #hero .hero-title,
body.conversion-home #hero .hero-title span {font-family:var(--brand-text); font-weight:600; font-size:clamp(46px,4.05vw,58px); line-height:1.07; letter-spacing:-.055em; color:#252323; text-transform:none; margin:0; font-style:normal}
#hero .hero-fixed {display:block; max-width:490px}
#hero .hero-rotation {display:block; min-height:1.15em; margin-top:3px; padding-bottom:.06em; overflow:clip}
body.conversion-home #hero #hero-phrase {color:var(--red); border-right:2px solid #df4c3290; padding-right:3px}
#hero .hero-caret {display:none}
#hero.premium-hero .hero-title>.sr-only {position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important}
body.conversion-home #hero .hero-description {font-size:17px; line-height:1.6; letter-spacing:-.01em; color:var(--landing-copy); max-width:435px; margin:22px 0 28px}
body.conversion-home #hero .hero-actions {display:flex; align-items:center; gap:12px; margin:0; flex-wrap:nowrap}
#hero.premium-hero .hero-actions>.button {height:57px; min-height:57px; padding:12px 23px; line-height:1.4; font-size:15px; font-weight:600; letter-spacing:-.025em; gap:12px; white-space:nowrap; justify-content:center}
body.conversion-home #hero .hero-actions .hero-import {background:#eceee5; color:var(--landing-green); -webkit-text-fill-color:var(--landing-green); border:1px solid #e0e3d8; border-radius:14px; box-shadow:none}
#hero .hero-import:hover {background:#e1e7d8}
#hero .hero-import svg {width:19px; height:19px}
body.conversion-home #hero .hero-start-note {font-size:11px; line-height:1.55; color:var(--landing-muted); max-width:none; margin:14px 0 27px}
#hero .hero-benefits {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;max-width:530px}
#hero .hero-benefit {min-width:0;padding:28px 17px 25px;border:0;border-radius:14px;background:rgba(234,240,224,.86);box-shadow:none}
#hero .hero-benefit-polish {background:rgba(250,233,219,.85);border-color:#eed9c9}
#hero .hero-benefit-icon {display:block;width:36px;height:36px;margin:0 0 10px;color:#30452c;flex:none}
#hero .hero-benefit-polish .hero-benefit-icon {color:#af422d}
body.conversion-home #hero .hero-benefit h2 {font-family:var(--brand-text);font-size:18px;font-weight:400;line-height:1.25;letter-spacing:-.015em;text-transform:none;color:#253122;margin:0 0 4px}
body.conversion-home #hero .hero-benefit p {font-family:var(--brand-text);font-size:12.5px;font-weight:400;line-height:1.45;letter-spacing:-.005em;color:#4d5e4b;margin:0;max-width:none}
#hero .draft-return {max-width:430px; margin:16px 0}
/* The document is a native A4 template, with its own document fonts and palette. */
body.conversion-home #hero .hero-showcase {position:relative; width:100%; height:auto; min-height:0; margin:0; padding:0; background:none; border:0; box-shadow:none; transform:none; animation:none; will-change:auto; z-index:1}
.hero-artboard {position:relative; width:100%; aspect-ratio:700/610; isolation:isolate}
.hero-rings {position:absolute; top:-1%; left:55%; width:45%; aspect-ratio:1; z-index:-1; pointer-events:none}
.hero-rings i {position:absolute; inset:-22%; border:1px solid #e9e0d1; border-radius:50%; background:#f3ede136}
.hero-rings i:nth-child(2) {inset:-6%; background:#efe4d44d}
.hero-rings i:nth-child(3) {inset:10%; background:#ecddc34d}
.hero-paper-back {position:absolute; left:11%; top:12%; width:66%; height:83%; background:#f0eee6; border:1px solid #e6e3da; border-radius:6px; transform:rotate(2.5deg); box-shadow:0 18px 36px -18px #2a382b38; z-index:0}
.hero-paper-wrap {position:absolute; left:10%; top:11%; width:68%; height:85%; overflow:hidden; border-radius:5px; background:white; transform:rotate(-2deg); box-shadow:0 22px 48px -20px #2a382b3d,0 1px 5px #2531220d; z-index:1; mask-image:linear-gradient(#000 0%,#000 94%,#000a 100%)}
#hero.premium-hero #hero-document {position:relative; inset:auto; width:100%; max-width:none; height:auto; padding:0; margin:0; background:white; transform:none; box-shadow:none; transition:none}
#hero-document>.miniature {width:794px; transform-origin:0 0; transform:scale(.6)}
#hero-document .cv-page {box-shadow:none; margin:0}
.hero-portrait {position:absolute; top:-2%; right:4%; width:29%; aspect-ratio:1; z-index:3; border:6px solid #fffdf9; border-radius:50%; box-shadow:0 10px 23px #3c3b2717; overflow:hidden}
.hero-portrait img {display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; transform:scale(1.06)}
.hero-float {position:absolute; z-index:4; background:#fffefb; border:1px solid #ece8df; border-radius:13px; box-shadow:0 13px 30px -14px #57402938,0 2px 5px #25312205}
.hero-float strong {font-size:13px; font-weight:600; line-height:1.3; letter-spacing:-.02em; color:#253122}
.hero-float small {font-size:11px; line-height:1.5; color:#637062}
/* Score uses cvProgress() on the displayed example, not a marketing percentage. */
.hero-score {top:2%; left:0; display:flex; align-items:center; gap:10px; padding:9px 13px 9px 9px; transform:rotate(2deg)}
.hero-score-badge {display:flex; align-items:baseline; justify-content:center; gap:1px; min-width:64px; padding:10px 8px; border-radius:8px; background:#365747; color:white; font-size:26px; line-height:1; font-weight:600; letter-spacing:-.055em}
.hero-score-badge small {font-size:19px; line-height:1; color:white; font-weight:500}
.hero-score>div:last-child>small {display:block; font-size:11px; margin-bottom:2px}
.hero-score strong {display:flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap}
.hero-score strong svg {width:15px; height:15px; color:#365747}
.hero-score-meaning {display:block; font-size:8px; line-height:1.5; color:#5c6855; margin-top:3px}
/* The three AI operations below are the actual writing assistant capabilities. */
.hero-ai {top:25%; right:-3%; width:31%; padding:16px; background:#fff1e6; border-color:#f0dac7}
.hero-ai header {display:flex; align-items:center; gap:9px; margin-bottom:13px}
.hero-ai header strong {font-size:12px; font-weight:600}
.hero-ai-icon {display:grid; place-items:center; width:31px; height:33px; flex:none; color:#fff8ed; border-radius:7px; background:#d55030}
.hero-ai-icon svg {width:22px; height:22px; stroke-width:1.4}
.hero-ai ul {list-style:none; padding:0; margin:0; display:grid; gap:9px}
.hero-ai li {display:flex; align-items:center; gap:7px; color:#465245; font-size:10px; line-height:1.4}
.hero-ai li svg {width:15px; height:15px; color:#365747; stroke-width:2; background:#fbfaf2; border-radius:50%; padding:1px}
.hero-ai:hover {border-color:#dcae8c; box-shadow:0 16px 34px -13px #57402946}
/* Full rows, as in the selected concept: no miniature chips masquerading as an editor. */
.hero-skills {top:55%; right:-3%; width:31%; padding:15px}
.hero-skills header {display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px}
.hero-skills header svg {width:16px; height:16px; color:#52614e}
.hero-skill-tags {display:grid; gap:6px}
.hero-skill-tags>span {display:block; min-width:0; background:#f0f1ed; color:#40503f; padding:7px 10px; border-radius:5px; font-size:11px; line-height:1.3}
#hero-added-skill {background:#e8efdf; color:#365747}
#hero-skill-action {display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:38px; margin-top:10px; padding:6px; background:white; border:1px solid #e2e5da; border-radius:5px; color:#30452c; font-size:10px; font-weight:600; cursor:pointer}
#hero-skill-action svg {width:14px; height:14px; color:#81957b}
#hero-skill-action:hover {background:#eff4e7; border-color:#a9b99c}
.hero-letter {left:2%; bottom:0; width:61%; padding:16px 18px; display:flex; align-items:center; gap:13px; transform:rotate(2deg)}
.hero-letter-icon {display:grid; place-items:center; width:39px; height:42px; border-radius:50%; background:#fce2cf; color:#d55030; flex:none}
.hero-letter-icon svg {width:23px; height:27px; stroke-width:1.7}
.hero-letter strong {display:block; font-size:13px; margin-bottom:4px}
.hero-letter small {display:block; font-size:10px; line-height:1.4}
.hero-letter>svg {width:17px; height:20px; margin-left:auto; color:#253122}
.hero-letter:hover {border-color:#d4c3aa}
.hero-showcase-footer {display:flex; align-items:center; justify-content:space-between; gap:8px; margin:15px 0 0 10%; color:#66715f; font-size:7px; letter-spacing:.04em}
.hero-showcase-footer>span>span+span::before {content:' · '}
.hero-showcase-footer>div {display:flex; align-items:center; gap:13px}
#hero .hero-showcase-footer button {background:transparent; border:0; color:#4c604e; font-size:10px; min-height:34px; padding:4px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
#hero #hero-animation-toggle {display:flex; align-items:center; gap:5px; font-size:9px; text-decoration:none}
#hero .hero-customize {position:relative; z-index:6; margin:0 0 -28px 10%; border:0; color:#66715f; font-size:9px}
.hero-customize summary {min-height:29px; padding-block:8px; cursor:pointer}
.hero-customize>div {position:absolute; bottom:100%; left:0; right:0; margin-bottom:8px; padding:13px; background:var(--cream); border:1px solid #d9ddcd; border-radius:6px; box-shadow:0 7px 25px #25312224}
#hero .hero-layout-switch {position:relative; inset:auto; display:flex; gap:7px; margin:0; padding:11px 0 0; background:none; border:0; min-height:0}
#hero .hero-layout-switch button {min-height:36px; padding:6px 9px; font-size:10px; background:none; border:1px solid #bcc8b0; border-radius:3px; color:#30452c}
#hero .hero-layout-switch button[aria-pressed=true] {color:white; background:#30452c}
#hero .layout-switch-indicator {display:none}
.premium-hero :is(a,button,summary):focus-visible {outline:3px solid var(--rp-focus); outline-offset:4px}
#hero[data-paused] #hero-phrase {border-right-color:transparent}
@media(min-width:1550px) {body.conversion-home #hero.premium-hero {min-height:770px}}
@media(min-width:801px) and (max-width:1100px) {
 body.conversion-home #hero.premium-hero {width:calc(100% - 64px); grid-template-columns:43% 57%; min-height:640px}
 body.conversion-home #hero .hero-title,body.conversion-home #hero .hero-title span {font-size:46px}
 #hero .hero-rotation {min-height:2.15em}
 #hero.premium-hero .hero-actions>.button {font-size:13px; padding-inline:14px; gap:8px}
 body.conversion-home #hero .hero-description {font-size:15px}
 #hero .hero-benefit {padding:16px} body.conversion-home #hero .hero-benefit h2 {font-size:16px} body.conversion-home #hero .hero-benefit p {font-size:11px}
 .hero-ai {padding:12px; width:33%; right:-2%}.hero-ai header {gap:6px}.hero-ai header strong {font-size:10px}.hero-ai-icon {width:25px;height:27px}.hero-ai li {font-size:8px;gap:4px}.hero-ai ul {gap:7px}
 .hero-skills {width:33%;right:-2%;padding:12px}.hero-skill-tags>span {font-size:9px;padding:6px 8px}.hero-skills header strong {font-size:11px}#hero-skill-action {font-size:9px;min-height:35px}
 .hero-score {gap:8px;padding:9px}.hero-score-badge {min-width:56px;font-size:24px;padding:11px 5px}.hero-score-badge small {font-size:15px}.hero-score strong {font-size:10px}.hero-score>div:last-child>small {font-size:9px}.hero-score-meaning {font-size:7px}
 .hero-letter {padding:12px;width:63%;gap:9px}.hero-letter strong {font-size:11px}.hero-letter small {font-size:8px}.hero-letter-icon {width:32px;height:35px}
}
@media(max-width:800px) {
 body.conversion-home #hero.premium-hero {display:flex; flex-direction:column; width:calc(100% - 40px); max-width:600px; min-height:0; padding:28px 0 25px; gap:28px}
 #hero.premium-hero::before {inset-inline:-20px}
 #hero.premium-hero .hero-copy {width:100%; padding:0; text-align:left}
 .premium-hero .hero-eyebrow {font-size:8px; margin-bottom:19px; gap:7px}
 body.conversion-home #hero .hero-title,body.conversion-home #hero .hero-title span {font-size:clamp(40px,9.7vw,57px);line-height:1.05;letter-spacing:-.05em}
 #hero .hero-fixed {max-width:420px}
 body.conversion-home #hero .hero-description {font-size:15px;line-height:1.55;margin:19px 0 23px;max-width:430px}
 #hero.premium-hero .hero-actions>.button {height:54px;min-height:54px;flex:1;min-width:0;padding:10px 15px;font-size:13px;gap:8px}
 body.conversion-home #hero .hero-start-note {font-size:10px;margin:12px 0 22px}
 #hero .hero-benefits {gap:10px}
 #hero .hero-benefit {padding:16px 14px 17px;border-radius:14px}
 #hero .hero-benefit-icon {width:28px;height:28px;margin-bottom:13px}
 body.conversion-home #hero .hero-benefit h2 {font-size:16px;line-height:1.25}
 body.conversion-home #hero .hero-benefit p {font-size:11.5px;line-height:1.5}
 body.conversion-home #hero .hero-showcase {max-width:490px;align-self:center}
 .hero-artboard {aspect-ratio:350/435}
 .hero-paper-wrap {left:7%;top:9%;width:72%;height:86%;border-radius:3px}
 .hero-paper-back {left:8%;top:11%;width:72%;height:86%;border-radius:3px}
 #hero-document>.miniature {transform:scale(.32)}
 .hero-portrait {top:0;right:20%;width:33%;border-width:4px}
 .hero-rings {left:39%;top:0;width:46%}
 .hero-float {border-radius:9px;box-shadow:0 10px 23px -13px #5740293b}
 .hero-score {top:24%;left:0;padding:8px;gap:7px;border-radius:8px}
 .hero-score-badge {min-width:48px;font-size:23px;padding:10px 5px;border-radius:5px}.hero-score-badge small {font-size:14px}
 .hero-score>div:last-child>small {font-size:9px}.hero-score strong {font-size:10px;gap:3px}.hero-score strong svg {width:11px;height:11px}.hero-score-meaning {font-size:7px;margin-top:1px}
 .hero-ai {top:20%;right:0;width:44%;padding:10px}
 .hero-ai header {gap:6px;margin-bottom:10px}.hero-ai header strong {font-size:9px}.hero-ai-icon {width:25px;height:27px;border-radius:5px}.hero-ai-icon svg {width:19px;height:19px}
 .hero-ai ul {gap:7px}.hero-ai li {font-size:8px;line-height:1.4;gap:4px}.hero-ai li svg {width:12px;height:12px}
 .hero-skills {top:52%;right:0;width:44%;padding:11px}
 .hero-skills header {margin-bottom:9px}.hero-skills header strong {font-size:11px}.hero-skills header svg {width:13px;height:13px}
 .hero-skill-tags {gap:5px}.hero-skill-tags>span {font-size:9px;padding:6px 7px;border-radius:4px}
 #hero-skill-action {font-size:9px;min-height:36px;padding:5px;margin-top:8px;gap:4px}#hero-skill-action svg {width:12px;height:12px}
 .hero-letter {left:0;bottom:0;width:53%;padding:11px 12px;gap:8px;border-radius:9px}
 .hero-letter-icon {width:29px;height:33px}.hero-letter-icon svg {width:19px;height:23px}.hero-letter strong {font-size:10px;margin-bottom:3px}.hero-letter small {font-size:8px;line-height:1.35}.hero-letter>svg {width:13px;height:16px}
 .hero-showcase-footer {margin:14px 0 0 4%;font-size:7px}.hero-showcase-footer>div {gap:11px}#hero .hero-showcase-footer button {font-size:10px;min-height:40px}#hero #hero-animation-toggle {font-size:9px}
 #hero .hero-customize {margin-left:4%;font-size:10px}.hero-customize summary {min-height:34px}
}
@media(max-width:389px) {
 #hero .hero-rotation {min-height:2.15em}
 .hero-ai {width:45%;padding:8px}.hero-ai header {gap:5px}.hero-ai-icon {width:22px;height:25px}.hero-ai header strong {font-size:8px}.hero-ai li {font-size:7.5px}
 .hero-skills {width:46%;padding:9px}.hero-skill-tags>span {font-size:8px}.hero-skills header strong {font-size:10px}#hero-skill-action {font-size:8px}
 .hero-score {gap:5px;padding:7px}.hero-score-badge {min-width:41px;font-size:21px}.hero-score strong {font-size:9px}.hero-score-meaning {font-size:6px}
 .hero-letter small {display:none}.hero-letter {min-height:52px;width:51%}
}
@media(max-width:359px) {
 body.conversion-home #hero.premium-hero {width:calc(100% - 32px)}
 body.conversion-home #hero .hero-title,body.conversion-home #hero .hero-title span {font-size:37px}
 #hero.premium-hero .hero-actions>.button {font-size:12px;padding-inline:8px;gap:6px}
 #hero .hero-benefit {padding:14px 12px} body.conversion-home #hero .hero-benefit h2 {font-size:14px} body.conversion-home #hero .hero-benefit p {font-size:11px}
 .hero-ai li {font-size:7px}.hero-ai ul {gap:6px}.hero-ai header {margin-bottom:7px}
}
@media(prefers-reduced-motion:reduce) {.premium-hero * {scroll-behavior:auto!important}}

@media(min-width:1101px) and (max-width:1240px){#hero .hero-rotation{min-height:2.15em}}

/* Cohesive hand-drawn ink marks; the AI pictogram remains orange. */
#hero .hero-ink-icon{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;overflow:visible}
#hero .hero-ai-icon{width:34px;height:35px;background:#fff8ed;color:#d55030;border-radius:8px 10px 8px 9px}
#hero .hero-ai-icon .hero-ink-icon{width:31px;height:31px}
#hero .hero-ai li .hero-ink-icon{width:17px;height:17px;background:transparent;border-radius:0;padding:0;color:#365747;stroke-width:3.4}
#hero .hero-skills header .hero-ink-icon{width:22px;height:22px;color:#365747}
#hero #hero-skill-action .hero-ink-icon{width:18px;height:18px;color:#365747}
#hero .hero-letter-icon{background:#fae6d8;color:#b34f36;border-radius:10px 12px 9px 12px}
#hero .hero-letter-icon .hero-ink-icon{width:30px;height:32px}
#hero .hero-score strong .hero-ink-icon{width:18px;height:18px;color:#365747}
#hero .hero-letter>.hero-ink-icon{width:21px;height:21px;color:#365747}
@media(max-width:800px){
#hero .hero-ai-icon{width:28px;height:29px}
#hero .hero-ai-icon .hero-ink-icon{width:26px;height:26px}
#hero .hero-ai li .hero-ink-icon{width:14px;height:14px}
#hero .hero-skills header .hero-ink-icon{width:18px;height:18px}
#hero #hero-skill-action .hero-ink-icon{width:15px;height:15px}
#hero .hero-letter-icon .hero-ink-icon{width:24px;height:26px}
#hero .hero-score strong .hero-ink-icon{width:14px;height:14px}
#hero .hero-letter>.hero-ink-icon{width:16px;height:16px}
}
@media(max-width:389px){
#hero .hero-ai-icon{width:25px;height:26px}
#hero .hero-ai-icon .hero-ink-icon{width:24px;height:24px}
#hero .hero-ai li .hero-ink-icon{width:12px;height:12px}
}

/* Exact founder reference sparkle, recolored orange only. */
#hero .hero-ai-icon .hero-ai-sparkle{width:31px;height:31px;stroke:none;fill:none}
@media(max-width:800px){#hero .hero-ai-icon .hero-ai-sparkle{width:26px;height:26px}}
@media(max-width:389px){#hero .hero-ai-icon .hero-ai-sparkle{width:24px;height:24px}}