/* Sign-up flow (/get-started). Builds on site.css tokens. */
body.su-body { background: var(--stone); min-height: 100vh; }
.su { display: grid; grid-template-columns: minmax(0, 1fr) 500px; min-height: 100vh; }
.su-main { display: flex; flex-direction: column; padding: 28px 64px 36px; min-width: 0; position: relative; }
.su-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; background: var(--stone-2); z-index: 20; }
.su-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #D99A76, #8E4F30); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.su-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.su-top .brand img { height: 46px; }
.su-steplabel { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--copper-text); text-transform: uppercase; text-align: right; }
.su-exit { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.su-form { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; max-width: 640px; width: 100%; padding: 32px 0; }
.su-step { display: none; flex-direction: column; gap: 20px; }
.su-step.is-active { display: flex; animation: suIn .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes suIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.su-step h1 { font-size: clamp(38px, 4vw, 54px); line-height: 1.04; color: var(--ink); }
.su-step .lead { margin: 0; font-size: 17px; }
.su-hint { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

.su-field { display: flex; flex-direction: column; gap: 8px; }
.su-field > span, .su-legend { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; color: var(--copper-deep); text-transform: uppercase; }
.su-field small { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.su-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.su input[type=text], .su input[type=email], .su input[type=tel], .su input[type=url], .su textarea {
  width: 100%; min-height: 58px; border: 0; border-radius: 18px; background: var(--stone); padding: 0 20px;
  font-family: var(--sans); font-size: 17px; color: var(--ink);
  box-shadow: inset 5px 5px 11px rgba(150, 140, 128, .38), inset -5px -5px 11px rgba(255, 255, 255, .95);
}
.su textarea { padding: 16px 20px; min-height: 110px; resize: vertical; line-height: 1.5; }
.su input::placeholder, .su textarea::placeholder { color: #8E9196; }
.su input:focus, .su textarea:focus { outline: none; box-shadow: inset 4px 4px 9px rgba(150, 140, 128, .38), inset -4px -4px 9px rgba(255, 255, 255, .95), 0 0 0 2px var(--copper); }
.su-field.has-error input, .su-field.has-error textarea { box-shadow: inset 4px 4px 9px rgba(150, 140, 128, .38), inset -4px -4px 9px rgba(255, 255, 255, .95), 0 0 0 2px #B3261E; }
.su-error { min-height: 20px; margin: 0; font-size: 14px; font-weight: 600; color: #B3261E; }

/* Choice chips and tiles */
.su-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.su-chip { position: relative; }
.su-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.su-chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--stone); font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
  box-shadow: 5px 5px 12px rgba(150, 140, 128, .38), -5px -5px 12px rgba(255, 255, 255, .95); transition: background .2s, color .2s, box-shadow .2s; }
.su-chip input:checked + span { background: var(--graphite); color: #fff; box-shadow: 0 8px 18px rgba(28, 29, 31, .28); }
.su-chip input:checked + span::before { content: "✓"; color: var(--copper-light); }
.su-chip input:focus-visible + span { outline: 2px solid var(--copper); outline-offset: 3px; }
.su-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.su-tiles .su-chip span { width: 100%; border-radius: 16px; min-height: 54px; padding: 0 14px; font-size: 15px; }
.su-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.su-cards .su-chip span { width: 100%; min-height: 76px; border-radius: 20px; padding: 14px 18px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.su-cards .su-chip span::before { position: absolute; right: 16px; top: 14px; }
.su-cards .su-chip em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--copper-deep); }
.su-cards .su-chip input:checked + span em { color: var(--copper-light); }
details.su-more summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--copper-text); }
details.su-more[open] summary { margin-bottom: 12px; }

/* Uploads */
.su-uploads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.su-upload { position: relative; min-height: 170px; border-radius: 24px; background: var(--stone); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 18px; cursor: pointer;
  box-shadow: 7px 7px 16px rgba(150, 140, 128, .4), -7px -7px 16px rgba(255, 255, 255, .95); }
.su-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.su-upload b { font-size: 16px; }
.su-upload small { font-size: 13px; color: var(--muted); }
.su-upload img { max-height: 84px; max-width: 80%; object-fit: contain; }
.su-upload.is-set { box-shadow: inset 4px 4px 10px rgba(150, 140, 128, .38), inset -4px -4px 10px rgba(255, 255, 255, .95), 0 0 0 2px var(--copper); }
.su-upload.has-error { box-shadow: inset 4px 4px 10px rgba(150, 140, 128, .38), inset -4px -4px 10px rgba(255, 255, 255, .95), 0 0 0 2px #B3261E; }
.su-colours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.su-colour { display: flex; gap: 10px; align-items: center; }
.su-colour input[type=color] { width: 58px; height: 58px; flex: 0 0 58px; border: 0; border-radius: 16px; padding: 4px; background: var(--stone); cursor: pointer; box-shadow: 5px 5px 12px rgba(150, 140, 128, .38), -5px -5px 12px rgba(255, 255, 255, .95); }

.su-note { padding: 16px 20px; border-radius: 18px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(28, 29, 31, .06); font-size: 15px; line-height: 1.6; color: var(--body); }
.su-note p { margin: 0 0 8px; } .su-note p:last-child { margin: 0; }
.su-checks { display: flex; flex-direction: column; gap: 12px; }
.su-check { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.su-check input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 22px; accent-color: var(--copper-deep); }
.su-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Nav */
.su-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 640px; }
.su-nav .btn-back { color: var(--ink); background: var(--stone); box-shadow: 6px 6px 14px rgba(150, 140, 128, .38), -6px -6px 14px rgba(255, 255, 255, .95); }
.su-nav .btn[disabled] { opacity: .5; cursor: default; transform: none; }
.su-nav small { font-size: 14px; color: var(--muted); }
.su-sending { display: none; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--copper-deep); }
.su-sending.is-on { display: flex; }
.su-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--stone-2); border-top-color: var(--copper-deep); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.su-done ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.su-done li { display: flex; gap: 16px; align-items: baseline; font-size: 17px; line-height: 1.6; color: var(--body); }
.su-done li b { color: var(--ink); }
.su-done li span.n { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--copper); }

/* Live preview */
.su-preview { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, #E4DED5, #D8D1C6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; }
.su-preview > span { font-size: 13px; font-weight: 700; letter-spacing: 2.5px; color: var(--copper-deep); }
.phone { width: 340px; height: min(690px, calc(100vh - 110px)); border-radius: 52px; background: var(--graphite); padding: 14px; box-shadow: 28px 34px 70px rgba(28, 29, 31, .3), -12px -12px 30px rgba(255, 255, 255, .5); }
.phone-screen { width: 100%; height: 100%; border-radius: 40px; background: #FBF9F6; overflow: hidden; display: flex; flex-direction: column; }
.ph-head { padding: 22px 18px 12px; display: flex; align-items: center; gap: 10px; }
.ph-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--p, #2A2C2F); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; overflow: hidden; border: 2px solid var(--s, #C98A64); }
.ph-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ph-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.ph-sub { font-size: 13px; color: var(--muted); }
.ph-post { margin: 0 12px; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; background: #24252A; }
.ph-post-body { flex: 1 1 auto; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; position: relative; overflow: hidden; }
.ph-post-body::after { content: ""; position: absolute; right: -50px; top: -50px; width: 190px; height: 190px; border-radius: 50%; border: 1px solid var(--s, #C98A64); opacity: .5; }
.ph-k { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--s, #C98A64); text-transform: uppercase; }
.ph-v { font-family: var(--serif); font-size: 54px; font-weight: 600; line-height: 1; }
.ph-n { font-size: 12px; color: #E4E5E7; }
.ph-band { min-height: 66px; background: var(--p, #2A2C2F); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: #fff; }
.ph-logo { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; background: #fff; display: none; align-items: center; justify-content: center; overflow: hidden; border: 2px solid var(--s, #C98A64); }
.ph-logo.is-set { display: flex; }
.ph-logo img { max-width: 90%; max-height: 90%; object-fit: contain; }
.ph-band b { display: block; font-size: 13px; letter-spacing: .5px; }
.ph-band small { font-size: 11px; opacity: .9; }
.ph-cap { padding: 14px 18px; font-size: 14px; line-height: 1.55; color: var(--body); }
.ph-chips { margin-top: auto; padding: 0 18px 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chips span { font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 6px 10px; border-radius: 999px; background: var(--stone); color: var(--copper-deep); }

@media (max-width: 1100px) {
  .su { grid-template-columns: minmax(0, 1fr); }
  .su-preview { display: none; }
}
@media (max-width: 680px) {
  .su-main { padding: 20px 16px 28px; }
  .su-top .brand-text { display: none; }
  .su-row, .su-uploads, .su-colours, .su-cards { grid-template-columns: minmax(0, 1fr); }
  .su-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-step h1 { font-size: 36px; }
  #su-enter { display: none; }
}
@media (prefers-reduced-motion: reduce) { .su-step.is-active { animation: none; } .su-progress span { transition: none; } }

/* LinkedIn connect step on the done screen */
.su-li { padding: 26px 28px; border-radius: 24px; background: #fff; border: 1px solid rgba(10, 102, 194, .2); box-shadow: 0 18px 40px rgba(28, 29, 31, .1); display: flex; flex-direction: column; gap: 10px; }
.su-li h2 { font-size: 32px; line-height: 1.05; }
.su-li p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.su-li-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px !important; }
.btn-li { color: #fff; background: linear-gradient(180deg, #2C86E0, #0A66C2); box-shadow: 0 10px 22px rgba(10, 102, 194, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-li:hover { color: #fff; }
.su-li-done { font-size: 14px; font-weight: 600; color: #0A66C2; }