:root{
    --ink:#20301F;
    --paper:#E7E2CC;
    --paper-deep:#DCD6BC;
    --chalk:#FBF8F0;
    --rust:#B5541E;
    --rust-deep:#8F3F14;
    --gold:#D6952E;
    --moss:#4F6F52;
    --moss-deep:#3A5540;
    --lake:#2F6F6B;
    --line:rgba(32,48,31,0.14);
    --line-strong:rgba(32,48,31,0.22);
    --shadow-sm: 0 3px 10px rgba(32,48,31,0.08);
    --shadow: 0 14px 34px rgba(32,48,31,0.11);
    --shadow-lg: 0 22px 50px rgba(32,48,31,0.16);
    --radius: 20px;
    --ease: cubic-bezier(.22,.9,.32,1.1);
    --display: 'Fjalla One', sans-serif;
    --body: 'Work Sans', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--body);
    color:var(--ink);
    background:
      radial-gradient(ellipse 900px 500px at 12% -8%, rgba(255,255,255,0.55), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 0%, rgba(214,149,46,0.16), transparent 55%),
      var(--paper);
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
  }
  .contour-bg{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:0.4;
  }
  #app{ position:relative; z-index:1; max-width:920px; margin:0 auto; padding:28px 20px 90px; }

  @keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
  .enter{ animation: fadeUp .45s var(--ease) both; }

  /* ---------- Header ---------- */
  .top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{
    width:44px; height:44px; border-radius:13px; flex-shrink:0;
    background:linear-gradient(150deg, var(--moss), var(--moss-deep));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 14px rgba(79,111,82,0.35);
  }
  .brand-mark svg{ width:24px; height:24px; color:#fff; }
  .brand-text h1{
    font-family:var(--display); font-weight:400; font-size:27px; letter-spacing:0.04em;
    margin:0; color:var(--ink); text-transform:uppercase; line-height:1;
  }
  .brand-text p{ margin:3px 0 0; font-size:12px; color:var(--moss-deep); font-weight:600; letter-spacing:0.03em;}
  .mode-link{
    font-family:var(--mono); font-size:11.5px; color:var(--ink); opacity:0.5;
    background:var(--chalk); border:1px solid var(--line); border-radius:999px; cursor:pointer;
    padding:8px 14px; transition:all .2s ease;
  }
  .mode-link:hover{ opacity:1; border-color:var(--rust); color:var(--rust-deep); }

  /* ---------- Trail progress ---------- */
  .trail-wrap{ margin: 4px 0 24px; }
  .trail-wrap svg{ width:100%; height:56px; display:block; overflow:visible; }
  .trail-label{
    display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--ink); opacity:0.55; margin-top:3px; letter-spacing:0.04em;
  }
  #trailMarker{ filter:drop-shadow(0 2px 5px rgba(181,84,30,0.5)); }
  @keyframes pulse{ 0%,100%{ r:7; } 50%{ r:8.5; } }
  @media (prefers-reduced-motion: no-preference){ #trailMarker{ animation:pulse 1.8s ease-in-out infinite; } }

  /* ---------- Card ---------- */
  .card{
    background:var(--chalk);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:36px 38px;
    position:relative;
    overflow:hidden;
  }
  .card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, var(--rust), var(--gold) 45%, var(--moss) 100%);
  }
  @media (max-width:600px){ .card{ padding:26px 20px; } }

  .eyebrow{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.14em; color:var(--rust); font-weight:600; margin:0 0 10px; }
  h2.q-title{ font-family:var(--display); font-weight:400; font-size:27px; line-height:1.22; margin:0 0 8px; letter-spacing:0.01em; }
  .q-sub{ font-size:14.5px; color:var(--ink); opacity:0.68; margin:0 0 24px; line-height:1.55; max-width:58ch;}
  .q-block{ margin-bottom:32px; padding-bottom:32px; border-bottom:1px dashed var(--line); }
  .q-block:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
  .q-prompt{ font-weight:600; font-size:15.5px; margin:0 0 14px; }
  .q-hint{ font-size:12.5px; opacity:0.5; font-weight:400; margin-left:6px; }

  /* ---------- Chips ---------- */
  .chip-row{ display:flex; flex-wrap:wrap; gap:9px; }
  .chip{
    font-family:var(--body); font-size:14px; font-weight:500;
    padding:10px 18px; border-radius:999px; border:1.5px solid var(--line-strong);
    background:#fff; color:var(--ink); cursor:pointer;
    transition: transform .15s var(--ease), background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .chip:hover{ border-color:var(--moss); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
  .chip.selected{ background:var(--moss); border-color:var(--moss); color:#fff; box-shadow:0 6px 16px rgba(79,111,82,0.32); }
  .chip:focus-visible{ outline:2px solid var(--lake); outline-offset:2px; }

  /* ---------- Likert ---------- */
  .likert-item{ margin-bottom:20px; }
  .likert-item:last-child{ margin-bottom:0; }
  .likert-item-label{ font-size:14.5px; font-weight:500; margin-bottom:9px; }
  .likert-scale{ display:flex; gap:7px; }
  .nps-scale{ flex-wrap:wrap; }
  .nps-scale .likert-btn{ flex:0 0 calc((100% - 60px)/11); min-width:34px; }
  @media (max-width:520px){ .nps-scale .likert-btn{ flex:0 0 calc((100% - 40px)/6); margin-bottom:6px; } }
  .likert-btn{
    flex:1; text-align:center; padding:10px 4px; border-radius:11px; border:1.5px solid var(--line-strong);
    background:#fff; cursor:pointer; font-size:13px; color:var(--ink); font-family:var(--mono); font-weight:600;
    transition:all .15s var(--ease);
  }
  .likert-btn:hover{ border-color:var(--rust); transform:translateY(-2px); }
  .likert-btn.selected{ background:linear-gradient(150deg, var(--rust), var(--rust-deep)); border-color:var(--rust-deep); color:#fff; box-shadow:0 6px 14px rgba(181,84,30,0.35); }
  .likert-endcaps{ display:flex; justify-content:space-between; font-size:11px; opacity:0.5; margin-top:5px; }

  /* ---------- Reaction grid ---------- */
  .feature-card{
    border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:14px; background:#fff;
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .reaction-row{ display:flex; gap:8px; }
  .reaction-btn{
    flex:1; padding:9px; border-radius:10px; border:1.5px solid var(--line-strong); background:#fff;
    font-size:13px; font-weight:600; cursor:pointer; color:var(--ink); transition:all .15s var(--ease);
  }
  .reaction-btn:hover{ transform:translateY(-2px); }
  .reaction-btn.selected[data-val="excited"]{ background:var(--moss); border-color:var(--moss); color:#fff; box-shadow:0 6px 14px rgba(79,111,82,0.32);}
  .reaction-btn.selected[data-val="neutral"]{ background:var(--gold); border-color:var(--gold); color:#fff; box-shadow:0 6px 14px rgba(214,149,46,0.32);}
  .reaction-btn.selected[data-val="not"]{ background:var(--rust-deep); border-color:var(--rust-deep); color:#fff; box-shadow:0 6px 14px rgba(143,63,20,0.32);}

  /* ---------- Inputs ---------- */
  textarea, input[type=text], input[type=email]{
    width:100%; font-family:var(--body); font-size:14.5px; padding:13px 15px; border-radius:12px;
    border:1.5px solid var(--line-strong); background:#fff; color:var(--ink); resize:vertical;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  textarea:focus, input:focus{ outline:none; border-color:var(--lake); box-shadow:0 0 0 3px rgba(47,111,107,0.16); }
  textarea{ min-height:90px; }

  /* ---------- Price chips ---------- */
  .price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:9px; }

  /* ---------- Nav buttons ---------- */
  .nav-row{ display:flex; justify-content:space-between; align-items:center; margin-top:34px; gap:12px;}
  .btn{
    font-family:var(--body); font-weight:600; font-size:14.5px; padding:13px 26px; border-radius:12px; border:none;
    cursor:pointer; transition:transform .15s var(--ease), box-shadow .2s ease;
  }
  .btn-primary{ background:linear-gradient(135deg, var(--rust), var(--rust-deep)); color:#fff; box-shadow:0 10px 22px rgba(181,84,30,0.38); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(181,84,30,0.45); }
  .btn-primary:active{ transform:translateY(0); }
  .btn-primary:disabled{ opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
  .btn-ghost{ background:transparent; color:var(--ink); opacity:0.55; padding:13px 10px; }
  .btn-ghost:hover{ opacity:1; }
  .btn-ghost:disabled{ visibility:hidden; }

  /* ---------- Welcome / Thank you ---------- */
  .hero{ text-align:left; position:relative; }
  .hero-inner{ position:relative; z-index:1; max-width:62ch; }
  .hero .eyebrow{ margin-bottom:16px; }
  .hero h2{ font-family:var(--display); font-size:clamp(30px,5.5vw,44px); line-height:1.14; margin:0 0 16px; text-transform:uppercase; letter-spacing:0.01em; }
  .hero h2 .accent{ color:var(--rust); }
  .hero p.lead{ font-size:16.5px; line-height:1.65; opacity:0.72; max-width:58ch; margin:0 0 24px;}
  .meta-row{ display:flex; gap:10px; margin:22px 0 30px; flex-wrap:wrap; }
  .meta-item{
    display:flex; align-items:center; gap:8px; font-size:12.5px; font-family:var(--mono); color:var(--ink);
    background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 14px 8px 10px;
  }
  .meta-item .ico{ width:22px; height:22px; border-radius:50%; background:rgba(181,84,30,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .meta-item svg{ width:13px; height:13px; color:var(--rust-deep); }
  .peaks{ position:absolute; right:-10px; top:-6px; width:220px; opacity:0.5; pointer-events:none; z-index:0; }
  @media (max-width:640px){ .peaks{ display:none; } }

  /* ---------- Wayfare intro feature list ---------- */
  .wf-feature{ display:flex; gap:15px; padding:16px 0; border-bottom:1px dashed var(--line); align-items:flex-start;}
  .wf-feature:first-child{ padding-top:2px; }
  .wf-feature:last-child{ border-bottom:none; }
  .wf-feature .badge{
    width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  }
  .wf-feature .badge svg{ width:21px; height:21px; }
  .wf-feature h4{ margin:0 0 3px; font-family:var(--display); font-weight:400; font-size:17px; letter-spacing:0.01em;}
  .wf-feature p{ margin:0; font-size:13.5px; opacity:0.68; line-height:1.5;}

  /* ---------- Dashboard ---------- */
  .dash-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:16px; margin-bottom:24px;}
  .stat-card{
    background:var(--chalk); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:14px; position:relative; overflow:hidden;
  }
  .stat-card .ico{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .stat-card .ico svg{ width:20px; height:20px; color:#fff; }
  .stat-card .num{ font-family:var(--mono); font-size:26px; font-weight:600; color:var(--ink); display:block; line-height:1.1;}
  .stat-card .lbl{ font-size:11.5px; opacity:0.6; text-transform:uppercase; letter-spacing:0.05em; font-family:var(--mono);}
  .chart-card{
    background:var(--chalk); border:1px solid var(--line); border-left:4px solid var(--moss); border-radius:16px;
    padding:22px 24px; box-shadow:var(--shadow); margin-bottom:20px;
  }
  .chart-card h3{ font-family:var(--display); font-weight:400; font-size:18.5px; margin:0 0 4px; letter-spacing:0.01em; }
  .chart-card .sub{ font-size:12.5px; opacity:0.55; margin:0 0 18px; }
  .chart-holder{ position:relative; height:260px; }
  .quotes-list{ display:flex; flex-direction:column; gap:10px; max-height:340px; overflow-y:auto; padding-right:4px;}
  .quote-item{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 15px; font-size:13.5px; line-height:1.55; }
  .empty-dash{ text-align:center; padding:70px 20px; opacity:0.65; }
  .empty-dash svg{ width:46px; height:46px; color:var(--moss); margin-bottom:14px; }

  /* passcode modal */
  .modal-bg{ position:fixed; inset:0; background:rgba(32,48,31,0.6); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
  .modal-box{ background:var(--chalk); border-radius:18px; padding:30px; max-width:360px; width:100%; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;}
  .modal-box::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--rust), var(--gold), var(--moss)); }
  .modal-box h3{ font-family:var(--display); font-weight:400; margin:0 0 10px; font-size:20px; display:flex; align-items:center;}
  .modal-box p{ font-size:13.5px; opacity:0.68; margin:0 0 16px; line-height:1.5; }
  .hidden{ display:none !important; }

  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:8px; }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }

  /* ---------- Added for the deployed build ---------- */
  .submit-error{
    background:rgba(181,84,30,0.10); border:1.5px solid var(--rust);
    border-radius:12px; padding:13px 15px; margin-top:20px;
    font-size:13.5px; line-height:1.55; color:var(--rust-deep);
  }
  .dash-section{
    font-family:var(--display); font-weight:400; font-size:15px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--ink); opacity:0.55;
    margin:34px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line);
  }
  .dash-section:first-of-type{ margin-top:8px; }
  a.mode-link{ text-decoration:none; display:inline-block; }