:root { --ink:#182b2a; --pine:#123f39; --mint:#dcebe3; --cream:#f6f2e9; --paper:#fffcf6; --coral:#ec755f; --gold:#e7bd54; --muted:#667471; --line:#d9dfda; --white:#fff; --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.shell { max-width:1180px; margin:0 auto; padding-left:28px; padding-right:28px; }
.topbar { height:76px; display:flex; justify-content:space-between; align-items:center; padding:0 max(28px, calc((100vw - 1180px)/2 + 28px)); border-bottom:1px solid rgba(24,43,42,.12); background:rgba(255,252,246,.94); position:sticky; top:0; z-index:30; backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.03em; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:9px 9px 9px 2px; background:var(--pine); color:white; font-family:Georgia,serif; font-style:italic; }
nav { display:flex; gap:26px; align-items:center; font-size:14px; font-weight:650; }
.button { border:0; border-radius:999px; padding:14px 20px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:18px; font-weight:750; transition:transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform:translateY(-2px); }
.button.primary { background:var(--coral); color:#1f2624; box-shadow:0 8px 22px rgba(236,117,95,.2); }
.button.dark { color:white; background:var(--ink); }
.button.ghost { background:transparent; box-shadow:inset 0 0 0 1px var(--line); }
.button.small { padding:9px 14px; font-size:13px; }
.hero { min-height:650px; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:62px; overflow:hidden; }
.eyebrow, .eyrow-light { text-transform:uppercase; font-size:11px; font-weight:850; letter-spacing:.15em; }
.eyebrow { color:var(--pine); display:flex; align-items:center; gap:10px; }
.eyebrow:before { content:""; width:24px; height:2px; background:var(--gold); }
.eyebrow.coral { color:var(--coral); }
h1 { max-width:660px; font:500 clamp(54px,7vw,92px)/.92 Georgia, "Times New Roman", serif; letter-spacing:-.055em; margin:25px 0; }
h1 em { font-weight:400; color:var(--pine); }
.hero-copy>p { font-size:19px; line-height:1.6; max-width:565px; color:var(--muted); }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:38px; }
.trust { color:var(--muted); font-size:12px; line-height:1.7; border-left:1px solid var(--line); padding-left:25px; }
.trust b { color:var(--ink); }
.hero-visual { min-height:500px; display:grid; place-items:center; position:relative; }
.hero-visual:before { content:""; position:absolute; inset:18px -80px; background:var(--mint); border-radius:52% 48% 44% 56%; transform:rotate(-8deg); }
.orbit { position:absolute; border:1px solid rgba(18,63,57,.17); border-radius:50%; }
.orbit-one { width:530px; height:300px; transform:rotate(27deg); }
.orbit-two { width:430px; height:420px; transform:rotate(-23deg); }
.preview-card { position:relative; z-index:2; width:min(410px,90%); background:var(--paper); border:1px solid rgba(18,63,57,.12); border-radius:24px; padding:24px; box-shadow:0 35px 80px rgba(18,63,57,.18); transform:rotate(1.4deg); }
.preview-head { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding-bottom:18px; }
.preview-head>span:nth-child(2) { display:flex; flex-direction:column; flex:1; font-size:13px; }
.preview-head small { color:var(--muted); margin-top:3px; }
.avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--gold); font-weight:850; font-size:12px; }
.status-dot { font-size:10px; color:#347465; background:#dbece4; padding:6px 9px; border-radius:20px; }
.preview-label { font-size:9px; letter-spacing:.11em; font-weight:800; color:var(--muted); margin:21px 0 12px; }
.mini-module { display:grid; grid-template-columns:25px 12px 1fr auto; align-items:center; gap:9px; padding:13px 7px; font-size:12px; }
.mini-module span { color:var(--muted); }
.mini-module i { width:9px; height:9px; border:2px solid #8ea09b; border-radius:50%; }
.mini-module.active { background:white; border-radius:11px; box-shadow:0 6px 20px rgba(24,43,42,.08); }
.mini-module.active i { border-color:var(--coral); box-shadow:inset 0 0 0 2px white; background:var(--coral); }
.mini-module small { color:var(--muted); }
.preview-foot { margin-top:15px; padding-top:18px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:8px; font-size:11px; }
.preview-foot>div { grid-column:1/-1; background:#dce3df; height:5px; border-radius:5px; overflow:hidden; }
.preview-foot i { display:block; height:100%; background:var(--coral); border-radius:5px; }
.proof-band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:white; }
.proof-grid { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:25px; color:#687773; }
.proof-grid span { font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.proof-grid b { font-family:Georgia,serif; font-size:16px; color:#60706d; }
.planner { padding-top:112px; padding-bottom:112px; }
.section-heading { display:grid; grid-template-columns:1.15fr .85fr; gap:90px; align-items:end; margin-bottom:48px; }
h2 { font:500 clamp(38px,5vw,62px)/1 Georgia,serif; letter-spacing:-.045em; margin:16px 0 0; }
.section-heading p { color:var(--muted); line-height:1.65; margin:0; }
.builder { border-radius:var(--radius); background:var(--cream); border:1px solid #e4ded2; padding:30px; display:grid; grid-template-columns:1fr 40px 1fr; gap:20px; }
.builder-step { position:relative; }
.step-number { display:block; font-size:10px; letter-spacing:.12em; color:var(--coral); font-weight:850; margin-bottom:10px; }
.builder label { font-weight:800; display:block; font-size:13px; }
select { width:100%; border:1px solid var(--line); border-radius:11px; padding:14px 40px 14px 14px; color:var(--ink); background:white; margin-top:8px; outline:none; }
select:focus { border-color:var(--pine); box-shadow:0 0 0 3px rgba(18,63,57,.1); }
.builder-step small { display:block; line-height:1.45; color:var(--muted); min-height:38px; margin-top:10px; }
.builder-arrow { display:grid; place-items:center; color:var(--coral); font-size:25px; padding-top:44px; }
.builder-options { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr) 1.25fr; gap:16px; padding-top:25px; border-top:1px solid #ddd5c8; align-items:end; }
.builder-options label { color:var(--muted); font-size:11px; }
.builder-options .button { min-height:47px; }
.results { scroll-margin-top:95px; padding-bottom:120px; }
.hidden { display:none !important; }
.result-hero { min-height:250px; border-radius:24px 24px 0 0; background:var(--pine); color:white; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:45px 55px; overflow:hidden; position:relative; }
.result-hero:after { content:""; position:absolute; width:350px; height:350px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-90px; top:-100px; }
.result-hero h2 { font-size:45px; max-width:720px; }
.result-hero p { color:#c6d8d3; margin:12px 0 0; }
.eyrow-light { color:var(--gold); }
.coverage-ring { width:145px; height:145px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--coral) 0%, rgba(255,255,255,.12) 0); position:relative; z-index:2; }
.coverage-ring:before { content:""; position:absolute; inset:10px; border-radius:50%; background:var(--pine); }
.coverage-ring>div { z-index:1; text-align:center; }
.coverage-ring b { display:block; font:500 31px Georgia,serif; }
.coverage-ring small { display:block; text-transform:uppercase; line-height:1.15; font-size:8px; letter-spacing:.11em; color:#bad0ca; }
.stats { min-height:86px; display:grid; grid-template-columns:repeat(4,1fr); background:#0d332f; color:white; border-radius:0 0 24px 24px; }
.stat { padding:21px 30px; border-right:1px solid rgba(255,255,255,.09); }
.stat:last-child { border:0; }
.stat b { display:block; font:500 26px Georgia,serif; color:var(--gold); }
.stat span { font-size:10px; color:#a9c1bb; text-transform:uppercase; letter-spacing:.1em; }
.result-grid { display:grid; grid-template-columns:330px 1fr; gap:28px; margin-top:28px; align-items:start; }
.gap-panel, .path-panel { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.panel-title { display:flex; align-items:center; justify-content:space-between; font-weight:850; font-size:14px; margin-bottom:22px; }
.text-button { border:0; background:none; color:var(--coral); cursor:pointer; font-size:11px; font-weight:750; }
.gap-item { margin-bottom:17px; }
.gap-head { display:flex; justify-content:space-between; font-size:11px; margin-bottom:7px; }
.gap-head b { font-size:11px; }
.bar { height:7px; background:#edf0ed; border-radius:8px; position:relative; overflow:hidden; }
.bar-target { height:100%; background:#b7c8c3; border-radius:8px; position:absolute; }
.bar-current { height:100%; background:var(--coral); border-radius:8px; position:absolute; }
.skill-input { display:grid; grid-template-columns:1fr 60px; gap:10px; align-items:center; margin-bottom:13px; font-size:11px; }
.skill-input input { accent-color:var(--coral); width:100%; }
.skill-input output { text-align:right; font-weight:800; }
.data-note { font-size:10px; line-height:1.55; color:#87938f; border-top:1px solid var(--line); padding-top:15px; margin:20px 0 0; }
.export-wrap { position:relative; }
.export-menu { position:absolute; right:0; top:43px; width:180px; padding:7px; background:white; border:1px solid var(--line); border-radius:12px; box-shadow:0 15px 35px rgba(24,43,42,.14); z-index:5; }
.export-menu button { width:100%; border:0; background:white; text-align:left; padding:10px; border-radius:8px; cursor:pointer; font-size:12px; }
.export-menu button:hover { background:var(--cream); }
.timeline { margin-top:3px; }
.module { display:grid; grid-template-columns:50px 1fr auto; gap:15px; padding:19px 0; border-top:1px solid var(--line); align-items:start; }
.module:first-child { border-top:0; }
.module-number { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font:500 14px Georgia,serif; color:var(--muted); cursor:pointer; background:white; }
.module.completed .module-number { color:white; background:var(--pine); border-color:var(--pine); }
.module.completed .module-number:after { content:"✓"; }
.module.completed .module-number span { display:none; }
.module h3 { margin:0 0 7px; font-size:15px; }
.module p { margin:0; font-size:11px; color:var(--muted); line-height:1.55; }
.module-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tag { background:var(--cream); padding:5px 8px; border-radius:5px; font-size:9px; font-weight:750; }
.phase { color:var(--coral); background:#fff0ec; }
.module-meta { text-align:right; min-width:80px; font-size:11px; color:var(--muted); }
.module-meta b { display:block; color:var(--ink); margin-bottom:4px; }
.module-meta a { display:inline-block; color:var(--pine); font-weight:800; margin-top:9px; }
.method { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; background:var(--cream); max-width:1124px; margin-bottom:110px; padding-top:68px; padding-bottom:68px; border-radius:28px; }
.method h2 { font-size:46px; }
.method-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.method-steps article { border-top:2px solid var(--gold); }
.method-steps b { display:block; color:var(--coral); font:500 24px Georgia,serif; margin-top:18px; }
.method-steps h3 { margin:12px 0 8px; }
.method-steps p { margin:0; color:var(--muted); line-height:1.55; font-size:12px; }
footer { background:var(--ink); color:white; padding:35px 0; }
footer .shell { display:flex; align-items:center; justify-content:space-between; }
footer .brand-mark { background:var(--gold); color:var(--ink); }
footer p { color:#9fb0ac; font-size:11px; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:white; padding:12px 18px; border-radius:10px; z-index:50; font-size:12px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
@media (max-width:850px) {
  nav>a { display:none; }
  .hero { grid-template-columns:1fr; padding-top:80px; padding-bottom:70px; }
  .hero-visual { min-height:450px; }
  .proof-grid { overflow:auto; justify-content:flex-start; }
  .proof-grid>* { white-space:nowrap; }
  .section-heading, .method { grid-template-columns:1fr; gap:30px; }
  .builder { grid-template-columns:1fr; }
  .builder-arrow { padding:0; transform:rotate(90deg); }
  .builder-options { grid-column:auto; grid-template-columns:1fr 1fr; }
  .result-grid { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.09); }
}
@media (max-width:560px) {
  .shell { padding-left:18px; padding-right:18px; }
  .topbar { padding:0 18px; }
  .hero { min-height:auto; }
  h1 { font-size:56px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .trust { border:0; padding:0; }
  .hero-visual { min-height:410px; }
  .preview-card { padding:18px; }
  .planner { padding-top:80px; }
  .section-heading { gap:22px; }
  .builder { padding:20px; }
  .builder-options { grid-template-columns:1fr; }
  .result-hero { padding:35px 25px; align-items:flex-start; }
  .coverage-ring { width:100px; height:100px; }
  .result-hero h2 { font-size:34px; }
  .result-hero p { display:none; }
  .stat { padding:17px; }
  .module { grid-template-columns:42px 1fr; }
  .module-meta { grid-column:2; text-align:left; }
  .method { border-radius:0; }
  .method-steps { grid-template-columns:1fr; }
  footer .shell { align-items:flex-start; flex-direction:column; gap:14px; }
}

/* Demo preview lock — added 2026-09-16: the loaded demo is a sample, not a live editable path,
   until the visitor signs up. Whole card is clickable; a badge and dimmed controls signal that. */
#path.demo-locked { position: relative; cursor: pointer; }
#path.demo-locked::before {
  content: "Sample path — click anywhere to sign up and unlock your own";
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: #2f5d50; color: #fff; font-size: 12px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px; white-space: nowrap; z-index: 5;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
#path.demo-locked .module-number,
#path.demo-locked .export-wrap,
#path.demo-locked .source-link { pointer-events: none; opacity: .5; }