/* ==========================================================================
   Valora Parentis — free-tools kit (shared mockup styles)
   Palette taken from mockups/homepage-mockup.html so these read as Valora.
   Light-only, like the other mockups; the real site adds dark mode.
   ========================================================================== */
:root{
  --green:#1C4534;
  --green-link:#2C6B4F;
  --gold:#B8862B;
  --gold-btn:#D9A441;
  --cream:#FBF4E7;
  --band:#FAF0DC;
  --page:#FEFCF7;
  --ink:#22201C;
  --muted:#8A867E;
  --soft:#5C5850;
  --line:#EFE6D5;
  --serif:'Playfair Display', Georgia, serif;
  --serif2:'Lora', Georgia, serif;
  --sans:'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* red / amber / green result tokens, tuned for cream grounds */
  --good:#2C6B4F;      --good-bg:#E7F0EA;
  --watch:#9A6B12;     --watch-bg:#FBEFD6;
  --attn:#A8382C;      --attn-bg:#F7E4E0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#E9E4DA;
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
a{color:var(--green-link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---- page frame ---- */
.wrap{max-width:760px;margin:0 auto;padding:0 20px 80px}
.hub .wrap{max-width:1024px}

/* ---- top bar ---- */
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar .in{max-width:1024px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:22px}
.logo{line-height:1}
a.logo{display:inline-block;text-decoration:none}
a.logo:hover{text-decoration:none;opacity:.85}
.logo .w{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--green);letter-spacing:-.5px}
.logo .s{display:block;font-size:8px;letter-spacing:4px;color:var(--green);margin-top:2px;font-weight:500}
.topbar .crumbs{font-size:13.5px;color:var(--muted)}
.topbar .crumbs a{color:var(--muted)}
.topbar .spacer{flex:1}
.topbar .home{font-size:13.5px;color:var(--soft)}

/* ---- tool header ---- */
.tool-head{padding:44px 0 8px;text-align:center}
.eyebrow{font-size:11.5px;letter-spacing:1.7px;text-transform:uppercase;color:var(--gold);font-weight:600}
.tool-head h1{font-family:var(--serif);font-size:36px;line-height:1.15;color:var(--green);font-weight:600;margin:12px 0 0}
.tool-head .lead{font-size:16px;color:var(--soft);max-width:56ch;margin:16px auto 0}
.meta-row{display:flex;gap:22px;justify-content:center;margin-top:20px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.meta-row b{color:var(--soft);font-weight:600}

/* ---- card ---- */
.card{background:var(--page);border:1px solid var(--line);border-radius:14px;padding:30px 32px;margin-top:26px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.card.pad-lg{padding:36px 40px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15.5px;font-weight:600;
  padding:14px 26px;border-radius:8px;border:0;cursor:pointer;text-decoration:none;transition:transform .05s ease}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff}
.btn-gold{background:var(--gold-btn);color:#2A2822}
.btn-ghost{background:#fff;color:var(--green);border:1px solid var(--line)}
.btn-lg{font-size:16.5px;padding:16px 30px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px}
.btn[disabled]{opacity:.4;cursor:default}

/* ---- intro list ---- */
.intro-what{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.intro-what li{display:flex;gap:12px;font-size:15px;color:var(--soft)}
.intro-what .dot{flex:0 0 22px;height:22px;border-radius:50%;background:var(--good-bg);color:var(--good);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:1px}

/* ---- progress ---- */
.progress{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.progress .track{flex:1;height:8px;border-radius:6px;background:var(--line);overflow:hidden}
.progress .fill{height:100%;background:var(--gold-btn);width:0;transition:width .3s ease}
.progress .count{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- question ---- */
.q-area{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);font-weight:600}
.q-text{font-family:var(--serif2);font-size:23px;line-height:1.3;color:var(--green);font-weight:600;margin:8px 0 4px}
.q-help{font-size:14px;color:var(--muted);margin-bottom:18px}
.options{display:grid;gap:12px;margin-top:8px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:10px;padding:15px 18px;font-family:var(--sans);font-size:15.5px;color:var(--ink);cursor:pointer;transition:all .12s ease}
.opt:hover{border-color:var(--gold-btn);background:#fffdf7}
.opt .tick{flex:0 0 20px;height:20px;border-radius:50%;border:2px solid var(--line);position:relative}
.opt.sel{border-color:var(--green);background:var(--good-bg)}
.opt.sel .tick{border-color:var(--green);background:var(--green)}
.opt.sel .tick::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.q-nav{display:flex;justify-content:space-between;margin-top:26px}
.link-back{background:none;border:0;font-family:var(--sans);font-size:14.5px;color:var(--muted);cursor:pointer;padding:8px 4px}
.link-back:hover{color:var(--soft)}

/* ---- calculator / form fields ---- */
.field{margin-top:20px}
.field > label{display:block;font-size:14.5px;font-weight:600;color:var(--soft);margin-bottom:8px}
.field .hint{font-weight:400;color:var(--muted);font-size:13px}
.field input[type=text],.field input[type=number],.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:9px;padding:13px 15px;outline:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-btn)}
.field textarea{min-height:74px;resize:vertical}
.seg{display:flex;flex-wrap:wrap;gap:10px}
.seg button{flex:1 1 auto;min-width:120px;font-family:var(--sans);font-size:14.5px;background:#fff;border:1.5px solid var(--line);
  border-radius:9px;padding:12px 14px;cursor:pointer;color:var(--ink)}
.seg button.sel{border-color:var(--green);background:var(--good-bg);color:var(--green);font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

/* ---- result ---- */
.result-banner{border-radius:12px;padding:22px 24px;display:flex;gap:16px;align-items:flex-start}
.result-banner.lvl-good{background:var(--good-bg)}
.result-banner.lvl-watch{background:var(--watch-bg)}
.result-banner.lvl-attn{background:var(--attn-bg)}
.result-banner .face{font-size:30px;line-height:1}
.result-banner h2{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--ink)}
.result-banner p{font-size:15px;color:var(--soft);margin-top:6px}

.areas{margin-top:26px;border-top:1px solid var(--line)}
.area-row{display:flex;align-items:center;gap:14px;padding:15px 2px;border-bottom:1px solid var(--line)}
.area-row .name{flex:1;font-size:15.5px;font-weight:600;color:var(--ink)}
.pill{font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:20px;white-space:nowrap}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.watch{background:var(--watch-bg);color:var(--watch)}
.pill.attn{background:var(--attn-bg);color:var(--attn)}
.area-note{font-size:13.5px;color:var(--muted);flex-basis:100%;margin:2px 0 0 0}

.focus-list{margin-top:26px}
.focus-list h3{font-family:var(--serif);font-size:20px;color:var(--green);font-weight:600;margin-bottom:6px}
.focus-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.focus-item .num{flex:0 0 26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.focus-item h4{font-size:15.5px;color:var(--ink);font-weight:700}
.focus-item p{font-size:14px;color:var(--soft);margin-top:4px}

/* generated document (plan / checklist output) */
.doc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 30px;margin-top:24px}
.doc h2{font-family:var(--serif);font-size:24px;color:var(--green);font-weight:600}
.doc .sub{font-size:13.5px;color:var(--muted);margin-top:4px}
.doc section{margin-top:22px}
.doc section h3{font-family:var(--serif2);font-size:16px;color:var(--ink);font-weight:700;
  border-bottom:2px solid var(--gold-btn);padding-bottom:5px;margin-bottom:10px;display:inline-block}
.doc ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.doc li{display:flex;gap:11px;font-size:14.5px;color:var(--soft)}
.doc li .box{flex:0 0 16px;height:16px;border:1.5px solid var(--muted);border-radius:4px;margin-top:2px}
.doc .val{color:var(--ink)}
.doc .empty{color:var(--muted);font-style:italic}

/* ---- disclaimer ---- */
.disclaimer{background:var(--band);border-radius:10px;padding:16px 20px;margin-top:24px;font-size:13.5px;color:var(--soft)}
.disclaimer b{color:var(--ink)}

/* ---- the bridge to the product ---- */
.bridge{background:var(--green);border-radius:14px;padding:30px 32px;margin-top:26px;color:#fff}
.bridge .k{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-btn);font-weight:600}
.bridge h3{font-family:var(--serif);font-size:24px;font-weight:600;margin:10px 0 0;color:#fff}
.bridge p{font-size:15px;color:#DCE7E0;margin-top:12px;max-width:54ch}
.bridge .btn-row{margin-top:22px}
.bridge .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.bridge .link-white{color:#fff;font-size:14.5px;align-self:center}

/* ---- footer note ---- */
.foot{margin-top:34px;text-align:center;font-size:12.5px;color:var(--muted)}
.foot a{color:var(--muted);text-decoration:underline}

/* ---- utility ---- */
.hidden{display:none !important}
.center{text-align:center}
.mt0{margin-top:0}

/* ==== hub grid ==== */
.hub-head{text-align:center;padding:52px 0 10px}
.hub-head h1{font-family:var(--serif);font-size:40px;color:var(--green);font-weight:600}
.hub-head p{font-size:16.5px;color:var(--soft);max-width:60ch;margin:16px auto 0}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
@media(max-width:860px){.tool-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tool-grid{grid-template-columns:1fr}}
.tool-card{background:var(--page);border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;
  display:flex;flex-direction:column;transition:all .12s ease}
.tool-card:hover{border-color:var(--gold-btn);box-shadow:0 6px 18px rgba(28,69,52,.08);text-decoration:none}
.tool-card .ico{font-size:26px}
.tool-card h3{font-family:var(--serif2);font-size:19px;color:var(--green);font-weight:600;margin-top:14px}
.tool-card p{font-size:14px;color:var(--soft);margin-top:8px;flex:1}
.tool-card .q{font-size:12.5px;color:var(--muted);margin-top:14px;font-style:italic}
.tool-card .go{font-size:13.5px;color:var(--green-link);font-weight:600;margin-top:14px}

/* ==== prepare mode (Prepare for What's Next) ==== */
.domain-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
@media(max-width:520px){.domain-grid{grid-template-columns:1fr}}
.d-ico{font-size:1.15em}
.notsure{display:block;margin:16px 0 0;text-align:left}
.rate-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.rate-block:first-of-type{border-top:0;padding-top:0;margin-top:14px}
.rate-label{font-family:var(--serif2);font-size:17px;font-weight:600;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.rate-opts{grid-template-columns:1fr 1fr}
@media(max-width:520px){.rate-opts{grid-template-columns:1fr}}
.rate-opts .opt{font-size:14.5px;padding:12px 14px}
.pill.pri-low{background:var(--good-bg);color:var(--good)}
.pill.pri-medium{background:var(--watch-bg);color:var(--watch)}
.pill.pri-high{background:var(--attn-bg);color:var(--attn)}
.prep-section{margin-top:26px}
.prep-section h3{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:4px;padding-left:12px;border-left:4px solid var(--line)}
.sec-attn h3{border-left-color:var(--attn);color:var(--attn)}
.sec-prep h3{border-left-color:var(--watch);color:var(--watch)}
.sec-good h3{border-left-color:var(--good);color:var(--good)}
.prep-item{padding:16px 0;border-bottom:1px solid var(--line)}
.prep-item h4{font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.prep-cons{font-size:14px;color:var(--soft);margin:6px 0 0}
.prep-steps{margin:10px 0 0;display:grid;gap:3px}
.prep-step{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--soft);cursor:pointer;padding:3px 0}
.prep-step input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--green)}
.prep-step input:checked + span{color:var(--muted);text-decoration:line-through}
.prep-try{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--green-link)}
.prep-roadmap{margin-top:28px;background:var(--band);border-radius:12px;padding:20px 22px}
.prep-roadmap h3{font-family:var(--serif);font-size:19px;color:var(--green);font-weight:600;margin-bottom:12px}
.roadmap-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:560px){.roadmap-cols{grid-template-columns:1fr}}
.road-col h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);font-weight:700;margin-bottom:8px}
.road-col ul{margin:0;padding-left:0;list-style:none;display:grid;gap:5px}
.road-col li{font-size:14px;color:var(--soft)}
.road-step{display:flex;gap:9px;align-items:flex-start;cursor:pointer}
.road-step input{margin-top:2px;width:15px;height:15px;accent-color:var(--green);flex:0 0 auto}
.road-step input:checked + span{color:var(--muted);text-decoration:line-through}
.prep-notes{margin-top:28px}
.prep-notes h3{font-family:var(--serif);font-size:20px;color:var(--green);font-weight:600;margin-bottom:4px}
.prep-notes-ta{width:100%;margin-top:8px;font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:12px 14px;outline:0;resize:vertical;min-height:90px}
.prep-notes-ta:focus{border-color:var(--gold-btn)}
.prep-sudden{margin:16px 0 0;font-size:13.5px;color:var(--soft);font-style:italic}

/* ---- "what if?" simulator (prepare mode, Phase 3) ---- */
.prep-whatif{margin-top:28px}
.prep-whatif h3{font-family:var(--serif);font-size:20px;color:var(--green);font-weight:600;margin-bottom:4px}
.wi-intro{font-size:14px;color:var(--soft);margin-bottom:12px}
.wi-item{border:1px solid var(--line);border-radius:10px;margin-top:10px;background:#fff;overflow:hidden}
.wi-item summary{cursor:pointer;padding:14px 16px;font-family:var(--serif2);font-size:16px;font-weight:600;color:var(--ink);list-style:none;display:flex;align-items:center;gap:10px}
.wi-item summary::-webkit-details-marker{display:none}
.wi-item summary::before{content:"+";color:var(--gold-btn);font-weight:700;font-size:18px;width:14px;text-align:center}
.wi-item[open] summary::before{content:"\2013"}
.wi-body{padding:0 16px 16px}
.wi-row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line)}
.wi-area{font-size:14.5px;color:var(--soft)}
.wi-take{font-size:14px;color:var(--ink);font-weight:600;margin:14px 0 0}
.wi-ready{margin-top:12px}
.wi-ready b{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold)}
.wi-ready ul{margin:6px 0 0;padding-left:20px;display:grid;gap:5px}
.wi-ready li{font-size:14px;color:var(--soft)}

/* ---- print / save the plan cleanly ---- */
@media print{
  /* the printed plan = profile + tickable prep steps + roadmap + your notes. The interactive
     "what if?" simulator and all marketing/nav chrome are dropped. */
  .topbar,.tool-head .meta-row,.tool-head .eyebrow,.tool-head .lead,.btn-row,.prep-try,.bridge,.foot,.q-nav,.prep-whatif{display:none !important}
  body{background:#fff;color:#000}
  .wrap{max-width:100%;padding:0}
  .card{border:0;box-shadow:none;margin:0;padding:0}
  .result-banner{background:#fff !important;padding:0 0 8px;border-bottom:2px solid #000}
  .pill{border:1px solid #999}
  .prep-item,.prep-section,.prep-roadmap,.prep-notes{break-inside:avoid}
  .prep-step input,.road-step input{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .prep-notes-ta{min-height:130px;border-color:#999}
}