:root {
  --ink: #0c1513;
  --ink-2: #14201d;
  --ink-3: #20302c;
  --paper: #f4f2eb;
  --paper-2: #ebe8df;
  --white: #fff;
  --muted: #66736f;
  --line: #d8d9d2;
  --lime: #c8ff3d;
  --lime-dark: #9ed414;
  --blue: #365cff;
  --danger: #bb2d42;
  --success: #1c7d59;
  --shadow: 0 24px 80px rgba(8, 17, 15, .12);
  --radius: 18px;
  --shell: 1240px;
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }
.narrow { max-width: 900px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 9999; top: 8px; left: 8px; padding: 10px 14px; color: var(--ink); background: var(--lime); border-radius: 7px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid rgba(54, 92, 255, .38); outline-offset: 3px; }
::selection { color: var(--ink); background: var(--lime); }

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; letter-spacing: -.75px; }
.brand > span:last-child > span, .builder-brand > span:last-child > span { color: var(--lime-dark); }
.brand-mark { display: inline-flex; align-items: end; gap: 2px; width: 25px; height: 25px; padding: 5px; border-radius: 8px; background: var(--lime); transform: rotate(-4deg); }
.brand-mark i { display: block; width: 4px; border-radius: 2px; background: var(--ink); transform: skewY(-18deg); }
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 14px; }
.brand-mark i:nth-child(3) { height: 10px; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: 76px; color: #eff8f5; transition: background .25s, box-shadow .25s, transform .25s; }
.site-header.scrolled { background: rgba(11, 21, 19, .94); box-shadow: 0 8px 30px rgba(0,0,0,.15); backdrop-filter: blur(18px); }
.nav-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; }
.site-header .brand { color: #fff; }
.primary-nav { display: flex; align-items: center; gap: 34px; }
.primary-nav a, .nav-text-link { position: relative; color: #bfcbc7; font-size: 14px; font-weight: 650; }
.primary-nav a:hover, .primary-nav a.active, .nav-text-link:hover { color: #fff; }
.primary-nav a.active:after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; background: var(--lime); }
.nav-actions { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.nav-toggle { display: none; border: 0; background: none; padding: 8px; }
.nav-toggle > span:not(.sr-only) { display: block; width: 23px; height: 2px; margin: 4px; background: #fff; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 12px 20px; border: 1px solid transparent; border-radius: 8px; font-weight: 850; font-size: 14px; cursor: pointer; transition: transform .2s, background .2s, color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 17px; }
.button-small { min-height: 40px; padding: 9px 17px; }
.button-large { min-height: 56px; padding: 16px 25px; font-size: 15px; }
.button-light { color: var(--ink); background: #fff; }
.button-light:hover { background: var(--lime); }
.button-lime { color: var(--ink); background: var(--lime); box-shadow: 0 12px 34px rgba(200,255,61,.12); }
.button-lime:hover { background: #d4ff68; box-shadow: 0 16px 40px rgba(200,255,61,.2); }
.button-dark { color: #fff; background: var(--ink); }
.button-dark:hover { background: #263a35; }
.button-ghost { color: inherit; background: transparent; border-color: currentColor; }
.button-outline { background: transparent; border-color: #aeb5b0; }
.button-outline:hover { color: #fff; background: var(--ink); border-color: var(--ink); }
.button.full, .full { width: 100%; }
.button.disabled, .button:disabled { opacity: .42; pointer-events: none; }
.text-arrow { display: inline-flex; gap: 12px; align-items: center; color: #d4dfdb; font-weight: 750; }
.text-arrow span { color: var(--lime); transition: transform .2s; }
.text-arrow:hover span { transform: translateX(5px); }

.eyebrow, .section-index { display: inline-flex; align-items: center; gap: 9px; color: #c3cfcb; font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow > span { width: 26px; height: 1px; background: var(--lime); }
.section-index { color: #5f6b67; }
.section-index:before { content: ""; width: 24px; height: 1px; background: currentColor; }
.hero { position: relative; min-height: 840px; padding: 155px 0 90px; color: #eff6f3; background: #0b1513; overflow: hidden; }
.hero:before { content: ""; position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.hero-orb-one { width: 620px; height: 620px; right: -220px; top: -240px; background: radial-gradient(circle, rgba(76,116,100,.38), transparent 65%); }
.hero-orb-two { width: 440px; height: 440px; left: -260px; bottom: -100px; background: radial-gradient(circle, rgba(200,255,61,.1), transparent 70%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .78fr 1.22fr; gap: 68px; align-items: center; }
.hero-copy { padding-bottom: 36px; }
.hero h1 { max-width: 640px; margin: 26px 0 25px; font-size: clamp(60px, 6.7vw, 100px); line-height: .9; letter-spacing: -.072em; font-weight: 750; }
.hero h1 em, .section-heading h2 em, .page-hero h1 em, .final-cta h2 em, .auth-story h1 em { color: var(--lime); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.hero-lead { max-width: 560px; margin: 0; color: #aebcb7; font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 36px; }
.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 43px; color: #d9e3df; }
.hero-trust > span:last-child { display: grid; }
.hero-trust b { font-size: 13px; }
.hero-trust small { color: #82928c; font-size: 11px; }
.trust-faces { display: flex; padding-left: 7px; }
.trust-faces i { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -7px; color: #fff; background: #344e46; border: 2px solid #0b1513; border-radius: 50%; font-style: normal; font-size: 9px; font-weight: 900; }
.trust-faces i:nth-child(2) { background: #6f5147; }.trust-faces i:nth-child(3) { color: var(--ink); background: #c2d7ae; }

.hero-visual { position: relative; width: 720px; max-width: 58vw; }
.editor-window { width: 100%; overflow: hidden; background: #eef0ec; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; box-shadow: 0 40px 100px rgba(0,0,0,.48); transform: perspective(1500px) rotateY(-5deg) rotateX(1deg); transform-origin: left center; }
.editor-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; height: 46px; padding: 0 14px; color: #27322e; background: #fff; border-bottom: 1px solid #ddd; font-size: 8px; }
.mini-brand { font-weight: 900; }.mini-brand b { display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -2px; background: var(--lime); border-radius: 3px; }
.saved-pill { justify-self: center; color: #6d7773; }.saved-pill i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; background: #5fc48e; border-radius: 50%; }
.editor-button { justify-self: end; padding: 6px 11px; color: #fff; background: #12201c; border-radius: 4px; font-weight: 800; }
.editor-body { display: grid; grid-template-columns: 48px 255px 1fr; height: 455px; }
.editor-sidebar { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 15px; color: #82908a; background: #14201d; }
.editor-sidebar .side-title { font-size: 5px; letter-spacing: .12em; writing-mode: vertical-rl; transform: rotate(180deg); }
.editor-sidebar i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; font-size: 7px; font-style: normal; }
.editor-sidebar i.selected { color: var(--ink); background: var(--lime); }
.editor-sidebar .side-line { width: 15px; height: 1px; margin: 2px 0; background: #40504b; }
.editor-form { padding: 25px 21px; color: #1b2824; background: #f6f5f0; }
.form-kicker { color: #73807b; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.editor-form h3 { margin: 6px 0 22px; font-size: 19px; letter-spacing: -.04em; }
.fake-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fake-row span, .fake-field { display: grid; gap: 6px; margin-bottom: 10px; color: #7b8581; font-size: 6px; }
.fake-row b, .fake-field b { min-height: 31px; padding: 9px; color: #27332f; background: #fff; border: 1px solid #d8dcd8; border-radius: 4px; font-size: 7px; font-weight: 650; }
.fake-progress { height: 3px; margin-top: 10px; overflow: hidden; background: #d7ddd9; border-radius: 4px; }.fake-progress i { display: block; width: 80%; height: 100%; background: var(--lime-dark); }
.editor-form > small { color: #8a9691; font-size: 6px; }
.editor-preview { position: relative; display: grid; place-items: center; padding: 24px; background: #dfe4e0; }
.preview-paper { width: 250px; height: 355px; padding: 25px 23px; color: #17211e; background: #fff; box-shadow: 0 12px 35px rgba(0,0,0,.13); }
.paper-head { display: flex; justify-content: space-between; align-items: end; }.paper-head h4 { margin: 0; font-size: 21px; line-height: .92; letter-spacing: -.05em; }.paper-head span { color: #5e6c67; font-size: 5px; letter-spacing: .15em; }
.paper-rule { height: 2px; margin: 10px 0 5px; background: #2e5c50; }.paper-contact { color: #75807c; font-size: 4px; }
.paper-section { margin-top: 15px; }.paper-section > b { display: block; margin-bottom: 6px; color: #2e5c50; font-size: 6px; letter-spacing: .14em; }.paper-section p { margin: 3px 0 9px; color: #59635f; font: 5px/1.6 Arial,sans-serif; }.paper-section h5 { margin: 7px 0 1px; font-size: 7px; }.paper-section small { display: block; color: #7a8581; font-size: 4px; }
.paper-tags { display: flex; gap: 3px; margin-top: 10px; }.paper-tags i { padding: 2px 4px; color: #3c4c46; background: #edf2ef; font: 4px Arial,sans-serif; }
.score-card { position: absolute; right: 8px; bottom: 25px; display: flex; align-items: center; gap: 8px; width: 118px; padding: 9px; color: #eaf4f0; background: #13201d; border-radius: 9px; box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.score-ring { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink); background: radial-gradient(circle at center, #eef5f2 0 57%, transparent 59%), conic-gradient(var(--lime) 92%, #43514c 0); border-radius: 50%; font-size: 10px; font-weight: 900; }.score-ring:after { display: none; }
.score-card > span:last-child { display: grid; }.score-card b { font-size: 7px; }.score-card small { color: #8fa09a; font-size: 5px; }
.floating-note { position: absolute; left: -40px; bottom: 45px; display: flex; align-items: center; gap: 10px; width: 205px; padding: 12px; color: #23302c; background: #fff; border: 1px solid #dbe0dc; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.23); }
.floating-note > span { display: grid; place-items: center; width: 30px; height: 30px; color: var(--ink); background: var(--lime); border-radius: 7px; }.floating-note div { display: grid; }.floating-note b { font-size: 8px; }.floating-note small { color: #75817d; font-size: 6px; }

.proof-strip { padding: 28px 0; color: #75817d; background: #f5f3ed; border-bottom: 1px solid #dedfd8; }
.proof-strip .shell { display: flex; align-items: center; justify-content: space-between; }.proof-strip span { font-size: 9px; font-weight: 900; letter-spacing: .16em; }.proof-strip div div { display: flex; gap: clamp(25px,4.5vw,65px); }.proof-strip b { color: #94a09b; font-family: Georgia,serif; font-size: 16px; font-style: italic; }
.section { padding: 120px 0; }
.section-light { background: #f4f2eb; }
.section-heading { margin-bottom: 60px; }.split-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 90px; align-items: end; }.section-heading h2 { margin: 18px 0 0; font-size: clamp(44px,5.2vw,72px); line-height: .98; letter-spacing: -.06em; }.section-heading h2 em { color: #416156; }.split-heading > p { max-width: 470px; margin: 0 0 10px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.feature-card { position: relative; min-height: 550px; padding: 34px; background: #e8e6dd; border: 1px solid #d6d6cf; border-radius: 14px; overflow: hidden; }
.feature-card.feature-dark { color: #edf6f3; background: var(--ink-2); border-color: var(--ink-2); }
.feature-number { position: absolute; top: 25px; right: 28px; color: #89938f; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.feature-card h3 { margin: 28px 0 16px; font-size: 28px; line-height: 1.1; letter-spacing: -.045em; }.feature-card p { min-height: 84px; color: #697571; font-size: 14px; line-height: 1.7; }.feature-dark p { color: #9aa9a3; }.feature-card > a { display: inline-flex; gap: 12px; margin-top: 15px; font-size: 13px; font-weight: 850; }.feature-card > a span { color: var(--lime-dark); }
.feature-icon { display: grid; place-items: center; height: 220px; margin: 15px -10px 10px; }.feature-ai i { display: grid; place-items: center; width: 110px; height: 110px; color: var(--ink); background: var(--lime); border-radius: 28px; box-shadow: 0 0 0 16px rgba(200,255,61,.05), 0 0 0 35px rgba(200,255,61,.025); font-size: 42px; font-style: normal; transform: rotate(-8deg); }
.ats-visual { display: flex; align-items: center; justify-content: center; gap: 25px; height: 235px; }.ats-ring { position: relative; display: grid; place-content: center; width: 145px; height: 145px; text-align: center; background: radial-gradient(circle at center, #e8e6dd 57%, transparent 59%), conic-gradient(var(--lime-dark) 92%, #cdd0c8 0); border-radius: 50%; }.ats-ring b { font-size: 40px; letter-spacing: -.06em; }.ats-ring small { font-size: 10px; }.ats-visual > div { display: grid; gap: 8px; }.ats-visual i { padding: 6px 8px; background: #f3f2ed; border-radius: 4px; font-size: 8px; font-style: normal; }.ats-visual i.good { color: #2f745a; }.ats-visual i.warn { color: #9d6824; }
.versions-visual { position: relative; height: 235px; padding-top: 42px; }.versions-visual > div { position: absolute; left: 15px; right: 15px; display: grid; padding: 18px 20px; background: #f8f7f2; border: 1px solid #d8d9d2; border-radius: 9px; box-shadow: 0 8px 20px rgba(0,0,0,.06); }.versions-visual div:nth-child(1) { z-index: 3; top: 38px; }.versions-visual div:nth-child(2) { z-index: 2; top: 78px; left: 26px; right: 4px; transform: rotate(2deg); }.versions-visual div:nth-child(3) { top: 117px; left: 38px; right: -5px; transform: rotate(4deg); }.versions-visual b { font-size: 12px; }.versions-visual small { color: #89928e; font-size: 8px; }

.templates-showcase { color: #e8f0ed; background: #101a18; overflow: hidden; }.centered { max-width: 850px; margin: 0 auto 70px; text-align: center; }.centered .section-index { justify-content: center; color: #8d9b96; }.centered h2 em { color: var(--lime); }.centered p { max-width: 600px; margin: 24px auto 0; color: #93a29c; }.template-carousel { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 630px; }.template-card { position: relative; flex: 0 0 320px; background: #e7e5dd; border-radius: 9px; box-shadow: 0 30px 70px rgba(0,0,0,.28); transition: transform .35s; }.template-card:hover { z-index: 5; transform: translateY(-12px) rotate(0); }.template-card.tilt-left { transform: rotate(-5deg) translateY(22px); }.template-card.tilt-right { transform: rotate(5deg) translateY(22px); }.template-card.featured { flex-basis: 365px; z-index: 2; }.template-card footer { display: flex; justify-content: space-between; padding: 17px 20px; color: var(--ink); border-top: 1px solid #d0d1ca; }.template-card footer b { font-size: 14px; }.template-card footer span { color: #74807b; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }.popular { position: absolute; top: -13px; right: 20px; padding: 7px 11px; color: var(--ink); background: var(--lime); border-radius: 4px; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.mini-resume { height: 450px; padding: 38px 34px; color: #18221f; background: #fff; font-family: Arial,sans-serif; }.template-card.featured .mini-resume { height: 510px; }.mini-resume h4 { margin: 0; font-size: 24px; line-height: .93; letter-spacing: -.05em; }.mini-resume b { display: block; margin: 20px 0 9px; color: #4c675e; font-size: 7px; letter-spacing: .15em; }.mini-resume p { margin: 6px 0 13px; color: #5e6965; font-size: 7px; line-height: 1.6; }.mini-resume h5 { margin: 9px 0 2px; font-size: 9px; }.mini-resume small { display: block; color: #818a86; font-size: 6px; }.mini-resume.clarity header { display: flex; align-items: end; justify-content: space-between; }.mini-resume.clarity header > span { color: #62706b; font-size: 6px; letter-spacing: .12em; }.mini-resume.clarity hr { margin: 14px 0; border: 0; border-top: 2px solid #31594d; }.mini-resume.nova header { display: flex; align-items: center; gap: 15px; }.monogram { display: grid; place-items: center; width: 45px; height: 45px; color: #fff; background: #8b5e51; border-radius: 50%; font: 12px Georgia,serif; }.mini-resume.nova header > div > span { color: #7e8985; font-size: 6px; letter-spacing: .12em; }.resume-cols { display: grid; grid-template-columns: .65fr 1.35fr; gap: 22px; margin-top: 25px; }.resume-cols .sample-aside { padding-right: 14px; border-right: 1px solid #d8d9d5; }.resume-cols .sample-aside small { margin: 7px 0; }.mini-resume.axis { padding: 0; }.mini-resume.axis header { display: grid; gap: 7px; padding: 33px; color: #f2f5f3; background: #253f38; }.mini-resume.axis header span { font-size: 19px; font-weight: 900; }.mini-resume.axis header b { margin: 0; color: #b8cc4b; }.axis-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 20px; padding: 25px 30px; }.axis-grid .sample-aside { padding-left: 15px; background: #eef0e9; }.axis-grid .sample-aside small { margin: 8px 0; }.center-action { margin-top: 55px; text-align: center; }.templates-showcase .button-outline { color: #fff; border-color: #6b7773; }.templates-showcase .button-outline:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }

.how-section { background: var(--lime); }.how-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 100px; }.how-copy { position: sticky; top: 120px; align-self: start; }.how-copy .section-index { color: #465134; }.how-copy h2 { margin: 22px 0; font-size: clamp(50px,5vw,72px); line-height: .95; letter-spacing: -.06em; }.how-copy p { max-width: 420px; margin-bottom: 35px; color: #4b563a; }.how-steps { margin: 0; padding: 0; list-style: none; }.how-steps li { display: grid; grid-template-columns: 70px 1fr; gap: 25px; padding: 34px 0; border-top: 1px solid rgba(12,21,19,.22); }.how-steps li:last-child { border-bottom: 1px solid rgba(12,21,19,.22); }.how-steps > li > span { display: grid; place-items: center; width: 48px; height: 48px; background: rgba(255,255,255,.45); border-radius: 50%; font-size: 11px; font-weight: 900; }.how-steps h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.04em; }.how-steps p { margin: 0; color: #4e593e; }
.quote-section { color: #e9f1ee; background: #101a18; }.quote-wrap { max-width: 930px; text-align: center; }.quote-mark { color: var(--lime); font: 90px/1 Georgia,serif; }.quote-wrap blockquote { margin: 0; font: 400 clamp(32px,4.5vw,58px)/1.14 Georgia,serif; letter-spacing: -.03em; }.quote-person { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 36px; }.quote-person > span { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); background: #c9d8ce; border-radius: 50%; font-size: 10px; font-weight: 900; }.quote-person div { display: grid; text-align: left; }.quote-person b { font-size: 12px; }.quote-person small { color: #83928c; font-size: 10px; }
.final-cta { position: relative; padding: 135px 0; text-align: center; color: #eef6f3; background: #14201d; overflow: hidden; }.final-cta .shell { position: relative; z-index: 2; }.final-cta h2 { margin: 25px 0 20px; font-size: clamp(62px,8vw,110px); line-height: .87; letter-spacing: -.075em; }.final-cta p { margin-bottom: 34px; color: #a4b0ac; font-size: 18px; }.final-cta .button { display: flex; width: fit-content; margin: 0 auto; }.final-cta small { display: block; margin-top: 18px; color: #778680; font-size: 10px; }.cta-orb { position: absolute; width: 850px; height: 850px; left: 50%; top: 45%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(102,137,124,.22), transparent 65%); }

.site-footer { padding: 90px 0 25px; color: #e7efec; background: #08100e; }.footer-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; padding-bottom: 75px; }.brand-footer { margin-bottom: 45px; }.footer-pitch h2 { margin: 0 0 32px; font-size: 42px; line-height: 1.02; letter-spacing: -.055em; }.footer-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; padding-top: 15px; }.footer-links div { display: grid; align-content: start; gap: 12px; }.footer-links h3 { margin: 0 0 8px; color: #70807a; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }.footer-links a { color: #b9c5c0; font-size: 13px; }.footer-links a:hover { color: var(--lime); }.footer-bottom { display: flex; justify-content: space-between; padding-top: 25px; color: #687771; border-top: 1px solid #23302d; font-size: 10px; }

.toast { position: fixed; z-index: 500; top: 90px; right: 24px; display: flex; align-items: center; gap: 18px; max-width: 400px; padding: 14px 17px; color: #fff; background: #263732; border: 1px solid #43534f; border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; }.toast-success { background: #185a43; }.toast-error { background: #792d39; }.toast button { margin-left: auto; color: inherit; background: none; border: 0; font-size: 20px; cursor: pointer; }
.inline-error, .inline-success { padding: 12px 14px; margin: 16px 0; border-radius: 8px; font-size: 13px; }.inline-error { color: #8f2638; background: #ffe8ec; border: 1px solid #f2bdc5; }.inline-success { color: #165e43; background: #e6f8ef; border: 1px solid #b2dfca; }

.page-hero { min-height: 570px; padding: 160px 0 100px; color: #eff6f3; background: #0b1513; text-align: center; }.page-hero h1 { margin: 30px 0 25px; font-size: clamp(58px,7vw,94px); line-height: .91; letter-spacing: -.07em; }.page-hero p { max-width: 630px; margin: 0 auto; color: #9ead9f; font-size: 18px; }.page-hero .eyebrow { justify-content: center; }

/* template library */
.template-library { padding-top: 70px; }.filter-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 45px; }.filter-row button { padding: 9px 16px; color: #5d6864; background: transparent; border: 1px solid #cfd2ca; border-radius: 30px; font-size: 12px; cursor: pointer; }.filter-row button.active, .filter-row button:hover { color: #fff; background: var(--ink); border-color: var(--ink); }.library-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px 22px; }.library-card.is-hidden { display: none; }.library-preview { position: relative; display: grid; place-items: center; min-height: 510px; padding: 42px; overflow: hidden; background: #dfe2db; border-radius: 13px; }.library-paper { width: 285px; height: 402px; padding: 28px 24px; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.12); transition: transform .35s; }.library-card:hover .library-paper { transform: translateY(-8px) scale(1.02); }.library-paper header { display: flex; align-items: center; gap: 11px; }.sample-initials { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: var(--card-accent,#385e53); border-radius: 50%; font-size: 8px; font-weight: 900; }.library-paper h3 { margin: 0; font-size: 14px; letter-spacing: -.03em; }.library-paper header small { color: #78837f; font-size: 5px; letter-spacing: .12em; }.library-paper hr { margin: 15px 0; border: 0; border-top: 2px solid var(--card-accent,#385e53); }.sample-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: 16px; }.sample-grid .sample-aside { padding-right: 10px; border-right: 1px solid #e1e2dd; }.sample-grid b { display: block; margin: 13px 0 8px; color: var(--card-accent,#385e53); font-size: 6px; letter-spacing: .13em; }.sample-grid i, .sample-grid p { display: block; height: 4px; margin: 5px 0; background: #dce0dc; border-radius: 3px; }.sample-grid i:nth-of-type(2) { width: 72%; }.sample-grid p { height: 5px; }.sample-grid p:nth-of-type(2n) { width: 80%; }.sample-grid h4 { margin: 10px 0 2px; font-size: 8px; }.sample-grid small { color: #7f8985; font-size: 5px; }.theme-clarity { --card-accent:#375f52; background:#dfe5df; }.theme-axis { --card-accent:#3f5fc0; background:#dce3ef; }.theme-executive { --card-accent:#785e38; background:#e4ded5; }.theme-studio { --card-accent:#b14f74; background:#eddce3; }.theme-minimal { --card-accent:#333; background:#e3e2dd; }.pro-badge { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 5px 8px; color: var(--ink); background: var(--lime); border-radius: 4px; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.preview-action { position: absolute; left: 50%; bottom: 28px; z-index: 3; padding: 10px 15px; color: #fff; background: var(--ink); border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.2); font-size: 11px; font-weight: 800; opacity: 0; transform: translate(-50%,12px); transition: .25s; }.library-preview:hover .preview-action { opacity: 1; transform: translate(-50%,0); }.library-card > footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 4px; }.library-card footer h2 { margin: 0; font-size: 22px; letter-spacing: -.04em; }.library-card footer p { margin: 3px 0; color: #74807b; font-size: 12px; }.library-card footer > span { align-self: start; padding: 5px 8px; border: 1px solid #c9cdc6; border-radius: 20px; color: #6b7671; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.compact-cta { padding: 75px 0; color: #eef6f3; background: #15211e; }.compact-cta .shell { display: flex; justify-content: space-between; align-items: center; gap: 40px; }.compact-cta .section-index { color: #8b9a94; }.compact-cta h2 { margin: 14px 0 5px; font-size: 37px; letter-spacing: -.05em; }.compact-cta p { margin: 0; color: #91a09a; }

/* pricing */
.pricing-section { padding-top: 70px; }.pricing-grid { display: grid; grid-template-columns: repeat(2,minmax(0,520px)); justify-content: center; gap: 18px; }.price-card { position: relative; padding: 42px; background: #fff; border: 1px solid #d7d8d1; border-radius: 15px; }.price-card-pro { color: #edf5f2; background: #14201d; border-color: #14201d; box-shadow: 0 25px 70px rgba(8,17,15,.2); }.price-label { font-size: 10px; font-weight: 900; letter-spacing: .15em; }.price-card h2 { margin: 24px 0 10px; font-size: 70px; line-height: 1; letter-spacing: -.07em; }.price-card h2 small { font-size: 30px; vertical-align: 25px; }.price-card h2 em { color: #7e8b86; font-size: 14px; font-style: normal; letter-spacing: 0; }.price-card > p { min-height: 52px; color: #73807b; }.price-card-pro > p { color: #9aa9a3; }.price-card ul { display: grid; gap: 13px; min-height: 220px; padding: 25px 0; margin: 20px 0 25px; border-top: 1px solid #e1e2dc; border-bottom: 1px solid #e1e2dc; list-style: none; }.price-card-pro ul { border-color: #34413e; }.price-card li:before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 10px; color: #315f4f; background: #e7f3ed; border-radius: 50%; font-size: 10px; font-weight: 900; }.price-card-pro li:before { color: var(--ink); background: var(--lime); }.best-value { position: absolute; top: 18px; right: 20px; padding: 6px 9px; color: var(--ink); background: var(--lime); border-radius: 4px; font-size: 8px; font-weight: 900; letter-spacing: .1em; }.annual-link { display: block; margin-top: 15px; color: #b9c8c2; text-align: center; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }.price-note { margin-top: 25px; color: #7a8581; text-align: center; font-size: 11px; }.faq-section { background: #e9e7df; }.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }.faq-grid h2 { margin: 20px 0; font-size: 58px; line-height: .95; letter-spacing: -.06em; }.accordion details { border-top: 1px solid #caccC5; }.accordion details:last-child { border-bottom: 1px solid #caccc5; }.accordion summary { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; font-size: 17px; font-weight: 800; list-style: none; }.accordion summary::-webkit-details-marker { display: none; }.accordion summary span { font-size: 22px; transition: transform .2s; }.accordion details[open] summary span { transform: rotate(45deg); }.accordion details p { margin: -7px 45px 25px 0; color: #65716d; line-height: 1.75; }

/* auth */
.auth-section { position: relative; min-height: 760px; padding: 145px 0 80px; color: #eaf2ef; background: #0b1513; overflow: hidden; }.auth-orb { position: absolute; inset: -200px auto auto -150px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(76,111,99,.34), transparent 66%); }.auth-grid { position: relative; display: grid; grid-template-columns: 1fr 500px; gap: 100px; align-items: center; }.auth-story h1 { margin: 25px 0; font-size: clamp(60px,6.5vw,90px); line-height: .9; letter-spacing: -.07em; }.auth-story > p { max-width: 520px; color: #9baaa4; font-size: 17px; }.auth-proof { display: flex; align-items: center; gap: 15px; margin-top: 45px; }.score-ring.small { position: relative; width: 50px; height: 50px; font-size: 13px; }.score-ring.small:after { width: 39px; height: 39px; background: #e6eee9; }.auth-proof > div { display: grid; }.auth-proof b { font-size: 13px; }.auth-proof small { color: #84948e; font-size: 11px; }.auth-card { padding: 40px; color: var(--ink); background: #f4f2eb; border-radius: 18px; box-shadow: 0 35px 90px rgba(0,0,0,.3); }.auth-kicker { color: #66736e; font-size: 9px; font-weight: 900; letter-spacing: .15em; }.auth-card h2 { margin: 10px 0 4px; font-size: 34px; letter-spacing: -.05em; }.auth-card > p { margin: 0 0 24px; color: #717c78; font-size: 13px; }.auth-form { display: grid; gap: 15px; }.auth-form label, .auth-field, .field { display: grid; gap: 7px; color: #485550; font-size: 11px; font-weight: 800; }.auth-form label > span { float: right; color: #8b9591; font-weight: 500; }.auth-form input, .field input, .field textarea, .field select, .version-create input { width: 100%; color: var(--ink); background: #fff; border: 1px solid #ccd0ca; border-radius: 7px; outline: 0; }.auth-form input { height: 48px; padding: 0 13px; }.auth-form input:focus, .field input:focus, .field textarea:focus, .field select:focus, .version-create input:focus { border-color: #567263; box-shadow: 0 0 0 3px rgba(86,114,99,.12); }.password-wrap { position: relative; }.password-wrap input { padding-right: 55px; }.password-wrap button { position: absolute; right: 5px; top: 5px; bottom: 5px; color: #687570; background: transparent; border: 0; font-size: 10px; font-weight: 800; cursor: pointer; }.auth-switch { padding-top: 22px; margin-top: 22px; border-top: 1px solid #d8d9d3; text-align: center; color: #77827e; font-size: 12px; }.auth-switch a, .auth-terms a { color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }.auth-terms { display: block; margin-top: 15px; color: #87908c; text-align: center; font-size: 9px; }

/* animation */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: none; }.reveal.delay-1 { transition-delay: .12s; }.reveal.delay-2 { transition-delay: .22s; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*:before,*:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

/* dashboard */
.workspace-hero { padding: 140px 0 70px; color: #eef6f3; background: #0b1513; }
.workspace-hero .shell { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.workspace-hero h1 { margin: 22px 0 3px; font-size: clamp(46px,5vw,68px); line-height: .98; letter-spacing: -.06em; }
.workspace-hero p { margin: 0; color: #94a39d; font-size: 17px; }
.workspace-actions { display: flex; gap: 10px; }.workspace-actions .button-ghost { color: #dfe8e5; border-color: #4b5b56; }
.workspace-main { min-height: 700px; padding: 65px 0 100px; background: #f2f0e9; }
.workspace-layout { display: grid; grid-template-columns: 1fr 290px; gap: 55px; }
.workspace-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }
.workspace-heading h2 { margin: 10px 0 0; font-size: 30px; letter-spacing: -.05em; }.workspace-heading > span { color: #77837e; font-size: 11px; }
.empty-state { display: grid; justify-items: center; padding: 65px 25px; background: #e8e6de; border: 1px dashed #bfc3bc; border-radius: 14px; text-align: center; }
.empty-visual { position: relative; width: 90px; height: 110px; margin-bottom: 20px; background: #fff; border: 1px solid #d2d4ce; box-shadow: 6px 7px 0 #d8d8d1; }.empty-visual span { position: absolute; left: 15px; right: 15px; top: 22px; height: 4px; background: #536c62; box-shadow: 0 12px 0 #d9dcd7, 0 23px 0 #d9dcd7, 0 34px 0 #d9dcd7; }.empty-visual i { position: absolute; right: -15px; bottom: -12px; display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink); background: var(--lime); border-radius: 50%; font-size: 22px; font-style: normal; }
.empty-state h3 { margin: 5px 0 8px; font-size: 23px; letter-spacing: -.04em; }.empty-state p { max-width: 460px; margin: 0 0 22px; color: #71807a; }
.document-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px 17px; }.document-card { position: relative; min-width: 0; }.document-preview { position: relative; display: grid; place-items: center; height: 300px; overflow: hidden; background: #dfe3de; border-radius: 11px; }.doc-page { width: 155px; height: 220px; padding: 24px 18px; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.12); transition: transform .3s; }.document-card:hover .doc-page { transform: translateY(-7px); }.doc-page span { display: block; width: 22px; height: 22px; margin-bottom: 12px; background: var(--card-accent,#45665b); border-radius: 50%; }.doc-page h3 { max-width: 110px; margin: 0 0 10px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.doc-page i { display: block; height: 2px; margin-bottom: 15px; background: var(--card-accent,#45665b); }.doc-page b { display: block; width: 100%; height: 4px; margin: 6px 0; background: #dfe2de; border-radius: 2px; }.doc-page b:nth-of-type(2) { width: 75%; }.doc-score { position: absolute; right: 17px; bottom: 15px; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: #16231f; border-radius: 50%; }.doc-score strong { font-size: 13px; line-height: 1; }.doc-score small { color: #9dafaa; font-size: 6px; }
.document-info { position: relative; display: flex; justify-content: space-between; padding: 14px 4px; }.document-info h3 { margin: 0; font-size: 15px; }.document-info p { margin: 3px 0; color: #78837f; font-size: 9px; }.icon-menu { width: 30px; height: 30px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }.icon-menu:hover { background: #dedfd8; }.menu-popover { position: absolute; z-index: 20; right: 0; top: 44px; display: none; width: 150px; padding: 6px; background: #fff; border: 1px solid #d5d7d0; border-radius: 8px; box-shadow: var(--shadow); }.menu-popover.open { display: grid; }.menu-popover a, .menu-popover button { padding: 8px 9px; color: #45514d; background: none; border: 0; border-radius: 5px; text-align: left; font-size: 11px; cursor: pointer; }.menu-popover a:hover, .menu-popover button:hover { background: #f0f0eb; }.menu-popover button { color: #b22f43; }
.new-document-card { display: grid; place-items: center; align-content: center; height: 300px; padding: 25px; background: transparent; border: 1px dashed #b9bdb6; border-radius: 11px; text-align: center; transition: background .2s,border-color .2s; }.new-document-card:hover { background: #e9e8e1; border-color: #808b86; }.new-document-card span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 13px; background: #fff; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,.07); font-size: 22px; }.new-document-card b { font-size: 13px; }.new-document-card small { color: #7f8a85; font-size: 9px; }
.letters-heading { margin-top: 65px; }.letters-heading > a { font-size: 11px; font-weight: 800; }.letter-strip { display: grid; grid-template-columns: 1.25fr repeat(2,.75fr); gap: 12px; }.letter-new, .letter-recent { display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 18px; background: #fff; border: 1px solid #dadbd4; border-radius: 10px; }.letter-new > span { display: grid; place-items: center; width: 40px; height: 40px; background: var(--lime); border-radius: 8px; font-size: 18px; }.letter-new div, .letter-recent div { display: grid; }.letter-new b, .letter-recent b { font-size: 12px; }.letter-new small, .letter-recent small { color: #7b8782; font-size: 8px; }.letter-new i { margin-left: auto; font-style: normal; }.letter-recent > span { color: #53645e; font-size: 8px; font-weight: 900; }
.workspace-aside { display: grid; align-content: start; gap: 15px; }.plan-card, .tip-card { padding: 24px; border-radius: 12px; }.plan-card { color: #eaf3f0; background: #15231f; }.plan-pill { display: inline-flex; padding: 5px 8px; color: var(--ink); background: var(--lime); border-radius: 4px; font-size: 7px; font-weight: 900; letter-spacing: .1em; }.plan-card h3, .tip-card h3 { margin: 18px 0 8px; font-size: 20px; line-height: 1.1; letter-spacing: -.04em; }.plan-card p, .tip-card p { color: #95a39e; font-size: 11px; line-height: 1.65; }.plan-card a, .tip-card a { font-size: 10px; font-weight: 850; }.plan-card a span { color: var(--lime); }.tip-card { background: #e2e0d7; border: 1px solid #d0d1c9; }.tip-card > span { color: #68746f; font-size: 8px; font-weight: 900; letter-spacing: .13em; }.tip-card p { color: #68746f; }.admin-link-card { display: flex; align-items: center; gap: 11px; padding: 16px; background: #fff; border: 1px solid #d7d8d1; border-radius: 9px; }.admin-link-card > span { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: #263732; border-radius: 7px; }.admin-link-card div { display: grid; }.admin-link-card b { font-size: 10px; }.admin-link-card small { color: #81908a; font-size: 8px; }.admin-link-card i { margin-left: auto; font-style: normal; }.logout-form button { padding: 8px 0; color: #7b8581; background: none; border: 0; font-size: 10px; text-decoration: underline; cursor: pointer; }

/* builder shell */
.builder-page { height: 100vh; overflow: hidden; background: #dfe3df; }
.builder-app { height: 100%; }
.builder-topbar { position: relative; z-index: 40; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; height: 64px; padding: 0 17px 0 0; color: #eaf2ef; background: #101a18; border-bottom: 1px solid #2b3935; }
.builder-brand { display: flex; align-items: center; gap: 9px; height: 64px; padding-left: 18px; color: #fff; font-size: 17px; font-weight: 900; letter-spacing: -.6px; border-right: 1px solid #2b3935; }.builder-brand .brand-mark { width: 23px; height: 23px; }
.builder-title-wrap { display: flex; align-items: center; gap: 10px; padding-left: 17px; }.builder-back { display: none; }.builder-title-wrap input { width: min(300px,35vw); padding: 6px 8px; color: #dce7e3; background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: 12px; font-weight: 800; }.builder-title-wrap input:hover,.builder-title-wrap input:focus { border-color: #42504c; outline: 0; }.save-state { display: inline-flex; align-items: center; gap: 6px; color: #7e8d87; font-size: 9px; }.save-state i { width: 6px; height: 6px; background: #64736e; border-radius: 50%; }.save-state.saving i { background: #f4b941; animation: pulse 1s infinite; }.save-state.saved i { background: #66d19e; }.save-state.error { color: #ff9faa; }.save-state.error i { background: #ff7383; }
@keyframes pulse { 50% { opacity:.3; } }
.builder-actions { display: flex; align-items: center; gap: 6px; }.topbar-action { padding: 8px 11px; color: #afbeb8; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 10px; font-weight: 750; cursor: pointer; }.topbar-action:hover { color: #fff; border-color: #41504b; }.topbar-action:disabled { opacity: .35; }
.builder-workspace { display: grid; grid-template-columns: 72px minmax(390px,42%) 1fr; height: calc(100vh - 64px); }
.builder-rail { position: relative; z-index: 20; display: flex; flex-direction: column; align-items: center; padding: 17px 0; color: #81908a; background: #14201d; border-right: 1px solid #2e3b37; }.rail-label { margin: 0 0 9px; font-size: 5px; font-weight: 900; letter-spacing: .13em; }.builder-rail button,.builder-rail a { display: grid; place-items: center; width: 52px; height: 46px; margin-bottom: 3px; color: inherit; background: transparent; border: 0; border-radius: 7px; cursor: pointer; }.builder-rail button span,.builder-rail a span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 5px; font-size: 8px; font-weight: 900; }.builder-rail button i,.builder-rail a i { display: none; font-style: normal; }.builder-rail button:hover,.builder-rail button.active { color: #fff; background: #24322e; }.builder-rail button.active span { color: var(--ink); background: var(--lime); }.rail-divider { width: 28px; height: 1px; margin: 8px 0 13px; background: #35423e; }
.builder-panel { position: relative; z-index: 15; display: grid; grid-template-rows: 1fr 54px; min-width: 0; background: #f4f2ed; border-right: 1px solid #cbd0cb; box-shadow: 7px 0 30px rgba(15,27,24,.06); }.panel-scroll { overflow: auto; }.builder-section { display: none; max-width: 620px; padding: 40px 38px 70px; margin: 0 auto; }.builder-section.active { display: block; }.panel-heading { margin-bottom: 28px; }.panel-heading > span { color: #73807b; font-size: 8px; font-weight: 900; letter-spacing: .15em; }.panel-heading h1 { margin: 10px 0 8px; font-size: 35px; line-height: .98; letter-spacing: -.055em; }.panel-heading p { margin: 0; color: #76827d; font-size: 12px; line-height: 1.6; }.field-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px 12px; }.field.full { grid-column: 1/-1; }.field input,.field select { height: 44px; padding: 0 12px; }.field textarea { min-height: 100px; padding: 12px; resize: vertical; line-height: 1.55; }.textarea-field > span { display: flex; justify-content: space-between; }.textarea-field > span small { color: #89948f; font-weight: 500; }.panel-tip { display: flex; gap: 13px; margin-top: 25px; padding: 15px; color: #4f5f59; background: #e7e8e2; border-radius: 8px; }.panel-tip > span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; color: var(--ink); background: var(--lime); border-radius: 50%; font-size: 11px; }.panel-tip b { font-size: 10px; }.panel-tip p { margin: 3px 0 0; color: #75817d; font-size: 9px; }.ai-action { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 13px; color: #eaf3ef; background: #14211e; border: 0; border-radius: 8px; text-align: left; cursor: pointer; }.ai-action > span { display: grid; place-items: center; width: 33px; height: 33px; color: var(--ink); background: var(--lime); border-radius: 7px; }.ai-action-copy { display: grid; }.ai-action b { font-size: 10px; }.ai-action small { color: #84948e; font-size: 8px; }.ai-action > i { margin-left: auto; color: var(--lime); font-style: normal; }.writing-guide { margin-top: 28px; padding-top: 22px; border-top: 1px solid #d5d7d0; }.writing-guide b { font-size: 11px; }.writing-guide ol { display: grid; gap: 7px; padding-left: 21px; color: #687570; font-size: 10px; }
.repeat-card { position: relative; padding: 18px; margin-bottom: 14px; background: #e9e8e2; border: 1px solid #d6d7d0; border-radius: 10px; }.repeat-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }.repeat-card header span { color: #6e7b76; font-size: 7px; font-weight: 900; letter-spacing: .15em; }.repeat-card header button { width: 25px; height: 25px; color: #8e9995; background: transparent; border: 0; font-size: 18px; cursor: pointer; }.date-pair > span:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.ai-inline { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; padding: 7px 9px; color: #53635d; background: #fff; border: 1px solid #cdd1cb; border-radius: 5px; font-size: 8px; font-weight: 800; cursor: pointer; }.ai-inline span { color: #5f7e19; }.add-item { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 12px; color: #4f5d58; background: transparent; border: 1px dashed #aeb5af; border-radius: 8px; font-size: 10px; font-weight: 800; cursor: pointer; }.add-item span { font-size: 18px; }.skill-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }.skill-suggestions > span { width: 100%; color: #74817c; font-size: 7px; font-weight: 900; letter-spacing: .12em; }.skill-suggestions button { padding: 6px 9px; color: #687570; background: #e7e7e1; border: 1px solid #d1d3cc; border-radius: 20px; font-size: 8px; }
.template-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.template-option { padding: 8px; background: #fff; border: 1px solid #d2d5ce; border-radius: 8px; text-align: left; cursor: pointer; }.template-option.active { border-color: #20302b; box-shadow: 0 0 0 2px #20302b; }.template-swatch { display: block; height: 100px; padding: 14px 11px; margin-bottom: 8px; background: #e4e6df; border-radius: 5px; }.template-swatch i { display: block; width: 23px; height: 7px; margin-bottom: 11px; background: var(--card-accent,#45655b); }.template-swatch b { display: block; width: 100%; height: 3px; margin: 5px 0; background: #fff; }.template-swatch b:last-child { width: 65%; }.template-option strong { display: block; font-size: 9px; }.template-option small { color: #7b8782; font-size: 7px; }.design-controls { display: grid; gap: 13px; margin-top: 25px; padding-top: 22px; border-top: 1px solid #d5d7d0; }.color-input { display: flex; align-items: center; height: 44px; padding: 0 11px; background: #fff; border: 1px solid #ccd0ca; border-radius: 7px; }.color-input input { width: 25px; height: 25px; padding: 0; border: 0; }.color-input b { margin-left: 10px; font-size: 10px; text-transform: uppercase; }.panel-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 0 24px; background: #eeede8; border-top: 1px solid #d5d7d0; }.panel-footer button { padding: 7px; color: #5e6b66; background: none; border: 0; font-size: 9px; font-weight: 800; cursor: pointer; }.completion-bar { height: 3px; overflow: hidden; background: #d4d7d1; border-radius: 4px; }.completion-bar i { display: block; width: 16.67%; height: 100%; background: #7da50b; transition: width .25s; }
.preview-panel { display: grid; grid-template-rows: 44px 1fr; min-width: 0; background: #dfe3df; }.preview-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 15px; color: #63706b; background: #eef0ec; border-bottom: 1px solid #c9ceca; }.preview-toolbar > div { display: flex; align-items: center; }.preview-toolbar button { padding: 5px 7px; color: #78837e; background: transparent; border: 0; font-size: 7px; font-weight: 800; cursor: pointer; }.preview-toolbar button.active { color: var(--ink); }.preview-toolbar span { font-size: 7px; }.ats-toolbar { gap: 7px; }.ats-toolbar b { display: grid; place-items: center; width: 27px; height: 27px; color: #fff; background: #2b5d4d; border-radius: 50%; font-size: 9px; }.preview-stage { position: relative; display: grid; place-items: start center; overflow: auto; padding: 36px 20px 70px; }.preview-scale { transform: scale(.82); transform-origin: top center; transition: transform .2s; }

/* Resume document shared by builder, print and public link */
.resume-document { --resume-accent:#365cff; width: 794px; min-height: 1123px; padding: 70px 68px; color: #1a2522; background: #fff; box-shadow: 0 15px 50px rgba(17,31,27,.16); font-family: Arial,Helvetica,sans-serif; line-height: 1.45; }.resume-document.font-classic { font-family: Georgia,"Times New Roman",serif; }.resume-document.font-clean { font-family: Inter,Arial,sans-serif; }.resume-header { display: flex; align-items: center; gap: 24px; }.resume-monogram { display: grid; place-items: center; flex: 0 0 66px; height: 66px; color: #fff; background: var(--resume-accent); border-radius: 50%; font-size: 15px; font-weight: 900; }.resume-identity h1 { margin: 0; font-size: 39px; line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }.resume-identity p { margin: 7px 0 0; color: var(--resume-accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.resume-contact { display: flex; flex-wrap: wrap; gap: 7px 17px; padding: 16px 0; margin: 28px 0 34px; color: #66726e; border-top: 2px solid var(--resume-accent); border-bottom: 1px solid #d9ddd9; font-size: 10px; }.resume-contact span:not(:last-child):after { content: "·"; margin-left: 17px; color: #a3aba7; }.resume-body { display: grid; grid-template-columns: 1fr 180px; gap: 44px; }.resume-body section { margin-bottom: 28px; }.resume-body h2 { margin: 0 0 13px; color: var(--resume-accent); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }.resume-summary { margin: 0; color: #47534f; font-size: 12px; line-height: 1.7; }.resume-entry { margin-bottom: 21px; }.resume-entry.compact { margin-bottom: 13px; }.entry-heading { display: flex; justify-content: space-between; gap: 20px; }.entry-heading h3 { margin: 0 0 2px; font-size: 14px; }.entry-heading h4 { margin: 0; color: #59655f; font-size: 11px; font-weight: 600; }.entry-heading > span { flex: 0 0 auto; color: #6d7874; font-size: 9px; }.entry-description { margin-top: 7px; color: #47534f; font-size: 11px; white-space: pre-line; }.resume-secondary { padding-left: 24px; border-left: 1px solid #d9ddd9; }.resume-skills,.resume-languages { display: flex; flex-wrap: wrap; gap: 7px; }.resume-skills span,.resume-languages span { padding: 6px 8px; color: #45524d; background: color-mix(in srgb, var(--resume-accent) 8%, #f1f2ef); border-radius: 4px; font-size: 9px; }.density-compact { padding-top: 55px; padding-bottom: 55px; }.density-compact .resume-body section { margin-bottom: 20px; }.density-compact .resume-entry { margin-bottom: 15px; }.density-relaxed { padding-top: 80px; padding-bottom: 80px; }.density-relaxed .resume-body section { margin-bottom: 35px; }.resume-template-clarity .resume-monogram,.resume-template-minimal .resume-monogram { display:none; }.resume-template-clarity .resume-header,.resume-template-minimal .resume-header { display:block; }.resume-template-clarity .resume-body,.resume-template-minimal .resume-body { grid-template-columns:1fr; }.resume-template-clarity .resume-secondary,.resume-template-minimal .resume-secondary { padding-left:0; border:0; }.resume-template-clarity .resume-skills,.resume-template-minimal .resume-skills { gap:5px 14px; }.resume-template-clarity .resume-skills span,.resume-template-minimal .resume-skills span { padding:0; background:none; }.resume-template-axis .resume-header { margin:-70px -68px 30px; padding:55px 68px 35px; color:#fff; background:#172e28; }.resume-template-axis .resume-identity p { color:var(--lime); }.resume-template-executive .resume-monogram { border-radius:4px; }.resume-template-executive .resume-identity h1,.resume-template-studio .resume-identity h1 { font-family:Georgia,serif; font-weight:400; text-transform:none; }.resume-template-studio .resume-monogram { transform:rotate(-7deg); border-radius:18px; }.resume-template-studio .resume-contact { border-top-width:6px; }.resume-template-minimal .resume-identity h1 { font-size:48px; font-weight:300; letter-spacing:-.06em; }.resume-template-minimal .resume-contact { border-top:1px solid #222; }
.builder-mobile-nav { display: none; }
.builder-dialog { width: min(470px,calc(100% - 28px)); padding: 34px; background: #f4f2ed; border: 0; border-radius: 14px; box-shadow: 0 35px 100px rgba(0,0,0,.35); }.builder-dialog::backdrop { background: rgba(5,12,10,.65); backdrop-filter: blur(4px); }.dialog-close { position: absolute; right: 16px; top: 13px; background: transparent; border: 0; font-size: 26px; cursor: pointer; }.dialog-kicker { color: #6d7974; font-size: 8px; font-weight: 900; letter-spacing: .14em; }.builder-dialog h2 { margin: 9px 0 5px; font-size: 31px; letter-spacing: -.05em; }.builder-dialog > p { margin: 0 0 24px; color: #73807b; font-size: 11px; }.share-switch { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: #e7e7e1; border-radius: 8px; }.share-switch div { display: grid; }.share-switch b { font-size: 11px; }.share-switch small { color: #78847f; font-size: 8px; }.switch input { position: absolute; opacity: 0; }.switch span { position: relative; display: block; width: 42px; height: 23px; background: #b8beb9; border-radius: 30px; cursor: pointer; }.switch span:after { content:""; position:absolute; left:3px; top:3px; width:17px; height:17px; background:#fff; border-radius:50%; transition:.2s; }.switch input:checked + span { background:#4f7a6c; }.switch input:checked + span:after { transform:translateX(19px); }.copy-link { display:flex; margin:13px 0; }.copy-link input { flex:1; min-width:0; padding:10px; color:#6c7873; background:#fff; border:1px solid #d0d3cc; border-radius:7px 0 0 7px; font-size:9px; }.copy-link button { padding:0 13px; color:#fff; background:#17241f; border:0; border-radius:0 7px 7px 0; font-size:9px; cursor:pointer; }.version-create { display:flex; gap:8px; }.version-create input { min-width:0; padding:10px; }.version-create .button { flex:0 0 auto; min-height:42px; }.version-list { display:grid; gap:6px; max-height:270px; margin-top:18px; overflow:auto; }.version-list > div { display:flex; justify-content:space-between; align-items:center; padding:11px; background:#e7e7e1; border-radius:7px; }.version-list span { display:grid; }.version-list b { font-size:10px; }.version-list small { color:#75817c; font-size:8px; }.version-list button { color:#50615b; background:transparent; border:0; font-size:9px; font-weight:800; cursor:pointer; }.muted { color:#7b8682; font-size:11px; }.builder-toast { position:fixed; z-index:300; left:50%; bottom:25px; max-width:420px; padding:11px 15px; color:#fff; background:#17251f; border-radius:8px; box-shadow:0 15px 40px rgba(0,0,0,.24); font-size:10px; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:.25s; }.builder-toast.show { opacity:1; transform:translate(-50%,0); }

/* shared CV */
.share-page { min-height:100vh; background:#dfe3df; }.share-topbar { display:flex; justify-content:space-between; align-items:center; height:62px; padding:0 25px; color:#eef6f3; background:#101a18; }.share-topbar > div { display:flex; align-items:center; gap:15px; }.share-topbar > div > span { color:#889791; font-size:10px; }.share-topbar > div > a { padding:8px 12px; color:var(--ink); background:var(--lime); border-radius:5px; font-size:9px; font-weight:900; }.share-canvas { display:grid; place-items:start center; padding:55px 20px 90px; }.share-actions { position:fixed; right:25px; bottom:25px; }.share-actions button { padding:12px 16px; color:#fff; background:#14211e; border:0; border-radius:7px; box-shadow:0 12px 30px rgba(0,0,0,.2); font-size:11px; font-weight:800; cursor:pointer; }

/* cover letter */
.tool-hero,.admin-hero { padding:130px 0 55px; color:#eef6f3; background:#0b1513; }.tool-hero .shell,.admin-hero .shell { display:flex; justify-content:space-between; align-items:end; }.tool-hero h1,.admin-hero h1 { margin:20px 0 10px; font-size:70px; line-height:.87; letter-spacing:-.07em; }.tool-hero h1 em { color:var(--lime); font-family:Georgia,serif; font-weight:400; }.tool-hero p,.admin-hero p { max-width:560px; margin:0; color:#93a29c; }.letter-studio { padding:55px 0 80px; background:#eceae3; }.letter-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:35px; align-items:start; }.letter-inputs { padding:25px 10px; }.studio-heading span { color:#697570; font-size:8px; font-weight:900; letter-spacing:.14em; }.studio-heading h2 { margin:10px 0 5px; font-size:35px; line-height:1; letter-spacing:-.05em; }.studio-heading p { margin:0 0 25px; color:#74807b; font-size:12px; }.letter-inputs .button { margin-top:15px; }.studio-privacy { color:#84908b; text-align:center; font-size:8px; }.letter-output { background:#d6d9d4; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }.letter-toolbar { display:flex; justify-content:space-between; align-items:center; height:46px; padding:0 14px; color:#55635e; background:#f5f5f1; border-bottom:1px solid #cbd0ca; font-size:9px; }.letter-toolbar span i { display:inline-block; width:6px; height:6px; margin-right:5px; background:#5cc493; border-radius:50%; }.letter-toolbar button { padding:5px 8px; background:transparent; border:0; font-size:8px; font-weight:800; cursor:pointer; }.letter-paper { width:calc(100% - 70px); height:650px; margin:35px auto; padding:55px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.1); }.letter-date { color:#697570; font-size:10px; }.letter-paper textarea { width:100%; height:calc(100% - 35px); margin-top:20px; padding:0; color:#28332f; background:transparent; border:0; outline:0; resize:none; font:13px/1.85 Georgia,serif; }.letter-save { display:flex; gap:8px; padding:13px; background:#f5f5f1; border-top:1px solid #cbd0ca; }.letter-save input { flex:1; min-width:0; padding:0 10px; border:1px solid #cdd1ca; border-radius:6px; }.saved-letters { padding:70px 0; background:#f4f2eb; }.saved-letter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.saved-letter-grid article { display:flex; gap:14px; padding:20px; background:#fff; border:1px solid #d8dad3; border-radius:9px; }.saved-letter-grid article > span { color:#52625c; font-size:8px; font-weight:900; }.saved-letter-grid h3 { margin:0; font-size:13px; }.saved-letter-grid p { margin:3px 0; color:#75817d; font-size:9px; }.saved-letter-grid small { color:#939c98; font-size:8px; }

/* admin */
.admin-main { padding:55px 0 100px; background:#f0eee7; }.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.stat-grid article { display:grid; padding:24px; background:#fff; border:1px solid #d8dad3; border-radius:10px; }.stat-grid span,.admin-card-heading > span,.launch-check > span,.security-note > span { color:#6c7873; font-size:8px; font-weight:900; letter-spacing:.14em; }.stat-grid b { margin:10px 0 3px; font-size:38px; line-height:1; letter-spacing:-.06em; }.stat-grid small { color:#7d8984; font-size:9px; }.admin-columns { display:grid; grid-template-columns:1fr 290px; gap:18px; margin-top:18px; }.admin-card,.members-card { padding:30px; background:#fff; border:1px solid #d8dad3; border-radius:11px; }.admin-card-heading { margin-bottom:25px; }.admin-card-heading h2 { margin:10px 0 3px; font-size:26px; letter-spacing:-.045em; }.admin-card-heading p { margin:0; color:#7b8782; font-size:11px; }.admin-card .button { margin-top:20px; }.admin-subheading { display:grid; padding-top:24px; margin:25px 0 15px; border-top:1px solid #dee0da; }.admin-subheading b { font-size:15px; }.admin-subheading span { color:#82908a; font-size:9px; }.admin-aside { display:grid; align-content:start; gap:14px; }.launch-check,.security-note { padding:24px; border-radius:11px; }.launch-check { color:#e9f2ef; background:#15231f; }.launch-check h3 { margin:12px 0; font-size:21px; }.launch-check ul { display:grid; gap:10px; padding:0; list-style:none; }.launch-check li { color:#8e9d97; font-size:10px; }.launch-check li:before { content:"○"; margin-right:8px; }.launch-check li.done { color:#dce9e4; }.launch-check li.done:before { content:"✓"; color:var(--lime); }.security-note { background:#e2e0d7; }.security-note p { margin:10px 0 0; color:#5e6b66; font-size:10px; line-height:1.7; }.security-note code { padding:2px 4px; background:#f2f0e9; border-radius:3px; }.members-card { margin-top:18px; }.members-table { overflow:auto; }.member-row { display:grid; grid-template-columns:1.5fr .65fr .4fr .45fr; gap:20px; align-items:center; min-width:670px; padding:12px 5px; border-top:1px solid #e0e1dc; }.member-head { color:#7a8681; border-top:0; font-size:8px; font-weight:900; letter-spacing:.1em; }.member-row > span:first-child { display:grid; }.member-row b { font-size:10px; }.member-row small { color:#7e8a85; font-size:8px; }.plan-status { width:max-content; padding:4px 7px; border-radius:20px; font-size:7px; font-weight:900; }.plan-premium { color:#3e5400; background:#e7ffac; }.plan-free { color:#5e6a65; background:#eceee9; }.member-row form button { padding:6px 8px; color:#50615b; background:transparent; border:1px solid #cbd0ca; border-radius:5px; font-size:8px; cursor:pointer; }

/* blog, article, legal and errors */
.blog-list { padding-top:70px; }.featured-article { display:grid; grid-template-columns:1.1fr .9fr; min-height:430px; color:#edf5f2; background:#15231f; border-radius:14px; overflow:hidden; }.featured-article > div:first-child { padding:55px; }.featured-article > div:first-child > span,.article-grid article > span { color:#93a29c; font-size:8px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }.featured-article h2 { max-width:600px; margin:18px 0; font-size:46px; line-height:1; letter-spacing:-.06em; }.featured-article p { max-width:520px; color:#9eadA7; }.featured-article a { display:inline-flex; gap:12px; margin-top:20px; font-size:11px; font-weight:850; }.featured-article a b { color:var(--lime); }.article-visual { position:relative; display:grid; place-items:center; background:#c8ff3d; overflow:hidden; }.scan-paper { width:240px; height:320px; padding:35px; background:#fff; box-shadow:0 20px 45px rgba(0,0,0,.18); transform:rotate(4deg); }.scan-paper i { display:block; width:45px; height:10px; margin-bottom:25px; background:#315b4f; }.scan-paper h3 { margin:15px 0 8px; color:#315b4f; font-size:7px; letter-spacing:.13em; }.scan-paper p { height:5px; margin:6px 0; background:#dce0dc; }.scan-paper p:nth-of-type(2n) { width:75%; }.scan-line { position:absolute; z-index:2; left:0; right:0; top:45%; height:2px; background:#3764ff; box-shadow:0 0 15px #3764ff; }.scan-score { position:absolute; z-index:3; right:30px; bottom:30px; display:grid; padding:10px 14px; color:#fff; background:#14211e; border-radius:7px; font-size:8px; }.scan-score b { font-size:25px; }.article-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:18px; }.article-grid article { padding:40px; background:#e6e4dc; border:1px solid #d3d4cd; border-radius:11px; }.article-grid h2 { margin:16px 0 10px; font-size:30px; line-height:1.05; letter-spacing:-.05em; }.article-grid p { color:#707c77; }.article-grid a { display:inline-flex; margin-top:18px; font-size:11px; font-weight:850; }.article-page > header { padding:150px 0 80px; color:#eef6f3; background:#0b1513; }.article-narrow { max-width:860px; }.article-page header a { color:#8fa09a; font-size:10px; }.article-page header span { display:block; margin-top:50px; color:#9aa9a3; font-size:9px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }.article-page header h1 { margin:18px 0; font-size:clamp(50px,6vw,82px); line-height:.96; letter-spacing:-.065em; }.article-page header p { max-width:650px; color:#a3b1ac; font-size:18px; }.article-body { display:grid; grid-template-columns:250px 1fr; gap:80px; padding-top:80px; padding-bottom:110px; }.article-body aside { position:sticky; top:120px; display:grid; align-content:start; gap:13px; height:max-content; }.article-body aside span { margin-bottom:10px; color:#7d8984; font-size:8px; font-weight:900; letter-spacing:.13em; }.article-body aside a { color:#66736e; font-size:10px; }.article-body aside a:hover { color:var(--ink); }.article-content > section { padding-bottom:50px; margin-bottom:50px; border-bottom:1px solid #d5d7d0; }.article-content > section > span { color:#71807a; font-size:9px; font-weight:900; }.article-body h2 { margin:10px 0 18px; font-size:38px; line-height:1.05; letter-spacing:-.05em; }.article-content > section p { color:#56635e; font:18px/1.85 Georgia,serif; }.article-cta { padding:45px; color:#ecf4f1; background:#15231f; border-radius:12px; }.article-cta h2 { margin-top:0; }.article-cta p { color:#94a39d; }.legal-page { min-height:100vh; padding:140px 0 100px; background:#f2f0e9; }.legal-wrap { display:grid; grid-template-columns:240px 1fr; gap:90px; }.legal-wrap aside { position:sticky; top:120px; display:grid; align-content:start; gap:14px; height:max-content; }.legal-wrap aside .brand { margin-bottom:35px; }.legal-wrap aside > span { color:#7b8782; font-size:8px; font-weight:900; letter-spacing:.15em; }.legal-wrap aside > a:not(.brand) { color:#74807b; font-size:11px; }.legal-wrap aside > a.active { color:var(--ink); font-weight:800; }.legal-wrap article { max-width:760px; }.legal-wrap article > span { color:#79857f; font-size:9px; }.legal-wrap h1 { margin:15px 0 55px; font-size:65px; letter-spacing:-.06em; }.legal-wrap h2 { margin:38px 0 10px; font-size:24px; letter-spacing:-.035em; }.legal-wrap p { color:#56635e; font:16px/1.8 Georgia,serif; }.legal-wrap article a { text-decoration:underline; }.error-page { position:relative; display:grid; place-items:center; min-height:100vh; padding:30px; color:#edf5f2; background:#0b1513; text-align:center; overflow:hidden; }.error-page > div:last-child { position:relative; z-index:2; }.error-page span { color:#91a09a; font-size:9px; font-weight:900; letter-spacing:.16em; }.error-page h1 { margin:18px 0 8px; font-size:clamp(55px,8vw,100px); line-height:.9; letter-spacing:-.07em; }.error-page p { max-width:500px; margin:0 auto 30px; color:#94a39d; }.error-orb { position:absolute; width:700px; height:700px; background:radial-gradient(circle,rgba(84,122,108,.32),transparent 65%); }

/* print */
@page { size:A4; margin:0; }
@media print {
  .share-topbar,.share-actions { display:none!important; }
  body.share-page,.share-canvas { padding:0!important; margin:0!important; background:#fff!important; }
  .resume-document { width:210mm; min-height:297mm; box-shadow:none; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}

/* responsive */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns:1fr; }.hero-copy { max-width:720px; }.hero-visual { width:760px; max-width:92vw; margin:0 auto; }.hero { padding-bottom:110px; }.feature-card { padding:25px; }.library-grid { grid-template-columns:repeat(2,1fr); }.document-grid { grid-template-columns:repeat(2,1fr); }.builder-workspace { grid-template-columns:62px 47% 1fr; }.builder-topbar { grid-template-columns:160px 1fr auto; }.builder-brand { font-size:14px; }.resume-document { transform-origin:top center; }.stat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px) {
  .shell { width:min(100% - 32px,var(--shell)); }.site-header { height:66px; }.nav-wrap { grid-template-columns:1fr auto; }.nav-toggle { display:block; justify-self:end; }.primary-nav { position:fixed; inset:66px 0 auto; display:none; padding:22px 20px; background:#101a18; border-top:1px solid #2c3a36; }.primary-nav.open { display:grid; }.primary-nav a.active:after { display:none; }.nav-actions { display:none; }.hero { padding-top:125px; }.hero-grid { gap:35px; }.hero h1 { font-size:clamp(58px,12vw,88px); }.hero-visual { max-width:100%; }.editor-window { transform:none; }.proof-strip .shell { display:grid; gap:18px; }.proof-strip div div { flex-wrap:wrap; }.split-heading { grid-template-columns:1fr; gap:25px; }.feature-grid { grid-template-columns:1fr; }.feature-card { min-height:auto; }.feature-card p { min-height:0; }.feature-icon,.ats-visual,.versions-visual { height:190px; }.template-card { flex-basis:280px; }.template-card.featured { flex-basis:320px; }.template-card:nth-child(1) { margin-left:220px; }.template-carousel { justify-content:flex-start; overflow:visible; }.how-grid { grid-template-columns:1fr; gap:60px; }.how-copy { position:static; }.footer-top { grid-template-columns:1fr; }.auth-grid { grid-template-columns:1fr; gap:55px; }.auth-story { text-align:center; }.auth-story > p { margin-inline:auto; }.auth-proof { justify-content:center; }.auth-card { width:min(500px,100%); margin:auto; }.workspace-layout { grid-template-columns:1fr; }.workspace-aside { grid-template-columns:repeat(2,1fr); }.letter-strip { grid-template-columns:1fr 1fr; }.letter-new { grid-column:1/-1; }.faq-grid { grid-template-columns:1fr; gap:35px; }.letter-grid { grid-template-columns:1fr; }.admin-columns { grid-template-columns:1fr; }.admin-aside { grid-template-columns:repeat(2,1fr); }.featured-article { grid-template-columns:1fr; }.article-visual { min-height:390px; }.article-body { grid-template-columns:1fr; }.article-body aside { position:static; display:none; }
  .builder-topbar { grid-template-columns:155px 1fr auto; }.builder-actions .topbar-action { display:none; }.builder-workspace { grid-template-columns:58px 1fr; }.preview-panel { position:fixed; z-index:30; inset:64px 0 48px; display:none; }.builder-app.preview-open .preview-panel { display:grid; }.builder-app.preview-open .builder-panel { display:none; }.builder-mobile-nav { position:fixed; z-index:45; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr; height:48px; padding:5px; background:#101a18; }.builder-mobile-nav button { color:#8e9d97; background:transparent; border:0; border-radius:6px; font-size:10px; font-weight:800; }.builder-mobile-nav button.active { color:var(--ink); background:var(--lime); }
}
@media (max-width: 680px) {
  .section { padding:80px 0; }.hero h1 { font-size:55px; }.hero-lead { font-size:16px; }.hero-actions { align-items:stretch; flex-direction:column; gap:18px; }.hero-actions .button { width:100%; }.hero-visual { margin-top:15px; }.editor-body { grid-template-columns:35px 145px 1fr; height:330px; }.editor-form { padding:15px 10px; }.editor-form h3 { font-size:13px; margin-bottom:13px; }.fake-row { grid-template-columns:1fr; }.fake-row span:nth-child(2),.fake-row:nth-of-type(3) { display:none; }.editor-preview { padding:10px; }.preview-paper { width:160px; height:230px; padding:15px; }.paper-head h4 { font-size:13px; }.paper-section { margin-top:8px; }.score-card { right:2px; bottom:8px; transform:scale(.8); transform-origin:right bottom; }.floating-note { display:none; }.proof-strip div div { gap:18px; }.proof-strip b { font-size:13px; }.section-heading h2,.how-copy h2 { font-size:44px; }.feature-card h3 { font-size:25px; }.template-carousel { min-height:520px; }.template-card { flex-basis:240px; }.template-card.featured { flex-basis:270px; }.template-card:nth-child(1) { margin-left:220px; }.mini-resume { height:360px; padding:25px; }.template-card.featured .mini-resume { height:410px; }.quote-wrap blockquote { font-size:31px; }.final-cta h2 { font-size:59px; }.footer-links { grid-template-columns:1fr 1fr; }.footer-bottom { display:grid; gap:7px; }.page-hero { min-height:500px; padding-top:130px; }.page-hero h1 { font-size:54px; }.filter-row { justify-content:flex-start; overflow:auto; padding-bottom:5px; }.filter-row button { white-space:nowrap; }.library-grid { grid-template-columns:1fr; }.library-preview { min-height:460px; padding:30px; }.compact-cta .shell { align-items:flex-start; flex-direction:column; }.pricing-grid { grid-template-columns:1fr; }.price-card { padding:30px 25px; }.faq-grid h2 { font-size:45px; }.auth-section { padding-top:110px; }.auth-story h1 { font-size:52px; }.auth-card { padding:26px 20px; }.workspace-hero { padding-top:110px; }.workspace-hero .shell { align-items:flex-start; flex-direction:column; }.workspace-actions { width:100%; }.workspace-actions .button { flex:1; }.document-grid { grid-template-columns:1fr; }.document-preview,.new-document-card { height:330px; }.workspace-aside { grid-template-columns:1fr; }.letter-strip { grid-template-columns:1fr; }.letter-new { grid-column:auto; }.tool-hero .shell,.admin-hero .shell { align-items:flex-start; flex-direction:column; gap:25px; }.tool-hero h1,.admin-hero h1 { font-size:54px; }.letter-inputs { padding:0; }.letter-paper { width:calc(100% - 24px); height:570px; margin:12px auto; padding:35px 28px; }.letter-save { align-items:stretch; flex-direction:column; }.saved-letter-grid { grid-template-columns:1fr; }.stat-grid { grid-template-columns:1fr 1fr; }.stat-grid article { padding:18px; }.admin-card,.members-card { padding:22px 16px; }.admin-aside { grid-template-columns:1fr; }.article-grid { grid-template-columns:1fr; }.featured-article > div:first-child { padding:35px 25px; }.featured-article h2 { font-size:36px; }.article-page header h1 { font-size:48px; }.article-body h2 { font-size:32px; }.article-content > section p { font-size:16px; }.article-cta { padding:30px 22px; }.legal-wrap { grid-template-columns:1fr; }.legal-wrap aside { position:static; }.legal-wrap aside > a:not(.brand),.legal-wrap aside > span { display:none; }.legal-wrap h1 { font-size:50px; margin-bottom:35px; }
  .builder-topbar { grid-template-columns:1fr auto; height:58px; padding-right:8px; }.builder-brand { display:none; }.builder-title-wrap { padding-left:8px; }.builder-back { display:block; color:#cbd7d2; background:transparent; border:0; }.builder-title-wrap input { width:42vw; }.save-state { display:none; }.builder-actions .button { min-height:36px; padding:7px 10px; }.builder-workspace { grid-template-columns:1fr; height:calc(100vh - 106px); }.builder-rail { flex-direction:row; align-items:center; gap:4px; height:49px; padding:5px 8px; overflow-x:auto; border-right:0; border-bottom:1px solid #2e3b37; }.builder-rail .rail-label,.builder-rail .rail-divider,.builder-rail a { display:none; }.builder-rail button { flex:0 0 43px; width:43px; height:37px; margin:0; }.builder-rail button span { width:26px; height:26px; }.builder-panel { grid-template-rows:1fr 47px; border-right:0; }.builder-section { padding:28px 18px 60px; }.panel-heading h1 { font-size:31px; }.field-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.template-picker { grid-template-columns:repeat(2,1fr); }.panel-footer { padding:0 12px; }.preview-panel { inset:58px 0 48px; }.preview-stage { padding:20px 0 60px; }.preview-scale { transform:scale(.53); }.resume-document { flex:0 0 auto; }.builder-dialog { padding:28px 20px; }.share-topbar { padding:0 12px; }.share-topbar > div > span { display:none; }.share-canvas { overflow:auto; justify-content:start; padding:30px 10px 70px; }.share-canvas .resume-document { transform:scale(.47); transform-origin:top left; margin-right:-421px; margin-bottom:-590px; }.share-actions { right:14px; bottom:14px; }
}

/* V4 builder viewport and scalable design controls */
.builder-page { height:100vh; height:100dvh; overscroll-behavior:none; }
.builder-app { height:100%; min-height:0; }
.builder-workspace { height:calc(100vh - 64px); height:calc(100dvh - 64px); min-height:0; overflow:hidden; }
.builder-rail,.builder-panel,.preview-panel,.panel-scroll,.preview-stage { min-height:0; }
.builder-panel,.preview-panel { overflow:hidden; }
.panel-scroll,.preview-stage { overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; }
.panel-scroll { touch-action:pan-y; }
.scalable-design-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
.scalable-design-controls .field:first-child { grid-column:1/-1; }
.range-field>span { display:flex; justify-content:space-between; align-items:center; }
.range-field>span b { color:#57655f; font-size:8px; }
.range-field input[type="range"] { width:100%; height:28px; padding:0; accent-color:#5f55df; }
.paper-controls { margin-top:24px; padding-top:20px; border-top:1px solid #d5d7d0; }
.paper-controls>span { color:#74807b; font-size:7px; font-weight:900; letter-spacing:.13em; }
.paper-controls>div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.paper-choice { display:flex; align-items:center; gap:7px; min-height:40px; padding:7px; color:#57635f; border:1px solid #d4d8d2; border-radius:8px; background:#f8f8f5; cursor:pointer; }
.paper-choice.active { border-color:#675ce2; box-shadow:0 0 0 2px rgba(103,92,226,.13); }
.paper-choice i { width:20px; height:25px; flex:0 0 20px; border:1px solid #dde1df; border-radius:3px; box-shadow:0 2px 4px #20352b12; background:#fff; }
.paper-choice b { font-size:7px; text-align:left; }
.paper-choice.paper-mist i { background:#fbfcff; }.paper-choice.paper-ivory i { background:#fffdf7; }.paper-choice.paper-blush i { background:#fffafb; }.paper-choice.paper-sage i { background:#fafffc; }.paper-choice.paper-sky i { background:#f9fcff; }
@media(max-width:900px){.builder-workspace{height:calc(100vh - 64px);height:calc(100dvh - 64px)}}
@media(max-width:680px){.builder-workspace{height:calc(100vh - 106px);height:calc(100dvh - 106px)}.scalable-design-controls{grid-template-columns:1fr}.scalable-design-controls .field:first-child{grid-column:auto}.paper-controls>div{grid-template-columns:repeat(2,1fr)}}