/* ============================================================
   Taste of Tulum — "Join the Festival" partner signup
   Mobile-first, app-like. Inherits brand tokens from
   colors_and_type.css ( --tt-* , fonts ).
   ============================================================ */

*{ box-sizing: border-box; }

body{
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% -8%, #f8efda 0%, var(--tt-paper) 52%) fixed,
    var(--tt-paper);
  color: var(--tt-ink-soft);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* paper grain (subtle) */
.grain{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .45; mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 12% 20%, rgba(120,95,40,.05) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 78% 64%, rgba(120,95,40,.05) 0 1px, transparent 1px 4px);
  background-size: 180px 180px, 240px 240px;
}

.app{
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(180deg, color-mix(in oklab, var(--tt-card) 60%, var(--tt-paper)) 0%, var(--tt-paper) 240px);
  box-shadow: 0 0 0 1px var(--tt-paper-edge), 0 30px 80px rgba(17,48,42,.10);
}

/* ============================================================
   HEADER (dark teal bar, like the flyer)
   ============================================================ */
.appbar{
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--tt-ink) 92%, black 8%);
  border-bottom: 1px solid rgba(227,192,113,.28);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
}
.appbar .logo img{ height: 34px; width: auto; }
.appbar .back{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  color: rgba(244,234,212,.78); padding: 8px 6px; border-radius: var(--r-sm);
}
.appbar .back:hover{ color: var(--tt-gold-bright); }
.appbar .back svg{ width: 17px; height: 17px; }

/* ============================================================
   PAPEL PICADO banner
   ============================================================ */
.papel{ display: block; width: 100%; height: 38px; }
.papel svg{ display: block; width: 100%; height: 100%; }

/* ============================================================
   INTRO
   ============================================================ */
.intro{ padding: 26px 22px 8px; text-align: center; }
.intro .eyebrow{
  font-size: 11.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--tt-gold-deep); margin-bottom: 8px;
}
.intro h1{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 8.5vw, 40px); color: var(--tt-ink); line-height: 1.02;
}
.intro .flourish{
  font-family: var(--font-script); font-size: 23px; color: var(--tt-teal);
  margin-top: 2px;
}
.intro p{
  font-size: 15px; line-height: 1.55; color: var(--tt-ink-soft);
  max-width: 400px; margin: 12px auto 0;
}
.intro .dval{
  display: inline-block; margin-top: 14px;
  font-weight: 800; font-size: 12.5px; letter-spacing: .03em; color: #fff;
  background: var(--tt-red); padding: 6px 15px; border-radius: 999px;
  box-shadow: var(--tt-shadow-1);
}

/* ============================================================
   FORM SHELL
   ============================================================ */
form#signup{ padding: 8px 22px 140px; }

.section{ margin-top: 26px; }
.section-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-head .num{
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tt-ink); color: var(--tt-gold-bright);
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.section-head h2{
  font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--tt-ink);
  line-height: 1.1;
}
.section-head .sub{ font-size: 13px; color: var(--tt-ink-faint); margin-top: 1px; }

/* gold rule with marigold dot */
.rule{ display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.rule .ln{ flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--tt-gold) 70%); }
.rule .ln.r{ background: linear-gradient(90deg, var(--tt-gold) 30%, transparent); }
.rule .dot{ width: 8px; height: 8px; background: var(--tt-red); transform: rotate(45deg); flex: 0 0 auto; }

/* ============================================================
   ROLE SELECTOR
   ============================================================ */
.role-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role{
  position: relative; cursor: pointer;
  background: var(--tt-card); border: 1.5px solid var(--tt-paper-edge);
  border-radius: var(--r-md); padding: 18px 14px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow: var(--tt-shadow-1);
}
.role input{ position: absolute; opacity: 0; pointer-events: none; }
.role .ic{
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tt-paper-2); color: var(--tt-teal);
  border: 1.5px solid rgba(192,138,46,.4);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.role .ic svg{ width: 28px; height: 28px; }
.role .rl{ font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--tt-ink); }
.role .rd{ font-size: 11.5px; color: var(--tt-ink-faint); line-height: 1.3; }
.role:hover{ transform: translateY(-2px); box-shadow: var(--tt-shadow-2); border-color: rgba(192,138,46,.55); }
.role .check{
  position: absolute; top: 9px; right: 9px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--tt-gold); color: #3a2606; display: grid; place-items: center;
  opacity: 0; transform: scale(.6); transition: opacity .14s ease, transform .14s ease;
}
.role .check svg{ width: 13px; height: 13px; }
/* selected */
.role.is-on{
  border-color: var(--tt-gold); background: #fff;
  box-shadow: 0 0 0 2px rgba(192,138,46,.35), var(--tt-shadow-2);
}
.role.is-on .ic{ background: var(--tt-teal); color: var(--tt-gold-bright); border-color: var(--tt-teal); }
.role.is-on .check{ opacity: 1; transform: scale(1); }
.role:focus-within{ outline: none; box-shadow: 0 0 0 3px rgba(29,107,94,.30), var(--tt-shadow-1); }

/* ============================================================
   FIELDS
   ============================================================ */
.fields{ display: flex; flex-direction: column; gap: 16px; }
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 440px){ .grid-2{ grid-template-columns: 1fr; } }

.field{ display: flex; flex-direction: column; gap: 6px; }
.field label, .group > .lbl{
  font-size: 13px; font-weight: 700; color: var(--tt-ink); letter-spacing: .005em;
}
.field label .opt, .group > .lbl .opt{
  font-weight: 600; color: var(--tt-ink-faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; margin-left: 5px;
}
.req{ color: var(--tt-red); margin-left: 2px; }

.control{
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--tt-ink);
  background: #fff; border: 1.5px solid var(--tt-paper-edge); border-radius: var(--r-sm);
  padding: 12px 14px; min-height: 46px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
textarea.control{ min-height: 92px; resize: vertical; line-height: 1.5; }
.control::placeholder{ color: var(--tt-ink-faint); opacity: .8; }
.control:hover{ border-color: rgba(192,138,46,.5); }
.control:focus{
  outline: none; border-color: var(--tt-gold);
  box-shadow: 0 0 0 3px rgba(192,138,46,.22);
}

/* input with prefix/suffix */
.affix{
  display: flex; align-items: stretch; background: #fff;
  border: 1.5px solid var(--tt-paper-edge); border-radius: var(--r-sm);
  overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease;
}
.affix:hover{ border-color: rgba(192,138,46,.5); }
.affix:focus-within{ border-color: var(--tt-gold); box-shadow: 0 0 0 3px rgba(192,138,46,.22); }
.affix .pre, .affix .suf{
  display: grid; place-items: center; padding: 0 13px; min-height: 46px;
  background: var(--tt-paper-2); color: var(--tt-ink-soft);
  font-weight: 800; font-size: 14.5px; flex: 0 0 auto;
}
.affix .pre{ border-right: 1.5px solid var(--tt-paper-edge); }
.affix .suf{ border-left: 1.5px solid var(--tt-paper-edge); }
.affix .control{ border: 0; border-radius: 0; box-shadow: none; flex: 1; min-width: 0; }
.affix .control:focus{ box-shadow: none; }
.affix .pre svg{ width: 18px; height: 18px; color: var(--tt-teal); }

/* helper + error */
.help{ font-size: 12px; color: var(--tt-ink-faint); }
.err{ display: none; font-size: 12.5px; font-weight: 700; color: var(--tt-red); align-items: center; gap: 5px; }
.err svg{ width: 14px; height: 14px; flex: 0 0 auto; }
.field.invalid .control,
.field.invalid .affix{ border-color: var(--tt-red); box-shadow: 0 0 0 3px rgba(178,50,38,.16); }
.field.invalid .err, .group.invalid .err{ display: flex; }

/* social block */
.social-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 440px){ .social-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   CHIPS (multi-select)
   ============================================================ */
.group{ display: flex; flex-direction: column; gap: 9px; }
.chips{ display: flex; flex-wrap: wrap; gap: 9px; }
.chip{
  position: relative; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--tt-paper-edge); border-radius: 999px;
  padding: 10px 15px 10px 13px; font-size: 14px; font-weight: 600; color: var(--tt-ink);
  transition: border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
  min-height: 44px;
}
.chip input{ position: absolute; opacity: 0; pointer-events: none; }
.chip .tick{
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--tt-paper-edge); display: grid; place-items: center;
  background: var(--tt-paper); color: transparent; transition: all .14s ease;
}
.chip .tick svg{ width: 11px; height: 11px; }
.chip:hover{ border-color: rgba(192,138,46,.55); }
.chip.is-on{ border-color: var(--tt-teal); background: color-mix(in oklab, var(--tt-teal) 10%, #fff); color: var(--tt-ink); }
.chip.is-on .tick{ background: var(--tt-teal); border-color: var(--tt-teal); color: #fff; }
.chip:focus-within{ box-shadow: 0 0 0 3px rgba(29,107,94,.28); }

/* "Other" reveal text field */
.other-reveal{ display: none; }
.other-reveal.show{ display: flex; }

/* ============================================================
   YES / NO toggle
   ============================================================ */
.toggle{ display: inline-flex; background: var(--tt-paper-2); border: 1.5px solid var(--tt-paper-edge); border-radius: var(--r-sm); padding: 4px; gap: 4px; }
.toggle label{
  position: relative; cursor: pointer; min-width: 72px; text-align: center;
  padding: 9px 16px; border-radius: 6px; font-size: 14px; font-weight: 700; color: var(--tt-ink-soft);
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.toggle input{ position: absolute; opacity: 0; pointer-events: none; }
.toggle label.is-on{ background: #fff; color: var(--tt-ink); box-shadow: var(--tt-shadow-1); }
.toggle label.yes.is-on{ color: var(--tt-teal); box-shadow: inset 0 0 0 1.5px var(--tt-teal), var(--tt-shadow-1); }
.toggle label.no.is-on{ color: var(--tt-red); box-shadow: inset 0 0 0 1.5px var(--tt-red), var(--tt-shadow-1); }
.toggle:focus-within{ box-shadow: 0 0 0 3px rgba(192,138,46,.22); }

.conditional{ display: none; margin-top: 4px; }
.conditional.show{ display: flex; flex-direction: column; gap: 6px; }

/* ============================================================
   CONSENT checkboxes
   ============================================================ */
.consents{ display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.consent{
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: var(--tt-card); border: 1.5px solid var(--tt-paper-edge);
  border-radius: var(--r-md); padding: 14px 15px;
  transition: border-color .14s ease, background .14s ease;
}
.consent:hover{ border-color: rgba(192,138,46,.5); }
.consent input{ position: absolute; opacity: 0; pointer-events: none; }
.consent .box{
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; margin-top: 1px;
  border: 1.5px solid var(--tt-gold-deep); background: #fff;
  display: grid; place-items: center; color: transparent; transition: all .14s ease;
}
.consent .box svg{ width: 14px; height: 14px; }
.consent .txt{ font-size: 13.5px; line-height: 1.45; color: var(--tt-ink-soft); }
.consent.is-on{ border-color: var(--tt-teal); background: color-mix(in oklab, var(--tt-teal) 7%, var(--tt-card)); }
.consent.is-on .box{ background: var(--tt-teal); border-color: var(--tt-teal); color: #fff; }
.consent:focus-within{ box-shadow: 0 0 0 3px rgba(29,107,94,.25); }
.consent.invalid{ border-color: var(--tt-red); }

/* file upload */
.dropzone{
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 1.5px dashed rgba(192,138,46,.55); border-radius: var(--r-md);
  background: repeating-linear-gradient(45deg, rgba(192,138,46,.05) 0 9px, transparent 9px 18px), var(--tt-card);
  padding: 22px 16px; cursor: pointer; color: var(--tt-ink-soft);
  transition: border-color .14s ease, background .14s ease;
}
.dropzone:hover{ border-color: var(--tt-gold); }
.dropzone svg{ width: 26px; height: 26px; color: var(--tt-gold-deep); }
.dropzone .dz-main{ font-weight: 700; color: var(--tt-ink); font-size: 14px; }
.dropzone .dz-sub{ font-size: 12px; color: var(--tt-ink-faint); }
.dropzone input{ display: none; }
.filelist{ display: flex; flex-direction: column; gap: 7px; }
.filelist .fl{
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tt-ink);
  background: var(--tt-paper-2); border-radius: var(--r-sm); padding: 8px 12px;
}
.filelist .fl svg{ width: 16px; height: 16px; color: var(--tt-teal); flex: 0 0 auto; }
.filelist .fl .rm{ margin-left: auto; color: var(--tt-ink-faint); cursor: pointer; display: grid; place-items: center; }
.filelist .fl .rm:hover{ color: var(--tt-red); }

/* repeatable url rows */
.url-rows{ display: flex; flex-direction: column; gap: 9px; }
.url-row{ display: flex; gap: 9px; align-items: center; }
.url-row .control{ flex: 1; }
.icon-btn{
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer;
  background: var(--tt-paper-2); border: 1.5px solid var(--tt-paper-edge); color: var(--tt-ink-soft);
  transition: all .14s ease;
}
.icon-btn:hover{ border-color: rgba(192,138,46,.55); color: var(--tt-red); }
.icon-btn svg{ width: 18px; height: 18px; }
.add-link{
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--tt-teal); cursor: pointer; padding: 6px 2px;
}
.add-link svg{ width: 16px; height: 16px; }
.add-link:hover{ color: var(--tt-gold-deep); }

/* role panels */
.role-panel{ display: none; }
.role-panel.show{ display: block; }
.pick-hint{
  text-align: center; color: var(--tt-ink-faint); font-size: 13.5px;
  padding: 22px 10px; font-style: italic;
}

/* ============================================================
   STICKY SUBMIT BAR
   ============================================================ */
.submitbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; justify-content: center; padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--tt-paper) 38%);
  pointer-events: none;
}
.submitbar[hidden]{ display: none; }
.submitbar .inner{ width: 100%; max-width: 516px; pointer-events: auto; }
.btn-submit{
  width: 100%; cursor: pointer; border: 0;
  font-family: var(--font-body); font-weight: 800; font-size: 16.5px; letter-spacing: .02em;
  color: #3a2606; padding: 16px 22px; border-radius: var(--r-md); min-height: 56px;
  background: linear-gradient(180deg, var(--tt-gold-bright), var(--tt-gold));
  box-shadow: 0 3px 0 var(--tt-gold-deep), var(--tt-shadow-2);
  transition: transform .08s ease, background .16s ease, box-shadow .16s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-submit svg{ width: 20px; height: 20px; }
.btn-submit:hover{ background: linear-gradient(180deg, #eccd86, var(--tt-gold-bright)); }
.btn-submit:active{ transform: translateY(2px); box-shadow: 0 1px 0 var(--tt-gold-deep), var(--tt-shadow-1); }
.btn-submit:disabled{ opacity: .55; cursor: not-allowed; box-shadow: 0 3px 0 var(--tt-gold-deep); }

.form-error{
  display: none; margin: 0 auto 10px; max-width: 516px;
  background: color-mix(in oklab, var(--tt-red) 12%, #fff); border: 1.5px solid rgba(178,50,38,.4);
  color: var(--tt-red); border-radius: var(--r-sm); padding: 10px 14px;
  font-size: 13px; font-weight: 700; align-items: center; gap: 8px;
}
.form-error.show{ display: flex; }
.form-error svg{ width: 16px; height: 16px; flex: 0 0 auto; }

/* ============================================================
   SUCCESS SCREEN
   ============================================================ */
.success{
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in oklab, var(--tt-ink) 62%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow: auto;
}
.success.show{ display: flex; animation: fade .24s ease; }
@keyframes fade{ from{ opacity: 0; } to{ opacity: 1; } }
.success-card{
  position: relative; max-width: 440px; width: 100%; text-align: center;
  background: var(--tt-card);
  border: 1px solid var(--tt-paper-edge);
  border-radius: var(--r-lg, 18px);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--tt-gold) 26%, transparent), var(--tt-shadow-3);
  padding: 18px 28px 30px;
  overflow: hidden;
  animation: dialogPop .34s cubic-bezier(.2,1.1,.4,1) both;
}
@keyframes dialogPop{
  from{ transform: translateY(14px) scale(.94); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
.success .close{
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tt-paper-edge); border-radius: 50%;
  background: color-mix(in oklab, var(--tt-paper) 70%, var(--tt-card));
  color: var(--tt-ink-soft); cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .08s ease;
}
.success .close svg{ width: 18px; height: 18px; }
.success .close:hover{ background: var(--tt-paper-2); color: var(--tt-ink); }
.success .close:active{ transform: scale(.94); }
.success .close:focus-visible{ outline: 2px solid var(--tt-gold); outline-offset: 2px; }
.success .medal{
  width: 132px; height: 132px; margin: 0 auto 18px; border-radius: 50%;
  overflow: hidden; background: var(--tt-paper-2);
  border: 4px solid var(--tt-gold); box-shadow: inset 0 0 0 3px var(--tt-card), var(--tt-shadow-2);
  animation: pop .5s cubic-bezier(.2,1.3,.4,1) both;
}
.success .medal img{ width: 100%; height: 100%; object-fit: cover; }
@keyframes pop{ from{ transform: scale(.4); opacity: 0; } to{ transform: scale(1); opacity: 1; } }
.success .eyebrow{
  font-size: 11.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--tt-gold-deep); margin-bottom: 8px;
}
.success h2{ font-family: var(--font-display); font-weight: 900; font-size: clamp(34px,9vw,46px); color: var(--tt-ink); line-height: 1; }
.success .script{ font-family: var(--font-script); font-size: 28px; color: var(--tt-teal); margin-top: 4px; }
.success p{ font-size: 15px; line-height: 1.6; color: var(--tt-ink-soft); max-width: 360px; margin: 14px auto 0; }
.success .who{ font-weight: 800; color: var(--tt-ink); }
.success .btn-again{
  display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; cursor: pointer;
  font-family: var(--font-body); font-weight: 800; font-size: 15px; color: #3a2606;
  background: linear-gradient(180deg, var(--tt-gold-bright), var(--tt-gold)); border: 0;
  padding: 14px 26px; border-radius: var(--r-md); min-height: 50px;
  box-shadow: 0 3px 0 var(--tt-gold-deep), var(--tt-shadow-1); transition: transform .08s ease, background .16s ease;
}
.success .btn-again:hover{ background: linear-gradient(180deg, #eccd86, var(--tt-gold-bright)); }
.success .btn-again:active{ transform: translateY(2px); }

/* confetti petals */
.petal{ position: fixed; top: -24px; width: 12px; height: 12px; border-radius: 60% 0; z-index: 101; pointer-events: none; opacity: 0; }
.success.show ~ .confetti .petal{ animation: fall linear forwards; }
@keyframes fall{
  0%{ transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%{ opacity: 1; }
  100%{ transform: translateY(108vh) rotate(540deg); opacity: .9; }
}

@media (prefers-reduced-motion: reduce){
  .success .medal, .success.show{ animation: none; }
  .petal{ display: none; }
}

/* ============================================================
   RESPONSIVE — base wrappers (mobile: single column passthrough)
   ============================================================ */
.layout{ display: block; }
.brand{ display: block; }
.brand-inner{ display: block; }
.brand-art{ display: none; }
.form-col{ display: block; }

/* ============================================================
   TABLET  (≥ 720px)  — wider column, roomier, 4-up role grid
   ============================================================ */
@media (min-width: 720px){
  .app{ max-width: 768px; }
  .intro{ padding: 40px 40px 8px; }
  .intro h1{ font-size: clamp(40px, 6vw, 50px); }
  .intro .flourish{ font-size: 26px; }
  .intro p{ font-size: 16px; max-width: 480px; }

  form#signup{ padding: 12px 40px 150px; }
  .section{ margin-top: 34px; }
  .section-head h2{ font-size: 23px; }

  .role-grid{ grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .role{ padding: 20px 12px 16px; }

  .submitbar .inner{ max-width: 688px; }
}

/* ============================================================
   DESKTOP  (≥ 1060px)  — split: teal brand rail + scrolling form
   ============================================================ */
@media (min-width: 1060px){
  .app{ max-width: 1240px; }

  .layout{
    display: grid;
    grid-template-columns: minmax(380px, 0.82fr) minmax(560px, 1.18fr);
    align-items: stretch;
  }

  /* ---- brand rail ---- */
  .brand{
    position: relative;
    background: color-mix(in oklab, var(--tt-ink) 95%, black 5%);
    border-right: 1px solid rgba(227,192,113,.22);
    overflow: hidden;
  }
  .brand-inner{
    position: sticky; top: 58px;
    height: calc(100vh - 58px);
    min-height: 480px;
    display: flex; flex-direction: column;
    padding: 56px 48px 0;
    overflow: hidden;
  }
  .brand .intro{
    text-align: left; padding: 0; max-width: 430px;
    position: relative; z-index: 2;
  }
  .brand .intro .eyebrow{ color: var(--tt-gold-bright); }
  .brand .intro h1{ color: #fff; font-size: clamp(42px, 3.6vw, 58px); }
  .brand .intro .flourish{ color: var(--tt-gold-bright); font-size: 32px; margin-top: 4px; }
  .brand .intro p{ color: rgba(244,234,212,.82); margin: 14px 0 0; max-width: 380px; }

  .brand-art{
    display: block; position: absolute; left: 0; right: 0; bottom: 0;
    height: 58%; z-index: 1; pointer-events: none;
    background-image: url('assets/hero-catrina.jpg');
    background-size: cover;
    background-position: 70% 22%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
  }

  /* ---- form column ---- */
  .form-col{ position: relative; min-width: 0; background: transparent; }
  form#signup{ padding: 32px 56px 48px; max-width: 680px; }
  .section:first-child{ margin-top: 8px; }
  .pick-hint{ text-align: left; padding: 22px 56px; }
  .role-grid{ grid-template-columns: 1fr 1fr; }

  /* ---- submit bar: confined to the form column, sticky ---- */
  .submitbar{
    position: sticky; left: auto; right: auto; bottom: 0;
    justify-content: flex-start;
    padding: 14px 56px 24px;
    background: linear-gradient(180deg, transparent, var(--tt-paper) 42%);
  }
  .submitbar .inner{ max-width: 624px; margin: 0; }
}

/* extra-wide — let the brand rail breathe a touch more */
@media (min-width: 1320px){
  form#signup{ padding-left: 72px; padding-right: 72px; }
  .submitbar{ padding-left: 72px; padding-right: 72px; }
}

/* ============================================================
   Production-only additions preserved across the handoff#3
   split-layout redesign — ARES run 008.
   ============================================================ */
/* upload row internals — R2 photo upload (run 007) */
.filelist .fl .fn{ font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52%; }
.filelist .fl .fs{ font-size: 12px; color: var(--tt-ink-faint); }
.filelist .fl.is-error{ background: rgba(178,50,38,.07); }
.filelist .fl.is-error svg{ color: var(--tt-red); }
.filelist .fl.is-error .fs{ color: var(--tt-red); }
.filelist .fl .sp{ animation: flSpin .7s linear infinite; }
@keyframes flSpin{ to{ transform: rotate(360deg); } }
/* Turnstile widget container */
.turnstile-wrap{ display: flex; justify-content: center; margin-top: 6px; }