/* llaizy.com/resubmit and llaizy.com/dualcv: the early-testing sign-up pages.
   The tokens, fonts and lz-* components are the llaizy Design System's, copied from www/index.html (the
   system's React components rewritten as plain CSS), so a change to a token starts there. Everything is
   same-origin: fonts from /fonts, no third-party anything (the page's CSP, landing/main.py). */
:root{
  --paper-0:#ffffff; --paper-50:#fffdf8; --paper-100:#f7f3ea; --paper-200:#efe8d9; --paper-300:#e2d9c5; --paper-400:#cfc4ac;
  --ink-300:#b9b19f; --ink-500:#6b6556; --ink-700:#3b372e; --ink-900:#17150f;
  --yellow-200:#faf0a8; --yellow-300:#f8e970; --yellow-400:#f5e25a; --yellow-600:#c9b21e;
  --red-100:#fbe1da; --red-600:#c02814; --red-700:#9a1f0f; --green-100:#d9efe1; --green-500:#1f7a4a; --green-600:#17603a;
  --amber-100:#fbeacb; --amber-500:#b86f00; --blue-100:#dfe7fa; --blue-500:#2d5bd0;
  --bg-page:var(--paper-100); --bg-subtle:var(--paper-200); --surface-card:var(--paper-50); --surface-inverse:var(--ink-900);
  --text-primary:var(--ink-900); --text-secondary:var(--ink-700); --text-muted:var(--ink-500); --text-inverse:var(--paper-50);
  --text-accent:var(--ink-700); --text-link:var(--ink-900); --border-hairline:var(--paper-300); --border-strong:var(--ink-900);
  --accent:var(--yellow-400); --accent-hover:var(--yellow-300); --accent-soft:var(--yellow-200); --on-accent:var(--ink-900);
  --highlight:var(--yellow-400); --accent-on-ink:var(--yellow-400); --focus-ring:var(--blue-500);
  --shadow-hard-sm:2px 2px 0 #17150f; --shadow-hard-md:4px 4px 0 #17150f; --shadow-hard-lg:6px 6px 0 #17150f;
  --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px; --space-6:20px; --space-7:24px; --space-8:32px;
  --space-9:40px; --space-10:48px; --space-11:64px; --space-12:96px;
  --radius-xs:4px; --radius-sm:6px; --radius-lg:16px; --radius-pill:999px;
  --content-max:1200px; --prose-max:640px; --control-h-sm:32px; --control-h-md:40px; --control-h-lg:52px; --press-offset:2px;
  --font-display:"Bricolage Grotesque","Helvetica Neue",Helvetica,sans-serif;
  --font-body:"Instrument Sans","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:140ms; --dur-base:220ms;
  --gutter:clamp(var(--space-5),4vw,var(--space-8)); --sec-pad:clamp(var(--space-10),8vw,var(--space-12));
}
/* the system's font files, served from the site root: latin always, latin-ext only when a character needs it */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/BricolageGrotesque-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/InstrumentSans-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/InstrumentSans-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/MartianMono-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/BricolageGrotesque-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/InstrumentSans-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url(/fonts/InstrumentSans-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/MartianMono-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100vh;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--yellow-600);transition:text-decoration-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--ink-900);text-decoration-color:var(--ink-900);background:var(--yellow-200)}
::selection{background:var(--highlight);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;height:auto;display:block}

/* ---------- the system's components ---------- */
.lz-icon{display:inline-block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Wordmark: ll [ai] zy apps */
.lz-wordmark{display:inline-flex;align-items:baseline;font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.04em;line-height:1;color:var(--ink-900);white-space:nowrap;text-decoration:none}
a.lz-wordmark:hover{background:none;color:var(--ink-900)}
.lz-wordmark .ai,mark.lz-label{display:inline-block;font-family:var(--font-mono);font-weight:500;font-size:.56em;letter-spacing:-.02em;line-height:1;background:var(--yellow-400);color:var(--on-accent);border:.07em solid var(--ink-900);border-radius:.18em;padding:.06em .16em .12em;margin:0 .08em;vertical-align:.16em}
.lz-wordmark .apps{font-weight:400;margin-left:.2em;letter-spacing:-.03em;color:var(--ink-500)}
.lz-wordmark.paper,a.lz-wordmark.paper:hover{color:var(--paper-50)}
.lz-wordmark.paper .ai{border-color:var(--yellow-400)}
.lz-wordmark.paper .apps{color:var(--ink-300)}
/* Highlight: the band behind one honest word */
mark.lz-hl{background:none;color:inherit;background-image:linear-gradient(100deg,transparent .6%,var(--highlight) 2.2%,var(--highlight) 97%,transparent 99%);background-size:100% 62%;background-position:0 72%;background-repeat:no-repeat;padding:0 .12em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Button: ink outline, hard shadow, presses flat */
.lz-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h-md);padding:0 16px;border-radius:10px;border:1.5px solid var(--ink-900);background:var(--paper-50);color:var(--ink-900);font-family:var(--font-body);font-weight:600;font-size:15px;letter-spacing:-.005em;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-hard-sm);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.lz-btn:hover{background:var(--paper-0);color:var(--ink-900);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink-900)}
.lz-btn:active{transform:translate(var(--press-offset),var(--press-offset));box-shadow:0 0 0 var(--ink-900)}
.lz-btn .lz-icon{width:18px;height:18px}
.lz-btn.sm{height:var(--control-h-sm);padding:0 12px;font-size:14px;gap:6px;border-radius:8px}
.lz-btn.sm .lz-icon{width:16px;height:16px}
.lz-btn.lg{height:var(--control-h-lg);padding:0 22px;font-size:17px;gap:10px;border-radius:12px}
.lz-btn.primary{background:var(--accent);color:var(--on-accent)}
.lz-btn.primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.lz-btn[disabled],.lz-btn[aria-busy="true"]{cursor:progress;transform:none;box-shadow:var(--shadow-hard-sm)}
/* Badge: mono uppercase status label */
.lz-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;background:var(--paper-200);color:var(--ink-700);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;line-height:1}
.lz-badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-900);flex:none}
.lz-badge.accent.solid{background:var(--yellow-400);color:var(--on-accent);border:1.5px solid var(--ink-900)}
.lz-badge.success{background:var(--green-100);color:var(--green-600)}
.lz-badge.success.dot::before{background:var(--green-500)}
/* Tag: pill chip; on = solid ink */
.lz-tag{display:inline-flex;align-items:baseline;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);border:1.5px solid var(--paper-400);background:var(--paper-50);color:var(--ink-900);font-size:14px;font-weight:500;line-height:1.3;white-space:nowrap}
.lz-tag.on{border-color:var(--ink-900);background:var(--ink-900);color:var(--paper-50)}
/* Card */
.lz-card{display:flex;flex-direction:column;gap:12px;padding:var(--space-7);border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-hairline);color:var(--text-primary)}
.lz-card.sticker{border:1.5px solid var(--ink-900);box-shadow:var(--shadow-hard-md)}
.lz-eyebrow{font-family:var(--font-mono);font-size:11px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--text-accent)}
/* Input; the resting edge is ink-500 so a field's only edge holds 3:1 */
.lz-field{display:flex;flex-direction:column;gap:6px}
.lz-field label{font-size:14px;font-weight:600;color:var(--text-primary)}
.lz-input{width:100%;height:var(--control-h-md);padding:0 12px;border-radius:10px;border:1.5px solid var(--ink-500);background:var(--paper-50);color:var(--text-primary);font-family:var(--font-body);font-size:16px;outline:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.lz-input:hover{border-color:var(--ink-700)}
.lz-input:focus,.lz-input:focus-visible{border-color:var(--ink-900);box-shadow:0 0 0 3px var(--blue-100);outline:none}
.lz-input[aria-invalid="true"]{border-color:var(--red-600)}
.lz-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--red-100)}
.lz-field .err{display:none;font-size:13px;line-height:1.4;color:var(--red-700);font-weight:500}
.lz-field.bad .err{display:block}

/* ---------- the background: one canvas behind everything (see early.js) ----------
   Fixed to the viewport, so the content scrolls over it. Nothing drawn on it carries meaning, and every
   piece of text that can sit on it is ink-700 or darker, which holds 4.5:1 over a yellow label. */
.bg{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.page{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}
.page main{flex:1}
.wrap{max-width:var(--content-max);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- masthead ---------- */
.skip{position:absolute;left:12px;top:-64px;z-index:60}
.skip:focus{top:12px}
.masthead .wrap{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(var(--space-8),5vw,var(--space-11)) var(--sec-pad)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(var(--space-8),5vw,var(--space-12));align-items:center}
.hero .lz-eyebrow{display:inline-flex;align-items:center;gap:var(--space-3)}
.hero .lz-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-500);flex:none}
/* the product's name, set live in type: resubmit[.ai], dualcv.com */
.lockup{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(44px,6.4vw,84px);letter-spacing:-.045em;line-height:1;margin-top:var(--space-5);white-space:nowrap}
.lockup mark.lz-label{font-size:.5em;vertical-align:.22em;margin-left:.1em}
.lockup .tld{font-weight:400;letter-spacing:-.035em;color:var(--ink-700)}
.hero h1{font-size:clamp(38px,4.8vw,62px);line-height:1.02;font-weight:800;letter-spacing:-.035em;margin-top:clamp(var(--space-6),2.5vw,var(--space-8));max-width:18ch}
.lede{font-size:18px;line-height:1.55;color:var(--text-secondary);max-width:var(--prose-max);margin-top:var(--space-6)}
.lede b{font-weight:600;color:var(--text-primary)}
.hero-foot{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7)}

/* ---------- the sign-up card ---------- */
.signup{padding:clamp(var(--space-7),3vw,var(--space-8));gap:var(--space-5);box-shadow:var(--shadow-hard-lg);transition:box-shadow var(--dur-base) var(--ease-out)}
.signup form{display:flex;flex-direction:column;gap:var(--space-5)}
.signup h2{font-size:26px;line-height:1.1;letter-spacing:-.03em;font-weight:800}
.signup .intro{font-size:15px;color:var(--text-secondary);margin-top:-4px}
.signup .lz-btn{align-self:flex-start;margin-top:var(--space-2);min-width:9em}
.signup .fine{font-size:13px;line-height:1.5;color:var(--text-muted)}
/* the honeypot: real to a bot, absent for a person (off-screen, out of the tab order, hidden from AT) */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* a problem the server or the network reported; red is for errors only */
.alert{display:none;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:10px;background:var(--red-100);color:var(--red-700);font-size:14px;line-height:1.45;font-weight:500}
.alert.on{display:flex}
.alert .lz-icon{width:18px;height:18px;margin-top:1px}
/* done: the card turns into the thank-you */
.signup .after{display:none}
.signup.done form{display:none}
.signup.done[data-status="new"] .after[data-when="new"],.signup.done[data-status="already"] .after[data-when="already"]{display:flex;flex-direction:column;gap:var(--space-4)}
.after h2{font-size:clamp(34px,4vw,44px);letter-spacing:-.04em;line-height:.98}
.after p{color:var(--text-secondary)}
.after .mail{overflow-wrap:anywhere;font-weight:600;color:var(--text-primary)}
.after .fine{margin-top:var(--space-2)}
.after .lz-badge{align-self:flex-start}
/* the card takes focus when it turns into the thank-you (early.js); the change itself is the signal */
.signup:focus{outline:none}
@keyframes settle{from{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink-900)}to{transform:none;box-shadow:var(--shadow-hard-lg)}}
.signup.done{animation:settle .36s var(--ease-spring)}

/* ---------- facts: a numbered editorial list with ink rules ---------- */
.sec{padding-block:var(--sec-pad)}
.sec h2{font-size:clamp(30px,4vw,44px);line-height:1.02;font-weight:800;letter-spacing:-.035em;max-width:24ch}
.sec .lede{margin-top:var(--space-5)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7);margin:var(--space-9) 0 0;padding:0;list-style:none}
.facts li{border-top:1.5px solid var(--border-strong);padding-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.facts .n{font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--text-secondary)}
.facts h3{font-size:22px;line-height:1.15;letter-spacing:-.025em}
.facts p{font-size:15px;line-height:1.5;color:var(--text-secondary)}
.facts code{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);overflow-wrap:anywhere}
.sec .src{font-size:13px;line-height:1.5;color:var(--text-secondary);margin-top:var(--space-7);max-width:44rem}

/* ---------- rules: free (yellow sticker), frontier (paper), guarded (ink) ---------- */
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-9)}
.cell{border-radius:var(--radius-lg);padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-3);min-height:200px}
.cell .lz-eyebrow{margin-bottom:auto}
.cell h3{font-weight:800;font-size:clamp(30px,3vw,38px);letter-spacing:-.035em;line-height:1}
.cell p{font-size:15px;line-height:1.5}
.cell.free{background:var(--accent);color:var(--on-accent);border:1.5px solid var(--ink-900);box-shadow:var(--shadow-hard-md)}
.cell.free .lz-eyebrow,.cell.free p{color:var(--on-accent)}
.cell.frontier{background:var(--surface-card);border:1.5px solid var(--ink-900)}
.cell.frontier p{color:var(--text-secondary)}
.cell.guarded{background:var(--surface-inverse);color:var(--text-inverse);border:1.5px solid var(--ink-900)}
.cell.guarded .lz-eyebrow{color:var(--accent-on-ink)}
.cell.guarded p{color:var(--paper-300)}

/* ---------- the figures, on their own band ---------- */
.band{background:var(--surface-card);border-block:1.5px solid var(--border-strong)}
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
.figure b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(36px,3.8vw,52px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.figure span{display:block;font-size:14px;color:var(--text-secondary);margin-top:var(--space-3);line-height:1.35}
.band .src{margin-top:var(--space-7)}

/* ---------- footer (ink) ---------- */
.footer{background:var(--surface-inverse);color:var(--paper-300)}
.footer .wrap{padding-block:var(--space-10);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6) var(--space-8)}
.footer p{font-size:14px;line-height:1.6;max-width:36rem}
.footer a{color:var(--paper-50);text-decoration-color:var(--accent-on-ink)}
.footer a:hover{background:none;color:var(--paper-50);text-decoration-color:var(--paper-50)}
.footer :focus-visible{outline-color:var(--accent-on-ink)}

@media (max-width:1020px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:var(--space-9)}
  .hero h1{max-width:22ch}
  .signup{max-width:560px}
}
@media (max-width:820px){
  .facts,.rules{grid-template-columns:minmax(0,1fr)}
  .cell{min-height:150px}
  .figures{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7) var(--space-6)}
}
@media (max-width:600px){
  .signup{max-width:none}
}
@media (max-width:480px){
  .lockup{font-size:clamp(40px,12.5vw,52px)}
  .hero h1{font-size:clamp(34px,9.6vw,40px)}
  .lede{font-size:17px}
  .signup{padding:var(--space-6)}
  .signup .lz-btn{align-self:stretch}
  .masthead .wrap{min-height:64px}
  .masthead .lz-btn .lz-icon{display:none}
  /* thumbs: every target at least 44px tall on a phone (the system's sm button is 32, its md input 40) */
  .masthead .lz-btn{height:44px;padding:0 14px;border-radius:10px}
  .masthead .lz-wordmark,.footer .lz-wordmark{padding:10px 0}
  .lz-input{height:48px}
  .src a,.footer p a{display:inline-block;padding:12px 0;margin:-12px 0}
}
@media (prefers-reduced-motion:reduce){
  .lz-btn,.lz-input,.signup,a{transition:none}
  .signup.done{animation:none}
}
@media print{
  .bg,.skip,.masthead .lz-btn{display:none}
  body{background:#fff;color:#000}
  .cell.guarded,.footer{background:#fff}.cell.guarded *,.footer *{color:#000!important}
  .signup,.cell,.lz-btn{box-shadow:none}
}