/* sections.css — sage/cream/dark landing page */

/* ============ NAV (floating pill) ============ */
.nav-dock { position: sticky; top: 14px; z-index: 60; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav-pill {
  pointer-events: auto;
  width: 100%; max-width: 940px;
  display: flex; align-items: center; gap: 20px;
  height: 58px; padding: 0 10px 0 20px;
  border-radius: 999px;
  background: oklch(0.99 0.008 120 / 0.72);
  border: 1px solid oklch(0.55 0.02 140 / 0.18);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 8px 30px -14px oklch(0.2 0.04 150 / 0.28);
  transition: background .3s, box-shadow .3s;
}
.nav-pill.scrolled { background: oklch(0.99 0.008 120 / 0.9); box-shadow: 0 10px 34px -14px oklch(0.2 0.04 150 / 0.34); }
.nav-links { display: flex; align-items: center; gap: 26px; margin: 0 auto; }
.nav-link { font-size: 14px; color: var(--ink-soft); transition: color .15s; }
.nav-link:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .login { font-weight: 500; color: var(--ink); }
@media (max-width: 860px) { .nav-links { display: none; } .nav-pill { max-width: 520px; } }

/* ============ HERO ============ */
.hero { padding: 16px 12px 0; }
.hero-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  margin-top: -72px; padding-top: 132px;
  background: var(--cream);
  border: 1px solid var(--field-border);
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 80% at 50% -6%, var(--sage) 0%, var(--sage-deep) 30%, var(--field-mid) 56%, var(--cream) 86%);
}
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(50% 40% at 50% 0%, var(--field-glow) 0%, transparent 70%);
}
.hero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(oklch(0.3 0.03 150 / 0.10) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(100% 70% at 50% 0%, black 0%, transparent 70%);
          mask-image: radial-gradient(100% 70% at 50% 0%, black 0%, transparent 70%);
  opacity: 0.7;
}
.hero-content { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; padding-bottom: clamp(44px, 5vw, 68px); }
.hero-chip { margin-bottom: 22px; }
.hero-title { max-width: 880px; color: var(--ink); }
.hero-sub { max-width: 560px; margin: 20px auto 0; color: var(--on-field-soft); }

/* prompt box */
.prompt {
  width: 100%; max-width: 700px; margin: 34px auto 0; text-align: left;
  background: var(--dark); color: var(--on-dark);
  border: 1px solid var(--dark-line); border-radius: 22px;
  padding: 14px; box-shadow: var(--shadow-lg);
}
.prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mode-switch { display: inline-flex; gap: 4px; background: var(--dark-2); padding: 4px; border-radius: 999px; border: 1px solid var(--dark-line); }
.mode { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; border: 0; background: transparent; color: var(--on-dark-mut); font-size: 13px; cursor: pointer; transition: .15s; white-space: nowrap; }
.mode em { font-style: normal; font-size: 11px; opacity: 0.7; font-family: var(--mono); }
.mode:hover { color: var(--on-dark); }
.mode.on { background: var(--accent); color: oklch(0.98 0.012 60); font-weight: 500; }
.mode.on em { opacity: 0.8; }
.prompt-balance { display: inline-flex; align-items: center; gap: 7px; color: var(--on-dark-mut); }
.prompt-balance svg { color: var(--accent-bright); }

.prompt-input {
  width: 100%; resize: none; border: 0; outline: 0; background: transparent;
  color: var(--on-dark); font-family: var(--sans); font-size: 16px; line-height: 1.5;
  padding: 6px 6px 14px;
}
.prompt-input::placeholder { color: oklch(0.55 0.012 150); }

.prompt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--dark-line); padding-top: 12px; }
.prompt-samples { display: flex; gap: 7px; flex-wrap: wrap; }
.samp { font-family: var(--mono); font-size: 11.5px; color: var(--on-dark-mut); background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: 999px; height: 28px; padding: 0 11px; cursor: pointer; transition: .15s; white-space: nowrap; }
.samp:hover { color: var(--on-dark); border-color: var(--accent-bright); }
.prompt-run { flex: none; }
.cost-tag { font-family: var(--mono); font-size: 11px; background: oklch(0.99 0.01 130 / 0.18); border-radius: 999px; padding: 2px 7px; }

.prompt-out { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.16,.8,.3,1); }
.prompt-out.open { max-height: 360px; margin-top: 12px; }
.out-msg { color: oklch(0.78 0.09 60); padding: 8px 2px; }
.out-imgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.out-img { aspect-ratio: 1; border-radius: 10px; animation: pop .5s cubic-bezier(.16,.8,.3,1) both; }
.out-imgs .out-img:nth-child(2){animation-delay:.07s}.out-imgs .out-img:nth-child(3){animation-delay:.14s}.out-imgs .out-img:nth-child(4){animation-delay:.21s}
@keyframes pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.out-lines { display: flex; flex-direction: column; gap: 11px; padding: 4px 0; }
.out-text p { font-size: 14.5px; line-height: 1.55; color: var(--on-dark); margin: 0 0 8px; animation: pop .5s ease both; }
.out-text .mono-label { color: var(--on-dark-mut); }
.shimmer-tile { aspect-ratio: 1; border-radius: 10px; }
.shimmer-line { height: 13px; border-radius: 6px; }
.shimmer-tile, .shimmer-line { background: linear-gradient(100deg, var(--dark-2) 30%, var(--dark-3) 50%, var(--dark-2) 70%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* trust bar */
.trust { position: relative; z-index: 2; max-width: 1000px; margin: 56px auto 0; padding: 0 28px 44px; text-align: center; }
.trust-label { display: block; color: oklch(0.4 0.02 150); margin-bottom: 18px; }
.trust-logos { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 52px); flex-wrap: wrap; }
.trust-logo { font-weight: 600; font-size: 18px; letter-spacing: 0.04em; color: oklch(0.4 0.02 150 / 0.55); }
@media (max-width: 560px) { .out-imgs, .stage-img-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ FEATURES (dark cards) ============ */
.features-head { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; margin-bottom: 44px; }
.features-sub { max-width: 360px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { display: flex; flex-direction: column; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feat-mock { padding: 22px 22px 0; }
.feat-body { padding: 22px; }
.feat-tag { color: var(--accent-bright); }
.feat-title { margin: 10px 0 9px; color: var(--on-dark); }
.feat-text { color: var(--on-dark-mut); }
@media (max-width: 880px) { .features-head { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr; } }

/* mini mockups */
.mock { background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: 14px; padding: 14px; }
.mock-prompt { font-family: var(--mono); font-size: 12px; color: var(--on-dark-mut); display: flex; align-items: center; gap: 6px; }
.mc-caret { color: var(--accent-bright); }
.mc-blink { width: 6px; height: 13px; background: var(--accent-bright); display: inline-block; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.mock-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 12px 0; }
.mock-thumb { aspect-ratio: 1; border-radius: 8px; }
.mock-foot { display: flex; align-items: center; justify-content: space-between; }
.mock-pill { font-family: var(--mono); font-size: 11px; color: var(--accent-bright); background: oklch(0.66 0.085 140 / 0.14); border-radius: 999px; padding: 3px 9px; }
.mock-lines { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.mock-lines span { height: 9px; border-radius: 5px; background: var(--dark-3); display: block; }
.mock-lines span:first-child { background: var(--dark-line); }
.mock-tone { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.tone-chip { font-size: 11.5px; color: var(--on-dark-mut); border: 1px solid var(--dark-line); border-radius: 999px; padding: 3px 10px; }
.tone-chip.on { background: var(--accent-bright); color: oklch(0.18 0.02 150); border-color: transparent; font-weight: 500; }
.mock-bal .bal-top { display: flex; align-items: baseline; justify-content: space-between; }
.bal-val { font-size: 26px; font-weight: 600; color: var(--on-dark); }
.bal-val em { font-style: normal; font-size: 13px; color: var(--on-dark-mut); }
.bal-bar { height: 6px; border-radius: 999px; background: var(--dark-3); margin: 12px 0 14px; overflow: hidden; }
.bal-bar span { display: block; height: 100%; background: var(--accent-bright); border-radius: 999px; }
.bal-rows { display: flex; flex-direction: column; gap: 8px; }
.bal-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--on-dark-mut); }
.bal-row span { display: inline-flex; align-items: center; gap: 8px; }
.bal-row svg { color: var(--on-dark-mut); }
.bal-row b { color: oklch(0.78 0.06 30); font-variant-numeric: tabular-nums; }
.bal-row.add b { color: var(--accent-bright); }

/* ============ GALLERY STRIP ============ */
.gallery-strip { padding: clamp(56px, 7vw, 96px) 0; overflow: hidden; }
.gallery-strip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.gallery-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.gallery-link .arrow { transition: transform .18s; }
.gallery-link:hover .arrow { transform: translateX(3px); }
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.marquee-row { display: flex; gap: 14px; width: max-content; animation: marquee 48s linear infinite; }
.gallery-strip:hover .marquee-row { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gstrip-item { width: 200px; height: 150px; flex: none; }
.gstrip-item.wide { width: 300px; }
.gallery-note { display: block; margin-top: 22px; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .marquee-row { animation: none; } }

/* ============ HOW IT WORKS ============ */
.how-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.how-line { position: absolute; top: 21px; left: 16%; right: 16%; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.how-step { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.how-node { width: 44px; height: 44px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); margin-bottom: 18px; position: relative; z-index: 1; }
.how-num { color: var(--accent); font-weight: 500; }
.how-t { margin-bottom: 8px; max-width: 240px; }
.how-step .body { max-width: 280px; }
.how-cta { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 52px; flex-wrap: wrap; }
@media (max-width: 760px) { .how-grid { grid-template-columns: 1fr; gap: 36px; } .how-line { display: none; } }

/* ============ STATS (dark) ============ */
.stats { background: var(--dark); color: var(--on-dark); overflow: hidden; }
.stats-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.stats-title { color: var(--on-dark); margin: 16px 0 36px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.stat-v { font-size: clamp(34px, 4vw, 46px); font-weight: 600; letter-spacing: -0.03em; color: var(--on-dark); }
.stat-l { color: var(--on-dark-mut); margin-top: 4px; }

/* rate card (replaces testimonial) */
.rate-card { padding: 30px; background: var(--dark-2); display: flex; flex-direction: column; gap: 22px; }
.rate-rows { display: flex; flex-direction: column; gap: 14px; }
.rate-row { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-md); background: var(--dark-3); border: 1px solid var(--dark-line); }
.rate-icn { width: 38px; height: 38px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklch, var(--accent) 24%, var(--dark-2)); color: var(--accent-bright); }
.rate-icn svg { width: 19px; height: 19px; }
.rate-body { flex: 1; min-width: 0; }
.rate-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rate-line b { font-size: 16px; font-weight: 600; color: var(--on-dark); letter-spacing: -0.01em; }
.rate-body em { display: block; font-style: normal; color: var(--on-dark-mut); margin-top: 3px; }
.rate-price { font-size: 27px; font-weight: 600; letter-spacing: -0.03em; color: var(--on-dark); flex: none; white-space: nowrap; }
.rate-price i { font-style: normal; font-size: 16px; color: var(--on-dark-mut); font-weight: 500; }
.rate-foot { display: flex; flex-direction: column; gap: 9px; }
.rate-note { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--on-dark-mut); }
.rate-note svg { width: 15px; height: 15px; flex: none; color: var(--accent-bright); }
@media (max-width: 860px) { .stats-inner { grid-template-columns: 1fr; gap: 36px; } }

/* ============ PRICING ============ */
.pricing-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 28px; margin-top: 52px; align-items: start; }
.price-calc { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--line); cursor: pointer; accent-color: var(--accent); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 999px; background: var(--accent); border: 4px solid var(--card); box-shadow: var(--shadow-sm); cursor: pointer; }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: var(--accent); border: 4px solid var(--card); cursor: pointer; }

/* point-buying rows (image / word) */
.ptrow { padding: 18px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.ptrow-head { display: flex; align-items: center; gap: 12px; }
.ptrow-icn { width: 38px; height: 38px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklch, var(--accent) 16%, transparent); color: var(--accent); }
.ptrow-icn svg { width: 19px; height: 19px; }
.ptrow-meta { flex: 1; min-width: 0; }
.ptrow-meta b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ptrow-meta em { display: block; font-style: normal; color: var(--muted); margin-top: 2px; }
.ptrow-sub { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; flex: none; }
.ptrow-ctrl { display: flex; align-items: center; gap: 12px; }
.stepper { flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; justify-content: center; }
.stepper:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.stepper:disabled { opacity: 0.4; cursor: not-allowed; }
.ptrange { flex: 1; margin: 0; }
.ptrow-qty { flex: none; min-width: 92px; text-align: right; font-size: 13px; color: var(--muted); }
.ptrow-qty b { color: var(--ink); font-size: 15px; }
.ptrow-qty i { font-style: normal; }

.calc-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--line); }
.calc-amt { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; }
.calc-fine { text-align: center; color: var(--faint); margin: 0; }

.price-props { display: flex; flex-direction: column; gap: 4px; }
.prop-row { display: flex; gap: 14px; padding: 18px; border-radius: 16px; transition: background .2s; }
.prop-row:hover { background: var(--panel); }
.prop-check { flex: none; width: 28px; height: 28px; border-radius: 999px; background: oklch(0.66 0.06 140 / 0.18); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.prop-t { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 5px; }
@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ============ FAQ ============ */
.faq-wrap { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 48px; align-items: start; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.faq-icn { flex: none; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: transform .3s, background .2s, color .2s, border-color .2s; }
.faq-item.open .faq-icn { transform: rotate(45deg); background: var(--accent); color: oklch(0.97 0.01 130); border-color: var(--accent); }
.faq-a-wrap { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.16,.8,.3,1); }
.faq-item.open .faq-a-wrap { max-height: 220px; }
.faq-a { padding: 0 4px 24px; max-width: 620px; margin: 0; }
@media (max-width: 800px) { .faq-wrap { grid-template-columns: 1fr; gap: 24px; } }

/* ============ CTA ============ */
.cta-sec { padding: 0 12px clamp(56px, 7vw, 96px); }
.cta-card { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--field-border); }
.cta-bg { background: radial-gradient(120% 120% at 50% 0%, var(--sage) 0%, var(--sage-deep) 40%, var(--cream) 92%); }
.cta-inner { position: relative; z-index: 2; text-align: center; padding: clamp(48px, 7vw, 84px) 28px; display: flex; flex-direction: column; align-items: center; }
.cta-inner .eyebrow { justify-content: center; color: var(--on-field-soft); }
.cta-inner .eyebrow .ebdot { background: var(--accent); }
.cta-title { margin: 14px 0 0; color: var(--ink); }
.cta-inner .lead { margin: 14px auto 0; max-width: 440px; color: var(--on-field-soft); }
.cta-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.cta-inner .btn-ghost { border-color: var(--field-border); color: var(--on-field); }
.cta-inner .btn-ghost:hover { border-color: var(--on-field); }

/* ============ FOOTER ============ */
.footer { position: relative; background: var(--dark); color: var(--on-dark-mut); padding: 64px 0 36px; overflow: hidden; }
.footer .wrap { position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--dark-line); }
.footer-brand .body { color: var(--on-dark-mut); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fcol { display: flex; flex-direction: column; gap: 12px; }
.fcol-h { color: var(--on-dark-mut); margin-bottom: 4px; }
.fcol a { font-size: 14px; color: oklch(0.82 0.01 130); transition: color .15s; }
.fcol a:hover { color: var(--on-dark); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; gap: 16px; flex-wrap: wrap; }
.pay-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-chip { border: 1px solid var(--dark-line); border-radius: 6px; padding: 5px 10px; color: var(--on-dark-mut) !important; font-size: 11px; letter-spacing: 0.05em; }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; } }

/* tweak hint + tighter */
.tweak-hint { padding: 4px 2px; color: var(--faint); font-size: 11px; }
body.tighter .section-pad { padding-top: clamp(52px, 6vw, 88px); padding-bottom: clamp(52px, 6vw, 88px); }

/* ============ DECORATIVE VISUAL SLOTS ============ */
.deco-slot { margin: 0 auto; width: 100%; }
.deco-slot image-slot:not([data-filled])::part(frame) { background: oklch(0.92 0.012 95 / 0.62); }
.deco-slot image-slot[data-filled] { filter: drop-shadow(0 22px 40px oklch(0.1 0.02 30 / 0.32)); }

/* floating real visuals (transparent PNG, no frame) */
.deco-fig { margin: 0 auto; width: 100%; display: block; }
.deco-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 42px oklch(0.12 0.03 30 / 0.28)); }
body[data-palette="ember"] .deco-img { filter: drop-shadow(0 26px 46px oklch(0.55 0.16 33 / 0.34)); }
body[data-palette="bloom"] .deco-img { filter: drop-shadow(0 26px 44px oklch(0.55 0.07 290 / 0.22)); }
.deco-cap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--on-field-soft); opacity: 0.85; }
.deco-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); flex: none; }
.hero-deco { margin: 30px auto 4px; }
.how-deco { margin: 0 auto clamp(40px, 5vw, 64px); }
.cta-deco { margin: 4px auto 30px; }

/* ============ SIGN-UP SCREEN ============ */
.signup-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: oklch(0.12 0.02 280 / 0.55); backdrop-filter: blur(8px);
  animation: su-fade .22s ease;
}
@keyframes su-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes su-rise { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: none; } }
.signup-card {
  position: relative; overflow: hidden; width: 100%; max-width: 440px;
  border-radius: var(--r-xl); border: 1px solid var(--field-border);
  background: var(--card); box-shadow: var(--shadow-lg);
  animation: su-rise .28s cubic-bezier(.2,.7,.2,1);
}
.signup-head { position: relative; overflow: hidden; padding: 30px 32px 26px; text-align: center; }
.signup-head .signup-bg { position: absolute; inset: 0; background: radial-gradient(120% 130% at 50% -10%, var(--sage) 0%, var(--sage-deep) 38%, var(--field-mid) 64%, var(--cream) 100%); }
.signup-head > * { position: relative; z-index: 2; }
.signup-head-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.signup-mark { box-shadow: 0 6px 18px -8px oklch(0 0 0 / 0.4); border-radius: 12px; display: inline-flex; margin-bottom: 12px; }
.signup-title { font-size: 25px; font-weight: 540; letter-spacing: -0.03em; color: var(--on-field); margin: 0; }
.signup-sub { font-size: 14px; color: var(--on-field-soft); margin: 4px 0 0; }
.signup-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--field-border);
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .14s, background .14s;
}
.signup-close:hover { transform: rotate(90deg); }
.signup-body { padding: 24px 32px 30px; display: flex; flex-direction: column; gap: 12px; }
.social-btn { width: 100%; background: var(--card); color: var(--ink); border: 1px solid var(--line); font-weight: 500; gap: 10px; }
.social-btn:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.signup-or { display: flex; align-items: center; gap: 12px; color: var(--faint); margin: 2px 0; }
.signup-or::before, .signup-or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.signup-or span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field > span { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.field input {
  height: 46px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); padding: 0 14px; font-size: 14.5px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: var(--faint); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent); }
.signup-submit { width: 100%; margin-top: 6px; }
.signup-foot { font-size: 13.5px; color: var(--muted); text-align: center; margin: 6px 0 0; }
.signup-foot a { color: var(--accent); font-weight: 500; }
.signup-legal { text-align: center; color: var(--faint); font-size: 10.5px; margin: 2px 0 0; }

/* auth: confirm-password forgot link, checkboxes, error */
.signup-forgot { align-self: flex-end; font-size: 12.5px; color: var(--accent); font-weight: 500; margin-top: -4px; }
.acheck-group { display: flex; flex-direction: column; gap: 11px; margin: 2px 0; }
.acheck { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.acheck input { position: absolute; opacity: 0; width: 0; height: 0; }
.acheck-box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--panel); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: .15s; margin-top: 1px; }
.acheck-box svg { width: 12px; height: 12px; }
.acheck input:checked + .acheck-box { background: var(--accent); border-color: var(--accent); color: oklch(0.98 0.012 60); }
.acheck input:focus-visible + .acheck-box { box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 30%, transparent); }
.acheck-label { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.acheck-label a { color: var(--accent); font-weight: 500; }
.acheck-req { font-style: normal; color: var(--accent); }
.signup-err { font-size: 13px; color: oklch(0.62 0.18 28); text-align: center; margin: 0; }

/* ============ FOOTER — payment marks + company info ============ */
.footer-company { display: flex; flex-direction: column; gap: 3px; margin-top: 18px; }
.footer-company .fc-line { font-size: 12.5px; color: var(--on-dark-mut); line-height: 1.5; }
.footer-company .fc-line strong { color: oklch(0.86 0.01 130); font-weight: 500; }
.pay-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pay-mark {
  height: 30px; min-width: 46px; padding: 0 10px; border-radius: 7px;
  background: oklch(0.98 0.004 250); border: 1px solid oklch(0.8 0.01 250 / 0.5);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pay-mark.badge { background: transparent; border: 1px solid var(--dark-line); color: var(--on-dark-mut); font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em; gap: 5px; }
.pay-mark.badge svg { flex: none; }
.pay-visa { font-family: var(--sans); font-style: italic; font-weight: 800; font-size: 16px; letter-spacing: -0.04em; color: #1A1F71; }
.pay-mc-circles { position: relative; width: 34px; height: 20px; }
.pay-mc-circles i { position: absolute; top: 0; width: 20px; height: 20px; border-radius: 999px; }
.pay-mc-circles i.r { left: 0; background: #EB001B; }
.pay-mc-circles i.y { right: 0; background: #FF5F00; mix-blend-mode: multiply; }
.pay-stripe { font-weight: 700; font-size: 14px; letter-spacing: -0.03em; color: #635BFF; }

@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; } }