/* ================= gifts =================
   A gift arrives as airmail: a sealed envelope addressed to you, red-and-blue
   chevron border, postage stamp, postmark. No panel around it — the envelope IS
   the thing on screen. Open it, a cheque slides out, then you take the money. */

/* no dark card, no gradient band across the top — just the mail */
.gm-modal{background:none!important;border:none!important;box-shadow:none!important;
  max-width:330px;overflow:visible}
.gm-modal::before{display:none!important}
.gm{position:relative;text-align:center;padding:2px 0 4px}
.gm-glow{position:absolute;top:16%;left:50%;transform:translateX(-50%);
  width:230px;height:170px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,225,150,.34),transparent 70%);
  filter:blur(26px);animation:gmglow 3.4s ease-in-out infinite}
@keyframes gmglow{0%,100%{opacity:.5;transform:translateX(-50%) scale(.94)}
  50%{opacity:.9;transform:translateX(-50%) scale(1.06)}}

/* ---- the envelope ---- */
.gm-env{position:relative;width:262px;height:164px;margin:106px auto 0;
  animation:gmfloat 3.4s ease-in-out infinite}
@keyframes gmfloat{0%,100%{transform:rotate(-1.4deg) translateY(0)}
  50%{transform:rotate(1.4deg) translateY(-5px)}}
.gm-env.open{animation:none;transform:none;transition:transform .35s}

.gm-back{position:absolute;inset:0;z-index:1;border-radius:4px;
  background:linear-gradient(168deg,#d9cfb4,#b8ab8b);
  box-shadow:0 22px 40px -18px rgba(0,0,0,.9)}

/* front panel: chevron airmail border with paper inset */
.gm-front{position:absolute;inset:0;z-index:3;border-radius:4px;overflow:hidden;
  background:repeating-linear-gradient(-45deg,
    #c8372c 0 9px,#f6f2e6 9px 18px,#20509c 18px 27px,#f6f2e6 27px 36px)}
.gm-front::before{content:'';position:absolute;inset:7px;border-radius:2px;
  background:linear-gradient(168deg,#fdfaf0,#f2ebd9 62%,#e6dcc2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
/* the fold seams of the front */
.gm-front::after{content:'';position:absolute;inset:7px;
  background:linear-gradient(to bottom right,transparent 49.6%,rgba(150,130,90,.16) 50%,transparent 50.4%),
             linear-gradient(to bottom left, transparent 49.6%,rgba(150,130,90,.16) 50%,transparent 50.4%)}

/* postage stamp, perforated */
.gm-stamp{position:absolute;right:16px;top:16px;z-index:4;width:44px;height:52px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:linear-gradient(165deg,#e8443a,#b7261d);
  color:#ffe9c9;transform:rotate(2.5deg);
  filter:drop-shadow(0 2px 3px rgba(90,50,20,.35));
  -webkit-mask:radial-gradient(circle 2.6px,transparent 96%,#000 100%) -3px -3px/9px 9px;
          mask:radial-gradient(circle 2.6px,transparent 96%,#000 100%) -3px -3px/9px 9px}
.gm-ball{width:19px;height:19px;border-radius:50%;
  background:linear-gradient(180deg,#fff 0 46%,#2a1a0c 46% 54%,#f5ead6 54% 100%);
  box-shadow:inset 0 0 0 1.6px rgba(60,25,10,.65)}
.gm-stamp i{font-style:normal;font-size:7px;font-weight:800;letter-spacing:.18em}

/* postmark, stamped over the corner of the stamp */
.gm-mark{position:absolute;right:44px;top:12px;z-index:5;width:60px;height:60px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:2px solid rgba(40,70,140,.5);color:rgba(40,70,140,.55);
  transform:rotate(-13deg);opacity:.85}
.gm-mark::before,.gm-mark::after{content:'';position:absolute;left:6px;right:6px;height:1.5px;
  background:rgba(40,70,140,.4)}
.gm-mark::before{top:15px}
.gm-mark::after{bottom:15px}
.gm-mark span{font-size:6.5px;font-weight:800;letter-spacing:.1em}
.gm-mark b{font-family:'Bebas Neue';font-size:12px;letter-spacing:.06em}

/* the address block, written by hand */
.gm-addr{position:absolute;left:22px;bottom:22px;z-index:4;text-align:left;
  display:grid;grid-template-columns:auto 1fr;gap:1px 8px;align-items:baseline}
.gm-addr span{font-size:7.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#9c8f70}
.gm-addr b{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;
  font-size:16px;color:#2f2a1e;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
/* the ruled lines an envelope has for the address */
.gm-lines{position:absolute;left:20px;right:96px;bottom:18px;z-index:3;height:44px;
  background:repeating-linear-gradient(180deg,transparent 0 21px,rgba(150,130,90,.22) 21px 22px)}

/* the flap, hinged along the top */
.gm-flap{position:absolute;left:0;right:0;top:0;height:88px;z-index:6;transform-origin:top center;
  background:linear-gradient(180deg,#fdfaf0,#ece3cd);
  clip-path:polygon(0 0,100% 0,50% 100%);
  filter:drop-shadow(0 4px 5px rgba(90,70,30,.28));
  transition:transform .46s cubic-bezier(.5,.05,.3,1)}
.gm-env.open .gm-flap{transform:rotateX(172deg)}
.gm-wax{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:7;
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 36% 30%,#ff8365,#c92f18 58%,#7d1607);
  box-shadow:0 3px 9px rgba(0,0,0,.55),inset 0 -2px 5px rgba(90,10,0,.5);
  transition:opacity .2s,transform .3s}
.gm-env.open .gm-wax{opacity:0;transform:translateX(-50%) scale(.35) rotate(40deg)}

/* ---- the cheque inside ---- */
.gm-letter{position:absolute;left:9px;right:9px;bottom:9px;z-index:2;padding:14px 16px 13px;
  border-radius:3px;text-align:left;
  background:linear-gradient(168deg,#fffdf6,#f3ecda);
  box-shadow:0 -6px 16px -8px rgba(0,0,0,.5),inset 0 0 0 1px rgba(150,130,90,.2);
  transform:translateY(0);
  transition:transform .62s cubic-bezier(.25,1.15,.3,1),box-shadow .5s,z-index 0s .3s}
/* once it's clear of the mouth it sits IN FRONT of the envelope — behind it,
   the overlap swallowed the amount */
.gm-env.out .gm-letter{transform:translateY(-150px) scale(1.03);z-index:9;
  box-shadow:0 20px 38px -14px rgba(0,0,0,.85),inset 0 0 0 1px rgba(150,130,90,.24)}
.gm-l-k{font-size:7.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#a2947a}
.gm-l-to{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:15px;
  color:#2f2a1e;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-l-amt{font-family:'Bebas Neue';font-size:46px;line-height:1;letter-spacing:.01em;
  color:#17663c;margin-top:6px;font-variant-numeric:tabular-nums}
.gm-l-amt b{font-weight:400}
.gm-l-note{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#6b6350;margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm-l-sig{font-family:Georgia,serif;font-style:italic;font-size:15px;color:#3a3427;
  margin-top:8px;padding-top:5px;border-top:1px solid rgba(150,130,90,.35);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- the notes that flutter out when you take it ---- */
.gm-notes{position:absolute;left:50%;top:52px;z-index:8;width:0;height:0;pointer-events:none}
.gnote{position:absolute;left:-27px;top:0;width:54px;height:27px;border-radius:3px;opacity:0;
  background:linear-gradient(150deg,#eafff2,#a9e8c4 58%,#63bd8e);
  box-shadow:0 3px 8px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,90,50,.25)}
.gnote::after{content:'$';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:16px;color:rgba(10,80,45,.5)}
.gm-env.paid .gnote{animation:gfly 1.1s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--n)*.06s)}
@keyframes gfly{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(.8)}
  14%{opacity:1}
  100%{opacity:0;
    transform:translate(calc((var(--n) - 2.5) * 46px),-118px)
              rotate(calc((var(--n) - 2.5) * 30deg)) scale(1.06)}}

/* ---- caption + the one action ---- */
.gm-cap{margin-top:16px;font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:#8a8098;transition:color .3s}
.gm-cap.lit{color:#ffcb05}
.gm-btn{margin:11px auto 0;padding:12px 30px;border:none;border-radius:12px;cursor:pointer;display:block;
  font-family:'Outfit';font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(180deg,#fdfaf0,#ddd4bc);color:#2f2a1e;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .14s,filter .14s,background .35s,color .35s}
.gm-btn:hover{filter:brightness(1.05)}
.gm-btn:active{transform:scale(.96)}
.gm-btn:disabled{opacity:.55}
.gm-btn.take{background:linear-gradient(180deg,#5fe39a,var(--green) 62%,#0d7a3c);color:#04240f;
  box-shadow:0 12px 26px -10px rgba(31,160,83,.95),inset 0 1px 0 rgba(255,255,255,.42);
  animation:gmtake .45s cubic-bezier(.2,1.6,.35,1)}
@keyframes gmtake{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

/* ================= addressing one to send =================
   Same envelope, filled in by hand. No boxed inputs — you write on the paper. */
.gs-modal{max-width:340px}
.gm-send .gs-env{margin:26px auto 0;height:188px;animation:none;
  transition:transform .55s cubic-bezier(.4,0,.25,1),opacity .55s}
/* the flap sits open while you're writing, and folds down to seal */
.gs-flap{transform:rotateX(172deg)}
.gs-env.sealing .gs-flap{transform:rotateX(0)}
.gs-wax{opacity:0;transform:translateX(-50%) scale(.4)}
.gs-env.sealing .gs-wax{opacity:1;transform:translateX(-50%) scale(1);
  transition:opacity .2s .34s,transform .34s cubic-bezier(.2,1.8,.4,1) .34s}
.gs-env.flying{transform:translate(46%,-190%) rotate(17deg) scale(.62);opacity:0}
.gs-env.nope{animation:gsnope .38s ease}
@keyframes gsnope{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}
  75%{transform:translateX(8px)}}

.gs-fields{position:absolute;left:20px;right:20px;top:26px;z-index:5;
  display:flex;flex-direction:column;gap:11px;text-align:left}
.gs-row{display:block}
.gs-row>span{display:block;font-size:7.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#a2947a;margin-bottom:1px}
.gs-row input{width:100%;background:none;border:none;outline:none;padding:2px 0 4px;
  border-bottom:1px solid rgba(150,130,90,.4);
  font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:17px;color:#2f2a1e}
.gs-row input::placeholder{color:#b7ab90}
.gs-row input:focus{border-bottom-color:#17663c;box-shadow:0 1px 0 #17663c}
/* the amount is written like it is on a cheque */
.gs-amt{display:flex;align-items:baseline;gap:5px;border-bottom:1px solid rgba(150,130,90,.4);
  transition:border-color .15s,box-shadow .15s}
.gs-amt:focus-within{border-bottom-color:#17663c;box-shadow:0 1px 0 #17663c}
.gs-amt i{font-style:normal;font-family:'Bebas Neue';font-size:26px;color:#17663c}
.gs-amt input{border:none!important;box-shadow:none!important;padding:0 0 2px;
  font-family:'Bebas Neue';font-style:normal;font-size:30px;letter-spacing:.01em;
  color:#17663c;font-variant-numeric:tabular-nums}
.gs-amt input::placeholder{color:#c3d6c8}
.gs-row.note input{font-size:14px}

/* preset amounts — plain paper chips. A perforated mask lived here and tiled
   across the whole face, punching holes straight through the numbers. */
.gs-chips{display:flex;gap:6px;margin-top:16px;transition:opacity .3s,transform .3s}
.gs-chips.gone{opacity:0;transform:translateY(6px);pointer-events:none}
.gs-chip{flex:1;padding:9px 2px;border:none;cursor:pointer;border-radius:7px;
  background:#fdfaf2;color:#2f2a1e;
  font-family:'Bebas Neue';font-size:16px;letter-spacing:.03em;
  box-shadow:0 5px 12px -6px rgba(0,0,0,.85),inset 0 -2px 0 rgba(150,130,90,.18);
  transition:.14s}
.gs-chip:hover{background:#fff;transform:translateY(-1px)}
.gs-chip.on{background:linear-gradient(168deg,#7ff0b4,#31c973);color:#04240f;
  box-shadow:0 6px 14px -6px rgba(31,160,83,.9)}
.gs-chip:active{transform:scale(.94)}

.gs-err{min-height:15px;margin-top:9px;font-size:11.5px;color:#ff9a80;font-weight:700;text-align:center}
.gs-acts{display:flex;align-items:center;gap:9px;justify-content:center;
  transition:opacity .3s,transform .3s}
.gs-acts.gone{opacity:0;transform:translateY(6px);pointer-events:none}
.gs-acts .gm-btn{margin:0}
.gs-x{padding:12px 18px;border-radius:12px;cursor:pointer;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);color:#98a0cd;
  font-family:'Outfit';font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  transition:.15s}
.gs-x:hover{background:rgba(255,255,255,.12);color:#fff}
.gs-x:active{transform:scale(.95)}

/* it's gone — say so plainly */
.gs-done{position:absolute;left:0;right:0;top:38%;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.2,1.4,.4,1)}
.gs-done.show{opacity:1;transform:none}
.gs-tick{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#04240f;background:radial-gradient(circle at 38% 30%,#8ff3bd,#31c973 58%,#0d7a3c);
  box-shadow:0 10px 26px -8px rgba(31,160,83,.9)}
.gs-tick svg{width:26px;height:26px;stroke-dasharray:34;stroke-dashoffset:34;
  animation:gsdraw .45s cubic-bezier(.5,0,.4,1) .18s forwards}
@keyframes gsdraw{to{stroke-dashoffset:0}}
.gs-done b{font-family:'Bebas Neue';font-size:26px;letter-spacing:.03em;color:#fff}
.gs-to{font-size:11.5px;color:var(--dim);line-height:1.45;max-width:220px}


/* the way in, on your own profile card */
.mep-btn.gift{background:linear-gradient(180deg,#ffd447,#e8a800);color:#2c1c00;
  border-color:transparent;box-shadow:0 5px 14px -6px rgba(255,180,0,.9)}
.mep-btn.gift:hover{filter:brightness(1.07);color:#2c1c00}