/* The AI Policy Builder (policy-builder.main.html + policy-builder.js). Mobile first; the .hp root is the container.
   The questions take after the quiz. Sunrise stays on buttons, so the progress bar and the picks are solid navy and green. */
/* clip, not hidden, so the action column can stick */
.hp:has(#pb){overflow:clip}
.hp #pb section{padding-block:56px}
.hp .pb-sec-h{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;max-width:760px}
.hp .pb-sec-h .h2{font-size:clamp(36px,5cqw,56px);line-height:.94;outline:0}
.hp .pb-sec-h .lead{font-size:19px;line-height:1.5}
.hp .pb-link{background:none;border:0;padding:6px 0;font-family:var(--f-mono);font-size:14.5px;color:var(--ink2);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.hp .pb-link:hover{color:var(--ink);text-decoration-color:currentColor}
.hp .pb-fine{margin:0;font-family:var(--f-mono);font-size:13.5px;line-height:1.5;color:var(--ink2)}
.hp .pb-acts{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.hp .pb-acts .btn,.hp .pb-side .btn,.hp .pb-nav .btn{border:0;cursor:pointer;font-family:inherit;justify-content:center}

/* ---------------------------------------------------------------- the intro */
.hp .pb-hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.hp .pb-hero-t{display:flex;flex-direction:column;gap:20px;min-width:0}
.hp .pb-hero .h1{font-size:clamp(46px,6.4cqw,84px);line-height:.9}
.hp .pb-hero .lead{font-size:20px}
.hp .pb-hero-f{min-width:0}
/* what comes out, set in type: a page from a real draft, cropped by the bottom of the frame */
.hp .pb-peek{background:#fff;border-radius:var(--rad-card,10px);box-shadow:var(--card-sh);padding:26px 26px 0;max-height:400px;overflow:hidden;position:relative;font-size:15px;line-height:1.5}
.hp .pb-peek p{margin:0 0 8px}
.hp .pb-peek-t{font-stretch:70%;font-weight:850;text-transform:uppercase;font-size:34px;line-height:1;letter-spacing:-.005em}
.hp .pb-peek-m{font-family:var(--f-mono);font-size:12.5px;color:var(--ink2)}
.hp .pb-peek .pb-peek-h{font-weight:750;margin:16px 0 3px}
.hp .pb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 40px}
.hp .pb-list li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:10px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.hp .pb-list .num{grid-row:1/3;font-family:var(--f-mono);font-size:15px;color:var(--acc)}
.hp .pb-list b{font-size:18px;font-weight:700}
.hp .pb-list span:last-child{font-size:16px;color:var(--ink2)}

/* ---------------------------------------------------------------- a question */
.hp .pb-q{min-height:72vh}
.hp #pb[data-screen="q"] .reads{display:none}
.hp .pb-col{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.hp .pb-prog{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.hp .pb-prog i{display:block;height:100%;width:calc(var(--p) * 100%);background:var(--ink);border-radius:99px;transition:width .35s cubic-bezier(.22,1,.36,1)}
.hp #pb-form{display:flex;flex-direction:column;gap:16px}
.hp .pb-count{margin:0;font-family:var(--f-mono);font-size:14px;color:var(--acc)}
.hp .pb-qt{margin:0;font-stretch:86%;font-weight:760;font-size:30px;line-height:1.1;letter-spacing:-.005em;text-wrap:balance;outline:0}
.hp .pb-sub{margin:-6px 0 0;font-size:18px;line-height:1.45;color:var(--ink2)}
.hp .pb-fs,.hp .pb-row{border:0;margin:0;padding:0;min-width:0}
.hp .pb-leg{padding:0;margin:0 0 12px;font-stretch:86%;font-weight:760;font-size:22px;line-height:1.15}
.hp .pb-leg span{font-family:var(--f-mono);font-stretch:100%;font-weight:400;font-size:13.5px;color:var(--ink2)}
.hp .pb-fs+.pb-fs{margin-top:14px}
.hp .pb-opts{display:flex;flex-direction:column;gap:10px}
.hp .pb-opts.chips{flex-direction:row;flex-wrap:wrap}
.hp .pb-o{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:center;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:var(--rad-card,10px);padding:15px 16px;font-size:17px;line-height:1.35;cursor:pointer;transition:box-shadow .15s}
.hp .pb-o:hover{box-shadow:inset 0 0 0 1.5px var(--ink2)}
.hp .pb-o input{position:absolute;opacity:0;width:22px;height:22px;margin:0;cursor:pointer}
.hp .pb-o .bx{width:22px;height:22px;box-shadow:inset 0 0 0 1.5px var(--ink2);background:#fff;display:block}
.hp .pb-o input[type=radio]+.bx{border-radius:50%}
.hp .pb-o input[type=checkbox]+.bx{border-radius:5px}
.hp .pb-o input:checked+.bx{background:var(--ink);box-shadow:none}
.hp .pb-o input[type=radio]:checked+.bx{box-shadow:inset 0 0 0 6px var(--ink);background:#fff}
.hp .pb-o input[type=checkbox]:checked+.bx{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.4 3.4L16.2 7.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.hp .pb-o:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink)}
.hp .pb-o input:focus-visible+.bx{outline:2px solid var(--ink);outline-offset:3px}
.hp .pb-o .tx{min-width:0}
.hp .pb-pick{display:inline-block;margin-left:10px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.02em;color:#2c6b3f;background:var(--tint);border-radius:99px;padding:2px 9px;white-space:nowrap}
.hp .pb-o.chip{padding:10px 14px;font-size:16px;gap:10px}
.hp .pb-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.hp .pb-f label{font-size:14.5px;font-weight:650}
.hp .pb-f input{width:100%;background:#fff;color:var(--ink);border:0;border-radius:var(--rad,6px);padding:13px 14px;font-size:16px;box-shadow:inset 0 0 0 1.5px rgba(29,74,110,.6)}
.hp .pb-f input::placeholder{color:#587387}
.hp .pb-f input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.hp .pb-other{margin-top:12px;max-width:420px}
/* the data tiers */
.hp .pb-tiers{display:grid;gap:4px;font-size:16px;line-height:1.45;background:var(--tint);border-radius:var(--rad-card,10px);padding:14px 16px}
.hp .pb-tiers p{margin:0}
.hp .pb-grid{display:flex;flex-direction:column}
.hp .pb-row{display:flex;flex-direction:column;gap:9px;padding:13px 0;border-top:1px solid var(--line)}
.hp .pb-row:last-child{border-bottom:1px solid var(--line)}
.hp .pb-row legend{padding:13px 0 0;font-size:17px;line-height:1.3;font-weight:600;float:left;width:100%}
.hp .pb-seg{clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hp .pb-seg label{position:relative;cursor:pointer}
.hp .pb-seg input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.hp .pb-seg span{display:flex;align-items:center;justify-content:center;text-align:center;height:100%;min-height:44px;padding:7px 6px;border-radius:var(--rad,6px);background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:14.5px;font-weight:600;line-height:1.15}
.hp .pb-seg label:hover span{box-shadow:inset 0 0 0 1.5px var(--ink2)}
.hp .pb-seg input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.hp .pb-seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.hp .pb-msg{margin:0;font-size:16px;font-weight:600;color:#a0332e}
.hp .pb-msg:empty{display:none}
.hp .pb-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.hp .pb-nav-r{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 20px}

/* ---------------------------------------------------------------- the draft */
.hp .pb-res-in{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
.hp .pb-res-l{display:flex;flex-direction:column;gap:14px;min-width:0}
.hp .pb-sheet{background:#fff;border-radius:var(--rad-card,10px);box-shadow:var(--card-sh);padding:30px 22px 26px;font-size:16.5px;line-height:1.55;min-width:0;overflow-wrap:anywhere}
.hp .pb-sheet-t{margin:0;font-stretch:70%;font-weight:850;text-transform:uppercase;font-size:40px;line-height:1;letter-spacing:-.005em}
.hp .pb-sheet-m{margin:10px 0 0;font-family:var(--f-mono);font-size:13.5px;line-height:1.45;color:var(--ink2)}
.hp .pb-sheet h3{margin:20px 0 3px;font-size:17px;font-weight:750}
.hp .pb-sheet p{margin:0 0 6px}
.hp .pb-sheet .pb-sheet-m{margin-bottom:0}
.hp .pb-sheet-f{margin:22px 0 0!important;padding-top:12px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink)}
.hp .pb-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.hp .pb-side .btn{width:100%}
.hp .pb-side .pb-f{margin-bottom:4px}
.hp .pb-side-l{display:flex;flex-wrap:wrap;gap:4px 22px}
.hp .pb-say{margin:0;font-size:15.5px;line-height:1.45;background:var(--tint);border-radius:var(--rad-card,10px);padding:11px 15px}
.hp .pb-say:empty{display:none}
.hp .pb-say a{font-weight:650;text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- before you adopt it */
.hp .pb-flags{background:#fff;border-radius:var(--rad-card,10px);box-shadow:inset 0 0 0 1.5px var(--line);padding:20px 22px;margin-bottom:22px}
.hp .pb-flags h3{margin:0 0 10px;color:var(--acc)}
.hp .pb-flags ul{list-style:none;margin:0;padding:0}
.hp .pb-flags li{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.hp .pb-flags li:first-child{border-top:0}
.hp .pb-flags p{margin:0;flex:1 1 300px;font-size:16.5px;line-height:1.45}
.hp .pb-steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.hp .pb-steps3 li{display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--card,#fff);border-radius:var(--rad-card,10px);box-shadow:var(--card-sh);padding:22px;min-width:0}
.hp .pb-steps3 .num{font-family:var(--f-mono);font-size:14px;color:var(--acc)}
.hp .pb-steps3 h3{margin:0;font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:23px;line-height:1.05}
.hp .pb-steps3 p{margin:0;font-size:16.5px;line-height:1.5;color:var(--ink2)}
.hp .pb-steps3 .tl{margin-top:auto;font-size:15px}

/* ---------------------------------------------------------------- Claude */
.hp .pb-ways{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.hp .pb-way{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;background:#fff;border:0;border-radius:var(--rad-card,10px);box-shadow:var(--card-sh);padding:22px;cursor:pointer;font-family:inherit;color:var(--ink);transition:transform .2s ease}
.hp .pb-way:hover{transform:translateY(-2px)}
.hp .pb-way b{font-stretch:80%;font-weight:800;text-transform:uppercase;font-size:23px;line-height:1.05}
.hp .pb-way span{font-size:16.5px;line-height:1.5;color:var(--ink2)}
.hp .pb-way .pb-go{margin-top:auto;padding-top:6px;font-weight:650;font-size:15px;line-height:1.3;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.hp .pb-claude .pb-say{margin-top:14px}
.hp .pb-share{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;margin-top:26px}
.hp .pb-share .wc{color:var(--ink2)}

/* ---------------------------------------------------------------- the sign-up, copied from prompts.css so this page doesn't load it */
.hp .lib-form{display:flex;flex-direction:column;gap:12px;max-width:560px}
.hp .lib-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.hp .lib-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.hp .lib-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.hp .lib-f label{font-size:13.5px;font-weight:650}
.hp .lib-f input{width:100%;background:#fff;color:var(--ink);border:0;border-radius:var(--rad,6px);padding:14px;font-size:16px;box-shadow:inset 0 0 0 1.5px rgba(29,74,110,.2)}
.hp .lib-f input::placeholder{color:#587387}
.hp .lib-f input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hp .lib-go{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.hp .lib-go .btn{cursor:pointer;border:0;font-family:inherit}
.hp .lib-go .btn[disabled]{opacity:.7;cursor:progress}
.hp .lib-back{font-size:15px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.hp .lib-msg{margin:0;font-size:15px;line-height:1.4}
.hp .lib-msg:empty{display:none}
.hp .lib-member{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.hp .lib-hi{margin:0;font-size:18px;font-weight:650}
.hp .pb-next .pf-foot{margin:0;font-family:var(--f-mono);font-size:13px;color:var(--ink2D)}
.hp .pb-next .pf-foot a{text-decoration:underline;text-underline-offset:3px}
@container (min-width:560px){.hp .lib-fields{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.hp .pb-next-in{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center}
.hp .pb-next-t{display:flex;flex-direction:column;gap:16px;min-width:0}
.hp .pb-next .h2{font-size:clamp(36px,5cqw,56px);line-height:.94}
.hp .pb-next .lead{font-size:19px;line-height:1.5}
.hp .pb-keep{margin:0;font-family:var(--f-mono);font-size:13.5px;line-height:1.5;color:var(--ink2D)}
.hp .pb-next-f{min-width:0}

/* ---------------------------------------------------------------- wider screens */
@container (min-width:640px){
  .hp .pb-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp .pb-seg span{font-size:15px}
  .hp .pb-sheet{padding:40px 44px 34px}
  .hp .pb-sheet-t{font-size:50px}
  .hp .pb-qt{font-size:36px}
}
@container (min-width:900px){
  .hp #pb section{padding-block:80px}
  .hp .pb-hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px}
  .hp .pb-res-in{grid-template-columns:minmax(0,1fr) 320px;gap:40px}
  .hp .pb-side{position:sticky;top:24px}
  .hp .pb-steps3,.hp .pb-ways{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .hp .pb-row{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:center}
  .hp .pb-row legend{float:none;display:contents}
  .hp .pb-next-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px}
}
@media (prefers-reduced-motion:reduce){
  .hp .pb-prog i,.hp .pb-o,.hp .pb-way{transition:none}
  .hp .pb-way:hover{transform:none}
}