/* Partner signup pages, two-page flow (/nift, /disco, /nift2 -> /nift2/claim, /welcome).
   Design: Nathan's Canva edit (Oct 16) of the dfc-funnel handoff: copy above the photo, bold perks,
   step labels, member review. One centered column. Rules for changing this: see CLAUDE.md. */
:root{
  --page:#ffffff; --page-alt:#f5f7fb;
  --ink:#0f1b2d; --ink-2:#4b5a75; --ink-3:#69758a;
  --line:rgba(15,27,45,.10); --card-line:#e3e8f0;
  --blue:#2f7cf6; --blue-deep:#1f5fd0; --blue-pale:#eef4ff;
  --good:#0f7b4e; --bad:#b42318;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light}
[hidden]{display:none!important}
body{background:var(--page);color:var(--ink);font-family:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1{text-wrap:balance}
p{text-wrap:pretty}
.nw{white-space:nowrap}

/* header: centered logo */
.top{display:flex;justify-content:center;align-items:center;height:56px;border-bottom:1px solid var(--line);background:var(--page)}
.top img{height:26px;width:auto}

/* one column */
.body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:18px}

/* ---------- screen 1: the offer ---------- */
.hero{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#0d2b4a}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,45,.05) 30%,rgba(15,27,45,.72) 100%)}
.hero .amt{position:absolute;left:20px;bottom:16px;color:#fff;z-index:1;line-height:1}
.hero .amt b{font-size:72px;font-weight:700;letter-spacing:-.03em;display:block}
.hero .amt b .cur{font-weight:600}
.hero .plane{position:absolute;right:18px;top:16px;z-index:1;width:28px;height:28px;fill:#fff;opacity:.95} /* disco-shipping draft only */
.hero .amt b.word{font-size:56px}
.hero .amt small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.92;margin-top:0}
.head{display:flex;flex-direction:column;gap:8px}
/* lander: copy first, then photo; 24px between sections (28 on desktop) */
[data-screen="offer"] .body{gap:24px}
[data-screen="offer"] .head{gap:4px}
[data-screen="offer"] h1{font-size:min(25px,calc((100vw - 40px) / 13.9))}
[data-screen="offer"] .lead{margin-top:2px;position:relative;top:-3px}
[data-screen="offer"] .trust{margin-bottom:2px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
h1{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.lead{font-size:15px;line-height:1.5;color:var(--ink-2)}
.perks{border:1px solid var(--card-line);border-radius:14px;background:var(--page);list-style:none}
.perks li{display:flex;align-items:center;gap:14px;padding:16px 18px;font-size:15px;font-weight:700}
.perks li+li{border-top:1px solid var(--line)}
.perks svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trust{display:flex;align-items:center;justify-content:center;gap:0;margin:0 -2px;text-align:center}
.trust b{display:block;font-size:18px;font-weight:600;color:var(--ink);position:relative;top:-3px}
.trust span{display:block;font-size:min(13px,calc((100vw - 80px) / 23.2));color:var(--ink-2);margin-top:1px}
.laurel{width:22px;height:44px;fill:none;stroke:#c9a24a;stroke-width:1.6;stroke-linecap:round;flex:none}
.laurel.flip{transform:scaleX(-1)}
.fine{font-size:12px;line-height:1.5;color:var(--ink-3);text-align:center;position:relative;top:-3px}
.fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.cta{display:flex;align-items:center;justify-content:center;width:100%;height:54px;border-radius:14px;background:var(--blue);color:#fff;font:600 16px/1 'Poppins',sans-serif;text-decoration:none;border:0;cursor:pointer}
.cta:hover{background:var(--blue-deep)}
.cta:focus-visible{outline:3px solid rgba(47,124,246,.35);outline-offset:2px}
.cta:disabled{opacity:.7;cursor:progress}

/* phone: the button stays pinned to the bottom of the screen */
.sticky{position:sticky;bottom:0;z-index:10;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))}

/* ---------- screen 2: email + Continue, then Stripe's embedded checkout opens underneath ---------- */
#email-form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--ink-2)}
.lrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.step{font-size:12px;line-height:1.45;color:var(--ink-3);white-space:nowrap}
.step-d{display:none}
.head-row{flex-direction:row;justify-content:space-between;align-items:center;gap:12px}
.inrow{position:relative}
.field{margin-bottom:2px}
.field input{width:100%;height:60px;border:1px solid var(--blue);border-radius:10px;background:#fff;padding:0 15px;font:400 16px 'Poppins',sans-serif;color:var(--ink);outline:none}
.field input::placeholder{color:var(--ink-3)}
.field input:focus{box-shadow:0 0 0 3px rgba(47,124,246,.18)}
.field input[readonly]{background:var(--page-alt);padding-right:84px;box-shadow:none;border-color:var(--card-line)}
.change{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:44px;padding:0 10px;background:none;border:0;font:500 13px 'Poppins',sans-serif;color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.before{display:flex;flex-direction:column;gap:12px}
.next{text-align:center;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.next svg{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;color:var(--good)}
.legal{font-size:12px;line-height:1.5;color:var(--ink-3);text-align:center}
.legal a{text-decoration:underline;text-underline-offset:2px}
.incl{font-size:12px;line-height:1.45;color:var(--ink-2);text-align:center;margin-top:-4px}
#checkout:empty{display:none}

/* member review: under the email step, gone once the card form opens */
.review{position:relative;margin:10px 0 0;padding:54px 20px 20px;border-radius:16px;background:var(--blue-pale)}
.review blockquote{font-size:13px;line-height:1.55;color:var(--ink)}
.review .stars{margin-top:8px;font:16px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;color:#f5a623;letter-spacing:0}
.review figcaption{margin-top:5px;font-size:13px;line-height:1.45;font-weight:700;color:var(--ink-2);text-transform:uppercase}
.review .q{position:absolute;font:700 56px/1 Arial,Helvetica,sans-serif;color:var(--blue)}
.review .q1{left:20px;top:23.5px}
.review .q2{right:22px;bottom:-9.5px}
.loading{font-size:13px;color:var(--ink-3);text-align:center;padding:28px 0}
.err{font-size:13.5px;font-weight:500;color:var(--bad);text-align:center}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:12px 14px;border-radius:12px;background:#fff7e6;border:1px solid #f5dda8;font-size:14px;line-height:1.45;color:#5c3d06}
.already{display:flex;flex-direction:column;gap:14px}

/* ---------- screen 3: welcome ---------- */
.hero-sm{aspect-ratio:16/7}
.hero-sm::after{display:none}
.badge-lg{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;z-index:1}
.badge-lg svg{width:30px;height:30px;fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.steps{list-style:none;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps .num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue-pale);color:var(--blue-deep);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
.steps b{display:block;font-size:15px;font-weight:600}
.steps span:not(.num){display:block;font-size:13px;line-height:1.45;color:var(--ink-2);margin-top:2px}

/* ---------- desktop: same column, off-white page ---------- */
@media (min-width:700px){
  body{background:var(--page-alt)}
  .body{width:520px;margin:0 auto;padding:40px 0 48px}
  h1{font-size:30px}
  .sticky{position:static;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;width:520px;margin:-24px auto 49px}
  .pay .body{padding-top:32px}
  .perks{background:var(--page)}
  [data-screen="offer"] .body{gap:28px}
  [data-screen="offer"] h1{font-size:37px;white-space:nowrap}
  [data-screen="offer"] .lead{margin-top:6px}
  [data-screen="offer"] .trust{margin-bottom:4px}
  .trust span{font-size:14px}
  .step-d{display:block}
  .step-m{display:none}
  .field input[readonly]{background:#fff}
  .review{padding:54px 24px 21px}
  .review blockquote{font-size:16px}
  .review .q1{left:22px;top:24px}
  .review .stars{margin-top:4px}
  .review figcaption{margin-top:8px}
  .laurel.flip{margin-left:3px}
}

/* ---------- stand-in for Stripe's embedded checkout ----------
   Drawn the way Stripe draws it for a 30-day trial with the email prefilled and Link off, in the
   branding DFC would set (button #2f7cf6, border style "rounded", Montserrat: Stripe has no Poppins).
   Only shown until DFC's endpoint is connected. */
.sx{font-family:Montserrat,system-ui,sans-serif;color:#303030;background:#fff;border-radius:14px;padding:6px 0}
@media (min-width:700px){.sx{padding:22px 20px}}
.sx p{margin:0}
.sxsum{padding:2px 6px 0}
.sxic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0f1b2d;color:#fff}
.sxic svg{width:18px;height:18px;transform:rotate(45deg)}
.sxtry{font-size:14px;color:#6a6a6a;margin-top:22px!important}
.sxbig{font-size:28px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-top:2px!important}
.sxli{display:flex;align-items:flex-start;gap:16px;margin-top:20px}
.sxnm{flex:1;font-size:14px;font-weight:500;padding-top:2px}
.sxpr{text-align:right;font-size:14px;font-weight:500;padding-top:2px}
.sxpr small{display:block;font-size:12px;font-weight:400;color:#6a6a6a;margin-top:3px}
.sxtot{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;padding-top:16px;border-top:1px solid #e8e8e8;font-size:14px;font-weight:500}
.sxtot b{font-size:16px;font-weight:600}
.sxhide{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:#f3f3f3;border-radius:999px;padding:9px 13px;font-size:14px;font-weight:500}
.sxhide svg{width:14px;height:14px}
.sxcard{margin-top:20px;border:1px solid #e8e8e8;border-radius:10px;padding:16px}
.sxap{display:flex;align-items:center;justify-content:center;gap:3px;height:48px;border-radius:6px;background:#000;color:#fff;font:500 20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-decoration:none}
.sxap svg{width:17px;height:20px;margin-top:-3px}
.sxor{display:flex;align-items:center;gap:10px;margin:18px 0 6px!important;font-size:13px;color:#707070}
.sxor::before,.sxor::after{content:"";flex:1;height:1px;background:#e8e8e8}
.sxlock{display:flex;align-items:center;gap:18px;height:44px;margin-top:14px;border-radius:6px;background:#f5f5f5;border:1px solid #ebebeb;padding:0 14px;font-size:14px;overflow:hidden}
.sxlock span{color:#6a6a6a;font-weight:500}.sxlock b{font-weight:500;color:#303030;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxh{font-size:16px;font-weight:500;margin:20px 0 12px!important}
.sxacc{border:1px solid #e8e8e8;border-radius:8px}
.sxrow{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:14px;font-weight:500}
.sxrow i{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #8a8a8a;background:#fff}
.sxrow i.on{border:5.5px solid #0f1b2d}
.sxrow2{border-top:1px solid #e8e8e8}
.sxrow svg.cardic{width:20px;height:20px}
.sxapm{display:inline-flex;align-items:center;gap:1px;height:18px;padding:0 4px;border:1px solid #303030;border-radius:4px;font:600 10px -apple-system,sans-serif}
.sxapm svg{width:8px;height:10px;margin-top:-2px}
.sxbody{padding:0 16px 16px}
.sxl{display:block;font-size:13px;font-weight:500;color:#4d4d4d;margin:14px 0 7px!important}
.sxbody .sxl:first-child{margin-top:2px!important}
.sxgrp{border:1px solid #e3e3e3;border-radius:6px;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.sxin{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;padding:0 12px;font-size:15px;color:#707070;white-space:nowrap}
.sxgrp>.sxin+.sxin,.sxsplit{border-top:1px solid #e3e3e3}
.sxsplit{display:flex}.sxsplit .sxin{flex:1}.sxsplit .sxin+.sxin{border-left:1px solid #e3e3e3}
.sxsel{color:#303030}.sxsel svg{width:16px;height:16px}
.sxinp{display:flex;align-items:center;height:44px;border:1px solid #e3e3e3;border-radius:6px;padding:0 12px;font-size:15px;color:#707070;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.brands{display:flex;gap:3px;flex:none}.brands svg{width:24px;height:16px;display:block}
.cvc{width:24px;height:18px;flex:none}
.sxsub{font-size:13px;line-height:1.45;color:#4d4d4d;margin-top:18px!important}
.sxbtn{display:flex;align-items:center;justify-content:center;height:48px;margin-top:14px;border-radius:6px;background:#2f7cf6;color:#fff;font:500 16px Montserrat,sans-serif;text-decoration:none}
.sxauth{font-size:12.5px;line-height:1.45;color:#6a6a6a;text-align:center;margin-top:14px!important}
.sxpw{display:flex;align-items:center;justify-content:center;gap:14px;font-size:12px;color:#6a6a6a;margin-top:16px!important}
.sxpw b{font:800 13px Arial,sans-serif;letter-spacing:-.02em;margin-left:-10px}
.sxpw i{width:1px;height:16px;background:#e0e0e0}
.sx u{text-decoration:underline;text-underline-offset:2px}
.sxnote{font-size:12px;color:var(--ink-3);text-align:center;margin-top:-6px}

.debug{margin:0 20px 32px;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:14px;font:12px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word}