/* ═══════════════════════════════════════════════════════════════════════════
   Resumate Marketing: Ledger Light Design System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#ffffff;--ink:#1C1C1C;--muted:#6a6f73;--line:#e7e5e1;
  --soft:#f6f5f2;--panel:#ffffff;--accent:#0E6E6E;--accent-2:#0a5555;
  --accent-soft:#dcefef;--on-accent:#ffffff;--radius:8px;
  --ph-bg:#fff3cd;--ph-border:#ffc107;
}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:'Space Grotesk','Inter',system-ui,sans-serif;letter-spacing:-0.02em;font-weight:600;line-height:1.15;color:var(--ink)}

h1{font-size:2.25rem}h2{font-size:1.75rem}h3{font-size:1.25rem}
@media(min-width:768px){h1{font-size:3rem}h2{font-size:2.25rem}h3{font-size:1.5rem}}

p{color:var(--muted);line-height:1.65}

/* Eyebrow */
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:var(--radius);font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:600;background:var(--accent);color:var(--on-accent);border:none;cursor:pointer;text-decoration:none;transition:background .2s;white-space:nowrap}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:var(--radius);font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:600;background:transparent;color:var(--ink);border:1px solid var(--line);cursor:pointer;text-decoration:none;transition:background .2s;white-space:nowrap}
.btn-ghost:hover{background:var(--soft)}

/* Layout */
.section{padding:64px 20px}@media(min-width:768px){.section{padding:84px 20px}}
.container{max-width:1100px;margin:0 auto;width:100%}
.container-narrow{max-width:820px;margin:0 auto;width:100%}
.section-soft{background:var(--soft)}

/* Nav */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 20px;max-width:1100px;margin:0 auto}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--muted);padding:6px 10px;border-radius:var(--radius);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links .btn-primary{font-size:13px;padding:8px 18px;color:var(--on-accent)}
@media(max-width:767px){.nav-links a:not(.btn-primary):not(.nav-signin){display:none}}

/* Hero */
.hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:768px){.hero-grid{grid-template-columns:1fr 1fr;gap:60px}}
.hero-copy{display:flex;flex-direction:column;gap:20px}
.hero-copy h1{font-size:2.25rem;font-weight:700}
@media(min-width:768px){.hero-copy h1{font-size:2.75rem}}
.hero-copy h1 span{color:var(--accent)}
.hero-copy .sub{font-size:16px;color:var(--muted)}
.hero-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* Product card */
.product-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden}
.product-card .card-browser{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.card-browser .dot{width:10px;height:10px;border-radius:50%}
.card-browser .dot:nth-child(1){background:#e5a0a0}
.card-browser .dot:nth-child(2){background:#e5d1a0}
.card-browser .dot:nth-child(3){background:#a0c9a0}
.product-card .card-body{padding:24px}
.match-row{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.match-ring{width:64px;height:64px;border-radius:50%;border:4px solid var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.match-ring .match-num{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--accent)}
.match-label{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.match-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
.skeleton-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.skeleton-lines .skel{height:8px;border-radius:4px;background:var(--line)}
.skeleton-lines .skel:nth-child(1){width:100%}
.skeleton-lines .skel:nth-child(2){width:70%}
.skeleton-lines .skel:nth-child(3){width:85%}
.card-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:'JetBrains Mono',monospace;font-size:10px;padding:4px 10px;border-radius:4px;background:var(--soft);color:var(--muted);border:1px solid var(--line)}

/* Stats Band */
.stats-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--soft);padding:32px 20px}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1100px;margin:0 auto}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:0}}
.stat-item{text-align:center;padding:0 20px}
@media(min-width:768px){.stat-item{border-right:1px solid var(--line)}.stat-item:last-child{border-right:none}}
.stat-value{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;color:var(--accent)}
.stat-label{font-size:13px;color:var(--muted);margin-top:4px}

/* Section Headers */
.section-header{text-align:center;margin-bottom:48px}
.section-header .eyebrow{margin-bottom:12px}
.section-header h2{margin-bottom:12px}
.section-header p{max-width:540px;margin:0 auto;font-size:15px}

/* Features Rows */
.feature-row{display:grid;grid-template-columns:60px 1fr 2fr;gap:20px;padding:32px 0;border-top:1px solid var(--line);align-items:start}
@media(max-width:767px){.feature-row{grid-template-columns:1fr;gap:8px;padding:24px 0}}
.feature-row .f-num{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;color:var(--accent)}
.feature-row .f-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;color:var(--ink)}
.feature-row .f-desc{font-size:15px;color:var(--muted)}

/* Steps */
.steps-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.steps-grid{grid-template-columns:repeat(3,1fr);gap:40px}}
.step-card{text-align:center}
.step-card .step-num{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--accent-soft);font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;color:var(--accent);margin-bottom:16px}
.step-card h3{font-size:18px;margin-bottom:8px}
.step-card p{font-size:14px}

/* Why / Principles */
.why-lead{max-width:720px;margin:0 auto 48px;font-size:16px;line-height:1.7}
.why-lead p{margin-bottom:16px}
.principles-grid{display:grid;grid-template-columns:1fr;gap:32px;max-width:820px;margin:0 auto}
@media(min-width:768px){.principles-grid{grid-template-columns:repeat(3,1fr)}}
.principle-card{border-top:3px solid var(--accent);padding-top:20px}
.principle-card h3{font-size:18px;margin-bottom:8px}
.principle-card p{font-size:14px}

/* Data Grid */
.data-grid{display:grid;grid-template-columns:1fr;border:1px solid var(--line)}
@media(min-width:768px){.data-grid{grid-template-columns:1fr 1fr}}
.data-cell{padding:28px;border-bottom:1px solid var(--line)}
@media(min-width:768px){.data-cell:nth-child(odd){border-right:1px solid var(--line)}.data-cell:nth-last-child(-n+2){border-bottom:none}}
.data-cell:last-child{border-bottom:none}
.data-cell .dot-heading{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.data-cell .dot-heading::before{content:'';display:block;width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.data-cell h3{font-size:16px}
.data-cell p{font-size:14px}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:700px;margin:0 auto 40px}
@media(min-width:768px){.pricing-grid{grid-template-columns:1fr 1fr}}
.plan-card{border:1px solid var(--line);border-radius:12px;padding:32px;background:var(--panel);position:relative;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.plan-card.plan-popular{border:2px solid var(--accent);box-shadow:0 4px 12px rgba(14,110,110,.08)}
.plan-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:var(--on-accent);padding:4px 14px;border-radius:12px}
.plan-card h3{font-size:20px;margin-bottom:8px}
.plan-price{font-family:'Space Grotesk',sans-serif;font-size:2.5rem;font-weight:700;color:var(--ink);margin-bottom:24px}
.plan-card ul{list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;margin-bottom:24px}
.plan-card li{font-size:14px;color:var(--muted);padding-left:22px;position:relative}
.plan-card li::before{content:'\2713';position:absolute;left:0;color:var(--accent);font-weight:700}

/* Comparison Table */
.comparison-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:32px;max-width:820px;margin:0 auto;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.comparison-card h3{text-align:center;margin-bottom:24px}
.comparison-table{width:100%;border-collapse:collapse;font-size:14px}
.comparison-table thead{border-bottom:2px solid var(--ink)}
.comparison-table th{text-align:left;padding:10px 12px;font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--ink)}
.comparison-table td{padding:12px;border-bottom:1px solid var(--line);color:var(--muted)}
.comparison-table tbody tr:last-child td{border-bottom:none}
.comparison-table .col-what{color:var(--muted);font-size:13px}
.comparison-table .col-free,.comparison-table .col-pro{text-align:center;font-weight:500}
.comparison-table .yes{color:var(--accent);font-weight:700}
.comparison-table .no{color:#bfc4c9}
@media(max-width:767px){.comparison-table .col-what{display:none}.comparison-table thead th:nth-child(2),.comparison-table tbody td:nth-child(2){display:none}.comparison-table th,.comparison-table td{padding:8px;font-size:12px}}

/* CTA Band */
.cta-card{border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:48px 24px;text-align:center;max-width:620px;margin:0 auto}
.cta-card .eyebrow{margin-bottom:12px}
.cta-card h2{margin-bottom:12px}
.cta-card p{margin-bottom:24px;font-size:15px}
.cta-card .fineprint{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-top:16px}
.cta-card .fineprint a{color:var(--accent);text-decoration:underline}

/* Footer */
.footer{border-top:1px solid var(--line);padding:32px 20px}
.footer .container{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:1100px;margin:0 auto}
@media(min-width:768px){.footer .container{flex-direction:row;justify-content:space-between}}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.footer-links a{font-size:13px;color:var(--muted);transition:color .15s}
.footer-links a:hover{color:var(--ink)}
.footer-copy{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);text-align:center}

/* ═══ Legal Pages ═══ */
.legal-header{padding:48px 20px 32px;border-bottom:1px solid var(--line)}
.legal-header .eyebrow{margin-bottom:8px}
.legal-header h1{margin-bottom:8px}
.legal-date{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}

.legal-body{padding:32px 20px 64px}
.legal-body h2{font-size:1.15rem;margin-top:36px;margin-bottom:12px;padding-top:24px;border-top:1px solid var(--line)}
.legal-body h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.legal-body p{color:#5c6165;margin-bottom:12px;line-height:1.7;font-size:15px}
.legal-body ul,.legal-body ol{margin:8px 0 16px 24px;color:#5c6165;font-size:15px;line-height:1.7}
.legal-body li{margin-bottom:6px}
.legal-body a{color:var(--accent);text-decoration:underline}

/* ── Resume Styles Section ── */
.rm-styles {
  --rm-bg: var(--soft);
  --rm-ink: #12161C;
  --rm-muted: #5A6472;
  --rm-line: #E5E8EC;
  --rm-card: #FFFFFF;
  --rm-brand: var(--accent);
  background: var(--rm-bg);
  padding: 88px 24px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--rm-ink);
  -webkit-font-smoothing: antialiased;
}

.rm-styles * { box-sizing: border-box; }

.rm-inner { max-width: 1180px; margin: 0 auto; }

.rm-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rm-brand); margin: 0 0 14px;
}

.rm-head {
  font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.08; margin: 0 0 14px; max-width: 22ch;
}

.rm-sub {
  font-size: 17px; line-height: 1.6; color: var(--rm-muted);
  margin: 0 0 48px; max-width: 58ch;
}

.rm-sub b { color: var(--rm-ink); font-weight: 600; }

.rm-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; align-items: start;
}

@media (max-width: 1080px) { .rm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .rm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .rm-grid { grid-template-columns: 1fr; } }

.rm-card {
  background: var(--rm-card); border: 1px solid var(--rm-line);
  border-radius: 14px; padding: 14px 14px 16px; display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.rm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(18, 22, 28, .28); border-color: #D2D6DC;
}

@media (prefers-reduced-motion: reduce) {
  .rm-card, .rm-card:hover { transition: none; transform: none; }
}

/* --- the resume paper: single column, ATS-plain --- */
.rm-paper { background:#fff; border:1px solid #E7E9EC; border-radius:6px;
  padding:12px 13px 13px; font-size:5.5px; line-height:1.46; color:#374151;
  --ac:#111827; }

.rm-paper .hd { padding-bottom:5px; margin-bottom:5px; border-bottom:1.4px solid #D8DBDF; }
.rm-paper .nm { font-size:9px; font-weight:700; color:#111827; letter-spacing:.01em; }
.rm-paper .rl { font-size:6px; font-weight:600; color:var(--ac); margin-top:1px; }
.rm-paper .ct { font-size:4.7px; color:#6B7280; margin-top:1.5px; }
.rm-paper .sec { font-size:5.6px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ac); border-bottom:1px solid #E1E4E8; padding-bottom:1px; margin:6px 0 3px; }
.rm-paper .co { display:flex; justify-content:space-between; gap:6px; font-weight:600; color:#111827; }
.rm-paper .ti { font-style:italic; color:#4B5563; margin-bottom:.5px; }
.rm-paper .bul { padding-left:6px; position:relative; color:#4B5563; }
.rm-paper .bul::before { content:"\2022"; position:absolute; left:0; color:var(--ac); }
.rm-paper .gap { margin-top:3px; }
.rm-paper .sk { color:#4B5563; margin-bottom:.5px; }
.rm-paper .sk b { color:#111827; font-weight:700; }

/* variant tweaks */
.v-classic { font-family:"Source Serif 4",Georgia,serif; --ac:#1B2A4A; }
.v-classic .hd { text-align:center; }
.v-classic .sec { text-align:left; }
.v-modern { --ac:#D04A02; }
.v-modern .nm { display:inline-block; border-bottom:2px solid var(--ac); padding-bottom:1px; }
.v-professional { --ac:#0F766E; }
.v-professional .sec { border-bottom-color:#BFE0DB; }
.v-minimal { --ac:#374151; }
.v-minimal .sec { border-bottom:none; letter-spacing:.1em; margin:7px 0 2px; }
.v-minimal .hd { border-bottom:none; }
.v-minimal .nm { letter-spacing:.03em; }
.v-compact { --ac:#15803D; font-size:5px; line-height:1.4; }
.v-compact .sec { margin:5px 0 2px; }

.rm-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.rm-name { font-size:14px; font-weight:600; letter-spacing:-.01em; }
.rm-tag { font-size:11px; font-weight:600; color:#fff; padding:3px 9px; border-radius:999px; }

.rm-note { margin-top:34px; font-size:14px; color:var(--rm-muted);
  display:flex; align-items:center; gap:8px; justify-content:center; text-align:center; }
.rm-note svg { flex:none; }

/* Placeholder highlight */
.ph{background:var(--ph-bg);border:1px solid var(--ph-border);border-radius:3px;padding:1px 4px;font-family:'JetBrains Mono',monospace;font-size:.9em;color:#856404;white-space:nowrap}

/* Template note */
.template-note{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);padding:16px 20px;margin-bottom:28px}
.template-note p{font-size:13px;color:var(--accent);line-height:1.5}
.template-note strong{font-weight:700}