/* ============================================================
   DETAILS — Figma 101:53982, 360 x 1723 (scrolls).
   Type map, applied literally from the Figma nodes:
     Futura PT Book   -> var(--fp) 400      Futura Medium -> var(--ft) 500
     Futura PT Medium -> var(--fp) 500      Futura Bold   -> var(--ft) 700
     Futura PT Demi   -> var(--fp) 600
     Futura PT Heavy  -> var(--fp) 800
   ============================================================ */
#detail{background:#fff;font-family:var(--fp);color:var(--ink)}

/* ---------- 0 - 420 · hero ---------- */
.d-hero{
  position:relative;width:360px;height:420px;overflow:hidden;
  background:linear-gradient(to bottom,#16001c,#2a0033);
}
.d-glow{
  position:absolute;left:-17px;top:188px;width:398px;height:301px;
  background:radial-gradient(closest-side,rgba(214,60,205,.25),rgba(214,60,205,0));
  pointer-events:none;
}
.d-topbar{position:absolute;left:20px;top:16px}
.d-back{
  width:34px;height:34px;border:0;border-radius:17px;background:rgba(255,255,255,.12);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .15s ease,transform .12s ease;
}
.d-back:hover{background:rgba(255,255,255,.2)}
.d-back:active{transform:scale(.92)}
.d-back:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
.d-back svg{width:15px;height:15px;color:rgba(255,255,255,.95)}

.d-titles{position:absolute;left:35px;top:66px;width:290px}
.d-title{
  height:29px;display:flex;align-items:center;justify-content:center;
  font-size:23px;font-weight:700;line-height:29px;color:#fff;
}
.d-title img{width:61px;height:27px;object-fit:contain;display:block;margin-top:1px}
.d-title2{
  height:35px;text-align:center;
  font-family:var(--ft);font-size:26px;font-weight:700;line-height:35px;white-space:nowrap;
  background:linear-gradient(90deg,#fff0c2,#ffb64a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.d-stats{position:absolute;left:20px;top:146px;width:320px;height:42px;display:flex}
.d-stat{
  width:106px;display:flex;flex-direction:column;align-items:center;gap:3px;
}
.d-stat b{font-family:var(--ft);font-size:20px;font-weight:700;line-height:27px;color:#ffd166}
.d-stat span{font-size:9.5px;font-weight:400;line-height:12px;color:rgba(255,255,255,.7)}
.d-stats i{width:1px;height:34px;margin-top:4px;background:rgba(255,255,255,.15)}

.d-graphic{position:absolute;left:0;top:204px;width:360px;height:208px}
.d-graphic img{position:absolute;left:54px;top:-6px;width:251px;height:232px;display:block}

/* ---------- 420 - 1453 · body ---------- */
.d-body{padding:24px 12px;display:flex;flex-direction:column;gap:30px}

.d-eyebrow{display:flex;align-items:center;gap:11px;height:15px}
.d-eyebrow span{font-size:12px;font-weight:500;letter-spacing:1px;line-height:15px;color:#0a0a0a}
.d-eyebrow i{flex:1;height:1px;background:#f3f3f3}

/* --- the math --- */
.d-group{display:flex;flex-direction:column}
.d-headline{
  margin-top:16px;height:46px;
  font-size:18px;font-weight:500;line-height:23px;letter-spacing:-.01em;color:#1b1420;
}
.d-headline .d-amt{font-size:16px}
.d-headline .d-amt .r{font-family:var(--ft);font-weight:500}

.d-panel{
  margin-top:12px;width:336px;height:286px;
  background:#f3eef8;border:1px solid #e9e1f0;border-radius:16px;
  padding:12px 6px;
}
.d-receipt{position:relative;width:309px;height:260px;margin-inline:auto;overflow:hidden}
.d-receipt::before{
  content:'';position:absolute;left:0;top:-13px;width:309px;height:290px;
  background:url(../assets/img/receipt-lg.png) center / 309px 290px no-repeat;
}
.rc2{
  position:absolute;left:37px;top:28px;width:233px;
  display:flex;flex-direction:column;gap:9px;font-family:var(--ft);
}
.rc2-head{text-align:center;font-size:9.5px;font-weight:500;letter-spacing:.08em;line-height:13px;color:rgba(43,7,51,.45)}
/* Figma draws these as zero-height LINE nodes; the stroke must not add to the stack */
.rc2-rule{
  display:block;height:1.55px;margin-bottom:-1.55px;
  background:repeating-linear-gradient(90deg,#2b0733 0 2.33px,transparent 2.33px 6.21px);
}
.rc2-rows{list-style:none;display:flex;flex-direction:column;gap:3px}
.rc2-rows li{display:flex;justify-content:space-between;align-items:center;height:13px}
.rc2-rows span{font-size:9.5px;font-weight:500;letter-spacing:-.01em;color:rgba(43,7,51,.42)}
.rc2-rows b{font-size:9.5px;font-weight:500;letter-spacing:-.01em;color:rgba(43,7,51,.55)}
.rc2-total{padding-top:2px;display:flex;flex-direction:column;align-items:center;gap:4px}
.rc2-lab{font-size:9px;font-weight:500;letter-spacing:.08em;line-height:12px;color:rgba(43,7,51,.45)}
.rc2-swap{height:45px;display:flex;align-items:center;justify-content:center;gap:10px}
.rc2-swap s{
  font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:25px;
  color:rgba(43,7,51,.32);text-decoration-thickness:1px;
}
.rc2-swap em{font-style:normal;font-size:13px;font-weight:500;line-height:17px;color:rgba(43,7,51,.35)}
.rc2-swap b{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:45px;color:#45992d}
.rc2-with{font-size:9px;font-weight:700;letter-spacing:.02em;line-height:12px;color:rgba(69,153,45,.9)}

/* --- one benefits --- */
.d-card{
  margin-top:16px;width:336px;
  background:#fff;border:1px solid #e9e5ef;border-radius:16px;overflow:hidden;
}
.d-rows{padding:0 16px;display:flex;flex-direction:column;gap:4px}
.d-vert{position:relative}
.d-vhead{
  height:47px;padding:12px 0 9px;
  font-size:20px;font-weight:500;line-height:26px;color:var(--c);
}
.d-items{padding-bottom:12px;display:flex;flex-direction:column;gap:var(--g,14px)}
.d-benefit{display:flex;flex-direction:column;gap:2px}
.d-benefit b{font-size:16px;font-weight:500;letter-spacing:.01em;line-height:21px;color:#363636}
/* the sub-lines carry Figma's own measure so they break where the design breaks */
.d-benefit span{max-width:var(--sw,286px);font-size:16px;font-weight:400;line-height:18px;color:#909090}
.d-benefit span i{font-style:normal;font-family:var(--ft);font-weight:500;font-size:14px}
.d-benefit span i.sm{font-size:12px}
.d-vico{position:absolute;display:block;object-fit:contain}
.d-hair{display:block;height:1px;background:#edeaf1}
.d-foot{
  height:31px;background:#f8f6fa;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.d-foot svg{width:8px;height:8px;color:#7c7486;opacity:.8}
.d-foot span{font-size:10px;font-weight:400;line-height:13px;color:#7c7486}

/* ---------- 1453 - 1589 · welcome band ---------- */
.d-band{position:relative;width:360px;height:136px}
.d-wave{position:absolute;left:0;top:3px;width:360px;height:130px}
.d-bandhead{
  position:absolute;left:116px;top:27px;height:12px;
  display:flex;align-items:center;gap:8px;
}
.d-bandhead svg{width:9px;height:9px;color:#fff;opacity:.9}
.d-bandhead span{font-size:9.5px;font-weight:500;letter-spacing:1.8px;line-height:12px;color:rgba(255,255,255,.95)}
.d-split{position:absolute;left:20px;top:51px;width:320px;height:59px;display:flex}
.d-col{width:160px;display:flex;flex-direction:column;align-items:center;gap:2px}
.d-col span{font-size:7.5px;font-weight:500;letter-spacing:1.2px;line-height:10px;color:rgba(255,255,255,.72)}
.d-col b{font-family:var(--ft);font-size:25px;font-weight:700;line-height:33px;color:#fff}
.d-col em{font-style:normal;font-size:9.5px;font-weight:400;line-height:12px;color:rgba(255,255,255,.88)}
.d-split i{width:1px;height:44px;margin-top:8px;background:rgba(255,255,255,.35)}

.d-spacer{height:18px;background:#fff}

/* ---------- 1607 - 1723 · the ask ---------- */
.d-cta{
  padding:16px 12px 20px;border-top:1px solid #eae6f0;background:#fff;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.d-fine{font-size:10px;font-weight:400;line-height:13px;color:#7c7486}
.d-join{
  width:336px;height:57px;border:0;border-radius:12px;background:#f15701;
  box-shadow:0 5px 14px rgba(140,51,0,.28);
  display:flex;align-items:center;justify-content:center;gap:2px;
  font-family:var(--ft);font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:18px;color:#fff;
  cursor:pointer;transition:transform .12s ease,filter .12s ease;
}
.d-join img{width:52px;height:23px;object-fit:contain;display:block}
.d-join:hover{filter:brightness(1.06)}
.d-join:active{transform:scale(.98)}
.d-join:focus-visible{outline:2px solid #f15701;outline-offset:3px}

/* ============================================================
   The floating CTA — Figma 104:296.
   It rides the bottom of the screen while you read, and over the
   last stretch of scroll it walks down and in to land exactly on
   the in-flow button, which is only ever the landing spot.
   ============================================================ */
#detail{overflow:hidden}
.d-scroll{
  position:absolute;inset:0;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.d-scroll::-webkit-scrollbar{display:none}

.d-dock{
  position:absolute;left:0;right:0;bottom:0;height:81px;z-index:3;
  pointer-events:none;
}
.d-dock-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#e5e5e5);
  opacity:var(--scrim,1);
}
.d-join--dock{
  position:absolute;left:var(--ins,12px);right:var(--ins,12px);bottom:var(--bot,12px);
  width:auto;pointer-events:auto;
}
/* the in-flow button holds the layout and marks the landing spot */
.d-join--rest{visibility:hidden}

/* ============================================================
   The hero text arrives.
   Timed to start after the push transition has settled, so the
   screen slides in and then the offer states itself. The halo
   blooms underneath over a longer beat.
   ============================================================ */
@keyframes hero-rise{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes hero-glow{
  from{opacity:0;transform:scale(.88)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:no-preference){
  #detail.is-live .d-glow{
    animation:hero-glow 1.1s cubic-bezier(.22,.61,.36,1) both;
    animation-delay:.06s;transform-origin:50% 40%;
  }
  #detail.is-live .d-title,
  #detail.is-live .d-title2,
  #detail.is-live .d-stat,
  #detail.is-live .d-stats i{
    animation:hero-rise .44s cubic-bezier(.22,.61,.36,1) both;
  }
  #detail.is-live .d-title  {animation-delay:.10s}
  #detail.is-live .d-title2 {animation-delay:.19s}
  #detail.is-live .d-stat:nth-of-type(1){animation-delay:.30s}
  #detail.is-live .d-stat:nth-of-type(2){animation-delay:.37s}
  #detail.is-live .d-stat:nth-of-type(3){animation-delay:.44s}
  #detail.is-live .d-stats i{animation-delay:.37s;animation-duration:.5s}
}