/* /help and /help/<slug> (lane ask-slot-help): the front page's canvas (home.css) like /pricing, phone first. */
:root{--gut:20px;--hp-ink:#111;--hp-mute:#5a5550;--hp-line:#e3dfda;--hp-coral:#d9381b;--hp-coral-dark:#b82c17;--hp-soft:#fbeee9;--hp-ease:cubic-bezier(.2,.8,.2,1)}
@media(min-width:640px){:root{--gut:48px}}
@media(min-width:1024px){:root{--gut:92px}}
.hp .hp-wrap{width:min(1256px,100% - 2*var(--gut));margin-inline:auto}
.hp :focus-visible{outline:2px solid var(--hp-coral-dark);outline-offset:2px}
.hp .btn{min-height:48px;padding:12px 22px;font-size:16px;transition:transform 150ms var(--hp-ease),background-color 150ms var(--hp-ease)}
.hp .primary{background:var(--hp-coral);color:#fff;border:0}.hp .primary:hover{background:var(--hp-coral-dark)}
.hp .secondary{border:1px solid #cfcac3;background:#fff;color:var(--hp-ink)}.hp .secondary:hover{background:#f4f2ee}
.hp .btn:active{transform:translateY(1px) scale(.985)}
/* the nav */
.hp .front-nav{max-width:none;margin:0;padding:0;display:block}
.hp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px}
.hp-nav-r{display:flex;align-items:center;gap:14px}
.hp .hp-top{min-height:40px;padding:8px 14px;font-size:14px}
.hp-crumb{font-size:15px;font-weight:600;color:var(--hp-mute);text-decoration:none}.hp-crumb:hover{color:var(--hp-ink)}
@media(max-width:420px){.hp-nav-r .hp-top{display:none}}
/* the index's first screen: the words and the search, then the graph */
.hp-hero{display:grid;gap:28px;padding:24px 0 40px}
.hp h1{font-size:clamp(40px,10vw,72px);font-weight:900;letter-spacing:-.04em;line-height:1}
.hp-sub{font-size:clamp(17px,1.6vw,20px);line-height:1.45;margin-top:14px;max-width:34em;color:#3d3935}
.hp-search{display:flex;gap:8px;margin-top:22px;max-width:560px}
.hp-search input{flex:1;min-width:0;min-height:48px;padding:0 16px;border:1px solid #cfcac3;border-radius:999px;font:inherit;font-size:16px;background:#fff;color:var(--hp-ink)}
.hp-search input:focus{border-color:var(--hp-coral)}
.hp .hp-go{border-radius:999px;padding:12px 20px}
.hp-results{margin-top:18px}
.hp-results .hp-fine{margin-bottom:10px}
.hp-graph{margin:0;background:#fff;border:1px solid var(--hp-line);border-radius:20px;padding:10px 6px 14px;box-shadow:0 24px 48px -36px #3d1a0f40}
.hp-graph-svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto;font-family:inherit}
.hp-graph figcaption{text-align:center;font-size:13px;color:var(--hp-mute);margin-top:4px}
.hp-e{stroke:#e6b5a8;stroke-width:1.3}.hp-e.hub{stroke:#efe6df;stroke-width:1}
.hp-n rect{fill:#fff;stroke:var(--hp-coral);stroke-width:1.4;transition:fill 150ms}
.hp-n text{font-size:14px;font-weight:650;fill:var(--hp-ink)}
.hp-n:hover rect,.hp-n:focus rect{fill:var(--hp-soft)}
.hp-n.hub rect{fill:var(--hp-coral);stroke:var(--hp-coral)}.hp-n.hub text{fill:#fff}
.hp-n.hub:hover rect{fill:var(--hp-coral-dark)}
@media(min-width:1024px){.hp-hero{grid-template-columns:1fr 1fr;align-items:start;gap:56px;padding:40px 0 56px}}
/* the cards: an article, then what it connects to */
.hp h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;font-weight:800;line-height:1.15;margin:0 0 16px}
.hp-all{padding:16px 0 40px}
.hp-cards{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media(min-width:720px){.hp-all .hp-cards{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.hp-all .hp-cards{grid-template-columns:1fr 1fr 1fr}}
.hp-card{background:#fff;border:1px solid var(--hp-line);border-radius:16px;padding:16px 18px}
.hp-card-main{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
.hp-card-main b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.hp-card-main span{font-size:15px;line-height:1.4;color:var(--hp-mute)}
.hp-card-main:hover b{color:var(--hp-coral-dark)}
.hp-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.hp-links-k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b645d;margin-right:2px}
.hp-chip{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:#f4f0eb;color:var(--hp-ink);text-decoration:none}
.hp-chip:hover{background:var(--hp-soft);color:var(--hp-coral-dark)}
.hp-cards.tight .hp-card{padding:12px 14px}.hp-cards.tight .hp-card-main b{font-size:16px}
/* for your AI */
.hp-foryou{background:#f6f1ea;border-radius:20px;padding:24px 20px;margin:0 0 64px}
.hp-foryou p{font-size:16px;line-height:1.5;max-width:40em}
.hp-ai{margin-top:14px}
.hp-ai-see{margin-top:10px}
.hp-ai-see summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--hp-mute)}
.hp-prompt{white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.5;background:#fff;border:1px solid var(--hp-line);border-radius:10px;padding:12px;margin-top:8px}
.hp-fine{font-size:13px;line-height:1.45;color:var(--hp-mute);margin-top:8px}
.hp-link{color:var(--hp-coral-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
/* an article: the words, then on a computer the side column */
.hp-page{display:grid;gap:28px;padding:16px 0 64px}
@media(min-width:1024px){.hp-page{grid-template-columns:minmax(0,1fr) 340px;gap:64px;padding-top:32px}}
.hp-art{max-width:42em}
.hp-art h1{font-size:clamp(34px,7vw,56px)}
.hp-art h2{font-size:21px;margin:28px 0 8px}
.hp-art>p{font-size:17px;line-height:1.6;margin-top:12px;color:#2a2724}
.hp-list{margin:10px 0 0;padding-left:20px;display:grid;gap:8px}
.hp-list li{font-size:16.5px;line-height:1.55;color:#2a2724}
.hp-table{overflow-x:auto;margin-top:16px;border:1px solid var(--hp-line);border-radius:12px;background:#fff}
.hp-table table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
.hp-table th,.hp-table td{padding:10px 12px;text-align:left;border-top:1px solid #eee9e3;white-space:nowrap}
.hp-table thead th{border-top:0;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#6b645d}
.hp-table tbody th{font-weight:800}
.hp-go{margin-top:28px}
.hp-side{display:grid;gap:16px;align-content:start}
.hp-box{background:#fff;border:1px solid var(--hp-line);border-radius:16px;padding:18px}
.hp-box h2{font-size:18px;margin-bottom:6px}
.hp-box .hp-ai{margin-top:8px}
.hp-page>*,.hp-hero>*{min-width:0}
.hp-go .btn{margin:0}
.hp-table table{min-width:0}
@media(max-width:560px){.hp-table th,.hp-table td{padding:9px 8px;white-space:normal;font-size:13.5px}}
.hp-go{display:flex}
.hp .hp-go{padding:0}
@media(max-width:560px){.hp-table th,.hp-table td{padding:8px 6px;font-size:13px}.hp-table thead th{font-size:10.5px;letter-spacing:.02em}.hp-table th:first-child,.hp-table td:first-child{padding-left:10px}}
.hp-search{align-items:center}
.hp .hp-search input{height:48px;min-height:0;padding:0 16px;margin:0;box-sizing:border-box}
.hp .hp-search .hp-go{flex:none;height:48px;min-height:0;padding:0 18px;margin:0;white-space:nowrap;border-radius:999px}
/* lane dead-space (Paul, Nov 9: "empty space here"): on a computer the hero's words ended a third of the way down the map,
   and "Rather ask your AI?" sat alone at the foot of the page with its right half empty. It now fills the hole under the
   search, beside the map; a phone keeps the old order */
@media(min-width:1024px){
  .hp .hp-wrap:has(>.hp-hero+.hp-all+.hp-foryou){display:grid;grid-template-columns:1fr 1fr;column-gap:56px;grid-template-areas:"txt graph" "ai graph" "all all"}
  .hp .hp-wrap:has(>.hp-hero+.hp-all+.hp-foryou)>.hp-hero{display:contents}
  .hp .hp-wrap:has(>.hp-hero+.hp-all+.hp-foryou) .hp-hero-txt{grid-area:txt;padding-top:40px}
  .hp .hp-wrap:has(>.hp-hero+.hp-all+.hp-foryou) .hp-graph{grid-area:graph;align-self:start;margin-top:40px;margin-bottom:56px}
  .hp .hp-wrap:has(>.hp-hero+.hp-all+.hp-foryou)>.hp-foryou{grid-area:ai;align-self:start;margin:28px 0 56px}
  .hp .hp-wrap:has(>.hp-hero+.hp-all+.hp-foryou)>.hp-all{grid-area:all}
}
/* lane job-ask: the search's answer, first, with its one next step */
.hp-answer{margin:0 0 18px;padding:18px 20px;border:1px solid var(--hp-line);border-left:4px solid var(--hp-coral);border-radius:16px;background:#fff}
.hp-answer p{margin:0;font-size:18px;line-height:1.5;color:var(--hp-ink)}
.hp .hp-answer-go{display:inline-flex;align-items:center;margin-top:14px;min-height:44px;padding:10px 18px;font-size:15px;border-radius:999px;text-decoration:none}