/* MA Listing Studio — matches the live mindsetaffiliates.com system:
   paper ground, white panels, ink type, gold as accent only.
   Tokens lifted from Website/site/public (index.html + apply.html). */

:root{
  --paper:#FBFAF8;
  --panel:#fff;
  --ink:#0E1B33;
  --ink-dark:#08132A;
  --muted:rgba(14,27,51,.76);
  --muted-soft:rgba(14,27,51,.62);
  --line:#E7E2D9;
  --line-soft:#F1EDE6;
  --line-strong:#CFC8BC;
  --gold:#BE8C63;
  --gold-ink:#93643F;      /* gold that passes contrast as text on paper */
  --gold-wash:rgba(190,140,99,.08);
  --err:#B42318;
  --shadow-sm:0 1px 2px rgba(14,27,51,.05);
  --shadow:0 4px 20px rgba(14,27,51,.06);
  --sans:"DM Sans",system-ui,-apple-system,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light}
html,body{background:var(--paper)}
body{
  min-height:100dvh;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:1.15rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--ink)}
.frame{max-width:1280px;margin-inline:auto;padding:0 clamp(18px,4vw,44px)}

.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-lg{width:26px;height:26px;stroke-width:1.5}

/* ---------- header ---------- */
.head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:26px 0 22px;border-bottom:1px solid var(--line);
}
.mark-name{font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:.002em}
.mark-name em{font-style:italic;font-weight:500}
.mark-kick{display:block;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-soft);margin-top:6px}
.head-note{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-soft)}
@media (max-width:620px){.head-note{display:none}}

/* ---------- columns ---------- */
.cols{display:grid;grid-template-columns:minmax(340px,420px) 1fr;gap:0;align-items:start}
.rail{padding:38px clamp(24px,3.5vw,48px) 48px 0;border-right:1px solid var(--line)}
.results{display:grid;gap:16px;padding:38px 0 48px clamp(24px,3.5vw,48px)}
@media (max-width:920px){
  .cols{grid-template-columns:1fr}
  .rail{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:40px}
  .results{padding-left:0}
}

/* ---------- rail copy ---------- */
.lede{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.1rem,3.6vw,2.7rem);line-height:1.1;
  letter-spacing:.002em;max-width:13ch;
}
.lede em{font-style:italic;color:var(--gold-ink)}
.sub{color:var(--muted);font-size:1.08rem;max-width:40ch;margin:16px 0 36px}

/* ---------- fields ---------- */
.lbl{
  display:block;font-family:var(--mono);font-size:.8rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-soft);
}
.lbl-soft{opacity:.72;text-transform:none;letter-spacing:.04em}
.field{margin-bottom:28px}
.field input[type=text],.field input[type=password],.gate input{
  width:100%;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font-family:var(--sans);font-size:1.08rem;font-weight:400;line-height:1.4;
  padding:13px 15px;margin-top:9px;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field input::placeholder,.gate input::placeholder{color:rgba(14,27,51,.34);font-weight:300}
.field input:focus,.gate input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.field-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* photos */
.field-block{margin-bottom:30px}
.lbl-row{display:flex;justify-content:space-between;align-items:baseline}
.lbl-count{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--muted-soft)}
.drop{
  margin-top:12px;min-height:96px;display:flex;align-items:center;gap:15px;
  padding:20px;background:var(--panel);
  border:1.5px dashed var(--line-strong);border-radius:16px;
  color:var(--muted);cursor:pointer;user-select:none;
  transition:border-color .2s ease,background .2s ease;
}
.drop:hover,.drop:focus-visible,.drop.over{border-color:var(--gold);background:var(--gold-wash)}
.drop:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold-wash)}
.drop .ic-lg{color:var(--gold-ink);flex:none}
.drop-line{font-size:1.05rem;color:var(--ink);font-weight:400}
.drop-hint{display:block;font-size:.9rem;font-weight:300;color:var(--muted-soft);margin-top:3px}
@media (hover:none){.drop-hint{display:none}}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumbs:empty{margin-top:0}
.thumb{position:relative;width:80px;height:60px;border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(14,27,51,.72);color:#F4F1EC;display:grid;place-items:center;cursor:pointer;padding:0;
}
.thumb button .ic{width:12px;height:12px}
.thumb button:hover{background:var(--ink)}

/* tone dot-radios */
.tones{border:0}
.tones legend{margin-bottom:12px}
.tone{
  display:flex;align-items:center;gap:12px;padding:9px 0;cursor:pointer;
  font-size:1.05rem;color:var(--muted);min-height:42px;
  transition:color .2s ease;
}
.tone:hover{color:var(--ink)}
.tone input{position:absolute;opacity:0;pointer-events:none}
.tone-dot{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:1.5px solid var(--line-strong);background:var(--panel);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.tone input:checked ~ .tone-dot{border-color:var(--gold);box-shadow:inset 0 0 0 4px var(--gold)}
.tone:has(input:checked){color:var(--ink);font-weight:400}
.tone input:focus-visible ~ .tone-dot{outline:2px solid var(--gold);outline-offset:3px}

/* access gate */
.gate{
  margin-bottom:28px;padding:18px 20px 22px;background:var(--gold-wash);
  border:1px solid rgba(190,140,99,.3);border-radius:16px;
}
.gate .lbl{color:var(--gold-ink)}

/* ---------- primary action: the site's ink pill ---------- */
.go{
  position:relative;overflow:hidden;width:100%;min-height:56px;
  border:0;border-radius:40px;cursor:pointer;
  background:var(--ink);color:#F4F1EC;
  font-family:var(--sans);font-size:1.05rem;font-weight:600;line-height:1;
  padding:18px 26px;margin-top:8px;
  transition:transform .18s ease,filter .18s ease,background .18s ease;
}
.go:hover:not(:disabled){background:var(--ink-dark);transform:translateY(-1px)}
.go:active:not(:disabled){transform:none}
.go:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.go:disabled{cursor:default}
.go.busy{color:rgba(244,241,236,.7)}
.go-bar{
  position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--gold);opacity:0;transform:scaleX(0);transform-origin:left;
}
.go.busy .go-bar{opacity:1;animation:crawl 26s cubic-bezier(.15,.6,.3,1) forwards}
@keyframes crawl{0%{transform:scaleX(0)}12%{transform:scaleX(.32)}45%{transform:scaleX(.66)}100%{transform:scaleX(.94)}}

.status{min-height:24px;margin-top:14px;font-family:var(--mono);font-size:.88rem;line-height:1.5;letter-spacing:.03em;color:var(--muted-soft)}
.status.err{color:var(--err)}

/* ---------- result cards ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px 24px;box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease;
}
.card:not(.ghost){box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card-lbl{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-soft)}
.card-meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--muted-soft);opacity:.8;margin-left:auto}
.card-acts{display:flex;gap:4px}
.card-meta:empty + .card-acts{margin-left:auto}
.act{
  width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--muted-soft);
  display:grid;place-items:center;cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.act:hover{color:var(--ink);background:var(--line-soft)}
.act:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.act.ok{color:var(--gold-ink)}
.act:disabled{opacity:.4;cursor:default}
.ghost .act{visibility:hidden}
/* The longest label ("30-second video script") can't share a row with the word
   count and both buttons on a phone. Give the label its own row there. */
@media (max-width:560px){
  .card{padding:18px 18px 20px}
  .card-head{flex-wrap:wrap;gap:6px 10px}
  .card-lbl{flex:1 0 100%}
  .card-meta{margin-left:0}
  .card-acts{margin-left:auto}
  .card-meta:empty + .card-acts{margin-left:auto}
  /* an empty card has no count and hidden buttons — don't reserve them a row */
  .ghost .card-acts{display:none}
}

.card-body{font-size:1.08rem;line-height:1.7;color:var(--ink);font-weight:300}
.card-body.pop{white-space:pre-wrap} /* only once real text is set via textContent */
.card[data-card="mls"] .card-body{font-size:1.12rem;line-height:1.75}
.card[data-card="punchy"] .card-body{font-family:var(--serif);font-size:1.55rem;font-style:italic;font-weight:500;line-height:1.35}
.card[data-card="video"] .card-body{font-family:var(--mono);font-size:.95rem;line-height:1.8;font-weight:400}
.ghost-hint{color:var(--muted-soft);font-style:italic;font-size:1.05rem;white-space:normal}
.card-body .err-line{color:var(--err);font-size:1rem;white-space:normal}

.card-body.pop{animation:pop .5s ease both}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* shimmer skeleton while writing */
.skel{display:grid;gap:11px}
.skel i{
  display:block;height:13px;border-radius:5px;
  background:linear-gradient(100deg,#EFEBE4 32%,#F8F6F2 50%,#EFEBE4 68%);
  background-size:220% 100%;animation:shimmer 1.4s linear infinite;
}
.skel i:nth-child(2){width:92%}.skel i:nth-child(3){width:78%}.skel i:nth-child(4){width:85%}
@keyframes shimmer{to{background-position:-120% 0}}

/* load-in reveal */
.reveal{opacity:0;transform:translateY(16px);animation:rise .7s ease forwards}
.reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:10px;padding:28px 0 36px;text-align:center}
.foot-note{font-family:var(--mono);font-size:.82rem;line-height:1.6;letter-spacing:.06em;color:var(--muted-soft)}

/* ---- Mindset Affiliates maker's mark, "The ask" -------------------------
   The signature at the very bottom of every MA build. It rests as a credit
   and turns into an offer under the cursor. Do not make it louder.

   HOW THE SWAP WORKS: .ma-slot is a fixed-height window with overflow
   hidden holding two stacked one-line spans. Hover translates the pair up
   by exactly one line. The window height and the travel distance both read
   from --ma-line, so they can never drift apart. Both lines are nowrap,
   because a wrapped line would outgrow the window and show both at once.

   The mark is inline SVG rather than a hosted image on purpose: no extra
   request, no CDN dependency, and it survives being pasted into GHL. Its
   viewBox is cropped to the ink (y 103 to 497 of the 600x600 original) so
   the glyph sits on the text baseline with no dead space to nudge around.
   Do not swap it for a font approximation of the letters M and A. */
.ma-sig{margin-top:22px;display:flex;justify-content:center}
.ma-credit{
  --ma-line:17px;
  display:inline-flex;align-items:center;gap:9px;
  color:inherit;opacity:.58;
  font-size:12.5px;letter-spacing:.015em;
  transition:opacity .16s ease;
}
/* NEVER let the host stylesheet underline this. Nearly every site here has a
   footer a:hover{color:#fff;text-decoration:underline} rule, and at (0,1,2)
   that outranks a bare .ma-credit at (0,1,0), so the base text-decoration
   loses on hover and a white line appears under the signature. Restating it
   on the hover and focus states puts us at (0,2,0), which wins without
   needing !important. Caleb asked for the underline gone entirely. */
.ma-credit,
.ma-credit:hover,
.ma-credit:focus,
.ma-credit:focus-visible,
.ma-credit:active{text-decoration:none}
.ma-credit .ma-mark{
  display:block;flex:none;width:19px;height:auto;fill:currentColor;
  transition:fill .16s ease,transform .16s ease;
}
.ma-slot{
  position:relative;display:block;overflow:hidden;
  height:var(--ma-line);line-height:var(--ma-line);white-space:nowrap;
}
/* translate3d, not translateY, on both the resting and hovered state. It keeps
   the two lines on their own compositor layer for the whole transition instead
   of repainting text on every frame, which is what made the slide feel like it
   was dragging. Same reason the curve below has almost no tail: a long
   ease-out reads as lag on a 17px move. */
.ma-slot span{
  display:block;transform:translate3d(0,0,0);
  transition:transform .2s cubic-bezier(.22,.75,.28,1);
}
.ma-credit b{font-weight:600}
.ma-ask{color:#BE8C63}
/* Hover brightens by opacity alone and pins the colour back to inherit.
   Forcing a colour here (the host rule wants #fff) would make the outgoing
   line invisible mid-transition on a light footer. */
.ma-credit:hover,.ma-credit:focus-visible{opacity:1;color:inherit}
.ma-credit:hover .ma-mark,.ma-credit:focus-visible .ma-mark{fill:#BE8C63;transform:translate3d(0,-1px,0)}
.ma-credit:hover .ma-slot span,
.ma-credit:focus-visible .ma-slot span{transform:translate3d(0,calc(var(--ma-line) * -1),0)}
.ma-credit:focus-visible{outline:2px solid #BE8C63;outline-offset:5px;border-radius:5px}
@media (max-width:360px){.ma-credit{font-size:11.5px;gap:7px}}
@media (prefers-reduced-motion:reduce){
  .ma-credit,.ma-credit .ma-mark,.ma-slot span{transition:none}
  .ma-credit:hover .ma-mark{transform:none}
}

/* global reduced-motion guard */
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  .card-body.pop{animation:none}
  .skel i{animation:none}
  .go.busy .go-bar{animation:none;transform:scaleX(.5);opacity:1}
}