/* Drawn product frames for the marketing site. Loaded after site.css (and after
   home.css on the home page). Every class starts with pf- so nothing collides.
   Every value traces to the :root in site.css. A frame is a white panel with the
   panel radius and the soft shadow, drawn at the app's 13px, on the app's cool
   grey where the app itself is grey. Nothing here is an image. */

/* the frame */
.pf{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sh);font-size:13px;line-height:1.5;color:var(--ink);text-align:left;overflow:hidden;container-type:inline-size;font-weight:500}
.pf p{color:var(--ink-2);margin:0;font-size:inherit;line-height:inherit}
.pf b,.pf strong{font-weight:700;color:var(--ink)}
.pf small{font-size:11px;color:var(--mut)}
.pf svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--app-line);min-height:46px}
.pf-title{font-weight:700;font-size:13px;letter-spacing:-.01em;color:var(--ink)}
.pf-top .pf-lbl{margin:0}
.pf-spacer{flex:1}
.pf-body{padding:16px}
.pf-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.pf-cols{display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:stretch}
.pf-rail{border-left:1px solid var(--app-line);background:var(--app-bg);padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-rail .pf-lbl{margin-bottom:6px}
.pf-main{min-width:0;padding:16px}
.pf-grey{background:var(--app-bg)}

/* cards, pills, fits, ticks, buttons */
.pf-card{background:#fff;border:1px solid var(--app-line);border-radius:var(--r-card);padding:12px 14px;min-width:0}
.pf-card+.pf-card{margin-top:10px}
.pf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pf-cards .pf-card+.pf-card{margin-top:0}
.pf-name{font-weight:700;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-sub{color:var(--mut);font-size:12px;margin-top:1px}
.pf-why{margin-top:8px;color:var(--ink-2);font-size:12px;line-height:1.5}
.pf-fit{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--tint);color:var(--brand);font-weight:800;font-size:12px;letter-spacing:-.01em;flex:none;font-variant-numeric:tabular-nums}
.pf-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);background:var(--soft);color:var(--mut);font-weight:700;font-size:11px;letter-spacing:.02em;flex:none}
.pf-badge--green{background:var(--green-tint);color:var(--green)}
.pf-badge--brand{background:var(--tint);color:var(--brand)}
.pf-pills{display:flex;flex-wrap:wrap;gap:6px}
.pf-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 4px;border-radius:var(--r-pill);border:1px solid var(--app-line);background:#fff;color:var(--ink);font-weight:600;font-size:12px}
.pf-pill i{width:16px;height:16px;border-radius:50%;background:var(--brand);color:#fff;font-style:normal;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.pf-pill.off{color:var(--mut-2);border-style:dashed}
.pf-pill.off i{background:var(--grey)}
.pf-tick{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-size:12px;font-weight:600;white-space:nowrap}
.pf-tick svg{width:14px;height:14px;stroke-width:2.4}
.pf-tick--mut{color:var(--mut)}
.pf-link{color:var(--brand);font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:4px;margin-top:8px}
.pf-link svg{width:13px;height:13px}
.pf .btn{font-size:13px;padding:8px 12px;border-radius:var(--r-btn);gap:6px}
.pf .btn svg{width:14px;height:14px}
.pf-quiet{display:inline-flex;align-items:center;font-weight:600;font-size:13px;color:var(--mut);padding:8px 10px;border-radius:var(--r-btn)}
.pf-quiet:hover{background:var(--soft);color:var(--ink)}
.pf-acts{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.pf-note{display:flex;gap:8px;align-items:flex-start;background:var(--amber-tint);color:var(--amber);border-radius:var(--r-btn);padding:8px 10px;font-size:12px;font-weight:600;line-height:1.45;margin-top:10px}
.pf-note svg{width:14px;height:14px;flex:none;margin-top:2px}
.pf-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--tint);color:var(--brand);font-weight:800;font-size:11px;margin-left:auto;font-variant-numeric:tabular-nums}

/* inputs drawn the way the app draws them */
.pf-input{display:flex;align-items:center;gap:8px;border:1px solid var(--app-line);border-radius:var(--r-btn);padding:0 12px;height:36px;background:var(--app-soft);color:var(--mut-2);font-size:13px;min-width:0}
.pf-input svg{width:16px;height:16px;flex:none;color:var(--mut)}
.pf-input input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);height:100%}
.pf-input input:focus{outline:0}
.pf-input input::placeholder{color:var(--mut-2)}
.pf-input--lg{height:auto;min-height:44px;padding:9px 8px 9px 12px;background:#fff;border-color:var(--line);box-shadow:var(--sh);font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.pf-input--lg>span{min-width:0}
.pf-input--lg .pf-cursor{width:1px;height:18px;background:var(--brand);flex:none;animation:pf-blink 1s steps(2,start) infinite}
.pf-input--lg .btn{margin-left:auto;flex:none}
@keyframes pf-blink{to{opacity:0}}
.pf-switch{position:relative;display:inline-block;width:34px;height:20px;border-radius:var(--r-pill);background:var(--grey);flex:none;vertical-align:middle;transition:background 150ms var(--ease)}
.pf-switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sh);transition:transform 150ms var(--ease)}
.pf-switch.on{background:var(--brand)}
.pf-switch.on:after{transform:translateX(14px)}
.pf-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pf-row b{font-size:12px}
.pf-seg{display:inline-flex;background:var(--app-line-2);border:1px solid var(--app-line);border-radius:var(--r-btn);padding:2px;font-size:12px;font-weight:700}
.pf-seg span{padding:5px 10px;border-radius:var(--r-pill);color:var(--mut);white-space:nowrap}
.pf-seg span.on{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.pf-edit{border:1px dashed var(--grey);border-radius:var(--r-btn);padding:10px 12px;font-size:12px;color:var(--ink-2);line-height:1.5;background:#fff}
.pf-field{margin-bottom:10px}
.pf-field label{display:block;font-size:11px;font-weight:700;color:var(--mut);margin-bottom:4px}
.pf-field .pf-input{height:32px;font-size:12px;color:var(--ink);background:#fff}

/* meters and bars */
.pf-meter{display:block;height:6px;border-radius:var(--r-pill);background:var(--app-line);overflow:hidden;min-width:60px}
.pf-meter i{display:block;height:100%;border-radius:var(--r-pill);background:var(--brand);transition:width .3s var(--ease)}
.pf-meter--green i{background:var(--green)}
.pf-meter--wide{height:8px}
.pf-meterline{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--ink-2);min-width:0}
.pf-meterline .pf-meter{flex:1}
.pf-bars{display:flex;flex-direction:column;gap:10px}
.pf-bar{font-size:12px;font-weight:600;color:var(--ink-2)}
.pf-bar .pf-row{margin-bottom:4px}
.pf-bar .pf-row b{color:var(--ink);font-variant-numeric:tabular-nums}

/* the log: time on the left, lines typed one at a time by product.js */
.pf-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-tint);flex:none;animation:pf-pulse 2s var(--ease) infinite}
@keyframes pf-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* product.js marks a frame .is-idle while it is off screen, so the blinking rests */
.is-idle .pf-dot,.is-idle .pf-caret,.is-idle .pf-cursor{animation-play-state:paused}
.pf-log{display:flex;flex-direction:column;gap:8px}
.pf-line{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start;color:var(--ink-2)}
.pf-line time{color:var(--mut-2);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;padding-top:2px}
.pf-line q{quotes:none;color:var(--ink);font-weight:600}
.pf-js [data-pf-log] .pf-line{opacity:0;transform:translateY(4px)}
.pf-js [data-pf-log] .pf-line.is-on{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.pf-js [data-pf-after]{opacity:0;transform:translateY(6px)}
.pf-js [data-pf-after].is-on{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pf-js [data-pf-log].is-done .pf-caret{display:none}
.pf-caret{display:inline-block;width:1px;height:14px;background:var(--brand);vertical-align:-2px;margin-left:2px;animation:pf-blink 1s steps(2,start) infinite}

/* tables inside a frame: undo the text page table and scroll in a box on phones */
.pf-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pf table{margin:0;font-size:13px;border:0;border-radius:0;background:none;width:100%;min-width:640px}
.pf th{padding:8px 12px;font-size:11px;letter-spacing:.06em;background:var(--app-soft);border-bottom:1px solid var(--app-line);white-space:nowrap}
.pf td{padding:10px 12px;border-bottom:1px solid var(--app-line-2);color:var(--ink-2);vertical-align:middle}
.pf td b{white-space:nowrap}
.pf td.pf-cell-why{min-width:220px;font-size:12px}
.pf tr:last-child td{border-bottom:0}
.pf-foot{padding:10px 16px;border-top:1px solid var(--app-line);font-size:12px;color:var(--mut);font-weight:600;display:flex;gap:14px;flex-wrap:wrap}
.pf-foot b{color:var(--ink)}
.pf-contact{display:flex;gap:10px;flex-wrap:wrap}

/* sources strip under a search */
.pf-sources{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--mut);font-weight:600;margin-top:10px}
.pf-src{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:var(--soft);color:var(--ink-2);font-size:11px;font-weight:700}
.pf-src i{width:6px;height:6px;border-radius:50%;background:var(--brand);display:inline-block}

/* steps down the middle joined by a line, for sequences and flows */
.pf-steps{display:flex;flex-direction:column;align-items:stretch;position:relative}
.pf-step{position:relative;background:#fff;border:1px solid var(--app-line);border-radius:var(--r-card);padding:10px 12px;display:flex;align-items:flex-start;gap:10px;box-shadow:var(--sh)}
.pf-step>svg{width:16px;height:16px;flex:none;color:var(--brand);margin-top:2px}
.pf-step .pf-step-t{font-weight:700;color:var(--ink);font-size:12.5px}
.pf-step .pf-step-s{font-size:12px;color:var(--mut)}
.pf-step--in{border-color:var(--brand);box-shadow:0 0 0 3px var(--tint)}
.pf-step--trigger{background:var(--night);color:#fff;border-color:var(--night)}
.pf-step--trigger .pf-step-t{color:#fff}
.pf-step--trigger .pf-step-s{color:var(--grey-2)}
.pf-step--trigger>svg{color:var(--brand-2)}
.pf-step--end{background:var(--soft);box-shadow:none;justify-content:center;color:var(--mut);font-weight:700;font-size:12px;padding:8px}
.pf-join{position:relative;height:30px;width:1px;background:var(--grey);margin:0 auto;flex:none}
.pf-join .pf-plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid var(--grey);color:var(--mut);display:inline-flex;align-items:center;justify-content:center}
.pf-join .pf-plus svg{width:10px;height:10px;stroke-width:2.4}
.pf-join .pf-yn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);background:var(--green-tint);color:var(--green);white-space:nowrap}
.pf-join .pf-yn--no{background:var(--coral-tint);color:var(--coral)}
.pf-fork{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative}
.pf-fork:before{content:"";position:absolute;left:25%;right:25%;top:0;height:1px;background:var(--grey)}
.pf-fork>div{display:flex;flex-direction:column;min-width:0}
.pf-fork .pf-step{padding:8px 10px}
.pf-fork .pf-step .pf-step-t{font-size:12px}

/* the sequence header */
.pf-seqhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pf-seqhead .pf-meterline{flex:1;min-width:200px}
.pf-seqhead .pf-meter{max-width:180px}

/* the flow canvas: a dot grid drawn by an inline SVG pattern, nodes on top */
.pf-canvas{position:relative;padding:20px 24px 24px;background:var(--app-bg);min-height:200px;overflow:hidden}
.pf-dots{position:absolute;inset:0;width:100%;height:100%;color:var(--grey);pointer-events:none;stroke:none;fill:none}
.pf-canvas>.pf-steps{position:relative;max-width:360px;margin:0 auto}
.pf-side{border-left:1px solid var(--app-line);background:#fff;padding:16px;min-width:0}
.pf-side .pf-lbl{margin-bottom:8px}
.pf-side h4{font-size:13px;letter-spacing:-.01em;font-weight:700;margin:0 0 12px;line-height:1.3}

/* the comparison matrix */
.pf-matrix table{min-width:720px}
.pf-matrix th:first-child,.pf-matrix td:first-child{text-align:left;min-width:220px;position:sticky;left:0;background:#fff;z-index:1;color:var(--ink);font-weight:600}
.pf-matrix th:first-child{background:var(--app-soft)}
.pf-matrix th,.pf-matrix td{text-align:center}
.pf-matrix th{white-space:normal;line-height:1.3;vertical-align:bottom;min-width:110px}
.pf-matrix td{padding:9px 12px}
.pf-matrix .is-us{background:var(--tint-2)}
.pf-matrix th.is-us{color:var(--brand);background:var(--tint)}
.pf-sym{width:16px;height:16px;display:inline-block;vertical-align:middle;color:var(--ink-2);stroke:none}
.pf-sym--empty{color:var(--grey)}
.is-us .pf-sym{color:var(--brand)}
.pf-defs{position:absolute;width:0;height:0;overflow:hidden}

/* the five steps strip */
.pf-five{background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sh);padding:28px 32px;text-align:left}
.pf-five ol{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:pf-step}
.pf-five li{position:relative;padding:0 18px 0 0;margin-right:18px;border-right:1px solid var(--line-2);display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.pf-five li:last-child{border-right:0;margin-right:0;padding-right:0}
.pf-five li .lbl{margin:0;color:var(--ink);line-height:1.35}
.pf-five li .lbl:before{content:counter(pf-step) ". ";counter-increment:pf-step;color:var(--brand)}
.pf-five li svg{width:22px;height:22px;fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;padding:4px;border-radius:50%;background:var(--green-tint);box-sizing:content-box;order:1}
.pf-five-foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-2)}
.pf-five .pf-claim{font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.5;max-width:60ch}
.pf-five .pf-claim em{font-style:normal;color:var(--brand)}
.pf-source{display:block;margin-top:8px;font-size:.82rem;color:var(--mut)}
.pf-after{margin-top:20px;font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.5;max-width:64ch}

/* the room tabs (Hiring Room frame) */
.pf-tabs{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--app-line);background:var(--app-soft)}
.pf-tabs span{padding:8px 12px;font-weight:600;font-size:12px;color:var(--mut);border-radius:var(--r-btn) var(--r-btn) 0 0;border:1px solid transparent;border-bottom:0;margin-bottom:-1px}
.pf-tabs span.on{background:#fff;color:var(--ink);border-color:var(--app-line);font-weight:700}
.pf-cand{padding:16px}
.pf-cand .pf-name{font-size:15px;letter-spacing:-.02em}
.pf-cand .pf-role{font-weight:700;font-size:13px;margin-top:10px;color:var(--ink)}

/* the slider under the sequence frame */
.pf-block{display:flex;flex-direction:column;gap:20px}
.pf-slider{background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sh);padding:20px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 32px;align-items:center;font-size:13px}
.pf-slider label{font-weight:700;color:var(--ink);font-size:13px;display:flex;justify-content:space-between;gap:12px}
.pf-slider label output{color:var(--brand);font-variant-numeric:tabular-nums}
.pf-slider input[type=range]{width:100%;accent-color:var(--brand);margin:6px 0 0;cursor:pointer}
.pf-slider .pf-cred{text-align:right;grid-row:1/3;grid-column:2}
.pf-slider .pf-cred small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.pf-slider .pf-cred b{display:block;font-size:2rem;letter-spacing:-.04em;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums;margin:4px 0 8px}
.pf-slider .pf-cred .pf-meter{width:120px;margin-left:auto}
.pf-slider [data-pf-sentence]{grid-column:1/-1;color:var(--ink-2);font-size:13px;font-weight:600;padding-top:8px;border-top:1px solid var(--line-2)}

/* a frame in a story split's figure slot: let the figure fit the drawing */
.split figure.pf-figure,.split figure:has(>.pf),.split figure:has(>.pf-block){aspect-ratio:auto;overflow:visible;background:none;border:0;box-shadow:none;border-radius:0}

/* tiles: a .shot that is drawn instead of photographed */
.pf-tile{font-size:13px;line-height:1.5;color:var(--ink);text-align:left;font-weight:500;padding-right:36px}
.pf-tile svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-tile p{margin:0;color:var(--ink-2);font-size:12px;line-height:1.5}
.pf-tile .btn{font-size:13px;padding:8px 12px;border-radius:var(--r-btn);gap:6px}
.pf-tile .btn svg{width:14px;height:14px}
.pf-tile .pf-top{padding:10px 14px;min-height:40px}
.pf-tile .pf-body{padding:12px 14px}
.pf-tile .pf-line{grid-template-columns:36px minmax(0,1fr);font-size:12px}
.pf-tile .pf-step{padding:8px 10px}
.pf-tile .pf-input--lg{min-height:38px;font-size:12.5px;padding:7px 10px}
.pf-tile table{min-width:0}
.pf-tile td{padding:8px 10px;font-size:12px}
.pf-tile .pf-card{padding:10px 12px}
.pf-tile .pf-acts{margin-top:8px}
.pf-tile .pf-meterline{font-size:12px}
.pf-tile .pf-note{margin-top:8px}

/* the chat mount */
.pf-chat-btn{position:fixed;right:24px;bottom:24px;z-index:70;width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--sh-lg);transition:background 150ms var(--ease),transform 150ms var(--ease)}
.pf-chat-btn:hover{background:var(--brand-dark)}
.pf-chat-btn:active{transform:scale(.96)}
.pf-chat-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-chat-btn .pf-x{display:none}
.pf-chat-btn[aria-expanded=true] .pf-bubble{display:none}
.pf-chat-btn[aria-expanded=true] .pf-x{display:block}
.pf-chat{position:fixed;right:24px;bottom:88px;z-index:70;width:360px;height:520px;max-height:calc(100vh - 112px);background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sh-lg);display:flex;flex-direction:column;overflow:hidden;font-size:14px;line-height:1.5;color:var(--ink)}
.pf-chat[hidden]{display:none}
.pf-chat-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pf-chat-head b{font-weight:800;letter-spacing:-.01em;font-size:15px}
.pf-chat-head small{display:block;font-size:12px;color:var(--mut);font-weight:500}
.pf-chat-close{margin-left:auto;width:32px;height:32px;border-radius:var(--r-btn);color:var(--mut);display:inline-flex;align-items:center;justify-content:center}
.pf-chat-close:hover{background:var(--soft);color:var(--ink)}
.pf-chat-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-chat-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--soft)}
.pf-msg{max-width:84%;padding:9px 13px;border-radius:var(--r-card);background:#fff;border:1px solid var(--line);color:var(--ink-2);font-size:13.5px;line-height:1.5;align-self:flex-start}
.pf-msg--me{align-self:flex-end;background:var(--brand);border-color:var(--brand);color:#fff}
.pf-msg a{color:var(--brand);font-weight:700}
.pf-msg--me a{color:#fff;text-decoration:underline}
.pf-chat-form{display:flex;gap:8px;align-items:center;padding:12px;border-top:1px solid var(--line)}
.pf-chat-form input{flex:1;min-width:0;height:40px;border:1px solid var(--line);border-radius:var(--r-btn);padding:0 12px;font:inherit;font-size:14px;color:var(--ink);background:#fff}
.pf-chat-form input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--tint)}
.pf-chat-form input::placeholder{color:var(--mut-2)}
.pf-chat-send{width:40px;height:40px;border-radius:var(--r-btn);background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.pf-chat-send:hover{background:var(--brand-dark)}
.pf-chat-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-chat-foot{padding:10px 16px 12px;font-size:12px;color:var(--mut);display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line-2)}
.pf-chat-foot a{color:var(--brand);font-weight:700}
.pf-chat-foot a:hover{text-underline-offset:3px;text-decoration:underline}

/* one column under 960px, and again when the frame itself is narrow */
@media(max-width:960px){
  .pf-cols{grid-template-columns:1fr}
  .pf-rail,.pf-side{border-left:0;border-top:1px solid var(--app-line)}
  .pf-cards{grid-template-columns:1fr}
  .pf-cards .pf-card+.pf-card{margin-top:0}
  .pf-five ol{grid-template-columns:repeat(3,1fr);gap:18px 0}
  .pf-five li:nth-child(3){border-right:0;margin-right:0;padding-right:0}
  .pf-slider{grid-template-columns:1fr}
  .pf-slider .pf-cred{grid-row:auto;grid-column:1;text-align:left;margin-top:4px}
  .pf-slider .pf-cred .pf-meter{margin-left:0}
}
@container (max-width:720px){
  .pf-cols{grid-template-columns:1fr}
  .pf-rail,.pf-side{border-left:0;border-top:1px solid var(--app-line)}
  .pf-cards{grid-template-columns:1fr}
}
@media(max-width:640px){
  .pf-five{padding:22px 18px}
  .pf-five ol{grid-template-columns:repeat(2,1fr);gap:16px 0}
  .pf-five li{padding-right:12px;margin-right:12px}
  .pf-five li:nth-child(3){border-right:1px solid var(--line-2);margin-right:12px;padding-right:12px}
  .pf-five li:nth-child(2n){border-right:0;margin-right:0;padding-right:0}
  .pf-body,.pf-main,.pf-rail,.pf-side{padding:14px}
  .pf-canvas{padding:16px 12px 18px}
  .pf-fork{gap:8px}
  .pf-slider{padding:16px}
  .pf-chat{right:0;bottom:0;left:0;top:0;width:100%;height:100%;max-height:none;border-radius:0;border:0}
  .pf-chat-btn{right:16px;bottom:16px}
  .pf-chat-btn.is-away{opacity:0;visibility:hidden}
  .pf-chat-btn[aria-expanded=true]{display:none}
}
@media(prefers-reduced-motion:reduce){
  .pf-dot,.pf-caret,.pf-input--lg .pf-cursor{animation:none}
  .pf-js [data-pf-log] .pf-line,.pf-js [data-pf-after]{opacity:1;transform:none;transition:none}
  .pf-meter i,.pf-switch,.pf-switch:after,.pf-chat-btn{transition:none}
}

/* the current app look (pull request 466 onward), brought to every drawn frame: a hairline ring in place
   of a border, the modal radius, ring cards, and a face beside each of the nine candidates
   (product.js sets them from one list, so a face never changes name or job between pages) */
.pf{border-color:transparent;border-radius:var(--r-modal);box-shadow:var(--sh-ring),var(--sh)}
.pf-card{border-color:transparent;box-shadow:var(--sh-ring);border-radius:var(--r-panel)}
.pf-av{flex:none;width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--app-soft);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--app-line)}
.pf-av img{display:block;width:100%;height:100%;object-fit:cover}
.pf td>b.pf-has-av,.pf-tile td>b.pf-has-av{display:inline-flex;align-items:center;gap:9px}
.pf-cand .pf-av{width:34px;height:34px}
/* the small Index tile on the home page has no room for a face beside the name */
.pf-tile--index td>b .pf-av{display:none}