/* Pathfinder scorecard. Site tokens come from includes/header.php;
   the teal is the accent from the Pathfinder PDF. */
.pf-hero{--pf-teal:#17a8b8;background:linear-gradient(155deg,#0d1b3e 0%,#13294f 60%,#173873 100%);padding:56px 20px 108px;text-align:center;color:#fff;position:relative;overflow:hidden}
.pf-hero::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:#17a8b8;opacity:.9;top:-150px;right:-90px}
.pf-hero>*{position:relative;z-index:1}
.pf-eyebrow{margin:0 0 6px;color:#5fd3df;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.pf-hero h1{margin:0 auto 12px;font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:2px;line-height:1.05}
.pf-hero p{max-width:640px;margin:0 auto;color:rgba(255,255,255,.8);line-height:1.65}

.pf-wrap{--pf-teal:#17a8b8;--pf-teal-dark:#0e7f8c;--pf-teal-soft:#e6f6f8;max-width:860px;margin:-72px auto 72px;padding:0 20px;position:relative;z-index:2}
.pf-card{background:#fff;border:1px solid #dbe3f2;border-radius:18px;box-shadow:0 20px 55px rgba(13,27,62,.16);padding:36px 40px;margin-bottom:22px}
.pf-card--narrow{max-width:480px;margin-left:auto;margin-right:auto}
.pf-card h2{margin:0 0 10px;color:#0d1b3e;font-size:1.55rem;line-height:1.25}
.pf-card p{color:#4b5680;line-height:1.6;margin:0 0 16px}
.pf-card a{color:var(--bright-blue,#2563eb)}

.pf-label{display:block;margin:0 0 6px;color:#0d1b3e;font-size:.9rem;font-weight:700}
.pf-input{display:block;width:100%;padding:14px 16px;margin-bottom:16px;border:1.5px solid #d3dcec;border-radius:10px;background:#f8faff;color:#17213b;font:inherit;font-size:1.05rem;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.pf-input:focus{border-color:var(--pf-teal);background:#fff;box-shadow:0 0 0 4px rgba(23,168,184,.15)}
.pf-input:disabled{opacity:.5;cursor:not-allowed}
.pf-textarea{min-height:140px;resize:vertical;line-height:1.55}
.pf-code{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:700;letter-spacing:.42em;text-align:center}
.pf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border:0;border-radius:10px;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s}
.pf-btn:active{transform:translateY(1px)}
.pf-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.pf-btn--primary{background:#0d1b3e;color:#fff}
.pf-btn--primary:hover:not(:disabled){background:#1a3a7a}
.pf-btn--ghost{background:transparent;color:#4b5680;padding-left:12px;padding-right:12px}
.pf-btn--ghost:hover{color:#0d1b3e;background:#f0f4ff}
.pf-btn--block{width:100%}
.pf-btn--large{min-height:56px;padding:14px 34px;font-size:1.08rem}
.pf-btn:focus-visible,.pf-option:focus-visible,.pf-scale-btn:focus-visible,.pf-matrix-btn:focus-visible,.pf-link:focus-visible{outline:3px solid var(--pf-teal);outline-offset:2px}
.pf-btn,.pf-option,.pf-scale-btn,.pf-matrix-btn,.pf-link{touch-action:manipulation}

.pf-link{padding:0;border:0;background:none;color:var(--bright-blue,#2563eb);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;text-align:left}
.pf-link:hover{text-decoration:underline}
.pf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:16px}
.pf-links form{margin:0}
.pf-error{margin:0 0 16px;padding:12px 14px;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#b42318;font-size:.9rem;line-height:1.5}
.pf-info{margin:0 0 16px;padding:12px 14px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;color:#1e40af;font-size:.9rem}
.pf-preview-bar{margin-bottom:14px;padding:10px 14px;border-radius:10px;background:#fff7e6;border:1px solid #fcd9a0;color:#8a5200;font-size:.88rem}
.pf-signout{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;color:#667085;font-size:.86rem}
.pf-signout .pf-link{font-size:.86rem}

/* ── quiz shell ── */
/* clip rounds the corners without making the card a scroll container, which
   would stop the mobile nav bar sticking to the bottom of the screen. */
.pf-quiz{padding:0;overflow:hidden;overflow:clip}
.pf-top{padding:22px 40px 0}
.pf-top-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pf-top-section{color:var(--pf-teal-dark)}
.pf-top-count{color:#8a93b0;white-space:nowrap}
.pf-bar{height:8px;border-radius:999px;background:#e8edf6;overflow:hidden}
.pf-bar-fill{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--pf-teal),#2563eb);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.pf-stage{padding:34px 40px 10px;min-height:400px}
.pf-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 40px 24px;border-top:1px solid #edf1f8;background:#fbfcff}
.pf-nav .pf-btn--primary{margin-left:auto;min-width:140px}
.pf-save{font-size:.8rem;color:#8a93b0;text-align:center}
.pf-save--saving,.pf-save--pending{color:#8a93b0}
.pf-save--saved::before{content:"✓ ";color:#10b981}
.pf-save--error{color:#b42318}

.pf-slide.pf-in-next{animation:pfInNext .35s cubic-bezier(.2,.8,.2,1)}
.pf-slide.pf-in-back{animation:pfInBack .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pfInNext{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes pfInBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

.pf-qnum{display:flex;align-items:center;gap:10px;margin:0 0 8px!important;color:#8a93b0!important;font-size:.85rem;font-weight:700}
.pf-required{padding:2px 8px;border-radius:999px;background:var(--pf-teal-soft);color:var(--pf-teal-dark);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.pf-title{margin:0 0 8px!important;font-size:clamp(1.35rem,3vw,1.75rem)!important;line-height:1.3!important;outline:none}
.pf-help{margin:0 0 6px!important;color:#667085!important;font-size:.95rem}
.pf-lead{font-size:1.05rem}
.pf-answer{margin-top:22px}
.pf-slide-error{margin:14px 0 0!important;color:#b42318!important;font-size:.9rem;font-weight:600}
.pf-shake{animation:pfShake .35s}
@keyframes pfShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pf-kbd-hint{margin:18px 0 0!important;color:#a3abc4!important;font-size:.78rem}
@media (hover:none){.pf-kbd-hint,.pf-key{display:none!important}}

.pf-intro-list{margin:6px 0 10px;padding:0;list-style:none}
.pf-intro-list li{position:relative;padding:10px 0 10px 32px;color:#4b5680;line-height:1.55;border-bottom:1px solid #f0f3f9}
.pf-intro-list li::before{content:"";position:absolute;left:4px;top:17px;width:12px;height:12px;border-radius:50%;background:var(--pf-teal)}

/* ── options ── */
.pf-options{display:grid;gap:10px}
.pf-options--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-option{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:12px 14px;border:1.5px solid #d8e0ee;border-radius:12px;background:#fff;color:#17213b;font:inherit;font-size:.98rem;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.pf-option:hover{border-color:var(--pf-teal);background:#f7fcfd}
.pf-option.is-selected{border-color:var(--pf-teal);background:var(--pf-teal-soft);box-shadow:inset 0 0 0 1px var(--pf-teal)}
.pf-key{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1px solid #cfd8e8;border-radius:6px;background:#f5f7fc;color:#6b7597;font-size:.75rem;font-weight:700}
.pf-option.is-selected .pf-key{background:var(--pf-teal);border-color:var(--pf-teal);color:#fff}
.pf-option-label{flex:1;line-height:1.35}
.pf-check{flex:none;width:20px;height:20px;border:2px solid #c5cfe0;border-radius:50%;position:relative;transition:all .15s}
.pf-option--multi .pf-check,.pf-option--compact .pf-check{border-radius:5px}
.pf-option.is-selected .pf-check{border-color:var(--pf-teal);background:var(--pf-teal)}
.pf-option.is-selected .pf-check::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pf-option--compact{width:auto;min-height:44px;margin-top:4px}
.pf-multi-note{margin:0 0 10px!important;color:#8a93b0!important;font-size:.85rem}

.pf-number{position:relative;max-width:320px}
.pf-number.has-prefix .pf-input{padding-left:36px}
.pf-prefix{position:absolute;left:16px;top:14px;color:#667085;font-size:1.05rem;pointer-events:none}
.pf-followup{margin-top:20px;padding:18px;border-radius:12px;background:#f7f9fd;border:1px solid #e3e9f4}
.pf-followup .pf-input{margin-bottom:0}
.pf-subquestion{margin-top:28px}
.pf-subquestion .pf-sublabel{margin:0 0 4px;color:#0d1b3e;font-size:1.05rem;font-weight:700}
.pf-subquestion .pf-options{margin-top:14px}
.pf-team-row{display:flex;align-items:center;gap:10px}
.pf-team-row .pf-option{flex:1;min-width:0}
.pf-input--count{flex:none;width:120px;margin-bottom:0;padding:12px 14px;text-align:center}

/* ── scale ── */
.pf-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:520px}
.pf-scale-btn{min-height:64px;border:1.5px solid #d8e0ee;border-radius:12px;background:#fff;color:#0d1b3e;font:inherit;font-size:1.35rem;font-weight:700;cursor:pointer;transition:all .15s}
.pf-scale-btn:hover{border-color:var(--pf-teal);background:#f7fcfd}
.pf-scale-btn.is-selected{border-color:var(--pf-teal);background:var(--pf-teal);color:#fff}
.pf-scale-ends{display:flex;justify-content:space-between;gap:16px;max-width:520px;margin-top:10px;color:#667085;font-size:.84rem;line-height:1.4}
.pf-scale-ends span:last-child{text-align:right}

/* ── matrix ── */
.pf-matrix-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
.pf-matrix{width:100%;border-collapse:separate;border-spacing:0 8px}
.pf-matrix th{font-size:.8rem;color:#667085;font-weight:700;text-align:center;padding:0 4px 4px}
.pf-matrix th.pf-matrix-corner{text-align:left}
.pf-matrix tbody th{text-align:left;color:#17213b;font-size:.95rem;font-weight:600;padding:12px 14px;background:#f7f9fd;border-radius:10px 0 0 10px}
.pf-matrix td{background:#f7f9fd;text-align:center;padding:6px 2px}
.pf-matrix td:last-child{border-radius:0 10px 10px 0}
.pf-matrix-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.pf-matrix-btn:hover{background:#e6f6f8}
.pf-dot{width:22px;height:22px;border:2px solid #b9c4d8;border-radius:50%;background:#fff;transition:all .15s}
.pf-matrix-btn.is-selected .pf-dot{border-color:var(--pf-teal);background:var(--pf-teal);box-shadow:inset 0 0 0 4px #fff}
.pf-matrix-col{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── review ── */
/* Drawn bullets: the default marker lines up with the last line of a wrapped
   button label rather than the first. */
.pf-missing-list{margin:8px 0 0;padding:0;list-style:none}
.pf-missing-list li{position:relative;margin:6px 0;padding-left:16px}
.pf-missing-list li::before{content:"";position:absolute;left:2px;top:.55em;width:5px;height:5px;border-radius:50%;background:currentColor}
.pf-summary{margin:18px 0 8px;border:1px solid #e3e9f4;border-radius:12px;overflow:hidden}
.pf-summary-section+.pf-summary-section{border-top:1px solid #e3e9f4}
.pf-summary-section summary{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;color:#0d1b3e;font-weight:700;list-style:none}
.pf-summary-section summary::-webkit-details-marker{display:none}
.pf-summary-section summary::after{content:"+";color:#8a93b0;font-weight:400;margin-left:8px}
.pf-summary-section[open] summary::after{content:"–"}
.pf-summary-section summary>span:first-child{flex:1;white-space:pre-wrap}
.pf-summary-count{color:#8a93b0;font-weight:600;font-size:.88rem}
.pf-summary-count.is-done{color:#0e7f8c}
.pf-summary dl{margin:0;padding:0 16px 10px}
.pf-summary-row{padding:10px 0;border-top:1px solid #f0f3f9}
.pf-summary-row dt{color:#4b5680;font-size:.86rem}
.pf-summary-row dd{display:flex;justify-content:space-between;gap:14px;margin:3px 0 0;color:#17213b;font-size:.94rem;white-space:pre-line}
.pf-muted{color:#a3abc4}
.pf-submit-row{display:flex;justify-content:center;margin-top:24px}

/* ── done ── */
.pf-done{text-align:center}
.pf-done p{max-width:560px;margin-left:auto;margin-right:auto}
.pf-done-tick{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:var(--pf-teal-soft);color:var(--pf-teal-dark)}
.pf-done-tick svg{width:34px;height:34px}
.pf-cal{width:100%;min-height:460px}
.pf-cal.is-ready{min-height:0}
.pf-booking .pf-cal-status{margin:24px 0 0;color:#8a93b0;font-size:.92rem;text-align:center}
.pf-booking .pf-booking-note{margin:18px 0 0;font-size:.92rem}

@media (max-width:640px){
  .pf-wrap{padding:0 12px}
  .pf-card{padding:26px 20px}
  .pf-quiz{padding:0}
  .pf-top{padding:18px 20px 0}
  .pf-stage{padding:26px 20px 6px;min-height:0}
  .pf-nav{position:sticky;bottom:0;z-index:5;padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));box-shadow:0 -6px 18px rgba(13,27,62,.06)}
  .pf-nav .pf-save{display:none}
  .pf-nav .pf-btn--primary{min-width:0;flex:1}
  .pf-options--two{grid-template-columns:1fr}
  .pf-input--count{width:96px}
  /* Calendar runs to the card edges for wider day buttons. Cal.com sizes its
     frame slightly short on phones, which leaves a scroll box inside the page;
     400px clears it. */
  .pf-booking .pf-cal{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px}
  .pf-cal iframe{min-height:400px}
  .pf-scale{gap:6px}
  .pf-scale-btn{min-height:54px;font-size:1.15rem}
  /* The matrix becomes one card per row with labelled choices. */
  .pf-matrix,.pf-matrix tbody,.pf-matrix tr,.pf-matrix th,.pf-matrix td{display:block;width:100%}
  .pf-matrix thead{display:none}
  .pf-matrix tbody tr{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;padding:12px;background:#f7f9fd;border-radius:12px}
  .pf-matrix tbody th{padding:0 0 4px;background:none;border-radius:0}
  .pf-matrix td{display:block;width:auto;padding:0;background:none}
  .pf-matrix-btn{display:inline-flex;gap:6px;width:auto;height:auto;padding:8px 12px;border:1.5px solid #d8e0ee;border-radius:999px;background:#fff}
  .pf-matrix-btn .pf-dot{display:none}
  .pf-matrix-col{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:.86rem;color:#17213b}
  .pf-matrix-btn.is-selected{border-color:var(--pf-teal);background:var(--pf-teal)}
  .pf-matrix-btn.is-selected .pf-matrix-col{color:#fff}}
@media (prefers-reduced-motion:reduce){.pf-slide,.pf-bar-fill,.pf-shake{animation:none!important;transition:none!important}}