/* css/site-end.css: makeover console, real team strip, footer, privacy page. Owned by step site-end. */

/* ---------- Makeover ---------- */
.makeover { padding-block: var(--s-8) var(--s-7); position: relative; }
.makeover-card {
  position: relative;
  padding: var(--s-5);
  border-radius: var(--r-xl);
  box-shadow: var(--glow-cyan);
  display: grid;
  gap: var(--s-6);
}
.makeover-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-5); }
.makeover-portrait {
  flex: none;
  width: 120px; height: 120px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cyan), var(--orange), var(--cyan));
  box-shadow: var(--glow-cyan), var(--glow-orange);
}
.makeover-dubu { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-1); }
.makeover-copy h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw + 1rem, 3rem); line-height: 1.1; margin: var(--s-2) 0 var(--s-3); }
.makeover-offer { color: var(--text-dim); font-size: 1.1rem; max-width: 46ch; margin: 0 auto; }

.makeover-form.console {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: rgba(4, 14, 16, 0.72);
  overflow: hidden;
  min-width: 0;
}
.console-bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--glass);
}
.console-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); opacity: .8; }
.console-dot:nth-child(2) { background: var(--orange); }
.console-dot:nth-child(3) { background: var(--cream); opacity: .5; }
.console-title { margin-left: var(--s-2); font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim); }
.console-body { padding: var(--s-5); }

.console .field { margin-bottom: var(--s-5); }
.console .field label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .02em;
  text-transform: lowercase;
  color: var(--cyan);
  margin-bottom: var(--s-2);
}
.console .field label::before { content: "> "; color: var(--orange); }
.console .field .optional { color: var(--text-dim); }
.console input, .console textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  transition: border-color var(--t-fast), box-shadow var(--t-med) var(--ease-out), background var(--t-fast);
  caret-color: var(--cyan);
}
.console textarea { resize: vertical; min-height: 120px; }
.console input::placeholder { color: rgba(255, 241, 223, 0.5); }
.console input:focus, .console textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(62, 230, 224, 0.07);
  box-shadow: 0 0 0 3px rgba(62, 230, 224, 0.28), 0 0 24px rgba(62, 230, 224, 0.28);
}
.console input:focus-visible, .console textarea:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.console [aria-invalid="true"] { border-color: var(--bad, #ff6b6b); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22); }
.console .field-error {
  display: flex; gap: var(--s-2); align-items: flex-start;
  margin: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: #ffb3b3;
}
.console .field-error[hidden] { display: none; }
.console .field-error::before { content: "!"; flex: none; font-weight: 700; color: #ff8a8a; }

.console-submit {
  min-height: 56px;
  font-size: 1.1rem;
  box-shadow: var(--glow-orange);
  position: relative;
}
.console-submit:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
.console-status {
  font-family: var(--font-mono);
  font-size: .9rem;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  color: var(--cream);
}
.console-status::before { content: "$ "; color: var(--cyan); }
.makeover-form.is-sent { box-shadow: 0 0 0 1px var(--cyan), 0 0 60px rgba(62, 230, 224, 0.28); }
.makeover-form.is-sent .console-status { border-color: var(--cyan); }
@media (prefers-reduced-motion: no-preference) {
  .makeover-form.is-sent { animation: sent-glow 1.4s var(--ease-out); }
  @keyframes sent-glow { from { box-shadow: 0 0 0 1px var(--cyan), 0 0 0 rgba(62,230,224,0); } }
}

@media (min-width: 900px) {
  .makeover-card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: var(--s-7); align-items: center; gap: var(--s-7); }
  .makeover-intro { text-align: left; align-items: flex-start; }
  .makeover-portrait { width: 200px; height: 200px; }
  .makeover-offer { margin: 0; }
}

/* ---------- Real team ---------- */
.real-team { padding-block: var(--s-8); text-align: center; }
.real-team h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw + 1rem, 3rem); line-height: 1.1; margin: 0; }
.real-team .section-lead { margin: var(--s-3) 0 var(--s-6); color: var(--text-dim); font-size: 1.2rem; }
.photo-strip {
  list-style: none; margin: 0; padding: var(--s-5) var(--s-4) var(--s-6);
  display: flex; gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.polaroid {
  flex: 0 0 min(70vw, 280px);
  scroll-snap-align: center;
  padding: var(--s-3) var(--s-3) var(--s-6);
  border-radius: var(--r-m);
  transform: rotate(var(--rot, 0deg));
  transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med);
  box-shadow: 0 0 36px rgba(62, 230, 224, 0.2), 0 12px 30px rgba(0, 0, 0, 0.4);
}
.polaroid:nth-child(2) { box-shadow: 0 0 36px rgba(255, 154, 77, 0.22), 0 12px 30px rgba(0, 0, 0, 0.4); }
.polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-s); }
.polaroid:hover, .polaroid:focus-within { transform: rotate(0deg) translateY(-6px) scale(1.02); }
@media (min-width: 760px) {
  .photo-strip { justify-content: center; overflow: visible; }
  .polaroid { flex: 0 1 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .polaroid { transition: none; }
}

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--s-7) var(--s-6); border-top: 0; }
.footer-panel { padding: var(--s-5); border-radius: var(--r-xl); display: grid; gap: var(--s-4); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; min-height: 44px; }
.footer-brand img { width: 40px; height: 40px; border-radius: var(--r-s); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { min-height: 44px; border-radius: var(--r-pill); padding-inline: var(--s-2); }
.social-link {
  padding: var(--s-2) var(--s-4) !important;
  border: 1px solid var(--line);
  background: var(--glass);
  transition: box-shadow var(--t-med) var(--ease-out), border-color var(--t-fast), color var(--t-fast);
}
.social-link:hover, .social-link:focus-visible { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }
.social-link:nth-child(n) svg { filter: drop-shadow(0 0 6px currentColor); }
.footer-note { max-width: 62ch; }

/* ---------- Privacy page ---------- */
.privacy-page .header-inner { justify-content: space-between; }
.privacy-page .prose { width: min(70ch, calc(100% - 2 * var(--s-5))); margin: var(--s-8) auto var(--s-8); padding: var(--s-6) var(--s-5); border-radius: var(--r-xl); }
.privacy-page .prose h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw + 1rem, 3rem); line-height: 1.1; margin: 0 0 var(--s-3); }
.privacy-page .prose h2 { font-family: var(--font-display); font-size: 1.3rem; margin: var(--s-6) 0 var(--s-2); color: var(--cyan); }
.privacy-page .prose p, .privacy-page .prose li { color: var(--text-dim); font-size: 1.05rem; line-height: 1.7; }
.privacy-page .prose p { margin: 0 0 var(--s-4); }
.privacy-page .prose ul { list-style: disc; padding-left: var(--s-5); margin: 0 0 var(--s-4); }
.privacy-page .prose .updated { font-family: var(--font-mono); font-size: .9rem; }
.privacy-page .prose mark { background: rgba(255, 154, 77, 0.2); color: var(--cream); padding: .1em .45em; border-radius: var(--r-s); border: 1px solid var(--orange); font-weight: 600; }
.privacy-page .prose a { color: var(--cyan); text-underline-offset: .15em; }