/* No Porch Tutorial - the /tutorial/ page.
   For Travelers green: deep forest #06110e (a pine forest at night) under a
   soft green glow #13301f, brass gold #e4b752, cream text #f3ead8.
   Every rule is scoped to .nptut so nothing leaks onto the rest of the site. */

.nptut{--bg:#06110e;--bg2:#0a1d15;--glow:#13301f;--gold:#e4b752;--gold2:#c9973c;
  --ink:#f3ead8;--dim:#c3cdc6;--faint:#93a69c;--edge:rgba(255,255,255,.14);
  --glass:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 45%,rgba(0,0,0,.18));
  --how:#7fd1a4;--fix:#f0a35e;
  box-sizing:border-box;position:relative;color:var(--ink);
  font:400 16px/1.6 Archivo,-apple-system,"Segoe UI",Roboto,sans-serif;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:calc(-1 * var(--wp--preset--spacing--20,0px));
  padding:0 20px 70px;
  background:radial-gradient(130% 60% at 50% 0,var(--glow) 0,var(--bg2) 34%,var(--bg) 62%),var(--bg)}
.nptut *,.nptut *::before,.nptut *::after{box-sizing:border-box}
.nptut svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nptut a{color:var(--gold)}
.nptut h1,.nptut h2,.nptut h3,.nptut h4{color:var(--ink);margin:0;letter-spacing:-.01em}
.nptut p{margin:0}
.nptut-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nptut [hidden]{display:none!important}

/* ---------- buttons ---------- */
.nptut-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:10px 20px;border-radius:999px;border:1px solid var(--edge);border-top-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.06);color:var(--ink)!important;text-decoration:none!important;
  font:700 14px/1.2 Archivo,sans-serif;letter-spacing:.02em;cursor:pointer;transition:background .15s,transform .15s}
.nptut-btn:hover{background:rgba(255,255,255,.12)}
.nptut-btn.nptut-gold{background:linear-gradient(180deg,#f2cf7c,var(--gold) 45%,var(--gold2));color:#1c1606!important;
  border-color:#f7dfa0;box-shadow:0 6px 20px -6px rgba(228,183,82,.55)}
.nptut-btn.nptut-gold:hover{transform:translateY(-1px)}
.nptut-btn.nptut-small{min-height:38px;padding:8px 16px;font-size:13px}
.nptut-btn:disabled{opacity:.35;cursor:default;transform:none}
.nptut-btn:focus-visible,.nptut-mode:focus-visible,.nptut-topic:focus-visible,.nptut-live:focus-visible,
.nptut summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- hero ---------- */
.nptut-hero{max-width:900px;margin:0 auto;padding:46px 0 26px;text-align:center}
.nptut-kick{color:var(--gold)!important;font:800 12px/1 Archivo,sans-serif!important;letter-spacing:.28em;text-transform:uppercase;margin:0 0 14px!important}
.nptut-hero h1{font:800 clamp(34px,6vw,58px)/1.04 Fraunces,Georgia,serif!important;color:var(--ink)!important;text-wrap:balance}
.nptut-sub{margin:14px auto 0!important;max-width:52ch;color:var(--dim);font-size:18px}
.nptut-backp{margin:0 0 22px!important;text-align:left}
/* inside the owner portal the page already sits in a panel - no full-bleed breakout */
.nptut.nptut-owner{width:auto;max-width:none;margin:0;border-radius:18px;padding:0 20px 50px}

/* ---------- the four ways in ---------- */
.nptut-modes{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.nptut-mode{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;border-radius:14px;
  text-decoration:none!important;color:var(--ink)!important;background:var(--glass),rgba(8,22,17,.82);
  border:1px solid var(--edge);border-top-color:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 34px -18px #000;transition:transform .18s,border-color .18s,box-shadow .18s}
.nptut-mode:hover{transform:translateY(-3px);border-color:rgba(228,183,82,.55)}
.nptut-mode.on{border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,240,200,.35),0 0 0 1px var(--gold),0 22px 40px -16px rgba(228,183,82,.35)}
.nptut-mode.on::after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--gold)}
.nptut-modeic{width:42px;height:42px;padding:9px;border-radius:11px;color:var(--gold);
  background:rgba(228,183,82,.1);border:1px solid rgba(228,183,82,.35)}
.nptut-mode.on .nptut-modeic{background:var(--gold);color:#1c1606}
.nptut-modet{font:800 19px/1.2 Fraunces,Georgia,serif}
.nptut-moded{color:var(--faint);font-size:14px;line-height:1.45}

/* ---------- topics ---------- */
.nptut-topics{max-width:1120px;margin:26px auto 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.nptut-topic{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 16px;border-radius:999px;
  border:1px solid var(--edge);background:rgba(255,255,255,.04);color:var(--dim);
  font:600 14px/1 Archivo,sans-serif;cursor:pointer}
.nptut-topic svg{width:17px;height:17px}
.nptut-topic:hover{color:var(--ink);border-color:rgba(228,183,82,.45)}
.nptut-topic.on{background:rgba(228,183,82,.14);border-color:var(--gold);color:var(--ink)}

/* ---------- panels ---------- */
.nptut-panel{max-width:1120px;margin:30px auto 0}
.nptut-panelhead{text-align:center;margin:0 auto 22px;max-width:760px}
.nptut-panelhead h2{font:800 30px/1.15 Fraunces,Georgia,serif!important}
.nptut-panelhead > p{color:var(--dim);margin-top:8px!important}

/* ---------- help index ---------- */
.nptut-search{position:relative;display:block;max-width:560px;margin:20px auto 0}
.nptut-search svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--faint)}
.nptut-search input{width:100%;min-height:52px;padding:12px 18px 12px 48px;border-radius:999px;font:400 16px Archivo,sans-serif;
  color:var(--ink);background:rgba(0,0,0,.35);border:1px solid var(--edge);box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}
.nptut-search input::placeholder{color:var(--faint)}
.nptut-search input:focus{outline:none;border-color:var(--gold)}
.nptut-none{margin-top:14px!important;color:var(--fix)}
.nptut-tool{margin:0 0 18px;padding:22px;border-radius:16px;background:var(--glass),rgba(8,20,16,.86);
  border:1px solid var(--edge);border-top-color:rgba(255,255,255,.22);box-shadow:0 20px 40px -24px #000}
.nptut-toolhead{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.nptut-toolhead > div{flex:1 1 auto;min-width:0}
.nptut-toolhead h3{font:800 22px/1.2 Fraunces,Georgia,serif!important}
.nptut-toolhead p{color:var(--faint);font-size:15px}
.nptut-toolic{flex:0 0 46px;width:46px;height:46px;padding:10px;border-radius:12px;color:var(--gold);
  background:rgba(228,183,82,.1);border:1px solid rgba(228,183,82,.35)}
.nptut-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nptut-colh{font:800 12px/1 Archivo,sans-serif!important;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px!important;
  padding-left:12px;border-left:3px solid}
.nptut-colh.nptut-how{color:var(--how)!important;border-color:var(--how)}
.nptut-colh.nptut-fix{color:var(--fix)!important;border-color:var(--fix)}
.nptut-q{border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.07);margin:0 0 8px}
.nptut-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 14px;
  color:var(--ink);font-weight:600;font-size:15px}
.nptut-q summary::-webkit-details-marker{display:none}
.nptut-q summary::after{content:"+";margin-left:auto;color:var(--gold);font:700 20px/1 Archivo,sans-serif;transition:transform .2s}
.nptut-q[open] summary::after{transform:rotate(45deg)}
.nptut-q[open]{border-color:rgba(228,183,82,.35)}
.nptut-q p{padding:0 14px 14px;color:var(--dim);font-size:15px}
.nptut-more{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.nptut-more summary{cursor:pointer;color:var(--gold);font-weight:700;font-size:14px;min-height:36px;display:flex;align-items:center}
.nptut-more p{color:var(--dim);margin:0 0 10px!important;font-size:15px;max-width:75ch}
.nptut-tool.is-hidden,.nptut-q.is-hidden,.nptut-col.is-hidden{display:none}

/* ---------- picture tour ---------- */
.nptut-stage{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:22px;align-items:start}
.nptut-shot{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--edge);
  box-shadow:0 24px 50px -24px #000;background:#0b1512;line-height:0}
.nptut-shot img{display:block;width:100%;height:auto}
.nptut-shot.is-phone{max-width:380px;margin:0 auto}
.nptut-ring{position:absolute;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 3px var(--gold),0 0 0 9999px rgba(3,10,7,.55),0 0 26px 6px rgba(228,183,82,.6);
  transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease;animation:nptutPulse 1.8s ease-in-out infinite}
@keyframes nptutPulse{50%{box-shadow:0 0 0 5px var(--gold),0 0 0 9999px rgba(3,10,7,.55),0 0 34px 10px rgba(228,183,82,.75)}}
@media (prefers-reduced-motion:reduce){.nptut-ring{animation:none;transition:none}}
.nptut-cap{position:sticky;top:90px;padding:22px;border-radius:16px;background:var(--glass),rgba(8,20,16,.9);
  border:1px solid var(--edge);border-top-color:rgba(255,255,255,.24)}
.nptut-capn{color:var(--gold);font:800 12px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px!important}
.nptut-cap h3{font:800 24px/1.2 Fraunces,Georgia,serif!important;margin-bottom:10px!important}
.nptut-cap > p:not(.nptut-capn){color:var(--dim);font-size:16px}
.nptut-capbtns{display:flex;gap:10px;margin-top:20px}
.nptut-capbtns .nptut-btn{flex:1 1 0}
.nptut-dots{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.nptut-dots button{width:32px;height:32px;border-radius:50%;border:1px solid var(--edge);background:rgba(255,255,255,.04);
  color:var(--faint);font:700 12px/1 Archivo,sans-serif;cursor:pointer}
.nptut-dots button.on{background:var(--gold);border-color:var(--gold);color:#1c1606}
.nptut-tryreal{display:inline-block;margin-top:16px;font-weight:700;font-size:14px;text-decoration:none}
.nptut-tryreal:hover{text-decoration:underline}
.nptut-noshot{padding:60px 20px;text-align:center;color:var(--faint);line-height:1.5}

/* ---------- live tour ---------- */
.nptut-livegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.nptut-live{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:14px;text-decoration:none!important;
  color:var(--ink)!important;background:var(--glass),rgba(8,20,16,.86);border:1px solid var(--edge);
  border-top-color:rgba(255,255,255,.22);transition:transform .18s,border-color .18s}
.nptut-live:hover{transform:translateY(-3px);border-color:var(--gold)}
.nptut-live .nptut-toolic{margin-bottom:6px}
.nptut-livet{font:800 19px/1.2 Fraunces,Georgia,serif}
.nptut-lived{color:var(--faint);font-size:14px}
.nptut-livego{margin-top:auto;padding-top:10px;color:var(--gold);font-weight:800;font-size:14px}

/* ---------- read the guide ---------- */
.nptut-read{max-width:760px;margin:0 auto 18px;padding:26px 28px;border-radius:16px;background:rgba(8,20,16,.86);
  border:1px solid var(--edge)}
.nptut-read h3{font:800 26px/1.2 Fraunces,Georgia,serif!important;margin-bottom:12px!important;color:var(--gold)!important}
.nptut-read p{color:var(--dim);font-size:17px;line-height:1.7;margin:0 0 14px!important}
.nptut-readlinks{font-size:15px!important;margin:6px 0 0!important}
.nptut-readlinks a{font-weight:700}

/* ---------- still stuck ---------- */
.nptut-stuck{max-width:1120px;margin:40px auto 0;display:flex;align-items:center;gap:20px;justify-content:space-between;
  padding:22px 26px;border-radius:16px;border:1px solid rgba(228,183,82,.4);
  background:linear-gradient(120deg,rgba(228,183,82,.12),rgba(228,183,82,.03))}
.nptut-stuck h2{font:800 22px/1.2 Fraunces,Georgia,serif!important}
.nptut-stuck p{color:var(--dim)}

/* ---------- locked ---------- */
.nptut-locked{padding:70px 20px 90px}
.nptut-lockbox{max-width:560px;margin:0 auto;text-align:center;padding:36px 28px;border-radius:18px;
  background:var(--glass),rgba(8,20,16,.9);border:1px solid var(--edge)}
.nptut-lockbox h1{font:800 32px/1.15 Fraunces,Georgia,serif!important;margin-bottom:12px!important}
.nptut-lockbox p{color:var(--dim)}
.nptut-lockbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px!important}

/* ---------- tablet and phone ---------- */
@media (max-width:900px){
  .nptut-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nptut-stage{grid-template-columns:1fr}
  .nptut-cap{position:static}
}
@media (max-width:640px){
  .nptut{padding:0 16px 56px;font-size:15px}
  .nptut-hero{padding:30px 0 18px}
  .nptut-sub{font-size:16px}
  .nptut-modes{gap:10px}
  .nptut-mode{padding:14px 14px 16px}
  .nptut-moded{display:none}
  .nptut-modet{font-size:16px}
  .nptut-modeic{width:36px;height:36px;padding:7px}
  .nptut-topics{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;margin-top:18px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nptut-topics::-webkit-scrollbar{display:none}
  .nptut-topic{flex:0 0 auto}
  .nptut-cols{grid-template-columns:1fr}
  .nptut-tool{padding:16px}
  .nptut-toolhead{flex-wrap:wrap}
  .nptut-toolhead .nptut-btn{width:100%}
  .nptut-panelhead h2{font-size:25px}
  .nptut-read{padding:20px 18px}
  .nptut-stuck{flex-direction:column;align-items:stretch;text-align:center}
  .nptut-stuck .nptut-btn{white-space:normal}
}