/* The site footer (public/site-footer.mjs), Eugiene's approved design of 3 Nov 2026, measured from the image at its scale (1.452 image pixels
   to one CSS pixel: a 1180px measure at a 1280px window). It brings its own colours and type, because the app's stylesheets style headings,
   paragraphs, links and buttons differently from playbook.css. */
.pb-foot{--ink:#121f51;--faint:#6b7290;--rule:#f5f2f7;--spectrum-foot:linear-gradient(115deg,#70b8ff 0%,#7066ff 20%,#b840b8 40%,#ed7370 60%,#e2bd50 80%,#8abb73 100%);position:relative;isolation:isolate;overflow:hidden;margin-top:40px;background:#fff;color:var(--ink);font:400 16px/1.5 Manrope,Arial,sans-serif;letter-spacing:normal;text-align:left}
.pb-foot *{box-sizing:border-box}
.pb-foot-in{position:relative;z-index:1;max-width:1284px;margin:0 auto;padding:0 52px}
/* The first row: the line, in the hero's type, and the address field with its button inside. */
.pb-foot-top{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:44px 45px;border-top:1px solid #e4e3ee;border-bottom:1px solid var(--rule)}
.pb-foot .pb-foot-title{margin:0;color:var(--ink);font:700 38px/1.25 Manrope,Arial,sans-serif;letter-spacing:-.045em;white-space:nowrap;margin-left:3px}
.pb-foot-title em{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-style:italic;font-size:1.22em;line-height:1;letter-spacing:-.04em;padding-right:.1em;background:var(--spectrum-foot);background-clip:text;-webkit-background-clip:text;color:#7261bc;-webkit-text-fill-color:transparent}
.pb-foot-form{display:flex;align-items:center;flex:0 1 600px;min-width:0;height:53px;padding:0 6px 0 20px;border:1px solid #e6e8f3;border-radius:999px;background:#f1f2f6;transition:border-color .2s,box-shadow .2s}
.pb-foot-form:focus-within{border-color:#9aaee0;box-shadow:0 0 0 3px #b4c7f025}
.pb-foot-field{display:flex;align-items:center;gap:18px;flex:1;min-width:0}
.pb-foot-field svg{display:block;flex:none;width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pb-foot-field input[id]{flex:1;width:100%;min-width:0;height:40px;min-height:0;margin:0;padding:0;border:0;border-radius:0;outline:0;background:none;box-shadow:none;color:var(--ink);font:400 14px/1.4 Manrope,Arial,sans-serif;letter-spacing:normal}
.pb-foot-field input::placeholder{color:var(--faint);opacity:1}
.pb-foot-hide{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}
.pb-foot-form button{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;width:auto;height:41px;min-height:0;margin:0 0 0 12px;padding:0 19px 0 27px;border:0;border-radius:999px;background:var(--ink);box-shadow:none;color:#fff;font:700 15px/1 Manrope,Arial,sans-serif;letter-spacing:normal;white-space:nowrap;cursor:pointer;transition:background .2s}
.pb-foot-form button:hover{background:#26346f;transform:none;box-shadow:none}
.pb-foot-form button:focus-visible{outline:2px solid #7648ed;outline-offset:2px}
.pb-foot-form button svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* The columns: the logo and its two lines, then Product, Integrations, By business, Conversion Playbook and Company. Each takes the width of its words, so the last ends on the same right edge as the rules. */
.pb-foot-cols{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,max-content);column-gap:clamp(24px,3vw,38px);padding:44px 0 31px;border-bottom:1px solid var(--rule)}
.pb-foot-brand>a{display:block;width:136px;margin:3px 0 0 -3px;padding:0}
.pb-foot-brand img{display:block;width:100%;height:auto}
.pb-foot .pb-foot-brand p{margin:0;max-width:262px;color:var(--ink);font-size:16.5px;line-height:24px}
.pb-foot .pb-foot-brand .pb-foot-line{margin:18px 0 6px;font-size:18px;font-weight:800;letter-spacing:-.005em}
.pb-foot h2{margin:0 0 12px;color:var(--ink);font:800 17px/24px Manrope,Arial,sans-serif;letter-spacing:-.01em}
.pb-foot-cols a,.pb-foot-base a{color:var(--ink);text-decoration:none}
.pb-foot-cols a:hover,.pb-foot-base a:hover{text-decoration:underline}
.pb-foot-cols div:not(.pb-foot-brand) a{display:block;width:fit-content;padding:5px 0;font-size:16px;line-height:24px}
/* The last row. */
.pb-foot-base{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 30px;padding:26px 0 52px;font-size:14.5px;line-height:22px}
.pb-foot-base nav{display:flex;flex-wrap:wrap;gap:6px 30px;font-size:13.5px}
/* The colour wash across the bottom edge. Six fixed layers, each the same soft gradient with the Possible logo's colours moved on by one (pastel tints of
   its indigo, blue, green, gold, coral and magenta, the first layer as in the approved image), fade in one over the next; the last fades out to show
   the first again, so the lap has no jump. Only opacity moves, on the layers' own compositor layers, so nothing repaints. A white veil above them makes the fade upwards, lower in the middle than at the corners.
   Its variables are all --wash-*: live.css registers --a as an angle, and a colour in it empties the gradient on the app's pages. */
/* content-visibility: the wash does no work at all while the footer is off screen, which is nearly always. */
.pb-foot-wash{content-visibility:auto;--wash-lap:42s;--wash-1:#f3eefd;--wash-2:#e6f4fd;--wash-3:#e8ffee;--wash-4:#fffee7;--wash-5:#ffecea;--wash-6:#fbe9fb;position:absolute;z-index:0;left:0;right:0;bottom:0;height:135px;overflow:hidden;pointer-events:none}
.pb-foot-wash i{--wash-a:var(--wash-1);--wash-b:var(--wash-2);--wash-c:var(--wash-3);--wash-d:var(--wash-4);position:absolute;inset:0;background:linear-gradient(90deg,var(--wash-a) 0%,var(--wash-b) 32%,var(--wash-c) 62%,var(--wash-d) 100%);opacity:0;will-change:opacity;animation:pb-foot-wash var(--wash-lap) linear infinite;animation-delay:calc(var(--wash-lap)*(var(--wash-i) - 7)/6)}
.pb-foot-wash i:nth-child(1){opacity:1;animation:none;will-change:auto}
.pb-foot-wash i:nth-child(2){--wash-i:1;--wash-a:var(--wash-2);--wash-b:var(--wash-3);--wash-c:var(--wash-4);--wash-d:var(--wash-5)}
.pb-foot-wash i:nth-child(3){--wash-i:2;--wash-a:var(--wash-3);--wash-b:var(--wash-4);--wash-c:var(--wash-5);--wash-d:var(--wash-6)}
.pb-foot-wash i:nth-child(4){--wash-i:3;--wash-a:var(--wash-4);--wash-b:var(--wash-5);--wash-c:var(--wash-6);--wash-d:var(--wash-1)}
.pb-foot-wash i:nth-child(5){--wash-i:4;--wash-a:var(--wash-5);--wash-b:var(--wash-6);--wash-c:var(--wash-1);--wash-d:var(--wash-2)}
.pb-foot-wash i:nth-child(6){--wash-i:5;--wash-a:var(--wash-6);--wash-b:var(--wash-1);--wash-c:var(--wash-2);--wash-d:var(--wash-3);animation-name:pb-foot-wash-last}
.pb-foot-wash::after{content:"";position:absolute;inset:0;background:radial-gradient(62% 85% at 50% 0%,#fff 25%,rgba(255,255,255,0) 100%),linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 30%,rgba(255,255,255,.5) 52%,rgba(255,255,255,.88) 78%,#fff 100%)}
@keyframes pb-foot-wash{0%{opacity:0}16.666%,33.333%{opacity:1}33.334%,100%{opacity:0}}
@keyframes pb-foot-wash-last{0%{opacity:0}16.666%{opacity:1}33.333%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.pb-foot-wash i{animation:none!important;will-change:auto}}
/* On the home page the FAQ's watercolours stand on the top of the footer, with no gap. */
.home-wrap .pb-foot{margin-top:0}
/* Narrower windows: the line above the field, then the logo above the columns. */
@media(max-width:1180px){.pb-foot-in{padding-inline:clamp(20px,4.1vw,52px)}.pb-foot-top{flex-direction:column;align-items:stretch;gap:22px}.pb-foot-form{flex:none;max-width:600px;width:100%}.pb-foot-cols{grid-template-columns:repeat(5,max-content);justify-content:space-between;gap:36px 20px}.pb-foot-brand{grid-column:1/-1}}
@media(max-width:860px){.pb-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:normal}}
@media(max-width:700px){.pb-foot-top{padding-top:36px}.pb-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;padding-block:36px 34px}.pb-foot .pb-foot-title{font-size:clamp(30px,9.2vw,36px);line-height:1.2;white-space:normal}.pb-foot-title em{display:inline-block}.pb-foot .pb-foot-brand p{max-width:none}.pb-foot-base{padding-bottom:44px}}
/* Phones, as the hero does: the field on its own line and the button under it. */
@media(max-width:560px){.pb-foot-form{flex-direction:column;align-items:stretch;gap:12px;height:auto;padding:0;border:0;border-radius:0;background:none}.pb-foot-form:focus-within{box-shadow:none}.pb-foot-field{flex:none;height:53px;padding:0 20px;border:1px solid #e6e8f3;border-radius:999px;background:#f1f2f6}.pb-foot-field:focus-within{border-color:#9aaee0;box-shadow:0 0 0 3px #b4c7f025}.pb-foot-form button{width:100%;height:50px;margin:0}.pb-foot-field input[id]{font-size:16px}}
/* Every public page keeps this footer, signed in or not (6 Nov 2026, Eugiene). */
.pb-foot-nb{white-space:nowrap}
/* While a screen has drawn nothing yet, the footer waits below the first screen instead of painting at the top and being
   pushed away (10 Nov 2026: measured as a 0.48 to 0.79 layout shift at every Discover load). */
#main:empty{min-height:100vh}