/* The Name Path · personalized plan. Palette and type from design/states/arizona/theme.json. */
:root{
  --paper:#f3ece0; --ink:#2e2925; --ink-soft:#51463f; --heading:#3d4638; --accent:#763c24;
  --accent-soft:#c98f72; --sage:#8c9c7f; --turq:#6f9c98; --sand:#d9c4a3; --rule:#cdb79a;
  --panel:rgba(250,246,238,.86); --panel-free:rgba(239,242,233,.9); --panel-warn:rgba(248,236,228,.9);
  --serif:"EB Garamond",Garamond,Georgia,serif; --display:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --sc:"Cormorant SC","Cormorant Garamond",Georgia,serif; --sans:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--paper) url(assets/linen.jpg) repeat;background-size:512px}
body{margin:0;color:var(--ink);font:18px/1.55 var(--serif);font-variant-numeric:oldstyle-nums;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--paper);padding:6px 10px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* hero: title on calm linen, painted band fading in beneath it */
.hero{position:relative;text-align:center;padding:46px 20px 0;overflow:hidden}
.brand{font:15px/1 var(--sc);letter-spacing:.32em;color:var(--ink-soft);text-transform:lowercase}
.kicker{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:20px}
.hero h1{font:500 clamp(34px,6vw,54px)/1.04 var(--display);color:var(--heading);margin:12px auto 10px;max-width:14em;letter-spacing:.005em}
.hero p.lead{max-width:34em;margin:0 auto;color:var(--ink-soft);font-size:18px}
.divider{display:block;margin:18px auto 0;width:230px;height:14px}
.art{position:relative;height:clamp(150px,30vw,300px);margin:-6px -20px 0;
  background:url(assets/header-superstition.jpg) center 62%/cover no-repeat;mix-blend-mode:multiply;opacity:.9;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 42%,#000 70%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,transparent 0,#000 42%,#000 70%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-composite:intersect}
.art.horses{margin:0}
body.plan-mode .hero .art{height:clamp(110px,20vw,200px)}
body.plan-mode .promise{display:none}
.art.horses{background-image:url(assets/footer-wildhorses.jpg);background-position:center 55%;height:clamp(160px,32vw,320px);opacity:.85}

.wrap{max-width:780px;margin:0 auto;padding:0 20px 40px}
.promise{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin:2px 0 26px;font:600 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.promise span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sage);margin-right:8px;vertical-align:2px}

/* form */
.section-title{font:500 26px/1.2 var(--display);color:var(--heading);margin:34px 0 4px;display:flex;align-items:baseline;gap:12px}
.section-title .n{font:600 12px var(--sans);letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
fieldset{border:0;border-top:1px solid var(--rule);margin:0;padding:18px 0 16px}
fieldset[hidden]{display:none}
legend{float:left;width:100%;padding:0;font:500 21px/1.3 var(--display);color:var(--ink);margin-bottom:4px}
legend+*{clear:both}
.hint{font:15px/1.45 var(--sans);color:var(--ink-soft);margin:0 0 10px}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:11px 14px;cursor:pointer;font:16px/1.4 var(--sans);transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--accent-soft)}
.opt input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;border:1.3px solid var(--ink-soft);border-radius:50%;background:#fbf8f2;display:grid;place-content:center}
.opt input[type=checkbox]{border-radius:3px}
.opt input::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .12s}
.opt input[type=checkbox]::before{border-radius:1px;width:9px;height:9px}
.opt input:checked::before{transform:scale(1)}
.opt:has(input:checked){border-color:var(--accent);background:rgba(250,244,234,.95)}
.opt input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
select{font:16px var(--sans);color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:11px 12px;width:100%;max-width:420px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.btn{font:600 14px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:var(--accent);color:#fbf6ee;border:1px solid var(--accent);border-radius:2px;padding:15px 26px;cursor:pointer}
.btn:hover{background:#63321e}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:rgba(118,60,36,.06)}
.privacy{font:14px/1.45 var(--sans);color:var(--ink-soft);margin-top:14px}
.errors{display:none;background:var(--panel-warn);border:1px solid var(--accent-soft);border-left:3px solid var(--accent);padding:12px 16px;font:15px/1.45 var(--sans);margin:20px 0 0}
.errors.show{display:block}
fieldset.invalid legend{color:var(--accent)}

/* plan */
#plan[hidden],#form[hidden]{display:none}
.summary{background:var(--panel);border:1px solid var(--rule);border-top:1.4px solid var(--heading);padding:20px 22px;margin:4px 0 8px}
.summary h2{font:500 28px/1.15 var(--display);color:var(--heading);margin:0 0 8px}
.summary p{margin:6px 0}
.pill{display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor;border-radius:20px;padding:5px 10px;vertical-align:2px}
.pill.free{color:var(--heading)}.pill.office{color:var(--accent)}
.phase{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:34px 0 10px;display:flex;align-items:center;gap:14px}
.phase::after{content:"";flex:1;height:1px;background:var(--rule)}
.step{position:relative;background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:18px 20px 16px 62px;margin:0 0 12px;break-inside:avoid}
.step .num{position:absolute;left:16px;top:16px;width:32px;height:32px;border:1px solid var(--accent-soft);border-radius:50%;display:grid;place-content:center;font:600 17px/1 var(--display);color:var(--accent);background:rgba(251,248,242,.9)}
.step h3{font:600 21px/1.25 var(--display);color:var(--heading);margin:0 0 6px;padding-right:34px}
.step p{margin:0 0 6px;font-size:17px}
.step ul{margin:6px 0 4px 0;padding-left:20px;font:15.5px/1.5 var(--sans)}
.step ul li::marker{color:var(--accent-soft)}
.bring{font:600 11.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px}
.links{margin-top:10px;font:15.5px/1.5 var(--sans);display:flex;flex-wrap:wrap;gap:4px 18px}
.done{position:absolute;right:16px;top:18px;width:20px;height:20px;accent-color:var(--accent);cursor:pointer}
.step.is-done{opacity:.62}
.src{margin-top:12px;border-top:1px dashed var(--rule);padding-top:8px;font:13.5px/1.45 var(--sans);color:var(--ink-soft)}
.src summary{cursor:pointer;color:var(--ink-soft)}
.src ul{font:13.5px/1.45 var(--sans);margin:6px 0 0}
.src .u{word-break:break-all}
.gen{font-style:italic}
.free-note{border-left:3px solid var(--sage);background:var(--panel-free)}
.warn-note{border-left:3px solid var(--accent-soft);background:var(--panel-warn)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.colophon{font:14px/1.5 var(--sans);color:var(--ink-soft);border-top:1px solid var(--rule);margin-top:30px;padding-top:14px}
.wm{font:13px var(--sc);letter-spacing:.12em;color:var(--ink-soft);text-align:center;margin-top:16px}
footer.site{text-align:center;font:13px/1.6 var(--sans);color:var(--ink-soft);padding:0 20px 34px}

@media (max-width:560px){
  body{font-size:17px}
  .hero{padding-top:30px}
  .step{padding:16px 16px 14px 16px}
  .step .num{position:static;margin-bottom:8px}
  .done{top:16px;right:14px}
  .btn{width:100%;text-align:center}
}
@media print{
  @page{size:Letter;margin:.6in .65in .7in}
  html{background:#fff}
  body{font-size:11.5pt}
  .noprint,#form,.art,.promise,.skip,footer.site{display:none!important}
  .hero{padding:0 0 8pt}.hero h1{font-size:28pt;margin:6pt auto;max-width:none}.hero p.lead{display:none}.divider{margin-top:6pt}
  #plan{display:block!important}
  .summary,.step{background:#fff}
  .step{padding:10pt 12pt 8pt 40pt;margin-bottom:8pt;break-inside:auto}
  .step h3,.bring{break-after:avoid}.step li{break-inside:avoid}.step p{orphans:3;widows:3}
  details.src::details-content{content-visibility:visible;display:block}
  .src summary{list-style:none}.src summary::-webkit-details-marker{display:none}
  .step .num{left:10pt;top:10pt;width:22pt;height:22pt;font-size:12pt}
  .done{display:none}
  .step::after{content:"";position:absolute;right:12pt;top:12pt;width:10pt;height:10pt;border:1pt solid var(--ink-soft);border-radius:2pt}
  .step p{font-size:11pt}.step ul,.links{font-size:9.5pt}
  .links a::after{content:" (" attr(href) ")";color:var(--ink-soft);word-break:break-all}
  .src{font-size:8pt}.src ul{font-size:8pt;display:block!important}
  .src details>*{display:block}
  .phase{margin:16pt 0 6pt;break-after:avoid}
  a{color:var(--ink)}
}

/* "If you get stuck" tips under a plan step (added Oct 20, 2026) */
.stuck{margin-top:12px;padding:10px 14px 8px 16px;background:rgba(250,246,238,.94);border:1px solid var(--rule);border-radius:3px;box-shadow:inset 3px 0 0 var(--accent-soft)}
.stuck-h{font:600 11.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.stuck ul{list-style:none;margin:0;padding:0;font:15px/1.5 var(--sans);color:var(--ink)}
.stuck li{margin:0 0 6px}.stuck li:last-child{margin-bottom:0}
.stuck li b{color:var(--heading)}
.stuck .tsrc{display:inline-block;font-size:12.5px;color:var(--ink-soft);margin-left:2px}
.stuck .tsrc a{color:var(--accent)}
@media print{.stuck{break-inside:avoid;background:#fbf8f2}.stuck ul{font-size:9.5pt}.stuck .tsrc{font-size:8pt}.stuck .tsrc a::after{content:none}}