/* Refer + invite pages (/refer/, /refer/creators/, /refer/brands/, /invite/creators/, /invite/brands/).
   The application pages' own recipe (card, product stickers, fields, check, the one button, the sent screen),
   lifted out so the five pages share it. Tokens match apply/creators and the homepage. */
@layer reset, tokens, base, layout, components, utilities;

@font-face{
  font-family:'Archivo Fallback';
  src:local('Arial'), local('ArialMT');
  ascent-override:85.79%; descent-override:20.52%; line-gap-override:0%; size-adjust:102.34%;
}
@font-face{
  font-family:'Archivo Black Fallback';
  src:local('Arial Black'), local('Arial-Black');
  ascent-override:87.81%; descent-override:21%; line-gap-override:0%; size-adjust:99.99%;
}

@layer reset {
  *{ margin:0; padding:0; box-sizing:border-box }
  html, body{ width:100%; overscroll-behavior:none; overflow-x:clip }
  img{ display:block; max-width:100% }
  fieldset{ border:0; min-width:0 }
  ul, ol{ list-style:none }
}

@layer tokens {
  :root{
    --font-sans:'Archivo','Archivo Fallback',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
    --font-display:'Archivo Black','Archivo Black Fallback','Arial Black',sans-serif;
    --w-display:300; --w-text:400; --w-ui:500;
    --fs-body:clamp(16px, 1.667vw, 20px);
    --fs-small:14px;
    --fs-ui:14px;
    --lh-body:1.45;
    --ls-body:-.02em;
    --pop-pink:#ff2fd6;
    --neon-green:#39ff14;
    --ink:#24363f;
    --bg:#fff;
    --ink-64:color-mix(in srgb, var(--ink) 64%, transparent);
    --ink-48:color-mix(in srgb, var(--ink) 48%, transparent);
    --ink-24:color-mix(in srgb, var(--ink) 24%, transparent);
    --ink-08:color-mix(in srgb, var(--ink)  8%, transparent);
    --ease-expo:cubic-bezier(0.16, 1, 0.3, 1);
    --gap-top:clamp(64px, 12svh, 120px);
    --gap-bottom:clamp(56px, 10svh, 104px);
    --pad:clamp(18px, 4vw, 36px);
  }
  @media (pointer: coarse){ :root{ --fs-ui:16px } }
}

@layer base {
  a, button, label{ -webkit-tap-highlight-color:transparent }
  img{ -webkit-user-drag:none; user-select:none }
  ::selection{ background-color:var(--pop-pink); color:var(--ink) }
  body{
    font-family:var(--font-sans); font-weight:var(--w-display);
    font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
    background:var(--bg); color:var(--ink);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  h1, h2, h3, p, legend{ font:inherit; letter-spacing:inherit }
  b, strong{ font-weight:var(--w-ui) }
  a{ color:inherit }
  button, input, textarea{ font:inherit; letter-spacing:inherit; color:inherit }
  button{ background:none; border:0; cursor:pointer }
  :focus-visible{ outline:2px solid var(--ink); outline-offset:4px }
  :focus:not(:focus-visible){ outline:none }
  [hidden]{ display:none !important }
}

@layer layout {
  .shell{ min-height:100svh; display:grid; place-items:center; padding:var(--gap-top) 16px var(--gap-bottom); overflow:clip }
  .frame{ position:relative; width:min(640px, 100%) }
}

@layer components {
  /* product stickers tucked behind two corners of the card */
  .props{ position:absolute; inset:0; z-index:0; pointer-events:none }
  .prop{ position:absolute; width:var(--pw); height:var(--pw) }
  .prop img{ width:100%; height:100%; object-fit:contain; filter:saturate(1.1) drop-shadow(-3px 4px 4px rgb(0 0 0 / .22)) }
  .prop--tr{ --pw:clamp(128px, 24vw, 260px); top:calc(var(--pw) * -.42); right:calc(var(--pw) * -.5); rotate:10deg }
  .prop--bl{ --pw:clamp(128px, 24vw, 260px); bottom:calc(var(--pw) * -.4); left:calc(var(--pw) * -.5); rotate:-9deg }
  @media (min-width: 1024px){ .prop--tr{ right:calc(var(--pw) * -.7) } .prop--bl{ left:calc(var(--pw) * -.7) } }
  @media (min-width: 1280px){ .prop--tr{ right:calc(var(--pw) * -.82) } .prop--bl{ left:calc(var(--pw) * -.82) } }
  @media (max-width: 480px){ .prop--tr{ right:calc(var(--pw) * -.34) } .prop--bl{ left:calc(var(--pw) * -.34) } }

  .card{ position:relative; z-index:1; background:#fff; border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink) }
  .body{ display:grid; gap:clamp(18px, 3svh, 26px); padding:clamp(24px, 4.4svh, 40px) var(--pad) clamp(22px, 3.6svh, 32px) }
  .head{ display:grid; gap:6px }
  .title{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px, 3.4vw, 36px); line-height:1.02; letter-spacing:-.03em; text-wrap:balance }
  .intro{ font-size:var(--fs-small); line-height:1.5; color:var(--ink-64); font-weight:var(--w-text); max-width:52ch }
  .group{ display:grid; gap:14px }
  .group__title{ font-size:var(--fs-ui); font-weight:600; line-height:1.3; padding-top:4px }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
  @media (max-width: 560px){ .row2{ grid-template-columns:1fr } }

  /* fields */
  .field{ display:grid; gap:8px; position:relative }
  .field__label{ font-size:var(--fs-ui); line-height:1.4; font-weight:var(--w-ui) }
  .opt-tag{ font-weight:var(--w-text); color:var(--ink-64) }
  .input{
    width:100%; min-height:52px; padding:12px 14px;
    font-size:16px; font-weight:var(--w-text); line-height:1.4; color:var(--ink);
    background:#fff; border:2px solid var(--ink); border-radius:0; box-shadow:none; appearance:none;
    transition:box-shadow .12s ease, border-color .12s ease;
  }
  .input::placeholder{ color:var(--ink-48) }
  .input:focus{ outline:none; box-shadow:4px 4px 0 var(--ink) }
  .field.is--error .input{ border-color:var(--pop-pink); box-shadow:4px 4px 0 var(--pop-pink) }
  .field__error{ display:none; align-items:center; gap:8px; font-size:var(--fs-small); line-height:1.4; font-weight:var(--w-ui) }
  .field__error::before{ content:'!'; flex:none; width:18px; height:18px; display:grid; place-items:center; font-size:12px; line-height:1; background:var(--neon-green); border:2px solid var(--ink) }
  .is--error > .field__error{ display:flex }

  /* segmented options (the invite's language) */
  .opts{ display:flex; flex-wrap:wrap; gap:10px }
  .opt{ position:relative; display:inline-flex }
  .opt input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
  .opt span{
    display:inline-flex; align-items:center; min-height:46px; padding:10px 18px;
    font-size:var(--fs-ui); font-weight:var(--w-ui); line-height:1.2; cursor:pointer; user-select:none;
    background:#fff; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  }
  .opt span:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink) }
  .opt input:checked + span{ background:var(--ink); color:#fff }
  .opt input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:4px }

  /* the consent check */
  .check{ position:relative; display:grid; grid-template-columns:28px minmax(0, 1fr); gap:14px; align-items:center; cursor:pointer; font-size:var(--fs-small); line-height:1.5; font-weight:var(--w-text) }
  .check input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
  .check__box{ width:28px; height:28px; display:grid; place-items:center; background:#fff; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); transition:background .12s ease }
  .check__box svg{ width:16px; height:16px; fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:square; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .25s var(--ease-expo) }
  .check input:checked + .check__box{ background:var(--pop-pink) }
  .check input:checked + .check__box svg{ stroke-dashoffset:0 }
  .check input:focus-visible + .check__box{ outline:2px solid var(--ink); outline-offset:4px }
  .is--error .check__box{ border-color:var(--pop-pink) }

  /* the one button */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:48px; padding:12px 24px; background:#fff; color:var(--ink);
    font-size:var(--fs-ui); font-weight:600; letter-spacing:.01em; line-height:1.2;
    border:2px solid var(--ink); border-radius:0; box-shadow:3px 3px 0 var(--ink);
    text-decoration:none; cursor:pointer; touch-action:manipulation;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  }
  .btn:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink) }
  .btn--ink{ background:var(--ink); color:#fff }
  .btn[disabled]{ cursor:progress; opacity:.6 }
  .btn svg{ width:16px; height:16px; flex:none }
  .btn-quiet{
    display:inline-flex; align-items:center; min-height:44px; padding:0 2px;
    font-size:var(--fs-ui); font-weight:var(--w-ui); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--pad); border-top:1px solid var(--ink-24) }
  .form-error{ margin:0 var(--pad) 12px; font-size:var(--fs-small); line-height:1.45; font-weight:var(--w-ui); padding:10px 12px; border:2px solid var(--pop-pink); box-shadow:3px 3px 0 var(--pop-pink) }
  .hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }

  /* the two ways in (/refer/): the option recipe at card size */
  .pick{ display:grid; gap:14px }
  .pick__opt{
    display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:6px 18px;
    padding:clamp(16px, 2.6svh, 22px) clamp(16px, 2.6vw, 22px); background:#fff; color:var(--ink); text-decoration:none;
    border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); touch-action:manipulation;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .pick__opt:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink) }
  .pick__q{ font-family:var(--font-display); font-weight:400; font-size:clamp(22px, 2.6vw, 28px); line-height:1.05; letter-spacing:-.03em }
  .pick__sub{ grid-column:1; font-size:var(--fs-small); line-height:1.45; color:var(--ink-64); font-weight:var(--w-text) }
  .pick__go{ grid-column:2; grid-row:1 / span 2; display:grid; place-items:center; width:48px; height:48px; background:var(--ink); color:#fff }
  .pick__go svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2 }

  /* the invite chip ("Application Invite"), as on the share image */
  .chip{ justify-self:start; display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); font-size:var(--fs-ui); font-weight:600; background:#fff }
  .chip__icon{ width:26px; height:26px; display:grid; place-items:center; background:var(--pop-pink); border:2px solid var(--ink) }
  .chip__icon svg{ width:15px; height:15px; fill:none; stroke:var(--ink); stroke-width:1.8 }
  .hero-img{ width:100%; height:auto; border:2px solid var(--ink) }
  .actions{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center }

  /* sent: the application pages' big pink tick, then the share panel */
  .done{ display:grid; gap:14px; justify-items:center; text-align:center; padding:clamp(28px, 5svh, 44px) var(--pad) clamp(24px, 4svh, 34px) }
  .done__mark{
    position:relative; width:clamp(96px, 22vw, 124px); aspect-ratio:1; display:grid; place-items:center; margin-bottom:8px;
    background:var(--pop-pink); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); rotate:-4deg;
  }
  .done__mark svg{ width:62%; height:62%; fill:none; stroke:var(--ink); stroke-width:3.4; stroke-linecap:square; stroke-dasharray:1; stroke-dashoffset:0 }
  .done__mark::after{ content:''; position:absolute; inset:-3px; border:3px solid var(--pop-pink); opacity:0; pointer-events:none }
  .done h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(34px, 5vw, 50px); line-height:1; letter-spacing:-.03em }
  .done__text{ max-width:38ch; font-size:16px; line-height:1.45; font-weight:var(--w-text) }
  @media (prefers-reduced-motion: no-preference){
    .done:not([hidden]) .done__mark{ animation:done-pop .5s cubic-bezier(.34, 1.56, .64, 1) both }
    .done:not([hidden]) .done__mark svg{ animation:done-tick .45s var(--ease-expo) .3s both }
    .done:not([hidden]) .done__mark::after{ animation:done-ring .8s var(--ease-expo) .42s both }
    .done:not([hidden]) > :not(.done__mark){ animation:done-rise .55s var(--ease-expo) both }
    .done:not([hidden]) > h2{ animation-delay:.42s }
    .done:not([hidden]) > .done__text{ animation-delay:.52s }
    .done:not([hidden]) > .share{ animation-delay:.62s }
    .done:not([hidden]) > .actions{ animation-delay:.72s }
  }
  @keyframes done-pop{ from{ opacity:0; scale:.8; rotate:-16deg } to{ opacity:1; scale:1; rotate:-4deg } }
  @keyframes done-tick{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
  @keyframes done-ring{ from{ opacity:1; scale:1 } to{ opacity:0; scale:1.3 } }
  @keyframes done-rise{ from{ opacity:0; translate:0 16px } to{ opacity:1; translate:0 0 } }

  .share{ position:relative; z-index:2; width:100%; display:grid; gap:12px; text-align:left; margin-top:6px }   /* above .actions: every block's rise animation makes it its own layer */
  .share__label{ font-size:var(--fs-ui); font-weight:600 }
  .share__link{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px }
  .share__link .input{ font-size:15px; min-height:48px; background:var(--ink-08); text-overflow:ellipsis }
  .share__buttons{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px }
  .share__buttons .btn{ width:100% }
  .share__buttons .btn svg, .menu__item svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round }
  /* More: a dropdown in the card recipe */
  .menu{ position:relative }
  .menu__toggle{ width:100% }
  .share__buttons .btn .menu__caret{ width:12px; height:8px; stroke-width:2; transition:rotate .15s ease }
  .menu__caret{ rotate:180deg }                                        /* points up: the list opens upward */
  .menu__toggle[aria-expanded="true"] .menu__caret{ rotate:0deg }
  /* opens upward: below it are only the preview and the card's foot, and the page clips under the card */
  .menu__list{ position:absolute; z-index:5; bottom:calc(100% + 8px); left:0; right:0; min-width:220px; display:grid; padding:6px; background:#fff; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink) }
  @media (max-width: 560px){ .menu__list{ left:auto; right:0 } }
  .menu__item{
    display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 12px;
    font-size:var(--fs-ui); font-weight:600; line-height:1.2; text-align:left; color:var(--ink); text-decoration:none;
    background:none; border:0; cursor:pointer; touch-action:manipulation;
  }
  .menu__item:focus-visible{ outline:none; background:var(--pop-pink) }
  /* a link: tapping the preview opens their invite page */
  .share__preview{ display:grid; grid-template-columns:clamp(112px, 30%, 168px) minmax(0, 1fr); gap:16px; align-items:center; padding:12px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); color:inherit; text-decoration:none; font-size:15px; line-height:1.4; font-weight:var(--w-text); letter-spacing:-.01em; transition:transform .12s ease, box-shadow .12s ease }
  .share__preview:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink) }
  .share__preview img{ width:100%; height:auto; border:1px solid var(--ink-24) }
  .share__preview-text{ display:block; color:var(--ink-64) }
  .share__preview-open{ display:block; margin-top:6px; font-weight:600; text-decoration:underline; text-underline-offset:3px }
  @media (hover: hover) and (pointer: fine){ .share__preview:hover{ transform:translate(-1px, -1px); box-shadow:5px 5px 0 var(--ink) } }
  .toast{ position:fixed; left:50%; bottom:24px; translate:-50% 0; z-index:30; padding:10px 16px; background:var(--ink); color:#fff; font-size:var(--fs-small); font-weight:var(--w-ui); box-shadow:3px 3px 0 var(--pop-pink) }

  .confetti-layer{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none }
  .confetti-layer--back{ z-index:0 }
  .confetti-layer--front{ z-index:20 }

  @media (hover: hover) and (pointer: fine){
    .btn:hover, .pick__opt:hover{ background:var(--pop-pink); color:var(--ink); transform:translate(-1px, -1px); box-shadow:5px 5px 0 var(--ink) }
    .opt input:not(:checked) + span:hover{ background:var(--pop-pink); transform:translate(-1px, -1px); box-shadow:5px 5px 0 var(--ink) }
    .btn-quiet:hover{ color:var(--ink-64) }
    .menu__item:hover{ background:var(--pop-pink) }
  }
  @media (max-width: 767px){
    :root{ --gap-top:clamp(56px, 10svh, 120px); --gap-bottom:clamp(48px, 8svh, 104px) }
    .card{ box-shadow:4px 4px 0 var(--ink) }
    .opt span{ font-size:14px; padding:8px 12px }
  }
  @media (max-height: 640px){
    :root{ --gap-top:clamp(40px, 9svh, 64px); --gap-bottom:clamp(36px, 7svh, 56px) }
    .prop--tr, .prop--bl{ --pw:clamp(104px, 20vw, 200px) }
  }
  @media (prefers-reduced-motion: reduce){
    .btn, .pick__opt, .opt span{ transition:none }
  }
}

@layer utilities {
  .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
}