/* Homepage — a full-bleed QR builder. No fold: the tool is the page.
   Big preview on the left, controls on the right. Tokens, fonts, base
   button/nav/footer styles come from /brand.css. */

html, body { height: 100% }
[hidden]{ display:none!important }
body{
  overflow-x: hidden;
  background:
    radial-gradient(60% 50% at 50% -8%, rgba(255,45,135,.07), transparent 70%),
    #FFFFFF;
}

/* Oversized QR finder-pattern motif, faint, anchored to the page corners.
   The brand made visible as architecture rather than a logo slapped on top.
   Kept to a single corner so it reads as an intentional mark, not scattered
   decoration. */
.motif{
  position:fixed; z-index:0; pointer-events:none; opacity:.045;
  width:340px; height:340px; border:38px solid var(--brand); border-radius:60px;
}
.motif::after{
  content:""; position:absolute; inset:48px; background:var(--brand); border-radius:20px;
}
.motif.tl{ display:none }
.motif.br{ bottom:-120px; right:-110px }

nav{ position:relative; z-index:3 }

main.builder{
  position:relative; z-index:2;
  flex:1; width:100%; max-width:1200px; margin:0 auto;
  padding:clamp(10px,2.4vh,30px) clamp(18px,4vw,40px) clamp(20px,3vh,40px);
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(26px,5vw,72px); align-items:center;
}

/* ---- Left: the stage ---- */
.stage{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  min-width:0;
}
.qr-card{
  position:relative; width:min(100%,440px); aspect-ratio:1; background:#FFFFFF;
  border:1.5px solid var(--border-strong); border-radius:34px;
  display:flex; align-items:center; justify-content:center; padding:clamp(22px,3vw,34px);
  box-shadow:20px 20px 0 var(--brand-soft), var(--shadow-lg);
  transition:box-shadow .3s, border-color .3s, transform .3s;
}
.qr-card.has-qr{ border-color:rgba(255,45,135,.5) }
.qr-card:has(.empty){
  box-shadow:14px 14px 0 rgba(255,143,184,.35);
  background:
    linear-gradient(#FFFFFF,#FFFFFF) padding-box,
    repeating-linear-gradient(90deg,#EAD7E0 0 11px,transparent 11px 22px) border-box;
  border:2px dashed transparent;
}
.qr-card canvas,.qr-card svg{ max-width:100%; height:auto; border-radius:6px }
/* At-rest sample state: the QR is real but clearly a demo, tagged and gently
   dimmed so it reads as "preview," snapping to full strength once you type. */
.qr-card.showing-sample{ border-color:rgba(255,45,135,.28) }
.qr-card.showing-sample canvas{ opacity:.9 }
.sample-tag{
  position:absolute; top:16px; right:16px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-tint);
  padding:5px 11px; border-radius:var(--r-pill); border:1px solid rgba(255,45,135,.2);
  pointer-events:none;
}
.empty{
  width:100%; height:100%; display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; text-align:center;
  color:var(--subtle); font-size:14px; font-weight:600; line-height:1.5;
}
.empty::before{
  content:"⌗"; font-size:54px; line-height:1; color:var(--brand-soft); font-weight:400;
}
.stage-cap{
  font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.01em;
  display:block; line-height:1.5;
}
.stage-cap b{ color:var(--brand); font-family:var(--font-display); font-weight:800; white-space:nowrap }

/* ---- Right: the controls ---- */
.panel{ display:flex; flex-direction:column; gap:15px; min-width:0; max-width:540px }
.kicker{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:10px;
}
.builder-h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(34px,4.6vw,54px); line-height:1.05; letter-spacing:-.02em;
  color:var(--ink-strong); margin:0; text-wrap:balance;
}
.builder-h1 em{ font-family:var(--font-accent); font-style:normal; font-weight:800; color:var(--brand) }
.builder-sub{ font-size:15px; color:var(--muted); line-height:1.55; max-width:44ch }
.microclaims{
  display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; font-weight:600;
  color:var(--ink); margin-top:1px;
}
.microclaims span{ display:inline-flex; align-items:center; gap:6px }
.microclaims .dot{ width:6px; height:6px; border-radius:50%; background:var(--brand) }

input[type=text],input[type=url]{
  width:100%; padding:17px 18px; font-size:16px;
  border:1.5px solid var(--border-strong); border-radius:var(--r-md);
  background:#FFFFFF; color:var(--ink); outline:none;
  font-family:var(--font-body); font-weight:500;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder{ color:var(--subtle); font-weight:400 }
input:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,45,135,.14) }

.actions{ display:flex; gap:10px }
.actions button{
  flex:1; min-height:54px; padding:15px 18px; font-size:15px; font-weight:800;
  border-radius:var(--r-md); border:1.5px solid transparent; cursor:pointer;
  font-family:var(--font-body); display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background .15s, border-color .15s, color .15s, box-shadow .18s, transform .08s;
}
.actions button.primary{ background:var(--brand); color:#FFFFFF; border-color:var(--brand); box-shadow:var(--shadow-brand) }
.actions button.primary:hover:not(:disabled){ background:var(--brand-hover); border-color:var(--brand-hover); transform:translateY(-1px); box-shadow:0 14px 36px rgba(255,45,135,.34) }
.actions button.primary:disabled{ opacity:.32; cursor:not-allowed; box-shadow:none }
.actions button.secondary{ background:#FFFFFF; color:var(--ink); border-color:var(--border-strong) }
.actions button.secondary:hover{ border-color:var(--ink); background:var(--surface-2) }

.dl-extras{ display:flex; gap:16px; align-items:center }
.dl-link{
  background:none; border:none; color:var(--muted); font-size:12.5px; font-weight:600;
  cursor:pointer; padding:2px 2px; font-family:var(--font-body);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border-strong);
}
.dl-link:hover{ color:var(--brand); text-decoration-color:var(--brand) }

/* Short URL result */
.short-link-card{
  display:none;align-items:center;gap:12px;padding:12px 13px;
  background:var(--brand-tint);border:1px solid rgba(255,45,135,.24);
  border-radius:var(--r-sm);
}
.short-link-card.open{display:flex}
.short-link-copy{min-width:0;flex:1}
.short-link-label{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--brand-ink);margin-bottom:2px;
}
.short-link-copy a{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--ink);
  text-decoration:none;
}
.short-link-copy a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.short-link-card p{font-size:12px;color:var(--muted);line-height:1.45;margin-top:5px}
.short-copy-btn{
  flex:0 0 auto;padding:9px 14px;background:#FFFFFF;color:var(--brand-ink);
  border:1px solid rgba(255,45,135,.28);border-radius:var(--r-pill);
  font-size:12.5px;font-weight:800;font-family:var(--font-body);cursor:pointer;
  transition:background .15s,border-color .15s,transform .08s;
}
.short-copy-btn:hover{background:#FFF7FA;border-color:var(--brand);transform:translateY(-1px)}

/* Post-download nudge (logged-out only, once per session) */
.dl-nudge{
  display:flex;align-items:center;gap:12px;padding:12px 13px;
  background:var(--surface-2,#F6F6F7);border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.dl-nudge[hidden]{display:none}
.dl-nudge p{font-size:12.5px;color:var(--ink);line-height:1.45}
.dl-nudge p b{color:var(--brand-ink)}
.dl-nudge a.short-copy-btn{text-decoration:none;white-space:nowrap}
.dl-nudge-x{
  flex:0 0 auto;background:none;border:none;color:var(--muted);font-size:20px;line-height:1;
  cursor:pointer;padding:2px 4px;font-family:var(--font-body);
}
.dl-nudge-x:hover{color:var(--ink)}
@media(max-width:520px){.dl-nudge{flex-wrap:wrap}.dl-nudge a.short-copy-btn{flex:1 1 auto;text-align:center}}

/* Customizer */
.customizer{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px }
.swatches{
  display:flex; gap:8px; align-items:center; padding:7px 12px;
  background:#FFFFFF; border:1px solid var(--border-strong); border-radius:var(--r-pill);
}
.swatch{
  width:24px; height:24px; border-radius:50%; border:2px solid transparent; cursor:pointer;
  padding:0; background-clip:padding-box; box-shadow:inset 0 0 0 1px var(--border-strong);
  transition:transform .12s, border-color .12s;
}
.swatch[data-color=""]{ background-image:linear-gradient(135deg,transparent 47%,var(--muted) 47%,var(--muted) 53%,transparent 53%) }
.swatch-ink{ background:var(--ink) }
.swatch-brand{ background:var(--brand) }
.swatch-forest{ background:var(--success) }
.swatch-slate{ background:var(--muted) }
.swatch-indigo{ background:#3B5BA9 }
.swatch:hover{ transform:scale(1.12) }
.swatch.active{ border-color:var(--ink) }
#color-picker{ width:28px; height:28px; border:none; background:transparent; border-radius:50%; cursor:pointer; padding:0 }
.shape-picker{ display:flex; gap:6px; flex-wrap:wrap }
.shape-btn{
  padding:7px 13px; font-size:12px; font-weight:600; background:#FFFFFF;
  border:1.5px solid var(--border-strong); border-radius:var(--r-pill); cursor:pointer;
  color:var(--muted); font-family:var(--font-body); transition:all .15s;
}
.shape-btn:hover{ border-color:var(--muted); color:var(--ink) }
.shape-btn.active{ border-color:var(--brand); color:var(--brand); background:var(--brand-tint) }

/* Save panel — only visible to logged-in users with a QR rendered */
/* Save flow is a modal: the overlay (#save-panel) opens only when a logged-in
   user clicks Save, instead of an always-open inline panel. */
.save-modal{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(16,17,19,.5); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:20px;
}
.save-modal.open{ display:flex }
.save-modal-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); width:100%; max-width:460px; max-height:90vh; overflow-y:auto;
  padding:22px; display:flex; flex-direction:column; gap:14px;
  animation:brand-rise .24s cubic-bezier(.22,.61,.36,1) both;
}
.save-modal-actions{ display:flex; gap:10px; margin-top:4px }
.btn-create{
  flex:1; background:var(--brand); color:#fff; border:none; border-radius:var(--r-md);
  padding:13px; font-size:15px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-brand);
  font-family:var(--font-body); transition:background .15s,transform .12s;
}
.btn-create:hover:not(:disabled){ background:var(--brand-hover); transform:translateY(-1px) }
.btn-create:disabled{ opacity:.5; cursor:not-allowed }
.btn-cancel{
  background:transparent; color:var(--muted); border:1.5px solid var(--border-strong);
  border-radius:var(--r-md); padding:13px 18px; font-size:15px; font-weight:600; cursor:pointer;
  font-family:var(--font-body);
}
.btn-cancel:hover{ border-color:var(--ink); color:var(--ink) }
.save-panel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.save-panel-title{ font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.01em }
.save-panel-sub{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5 }
.save-panel-link{ font-size:13px; font-weight:600; color:var(--brand); text-decoration:none }
.save-panel-link:hover{ text-decoration:underline }
.save-grid{ display:grid; grid-template-columns:1fr; gap:12px }
.save-field label{ display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em }
.save-field input{ padding:13px 14px; font-size:14px }
.slug-input{ display:flex; align-items:center; background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--r-sm); overflow:hidden }
.slug-input span{ padding:0 0 0 14px; font-size:13px; font-family:var(--font-mono); color:var(--muted); white-space:nowrap }
.slug-input input{ border:none; background:transparent; border-radius:0; padding-left:8px; flex:1 }
.slug-input:focus-within{ border-color:var(--brand) }
.advanced-panel{ border:1px solid var(--border); border-radius:var(--r-sm); background:transparent; overflow:hidden }
.advanced-panel summary{ list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink) }
.advanced-panel summary::-webkit-details-marker{ display:none }
.advanced-panel summary::before{ content:"›"; font-size:16px; line-height:1; color:var(--muted); transition:transform .15s }
.advanced-panel[open] summary::before{ transform:rotate(90deg) }
.advanced-panel-body{ padding:0 14px 14px; display:flex; flex-direction:column; gap:10px }
.mini-pill{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--r-pill); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); background:var(--brand-tint) }
.utm-grid-home{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.utm-grid-home .full{ grid-column:1 / -1 }
.locked-note{ font-size:12.5px; color:var(--muted); line-height:1.55 }
.locked-note a{ color:var(--brand); font-weight:600; text-decoration:none }
.locked-note a:hover{ text-decoration:underline }
.logo-controls{ display:flex; flex-direction:column; gap:12px }
.logo-preview{ width:80px; height:80px; border:1.5px dashed var(--border-strong); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; background:var(--paper); overflow:hidden }
.logo-preview img{ max-width:100%; max-height:100%; object-fit:contain }
.logo-empty{ font-size:10.5px; color:var(--muted); text-align:center; line-height:1.4; padding:0 8px }
.logo-actions{ display:flex; gap:8px; flex-wrap:wrap }
.logo-btn{ padding:8px 14px; font-size:12.5px; font-weight:600; background:transparent; color:var(--ink); border:1.5px solid var(--border-strong); border-radius:var(--r-sm); cursor:pointer; font-family:var(--font-body) }
.logo-btn:hover{ border-color:var(--ink) }
.logo-btn.danger{ color:var(--brand) }
.logo-btn.danger:hover{ border-color:var(--brand) }
.logo-hint{ font-size:11.5px; color:var(--muted); line-height:1.5 }

/* Notes (upsell + saved confirmation) */
.note{ padding:13px 16px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); font-size:13px; color:var(--muted); line-height:1.55 }
.note strong{ color:var(--ink); font-weight:700 }
.note a{ color:var(--brand); font-weight:600; text-decoration:none }
.note a:hover{ text-decoration:underline }
.note.success{ background:rgba(22,163,74,0.08); border-color:rgba(22,163,74,0.25); color:var(--success) }
.note.success strong{ color:var(--success) }
.note.success a{ color:var(--success) }

/* Staggered reveal (brand-rise keyframe + reduced-motion guard in brand.css) */
.stage{ animation:brand-rise .65s cubic-bezier(.22,.61,.36,1) both }
.panel>*{ animation:brand-rise .6s cubic-bezier(.22,.61,.36,1) both }
.panel>*:nth-child(1){ animation-delay:.04s }
.panel>*:nth-child(2){ animation-delay:.08s }
.panel>*:nth-child(3){ animation-delay:.12s }
.panel>*:nth-child(4){ animation-delay:.16s }
.panel>*:nth-child(5){ animation-delay:.2s }

/* Footer styling lives in /brand.css (shared #eq-footer). Keep only the
   stacking fix so the footer sits above the page's animated background. */
footer{ position:relative; z-index:2 }

@media (max-width:880px){
  main.builder{ grid-template-columns:1fr; gap:24px; align-items:start; padding-top:14px }
  .panel{ max-width:none; order:2 }
  .stage{ order:1 }
  .qr-card{ width:min(100%,340px); box-shadow:12px 12px 0 var(--brand-soft), var(--shadow-md) }
  .motif{ display:none }
}
@media (max-width:520px){
  nav{ padding:14px 16px }
  nav #nav-guest{ gap:2px }
  nav a.navlink{ font-size:12px; padding:7px 8px }
  nav a.outline{ font-size:12px; padding:7px 12px }
  .builder-h1{ font-size:33px }
  .actions{ flex-direction:column }
  .short-link-card{align-items:stretch;flex-direction:column}
  .short-copy-btn{width:100%}
  .utm-grid-home{ grid-template-columns:1fr }
}