/* Design C3: the owl is the guide. It patrols the questions; click one and it lands, brings the answer and perches on the card. */
.faq4{padding-block:var(--s-6)}
.faq4-head{margin-bottom:var(--s-4)}
.faq4-head .h2{margin-top:var(--s-3);font-size:clamp(34px,4.2vw,56px)}
.fz{position:relative}
.fz-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-4) var(--s-4);padding:var(--s-4) var(--s-2) 0;perspective:1100px;transform-style:preserve-3d;list-style:none}
.fz-chips li{display:block;transform-style:preserve-3d}
.fz-q{width:100%;min-height:64px;padding:12px 16px;border:0;border-radius:var(--radius);background:var(--tint-1);color:var(--ink);text-align:left;font:400 17px/1.25 var(--serif);box-shadow:0 10px 18px -14px rgba(41,45,39,.55),0 1px 0 #dfe5d2;
  transform:translateZ(var(--z,0px)) rotateX(6deg) rotateZ(var(--rz,0deg))}
.fz-chips li:nth-child(1){--z:18px;--rz:-1.2deg;--k:4}.fz-chips li:nth-child(2){--z:0px;--rz:1deg;--k:2}.fz-chips li:nth-child(3){--z:22px;--rz:-.6deg;--k:5}.fz-chips li:nth-child(4){--z:2px;--rz:1.4deg;--k:3}.fz-chips li:nth-child(5){--z:14px;--rz:-1deg;--k:4}
.fz-chips li:nth-child(6){--z:0px;--rz:.8deg;--k:2}.fz-chips li:nth-child(7){--z:16px;--rz:-1.4deg;--k:4}.fz-chips li:nth-child(8){--z:6px;--rz:.6deg;--k:3}.fz-chips li:nth-child(9){--z:20px;--rz:-.8deg;--k:5}.fz-chips li:nth-child(10){--z:0px;--rz:1.2deg;--k:2}
.fz-q:hover{background:#e1e7d4}
.fz-q[aria-pressed=true]{background:var(--deep);color:var(--paper)}

.fz-card{position:relative;min-height:210px;padding:var(--s-6);border-radius:var(--radius-lg);background:var(--surface);box-shadow:0 1px 0 #e3e7d8,0 34px 56px -40px rgba(41,45,39,.4)}
.fz-hint{font:400 20px/1.4 var(--serif);color:var(--muted)}
.fz-h{font:400 clamp(24px,2.3vw,32px)/1.2 var(--serif);letter-spacing:-.01em;margin-bottom:var(--s-3);max-width:20em;text-wrap:balance}
.fz-a{font:400 17px/1.65 var(--sans);color:var(--muted);max-width:44em;padding-right:90px}
.fz-a a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.fz-owl{position:absolute;left:0;top:0;width:64px;height:64px;padding:0;border:0;background:none;cursor:pointer;z-index:5;will-change:transform;opacity:0}
.fz.is-ready .fz-owl{opacity:1}
.fz-owl img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(41,45,39,.28))}
.fz-owl:focus-visible{outline:3px solid var(--terra);outline-offset:4px;border-radius:50%}
.fz-all{display:none}

/* without JS: every question and answer, stacked */
.fz:not(.is-js) .fz-chips,.fz:not(.is-js) .fz-card,.fz:not(.is-js) .fz-owl{display:none}
.fz:not(.is-js) .fz-all{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.fz-item{padding:var(--s-5);border-radius:var(--radius-lg);background:var(--surface)}
.fz-item h3{font:400 22px/1.2 var(--serif);margin-bottom:var(--s-2)}
.fz-item p{font:400 15px/1.6 var(--sans);color:var(--muted)}
.fz-item a{color:var(--ink);text-decoration:underline}

@media (prefers-reduced-motion:no-preference){
  .fz-q{transition:background .15s,color .15s,box-shadow .2s}
  .fz-q:hover{box-shadow:0 16px 22px -14px rgba(41,45,39,.6),0 1px 0 #dfe5d2}
  .fz-card .fz-h,.fz-card .fz-a{animation:fzIn .35s var(--ease) both}
  @keyframes fzIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .fz-owl img{animation:fzBob 2.6s ease-in-out infinite}
  .fz-owl.is-flying img{animation:fzFlap .28s ease-in-out infinite}
  @keyframes fzBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  @keyframes fzFlap{0%,100%{transform:scale(1,1)}50%{transform:scale(1.1,.9)}}
}
@media (min-width:1000px) and (max-height:820px){.fz-card{min-height:170px;padding:var(--s-5);margin-top:48px}.fz-q{min-height:56px;font-size:16px}}
@media (max-width:900px){
  .fz-chips{grid-template-columns:1fr 1fr;gap:var(--s-3);perspective:none}
  .fz-q{transform:none}
  .fz-owl{display:none}
  .fz-a{padding-right:0}
}
@media (max-width:560px){.fz-chips{grid-template-columns:1fr}}

/* the owl stays put; its orange dot is the pointer */
.fz-dot{position:absolute;left:0;top:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#d14f2d;box-shadow:0 0 0 0 rgba(209,79,45,.0);z-index:6;pointer-events:none;opacity:0;will-change:transform}
.fz.is-ready .fz-dot{opacity:1}
.fz-dot.is-hidden{opacity:0!important}
.fz.is-ready .fz-owl{opacity:1}
.fz-q{position:relative}
.fz-q.has-dot::after{content:"";position:absolute;right:-5px;top:-5px;width:13px;height:13px;border-radius:50%;background:#d14f2d;box-shadow:0 2px 6px rgba(209,79,45,.45)}
@media (prefers-reduced-motion:no-preference){
  .fz-q.ping::before{content:"";position:absolute;right:-5px;top:-5px;width:13px;height:13px;border-radius:50%;border:2px solid #d14f2d;animation:fzPing .7s ease-out both;pointer-events:none}
  @keyframes fzPing{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
  .fz-owl.is-nod img{animation:fzNod .5s var(--ease) both}
  @keyframes fzNod{0%{transform:rotate(0)}35%{transform:rotate(-9deg) translateY(2px)}100%{transform:rotate(0)}}
  .fz-owl img{animation:none}
}

.fz-chips li{pointer-events:none}
.fz-q{pointer-events:auto}
@media (prefers-reduced-motion:no-preference){
  .fz-owl.is-gulp img{animation:fzGulp .45s var(--ease) both}
  .fz-owl.is-hiccup img{animation:fzHiccup .42s ease-in-out both}
  @keyframes fzGulp{0%{transform:scale(1)}30%{transform:scale(1.14,.88)}60%{transform:scale(.94,1.08)}100%{transform:scale(1)}}
  @keyframes fzHiccup{0%{transform:rotate(0) scale(1)}20%{transform:rotate(-8deg) scale(1.08,.92)}45%{transform:rotate(7deg) scale(.95,1.07)}70%{transform:rotate(-4deg) scale(1.04)}100%{transform:rotate(0) scale(1)}}
}

/* start as a small bubble the owl sits on; grow into the answer card when a question is picked */
.fz-slot{margin-top:60px;min-height:260px;display:flex;flex-direction:column;align-items:flex-end}
.fz-card{width:100%}
.fz-card.is-compact{width:min(470px,100%);min-height:0;padding:var(--s-4) var(--s-5);border-radius:24px 24px 6px 24px}
.fz-card.is-compact .fz-hint{font-size:19px;line-height:1.35}
@media (prefers-reduced-motion:no-preference){
  .fz-card{transition:width .5s var(--ease),padding .4s var(--ease),border-radius .4s var(--ease)}
  .fz-card:not(.is-compact){animation:fzGrow .45s var(--ease) both}
  @keyframes fzGrow{from{opacity:.6;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
}
@media (min-width:1000px) and (max-height:820px){.fz-slot{margin-top:48px;min-height:210px}}
@media (max-width:900px){.fz-slot{margin-top:24px;min-height:0}.fz-card.is-compact{width:100%}}

/* centered: the small bubble and the owl sit under the middle of the chips and grow evenly into the card */
.fz-slot{align-items:center}
.fz-card.is-compact{width:min(520px,100%);text-align:center}
.fz-card.is-compact .fz-hint{font-size:20px}

/* the owl rests on a letter of the title, with room above it; more air between chips and answer */
.faq4{padding-block:var(--s-6)}
.faq4-head{margin-bottom:var(--s-6);padding-top:34px}
.fz-perch{display:inline-block}
.fz-slot{margin-top:72px}
@media (min-width:1000px) and (max-height:820px){.faq4-head{margin-bottom:var(--s-5);padding-top:28px}.fz-slot{margin-top:60px}}
@media (max-width:900px){.faq4-head{padding-top:0}}

/* robust hit areas: plain 2D offsets, no 3D layers (those made some chips hard to click) */
.fz-chips{perspective:none;transform-style:flat}
.fz-chips li{transform-style:flat;pointer-events:auto}
.fz-q{transform:rotate(var(--rz,0deg));will-change:auto;box-shadow:0 10px 18px -14px rgba(41,45,39,.55),0 1px 0 #dfe5d2}
.fz-chips li:nth-child(odd) .fz-q{margin-top:2px}
.fz-chips li:nth-child(3n) .fz-q{margin-top:8px}
.fz-chips li:nth-child(4n+1) .fz-q{margin-top:-4px}

/* the thought bubble: small circles leaving the owl's dot, then the bubble */
.fz-think{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0}
.fz.is-ready .fz-think.is-on{opacity:1}
.fz-think i{position:absolute;border-radius:50%;background:var(--surface);box-shadow:0 1px 0 #e3e7d8,0 8px 14px -8px rgba(41,45,39,.4)}
.fz-t1{width:9px;height:9px;left:0;top:0}
.fz-t2{width:15px;height:15px;left:0;top:0}
.fz-think .fz-hint{position:absolute;left:0;top:0;width:max-content;max-width:360px;padding:12px 18px;border-radius:22px;background:var(--surface);box-shadow:0 1px 0 #e3e7d8,0 16px 26px -18px rgba(41,45,39,.45);font:400 18px/1.3 var(--serif);color:var(--muted);white-space:normal}
.fz-card{margin:0;width:100%;min-height:190px}
.fz-slot{align-items:stretch}
@media (prefers-reduced-motion:no-preference){.fz-think{transition:opacity .35s var(--ease)}}
@media (max-width:900px){.fz-think{display:none}.fz-card{min-height:0}}

/* the owl perches on the PersonaKit elephant, as in the combined logo: memory carries the assistant */
.faq4-head{display:flex;align-items:flex-end;gap:var(--s-7);padding-top:64px;margin-bottom:var(--s-6)}
.fz-el{flex:none;width:150px;height:150px;margin-bottom:-6px}
@media (min-width:1000px) and (max-height:820px){.faq4-head{padding-top:50px}.fz-el{width:124px;height:124px}}
@media (max-width:900px){.faq4-head{padding-top:0}.fz-el{width:84px;height:84px}}

.faq4-head{padding-top:92px}
@media (min-width:1000px) and (max-height:820px){.faq4-head{padding-top:76px}}
@media (max-width:900px){.faq4-head{padding-top:0}}

/* smaller logos, standing on the chips at the right: the elephant is the shelf's mascot, the owl sits on its back */
.faq4-head{display:block;padding-top:var(--s-4);margin-bottom:var(--s-3)}
.fz-el{position:absolute;right:6px;top:-70px;width:96px;height:96px;margin:0;z-index:1;pointer-events:none}
.fz-owl{width:52px;height:52px}
.fz-owl img{width:52px;height:52px}
.fz-dot{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
.fz-q.has-dot::after{width:11px;height:11px}
.fz-think .fz-hint{max-width:320px;font-size:17px;padding:10px 16px}
@media (min-width:1000px) and (max-height:820px){.fz-el{width:80px;height:80px;top:-58px}.faq4-head{padding-top:var(--s-3)}}
@media (max-width:900px){.fz-el{display:none}}
.fz-el{top:-78px}
.fz-think .fz-hint{white-space:nowrap;max-width:none}
@media (min-width:1000px) and (max-height:820px){.fz-el{top:-64px}}

/* spacing: the section is its natural height; the answer area opens with a smooth height change instead of a reserved hole */
.faq4.sec{min-height:0;justify-content:flex-start;padding-block:var(--s-5) var(--s-6)}
.faq4-head{padding-top:var(--s-3);margin-bottom:var(--s-4)}
.fz-slot{display:grid;grid-template-rows:0fr;margin-top:0;min-height:0;align-items:stretch}
.fz-slot.is-open{grid-template-rows:1fr;margin-top:56px}
.fz-slot-in{overflow:hidden;min-height:0;padding-bottom:40px;margin-bottom:-40px}
.fz-card{height:210px;min-height:0;overflow:auto;margin:0}
.fz-card[hidden]{display:block}
@media (prefers-reduced-motion:no-preference){
  .fz-slot{transition:grid-template-rows .45s var(--ease),margin-top .45s var(--ease)}
}
@media (min-width:1000px) and (max-height:820px){.fz-slot.is-open{margin-top:44px}.fz-card{height:190px}}
@media (max-width:900px){.fz-slot.is-open{margin-top:24px}.fz-card{height:auto;min-height:0}}

/* the elephant is not pasted on: it stands behind the question row and rises into view, the owl hops on after */
.fz-el{z-index:0;top:-38px;opacity:0}
.fz-chips{position:relative;z-index:1}
.fz.is-ready .fz-el{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .fz.is-ready .fz-el{animation:fzRise .85s var(--ease) both}
  @keyframes fzRise{from{transform:translateY(54px);opacity:0}to{transform:none;opacity:1}}
  @keyframes fzOwlIn{from{opacity:0}to{opacity:1}}
}
@media (min-width:1000px) and (max-height:820px){.fz-el{top:-30px}}
.fz-el{top:-66px}
@media (min-width:1000px) and (max-height:820px){.fz-el{top:-54px}}
.fz-slot:not(.is-open) .fz-slot-in{padding-bottom:0;margin-bottom:0}
.fz-slot:not(.is-open) .fz-card{visibility:hidden}

.fz-word{display:inline-block}
.faq4-head{padding-top:var(--s-7)}
@media (min-width:1000px) and (max-height:820px){.faq4-head{padding-top:56px}}
@media (max-width:900px){.faq4-head{padding-top:0}}

/* the owl is drawn as one SVG: folded wings at rest, a real wing-beat while flying */
.fz-owl{width:64px;height:52px;display:block}
.fz-owl svg{width:64px;height:52px;display:block;overflow:visible;filter:drop-shadow(0 12px 10px rgba(41,45,39,.26))}
.fz-owl img{display:none}
.fz-owl .o-body,.fz-owl .w path,.fz-owl .w{fill:#3d1e12}
.fz-owl .o-face{fill:#fbf6ea}
.fz-owl .o-eye,.fz-owl .o-beak{fill:#3d1e12}
.fz-owl .w-up,.fz-owl .w-mid,.fz-owl .w-down{display:none}
.fz-owl.is-flying .w-fold{display:none}
.fz-owl.is-flying .w-mid{display:block}
@media (prefers-reduced-motion:no-preference){
  .fz-owl.is-flying .w-up{display:block;animation:wUp .34s steps(1,end) infinite}
  .fz-owl.is-flying .w-down{display:block;animation:wDown .34s steps(1,end) infinite}
  .fz-owl.is-flying .w-mid{display:block;animation:wMid .34s steps(1,end) infinite}
  @keyframes wUp{0%{visibility:visible}25%,100%{visibility:hidden}}
  @keyframes wMid{0%{visibility:hidden}25%{visibility:visible}50%{visibility:hidden}75%{visibility:visible}100%{visibility:visible}}
  @keyframes wDown{0%,50%{visibility:hidden}50%{visibility:visible}75%,100%{visibility:hidden}}
  .fz-owl.is-flying svg{animation:fzGlide .34s ease-in-out infinite}
  @keyframes fzGlide{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  .fz-owl.is-landing svg{animation:fzLand .35s var(--ease) both}
  @keyframes fzLand{0%{transform:translateY(-4px) scale(1.05,.95)}50%{transform:translateY(1px) scale(.97,1.04)}100%{transform:none}}
}
.fz-owl.is-nod svg{animation:fzNod .5s var(--ease) both}
.fz-owl.is-gulp svg{animation:fzGulp .45s var(--ease) both}
.fz-owl.is-hiccup svg{animation:fzHiccup .42s ease-in-out both}

/* one clean entrance: nothing is shown until positioned, so there is no pop or flicker */
.fz .fz-owl,.fz .fz-dot,.fz .fz-think,.fz .fz-el{visibility:hidden}
.fz.is-ready .fz-owl,.fz.is-ready .fz-dot,.fz.is-ready .fz-think,.fz.is-ready .fz-el{visibility:visible}
.fz.is-ready .fz-owl{opacity:1;animation:none}
.fz-owl svg{scale:1.18;transform-origin:50% 92%}

/* our own owl asset, with wings that appear and beat only while it flies */
.fz-owl{width:64px;height:64px;position:relative;display:block}
.fz-owl svg{display:none}
.fz-owl img{display:block;position:relative;z-index:1;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(41,45,39,.28))}
.fz-owl svg.wings{display:block;position:absolute;left:0;top:0;width:64px;height:64px;overflow:visible;z-index:0;filter:none;scale:1}
.fz-owl svg.wings .w{display:none;fill:#3d1e12}
.fz-owl.is-flying svg.wings .w-mid{display:block}
.fz-owl svg{scale:1;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .fz-owl.is-flying svg.wings .w-up{display:block;animation:wUp .34s steps(1,end) infinite}
  .fz-owl.is-flying svg.wings .w-down{display:block;animation:wDown .34s steps(1,end) infinite}
  .fz-owl.is-flying svg.wings .w-mid{animation:wMid .34s steps(1,end) infinite}
  .fz-owl.is-flying img{animation:fzGlide .34s ease-in-out infinite}
  .fz-owl.is-landing img{animation:fzLand .35s var(--ease) both}
}
.fz-owl.is-nod img{animation:fzNod .5s var(--ease) both}
.fz-owl.is-gulp img{animation:fzGulp .45s var(--ease) both}
.fz-owl.is-hiccup img{animation:fzHiccup .42s ease-in-out both}
.fz-owl{position:absolute;left:0;top:0}

/* smaller mascot pair: elephant 72px, owl 44px (the owl is not meant to match the elephant's size) */
.fz-el{width:72px;height:72px;top:-42px}
.fz-owl{width:44px;height:44px}
.fz-owl img,.fz-owl svg.wings{width:44px;height:44px}
.fz-dot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}
.fz-q.has-dot::after,.fz-q.ping::before{width:10px;height:10px;right:-4px;top:-4px}
.fz-t1{width:7px;height:7px}.fz-t2{width:11px;height:11px}
.fz-think .fz-hint{font-size:16px;padding:9px 15px}
@media (min-width:1000px) and (max-height:820px){.fz-el{width:62px;height:62px;top:-34px}}
/* when the owl docks in the private pilot logo circle, the static icon steps aside so there is never a second owl */
.inv-owl.is-docked img{visibility:hidden}

.inv-owl.owl-flies img{visibility:hidden}
/* the cream circle only exists while the owl is in it */
.inv-owl.owl-flies{background:transparent;transition:background-color .35s var(--ease)}
.inv-owl.owl-flies.is-docked{background:var(--paper)}
/* the elephant is clearly larger than the owl that sits on its back */
.fz-el{width:94px;height:94px;top:-64px}
@media (min-width:1000px) and (max-height:820px){.fz-el{width:80px;height:80px;top:-52px}}

/* cheaper to paint while it moves: a fixed ground shadow instead of a live blur filter, and layers promoted once */
.fz-owl img{filter:none}
.fz-owl::after{content:"";position:absolute;left:9px;right:9px;bottom:-3px;height:8px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(41,45,39,.28),rgba(41,45,39,0) 70%);z-index:-1;pointer-events:none}
.fz-owl,.fz-dot,.fz-think{contain:layout style}
.fz-el{will-change:transform}

/* no inner scrollbar: the card takes the height of the longest answer */
.fz-card{height:var(--card-h,220px);overflow:visible}
@media (max-width:900px){.fz-card{height:auto}}