/* FlipForge homepage: "Different goals. Same need for proof." audience selector (v1).
 * One FlipForge decision framework, five ways in. Locked palette only (black, white, silver, gold, deep gold),
 * using the homepage v10 tokens. Content is generated from marketing/content/audience-messaging.json. */

.ff10-aud{position:relative;padding:var(--pad) 0;border-top:1px solid var(--line-d);overflow:hidden;isolation:isolate}
.ff10-aud::before{content:"";position:absolute;z-index:-1;left:50%;top:-34%;width:min(1200px,140vw);aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(212,175,55,.13),rgba(212,175,55,0));pointer-events:none}

/* ---------- Head ---------- */
.ff10-aud-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.ff10-aud-head .ff10-display span{display:block;color:var(--g)}
.ff10-aud-head .ff10-lede{max-width:24em}

/* ---------- Selector ---------- */
.ff10-aud-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(48px,6vw,88px);border-bottom:1px solid var(--line-d)}
.ff10-aud-tab{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline;text-align:left;
  padding:22px 18px 24px 0;border:0;background:none;color:var(--s);font:inherit;cursor:pointer;transition:color .2s}
.ff10-aud-tab::after{content:"";position:absolute;left:0;right:18px;bottom:-1px;height:3px;background:var(--g);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ff10-aud-tab-n{grid-row:1/3;font-size:13px;font-weight:700;letter-spacing:.08em;color:rgba(139,143,152,.7);font-variant-numeric:tabular-nums}
.ff10-aud-tab strong{display:block;font-size:clamp(18px,1.55vw,23px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.ff10-aud-tab small{display:block;margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(139,143,152,.85)}
.ff10-aud-tab:hover{color:var(--w)}
.ff10-aud-tab[aria-selected="true"]{color:var(--w)}
.ff10-aud-tab[aria-selected="true"]::after{transform:scaleX(1)}
.ff10-aud-tab[aria-selected="true"] .ff10-aud-tab-n,.ff10-aud-tab[aria-selected="true"] small{color:var(--g)}
.ff10-aud-tab:focus-visible{outline-offset:-2px}

/* Without the script every audience is shown in turn, so the selector is hidden until it works. */
.ff10-aud:not(.ff10-aud-ready) .ff10-aud-tabs{display:none}
.ff10-aud:not(.ff10-aud-ready) .ff10-aud-panel+.ff10-aud-panel{margin-top:72px;padding-top:72px;border-top:1px solid var(--line-d)}

/* ---------- Panel ---------- */
.ff10-aud-panels{margin-top:clamp(40px,5vw,72px)}
.ff10-aud-panel{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,88px);align-items:start}
.ff10-aud-panel[hidden]{display:none}
.ff10-aud-ready .ff10-aud-panel.ff10-aud-enter .ff10-aud-lead,.ff10-aud-ready .ff10-aud-panel.ff10-aud-enter .ff10-aud-frame{animation:ff10-aud-in .5s cubic-bezier(.2,.7,.2,1) both}
.ff10-aud-ready .ff10-aud-panel.ff10-aud-enter .ff10-aud-frame{animation-delay:.06s}
@keyframes ff10-aud-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.ff10-aud-eyebrow{font-size:12px!important;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--g)}
.ff10-aud-headline{margin:18px 0 0;font-size:clamp(34px,3.6vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1.02;color:var(--w);text-wrap:balance}

.ff10-aud-question{margin-top:clamp(28px,3vw,40px);padding:4px 0 4px 22px;border-left:3px solid var(--g)}
.ff10-aud-question span,.ff10-aud-problem span,.ff10-aud-why span,.ff10-aud-frame-label{display:block;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--s)}
.ff10-aud-question p{margin-top:10px!important;font-size:clamp(21px,1.85vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--w)}
.ff10-aud-problem{margin-top:28px}
.ff10-aud-problem p{margin-top:10px!important;font-size:17px;line-height:1.6;color:rgba(255,255,255,.72);max-width:30em}

/* ---------- The one framework ---------- */
.ff10-aud-frame{border:1px solid var(--line-d);border-radius:18px;padding:clamp(24px,2.6vw,40px);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.ff10-aud-frame-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px}
.ff10-aud-frame-label em{font-style:normal;color:var(--g)}
.ff10-aud-signals{list-style:none;margin:22px 0 0;padding:0}
.ff10-aud-signal{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:18px;padding:20px 0;border-top:1px solid var(--line-d)}
.ff10-aud-signal:first-child{border-top:0;padding-top:4px}
.ff10-aud-signal strong{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:rgba(255,255,255,.62)}
.ff10-aud-signal p{margin-top:6px!important;font-size:15.5px;line-height:1.55;color:var(--s)}
.ff10-aud-signal .ff10-step-n{border-color:rgba(139,143,152,.55);color:var(--s)}
.ff10-aud-key{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g)}
.ff10-aud-signal.ff10-aud-focus strong{color:var(--w)}
.ff10-aud-signal.ff10-aud-focus p{color:rgba(255,255,255,.84)}
.ff10-aud-signal.ff10-aud-focus .ff10-step-n{background:var(--g);border-color:var(--g);color:var(--k)}

.ff10-aud-why{margin-top:8px;padding-top:22px;border-top:1px solid rgba(212,175,55,.45)}
.ff10-aud-why span{color:var(--g)}
.ff10-aud-why p{margin-top:10px!important;font-size:17px;font-weight:600;line-height:1.5;color:var(--w)}

.ff10-aud-note{margin-top:24px!important;font-size:13px;line-height:1.55;color:var(--s);max-width:60em}

/* ---------- Illustration (the existing "How it works" artwork, reused) ---------- */
.ff10-aud-figure{margin:clamp(28px,3vw,40px) 0 0}
.ff10-aud-figure figcaption{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--s)}
.ff10-aud-visual{aspect-ratio:16/9;max-width:520px}
.ff10-aud-visual.ff10-sv-identity img{width:27%}
.ff10-aud-visual.ff10-sv-identity .ff10-lock{width:20px;height:20px}
.ff10-aud-visual.ff10-sv-identity .ff10-lock-tl{left:33%;top:12%}.ff10-aud-visual.ff10-sv-identity .ff10-lock-tr{right:33%;top:12%;left:auto}
.ff10-aud-visual.ff10-sv-identity .ff10-lock-bl{left:33%;bottom:12%;top:auto}.ff10-aud-visual.ff10-sv-identity .ff10-lock-br{right:33%;bottom:12%;left:auto;top:auto}
.ff10-aud-visual.ff10-sv-evidence{gap:12px;padding:0 30%}
.ff10-aud-visual.ff10-sv-evidence b{margin-top:6px;font-size:clamp(18px,1.6vw,24px)}
.ff10-aud-visual.ff10-sv-max{gap:10px;padding:0 9%}
.ff10-aud-visual.ff10-sv-max .ff10-wf i{height:12px}
.ff10-aud-visual.ff10-sv-verdict{flex-direction:row;flex-wrap:wrap;gap:10px 18px}
.ff10-aud-visual.ff10-sv-verdict span{font-size:clamp(20px,2vw,30px)}

/* ---------- Next action and closing ---------- */
.ff10-aud-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ff10-aud-close{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 48px;
  margin-top:clamp(56px,6vw,96px);padding-top:32px;border-top:2px solid rgba(255,255,255,.22)}
.ff10-aud-closing{max-width:22em;font-size:clamp(24px,2.5vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--w)}
.ff10-aud-sign{font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.01em;color:var(--g)}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .ff10-aud-head{grid-template-columns:1fr}
  .ff10-aud-panel{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* All five choices stay visible on a phone: two per row, the fifth across the full width. */
  .ff10-aud-tabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:0}
  .ff10-aud-tab{flex:1 1 calc(50% - 4px);display:flex;align-items:center;justify-content:center;min-height:52px;
    padding:10px 12px;border:1px solid var(--line-d);border-radius:10px;text-align:center}
  .ff10-aud-tab:last-child{flex-basis:100%}
  .ff10-aud-tab::after{display:none}
  .ff10-aud-tab-n,.ff10-aud-tab small{display:none}
  .ff10-aud-tab strong{font-size:16px;line-height:1.2}
  .ff10-aud-tab[aria-selected="true"]{background:var(--g);border-color:var(--g);color:var(--k)}
  .ff10-aud-signal{column-gap:14px}
  .ff10-aud-visual{max-width:none}
  .ff10-aud-actions .ff10-btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .ff10-aud-tab::after{transition:none}
  .ff10-aud-ready .ff10-aud-panel.ff10-aud-enter .ff10-aud-lead,.ff10-aud-ready .ff10-aud-panel.ff10-aud-enter .ff10-aud-frame{animation:none}
}