/*
 * Drawn — the style profile / sign-up modal ("Build your profile").
 * One copy, loaded by every page that has the modal (website, product, about,
 * partner and the editorial pages), together with /style-profile.js, which
 * adds the modal's markup to the page. Edit here, not in the pages.
 *
 * Uses the page's own colour variables (--bg, --white, --green, --ink, ...).
 * The sizes pop-up on website.html (#sz-overlay) borrows these classes too.
 */
.sp-overlay{position:fixed;inset:0;background:rgba(26,26,26,0.4);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:20px}
.sp-overlay.show{display:flex}
.sp-modal{background:var(--white);border-radius:2px;padding:36px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 80px rgba(0,0,0,0.16);position:relative}
.sp-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;color:var(--ink-faint);cursor:pointer;line-height:1;padding:4px}
.sp-close:hover{color:var(--ink)}
.sp-logo{font-size:11px;font-weight:700;letter-spacing:0.28em;color:var(--green);text-transform:uppercase;margin-bottom:20px}
.sp-progress{display:flex;gap:6px;margin-bottom:28px}
.sp-dot{height:3px;flex:1;border-radius:2px;background:var(--border-mid);transition:background 0.3s}
.sp-dot.active{background:var(--green)}
.sp-title{font-family:'Zodiak',serif;font-size:26px;font-weight:400;margin-bottom:6px}
.sp-sub{font-size:13px;color:var(--ink-muted);margin-bottom:20px}
.sp-archetypes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
.sp-arch-card{background:var(--white);border:1.5px solid var(--border-mid);border-radius:2px;padding:18px 12px 14px;cursor:pointer;position:relative;transition:border-color 0.2s,background 0.2s;text-align:center;user-select:none}
.sp-arch-card:hover{border-color:var(--green-mid)}
.sp-arch-card.selected{border-color:var(--green);background:var(--green-light)}
.sp-arch-label{font-family:'Zodiak',serif;font-size:20px;font-weight:500;margin-bottom:5px;color:var(--ink)}
.sp-arch-sub{font-size:10.5px;color:var(--ink-muted);line-height:1.4}
.sp-arch-check{position:absolute;top:8px;right:8px;width:18px;height:18px;background:var(--green);border-radius:50%;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center}
.sp-hint{font-size:11px;color:var(--ink-faint);margin-bottom:20px}
.sp-brands{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.sp-brand-chip{background:none;border:1.5px solid var(--border-mid);border-radius:2px;padding:7px 14px;font-family:'Switzer',sans-serif;font-size:12px;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:all 0.15s}
.sp-brand-chip:hover{border-color:var(--green);color:var(--green)}
.sp-brand-chip.selected{border-color:var(--green);background:var(--green-light);color:var(--green)}
.sp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.sp-field label{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted)}
.sp-field input{background:var(--bg);border:1px solid var(--border-mid);border-radius:2px;padding:11px 14px;font-family:'Switzer',sans-serif;font-size:14px;color:var(--ink);outline:none;transition:border-color 0.2s}
.sp-field input:focus{border-color:var(--green)}
.sp-error{background:#fef2f2;border:1px solid #fecaca;border-radius:2px;padding:10px 12px;font-size:12px;color:#dc2626;margin-bottom:12px;display:none}
.sp-error.show{display:block}
.sp-success-msg{background:var(--green-light);border:1px solid rgba(45,74,62,0.2);border-radius:2px;padding:10px 12px;font-size:12px;color:var(--green);margin-bottom:12px;display:none}
.sp-success-msg.show{display:block}
.sp-nav{display:flex;align-items:center;gap:12px;margin-top:20px}
.sp-back-btn{background:none;border:none;font-family:'Switzer',sans-serif;font-size:13px;color:var(--ink-muted);cursor:pointer;padding:0;white-space:nowrap}
.sp-back-btn:hover{color:var(--ink)}
.sp-next-btn{flex:1;background:var(--green);color:#fff;border:none;border-radius:2px;padding:14px;font-family:'Switzer',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:background 0.2s;letter-spacing:0.14em;text-transform:uppercase}
.sp-next-btn:hover{background:var(--green-mid)}
.sp-next-btn:disabled{opacity:0.6;cursor:not-allowed}
/* Final-step buttons (2026-10-16): Create account stays the main button but no
   longer fills the row; Back stays a quiet link. Alone (step 1, no Back) it
   still fills the row. */
.sp-nav{justify-content:space-between}
.sp-nav .sp-next-btn{flex:0 0 auto;min-width:62%;padding:14px 28px;letter-spacing:0.14em;text-transform:uppercase}
.sp-nav .sp-back-btn[style*="none"] + .sp-next-btn{flex:1;min-width:0;letter-spacing:0.14em;text-transform:uppercase}
.sp-done-close{display:block;margin:20px auto 0;padding:8px 12px}
.sp-skip{display:block;text-align:center;margin-top:12px;font-size:12px;color:var(--ink-faint);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sp-skip:hover{color:var(--ink-muted)}
.sp-unsure{display:block;text-align:center;margin-top:16px;font-size:12px;color:var(--ink-muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sp-unsure:hover{color:var(--green)}
/* "Find my style" quiz entry (2026-10-21): a tinted box above the styles, moved up from a small link under them so it is hard to miss. */
.sp-quiz{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--green-light);border-radius:2px;padding:14px 16px;margin-bottom:16px}
.sp-quiz-title{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 2px}
.sp-quiz-sub{font-size:13px;color:var(--ink-muted);margin:0}
.sp-quiz-btn{flex-shrink:0;background:#fff;border:1px solid var(--green);color:var(--green);border-radius:2px;padding:10px 14px;font-family:'Switzer',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;transition:background 0.2s,color 0.2s}
.sp-quiz-btn:hover{background:var(--green);color:#fff}
@media(max-width:480px){.sp-quiz{flex-direction:column;align-items:stretch;gap:12px}.sp-quiz-btn{padding:12px 14px}}
.sp-slide-num{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:24px}
.sp-slide-choices{display:flex;flex-direction:column;gap:12px;margin-bottom:4px}
.sp-choice{background:var(--white);border:1.5px solid var(--border-mid);border-radius:2px;padding:28px 20px;font-family:'Zodiak',serif;font-size:22px;font-weight:400;color:var(--ink);cursor:pointer;text-align:center;transition:border-color 0.18s,background 0.18s,transform 0.12s;width:100%}
.sp-choice:hover{border-color:var(--green);background:var(--green-light);transform:translateY(-1px)}
.sp-choice-or{text-align:center;font-size:11px;color:var(--ink-faint);letter-spacing:0.1em;text-transform:uppercase}
.sp-result-msg{text-align:center;padding:12px 0 4px}
.sp-result-msg h3{font-family:'Zodiak',serif;font-size:24px;font-weight:400;margin-bottom:8px}
.sp-result-msg p{font-size:13px;color:var(--ink-muted);margin-bottom:20px}
.sp-result-tags{display:flex;justify-content:center;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.sp-result-tag{background:var(--green-light);border:1.5px solid var(--green);border-radius:2px;padding:6px 16px;font-size:13px;font-weight:600;color:var(--green)}
@media(max-width:480px){.sp-archetypes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .sp-modal{padding:24px 20px 16px}
  .sp-nav{
    position:sticky;bottom:0;
    background:var(--white);
    border-top:1px solid var(--border);
    padding:12px 0 0;
    margin-top:12px;
  }
  .sp-skip{padding-bottom:4px}
}


/* Brand step: big names, independents on Drawn, and the "Any others?" field */
.sp-group-label{font-size:10.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted);margin:16px 0 8px}
#sp-s2 .sp-brands{gap:6px;margin-bottom:2px}
#sp-s2 .sp-brand-chip{padding:6px 12px;font-size:12.5px;border-width:1px}
#sp-s2 .sp-more{background:none;border:none;padding:6px 6px;font-family:'Switzer',sans-serif;font-size:12.5px;font-weight:500;color:var(--green);cursor:pointer}
#sp-s2 .sp-more:hover{text-decoration:underline}
.sp-other-wrap{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-mid)}
.sp-other{width:100%;background:var(--bg);border:1px solid var(--border-mid);border-radius:2px;padding:12px 14px;font-family:'Switzer',sans-serif;font-size:16px;color:var(--ink);outline:none;transition:border-color 0.2s}
.sp-other:focus{border-color:var(--green)}
.sp-other-hint{font-size:11px;color:var(--ink-muted);margin-top:6px}

/* "A brand you usually wear" in the sizes step (2026-10-17) */
.sp-ref-open{display:block;margin:18px 0 0;padding:10px 0;background:none;border:0;font-family:'Switzer',sans-serif;font-size:13px;font-weight:500;color:var(--green);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left;min-height:44px}
.sp-ref-open:hover{color:var(--green-mid,var(--green))}
.sp-ref{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-mid)}
.sp-ref-title{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:10px}
.sp-ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-ref-wide{grid-column:1/-1}
.sp-ref-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sp-ref-field label{font-size:12px;color:var(--ink-muted)}
.sp-ref-field input,.sp-ref-select{width:100%;min-height:44px;background:var(--bg);border:1px solid var(--border-mid);border-radius:2px;padding:10px 14px;font-family:'Switzer',sans-serif;font-size:16px;color:var(--ink);outline:none}
.sp-ref-field input:focus,.sp-ref-select:focus{border-color:var(--green)}
.sp-ref-go{margin-top:12px;min-height:44px;background:none;border:1.5px solid var(--green);border-radius:2px;padding:10px 18px;font-family:'Switzer',sans-serif;font-size:12px;font-weight:500;color:var(--green);cursor:pointer;letter-spacing:0.14em;text-transform:uppercase}
.sp-ref-go:hover{background:var(--green-light)}
.sp-ref-go:focus-visible,.sp-ref-open:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.sp-ref-result{margin-top:12px}
.sp-ref-msg{font-size:13px;color:var(--ink);line-height:1.5;margin-bottom:6px}
.sp-ref-list{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.sp-ref-list li{font-size:13px;color:var(--ink);line-height:1.4}
.sp-ref-size{display:inline-block;min-width:36px;padding:2px 8px;margin-right:4px;border:1.5px solid var(--green);border-radius:2px;background:var(--green-light);color:var(--green);font-weight:600;text-align:center}
.sp-ref-why{display:block;font-size:12px;color:var(--ink-muted);margin-top:2px}