/* BNU Tap In — site layer (home, shop, legal, account, claim). Loads after styles.css. */
/* =====================================================================
   BNU Tap In — home-test overrides (loads AFTER ../css/styles.css).
   Everything here is the proposed system; once approved it folds into
   css/styles.css.
   ===================================================================== */
:root{
  /* fluid sizing tokens — one source of truth for the whole site */
  --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(56px,9vw,112px);
  --card-radius:clamp(18px,2vw,28px);
  --media-ratio:5/4;          /* every product photo */
  --media-max-h:420px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
.wrap{max-width:1280px;margin:0 auto}
section{padding:var(--section-y) var(--gutter)}
.hero{padding-top:clamp(112px,12vw,140px)}

/* ---------- shared product card: one ratio everywhere ---------- */
.acc-card__photo,
.carousel-widget .acc-card__photo{aspect-ratio:var(--media-ratio);max-height:var(--media-max-h);background:#fdfdfd}
.acc-card__photo img,
.carousel-widget .acc-card__photo img,
.carousel__slide img{object-fit:contain;padding:0;background:#fdfdfd;transform:scale(1.12)}
/* bnu-card-v2 is already a tight 5:4 crop on a #fdfdfd backdrop: no cover/zoom hack needed */
.acc-card__photo img.zoom-card,.step__media img.zoom-card{object-fit:contain;transform:scale(1.05)}
.hero__purchase{max-width:480px}
.feature-list{margin-bottom:28px}
.hero__grid{max-width:1280px}

/* ---------- RANGE: horizontal cards in a scrolling row ---------- */
.range{padding-left:0;padding-right:0;border-top:1px solid var(--line)}
.range__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:1280px;margin:0 auto clamp(28px,4vw,48px);padding:0 var(--gutter)}
.rail-ctrl{display:flex;gap:10px;flex:none}
.rail-ctrl__btn{width:48px;height:48px;border-radius:50%;background:none;border:1px solid var(--line);color:var(--fg);font-size:20px;cursor:pointer;transition:border-color .2s,background .2s}
.rail-ctrl__btn:hover{border-color:var(--fg-muted);background:var(--bg-raised)}
.rail{display:flex;gap:clamp(14px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);
  padding:6px var(--gutter) 28px;scrollbar-width:none;overscroll-behavior-x:contain;outline:none;
  /* first card lines up with the page column on wide screens */
  padding-left:max(var(--gutter),calc((100vw - 1280px)/2 + var(--gutter)))}
.rail::-webkit-scrollbar{display:none}
.acc-card--h{flex:0 0 clamp(300px,42vw,560px);scroll-snap-align:start;flex-direction:row;align-items:stretch;min-height:clamp(300px,26vw,360px)}
.acc-card--h .acc-card__photo{flex:0 0 46%;aspect-ratio:auto;max-height:none;height:auto}
.acc-card--h .acc-card__photo img:not(.zoom-card){transform:none;padding:4% 2%}
.acc-card--h .acc-card__photo img.zoom-card{transform:scale(1.12)}
.acc-card--h .acc-card__body{justify-content:center;padding:clamp(16px,2vw,26px)}
.acc-card--h .acc-card__body p{flex:0 1 auto}
.acc-card--h h3{font-size:clamp(20px,2vw,26px)}
.chip{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-bottom:10px;color:var(--fg-muted)}
.acc-card--h .btn{margin-top:4px}
@media (max-width:640px){
  .acc-card--h{flex:0 0 86vw;flex-direction:column}
  .acc-card--h .acc-card__photo{flex:none;aspect-ratio:var(--media-ratio);width:100%}
}

/* ---------- HOW IT WORKS: original Anton numerals as the badge ---------- */
.how2{border-top:1px solid var(--line);background:radial-gradient(120% 70% at 50% 0%,#17171a 0%,var(--bg) 70%)}
.how2__head{margin-bottom:clamp(88px,10vw,136px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.step{position:relative;background:#f4f4f6;color:#0a0a0a;border-radius:var(--card-radius);padding:12px 12px 0;display:flex;flex-direction:column;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
/* original Anton numerals, outlined (same treatment as "Profile"), sitting on the card edge;
   fill drops in on hover in a band color */
.step__num{position:absolute;z-index:1;left:clamp(14px,2vw,26px);bottom:100%;margin-bottom:-.14em;
  font-family:var(--font-display);font-weight:400;font-size:clamp(96px,11vw,150px);line-height:.9;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:2px var(--fg);pointer-events:none;transition:color .5s var(--ease),transform .5s var(--ease)}
.step:nth-child(1):hover .step__num{color:#6b6b45}
.step:nth-child(2):hover .step__num{color:#c9ad8f}
.step:nth-child(3):hover .step__num{color:#e8b4b8}
.step:hover .step__num{transform:translateY(-6px);-webkit-text-stroke-color:transparent}
.step{margin-top:clamp(0px,1vw,8px)}
.step__media{position:relative;aspect-ratio:var(--media-ratio);max-height:var(--media-max-h);width:100%;border-radius:calc(var(--card-radius) - 8px);overflow:hidden;background:#0d0d0f}
.step__body{padding:22px 14px 28px}
.step__body h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.2vw,28px);line-height:1.05;margin-bottom:8px}
.step__body p{font-size:15px;color:#55555a}
.m1{background:linear-gradient(135deg,#1d2a3a,#0b0f16)}
.m2{background:#fdfdfd}.m3{background:#f6f6f4}
.step__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.1)}
.phone{position:absolute;left:50%;top:10%;translate:-50% 0;width:30%;aspect-ratio:9/18;background:#0a0a0a;border:3px solid #2a2a2e;border-radius:22px;padding:10px 8px;box-shadow:0 20px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:6px}
.phone b{font:600 8px var(--font-body);color:#fff}
.phone .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#c9ad8f,#6b6b45);margin:2px auto}
.phone i{display:block;height:7px;border-radius:4px;background:#26262b}
.phone i.on{background:#f5f5f2;width:70%;margin:0 auto}
.phone .btnm{margin-top:auto;height:12px;border-radius:7px;background:#f5f5f2}
@media (max-width:980px){.steps{grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:clamp(64px,14vw,88px)}}

/* ---------- YOUR PROFILE + SHARE (showcase cards) ---------- */
.show{padding-top:0}
.show:first-of-type{padding-top:var(--section-y)}
.show--tight{padding-top:0}
.pshow{position:relative;overflow:hidden;background:#000;border:1px solid var(--line);border-radius:var(--card-radius);padding:clamp(28px,4.5vw,64px);min-height:clamp(560px,52vw,680px);
  background-image:radial-gradient(70% 60% at 85% 30%,#1b1b1f 0%,#000 70%)}
.pshow__eyebrow{margin-bottom:6px}
.pshow__title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(64px,10vw,140px);line-height:.9}
.pshow__title span{color:transparent;-webkit-text-stroke:1.5px var(--fg-muted)}
.pshow__sub{font-size:clamp(16px,1.7vw,22px);color:var(--fg-muted);margin-top:14px}
.pshow__sub b{color:var(--fg)}
.pshow__copy{position:absolute;right:clamp(28px,5vw,72px);top:42%;width:min(42%,440px);display:flex;flex-direction:column;gap:clamp(22px,3.4vw,44px)}
.pshow__copy p{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(20px,2.6vw,34px);line-height:1.1;color:#5d5d5a}
.pshow__copy p:nth-child(2){padding-left:7%}.pshow__copy p:nth-child(3){padding-left:14%}
.pshow__copy b{color:var(--fg);font-weight:400}
.pshow__copy em,.pshow__copy em i{font-style:normal}
.pshow__phone{position:absolute;left:clamp(24px,6vw,96px);bottom:-190px;width:clamp(220px,22vw,290px);rotate:-8deg;transform-origin:50% 100%}
.ph{background:#18181b;border-radius:44px;padding:9px;box-shadow:0 0 0 2px #35353a,0 40px 80px rgba(0,0,0,.7)}
.ph__in{background:#0c0c0e;border-radius:36px;padding:26px 16px 80px;display:flex;flex-direction:column;gap:9px}
.ph__top{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.ph__av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#c9ad8f,#6b6b45);flex:none}
.ph__top strong{display:block;font-size:15px}.ph__top small{color:var(--fg-muted);font-size:11px}
.ph__save{background:#26262a;border-radius:12px;text-align:center;padding:11px;font-size:13px;font-weight:600}
.ph__row{display:flex;gap:12px;align-items:center;background:#161619;border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:600}
.ph__row i{width:26px;height:26px;border-radius:50%;background:#2a2a2e;flex:none}
.ph__row small{display:block;font-weight:400;color:var(--fg-muted);font-size:10.5px}
@media (max-width:980px){
  .pshow{min-height:0;padding-bottom:0}
  .pshow__copy{position:static;width:auto;margin-top:36px}
  .pshow__phone{position:relative;left:auto;bottom:auto;margin:36px auto -150px;rotate:-6deg}
}

/* share card + animated bubbles */
.share{position:relative;background:#fff;color:#0a0a0a;border-radius:var(--card-radius);overflow:hidden;padding:clamp(28px,4.5vw,64px);
  min-height:clamp(460px,44vw,600px);background-image:radial-gradient(90% 90% at 100% 100%,#f0efec 0%,#fff 60%)}
.share__title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,4.2vw,56px);line-height:1;max-width:20ch;position:relative;z-index:2}
.bubbles{position:absolute;left:0;right:0;bottom:0;height:68%;--k:1}
.bubble{position:absolute;left:var(--x);top:var(--y);width:calc(var(--s) * 1px * var(--k));aspect-ratio:1;will-change:transform}
.bubble__in{position:absolute;inset:0;border-radius:50%;background:var(--bg);color:var(--fg);display:grid;place-items:center;
  box-shadow:0 18px 34px -12px rgba(0,0,0,.35);animation:bob 5.5s ease-in-out infinite;animation-delay:var(--d)}
.bubble__in svg{width:46%;height:46%}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.025)}}
@media (max-width:980px){.bubbles{--k:.62;height:62%}.share{min-height:520px}}
@media (prefers-reduced-motion:reduce){.bubble__in{animation:none}}

/* ---------- BLACKNUNITED mission ---------- */
.mission{position:relative;border-top:1px solid var(--line);background:radial-gradient(90% 70% at 50% 0%,#17171a 0%,var(--bg) 75%);text-align:center;overflow:hidden;padding-top:calc(var(--section-y) + 12px)}
.mission__bar{position:absolute;top:0;left:0;right:0;height:8px;display:flex}
.mission__bar i{flex:1}
.mission__inner{display:flex;flex-direction:column;align-items:center}
.wordmark{position:relative;width:min(100%,980px);aspect-ratio:1760/310;overflow:hidden;margin:18px 0 clamp(28px,4vw,48px);
  /* source is black-on-white: invert → white-on-black, screen drops the black */
  filter:invert(1);mix-blend-mode:screen}
.wordmark img{position:absolute;width:109.09%;left:-7.1%;top:-122.58%;max-width:none}
.mission__slogan{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,5vw,68px);line-height:1.02;max-width:20ch}
.mission__body{font-size:17px;color:var(--fg-muted);max-width:52ch;margin-top:22px}
.mission__cta{margin-top:clamp(28px,4vw,44px)}

.final-cta{border-top:1px solid var(--line)}

/* =====================================================================
   SITE FOOTER (traditional multi-column) — .sf
   ===================================================================== */
.sf{position:relative;border-top:1px solid var(--line);background:#0d0d0e;margin-top:0}
.sf__bar{position:absolute;top:-1px;left:0;right:0;height:6px;display:flex}
.sf__bar i{flex:1}
.sf__inner{max-width:1280px;margin:0 auto;padding:clamp(48px,6vw,80px) var(--gutter) clamp(36px,4vw,56px);
  display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:clamp(28px,4vw,56px)}
.sf__logo{height:clamp(26px,2.4vw,32px);width:auto;display:block}
.sf__tag{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(22px,2.2vw,30px);line-height:1.05;margin:22px 0 24px;max-width:14ch}
.sf__col h4{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:18px}
.sf__col ul{display:flex;flex-direction:column;gap:12px}
.sf__col a{font-size:15px;color:var(--fg);opacity:.86;transition:opacity .2s,color .2s}
.sf__col a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.sf__base{max-width:1280px;margin:0 auto;padding:22px var(--gutter) 28px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px}
.sf__mission{font-size:13px;color:var(--fg-muted);flex:1 1 320px}
.sf__legal{font-size:12px;color:var(--fg-muted)}
.sf__top{font-size:12px;color:var(--fg-muted);text-decoration:underline;text-underline-offset:3px}
.sf__top:hover{color:var(--fg)}
@media (max-width:980px){
  .sf__inner{grid-template-columns:1fr 1fr}
  .sf__brand{grid-column:1/-1}
}
@media (max-width:480px){.sf__inner{gap:32px 20px}}

/* =====================================================================
   PAGE HEADS for secondary pages (shop, legal, confirmation)
   ===================================================================== */
.page-shop .shop-hero,.page-checkout-success .final-cta{position:relative}
.page-shop .shop-hero{padding:clamp(120px,12vw,160px) var(--gutter) clamp(32px,4vw,56px);max-width:1280px;margin:0 auto}
.page-shop .shop-hero .section-head{font-size:clamp(48px,8vw,112px)}
.page-shop .shop-products{padding:0 var(--gutter) var(--section-y);max-width:1280px;margin:0 auto}
.page-shop .product-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.page-shop .shop-products + section,.page-shop section.packages{padding-left:var(--gutter);padding-right:var(--gutter)}

.legal-page{counter-reset:sec;max-width:820px;margin:0 auto;padding:clamp(120px,12vw,160px) var(--gutter) var(--section-y)}
.legal-page h1{font-size:clamp(44px,7vw,88px);line-height:.95;margin-bottom:14px}
.legal-page h1::after{content:"";display:block;height:6px;width:min(220px,50%);margin-top:20px;
  background:linear-gradient(90deg,#1c1a19 0 25%,#6b6b45 25% 50%,#c9ad8f 50% 75%,#e8b4b8 75%)}
.legal-page h2{counter-increment:sec;display:flex;align-items:baseline;gap:14px}
.legal-page h2::before{content:counter(sec,decimal-leading-zero);font-family:var(--font-display);font-size:clamp(30px,3.4vw,44px);
  color:transparent;-webkit-text-stroke:1.2px var(--fg-muted);line-height:1;flex:none;min-width:2.1ch}
.page-checkout-success .final-cta{padding-top:clamp(140px,16vw,200px)!important}

/* shop: hero products use the horizontal card, bundles stay vertical */
.page-shop .shop-products .product-grid{grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
.page-shop .shop-products .acc-card{flex-direction:row;min-height:clamp(320px,28vw,400px)}
.page-shop .shop-products .acc-card__photo{flex:0 0 46%;aspect-ratio:auto;max-height:none}
.page-shop .shop-products .acc-card__photo img:not(.zoom-card){transform:none;padding:4% 2%}
.page-shop .shop-products .acc-card__body{justify-content:center}
.page-shop section:not(.shop-hero):not(.shop-products) .product-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media (max-width:760px){
  .page-shop .shop-products .product-grid{grid-template-columns:1fr}
  .page-shop .shop-products .acc-card{flex-direction:column}
  .page-shop .shop-products .acc-card__photo{flex:none;aspect-ratio:var(--media-ratio);width:100%}
}

/* nav uses the transparent white logo; the legacy rule inverted the old black one */
.nav__logo img{filter:none}
.sf__tag{max-width:18ch}

/* =====================================================================
   ACCOUNT + CLAIM/TAP PAGES (task pages: tokens + brand cues, no showcase blocks)
   ===================================================================== */
.pg-main{padding-top:clamp(112px,12vw,150px)}
.pg-sec{margin-left:auto;margin-right:auto;padding:0 var(--gutter) var(--section-y)}
.page-account .nav__links,.page-t .nav__links{margin-left:auto}

/* shared: four-color bar on top of every auth/claim card + rounded to the token */
.auth-card{position:relative;overflow:hidden;border-radius:var(--card-radius);padding-top:46px}
.auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,#1c1a19 0 25%,#6b6b45 25% 50%,#c9ad8f 50% 75%,#e8b4b8 75%)}
.panel{border-radius:var(--card-radius)}

/* ---------- sign-in ---------- */
.auth-shell{max-width:440px}
.auth-shell__hero-glow{display:none}
.auth-shell__hero-wrap{margin-bottom:22px}
.auth-shell__hero{width:100%;height:auto;aspect-ratio:var(--media-ratio);border-radius:var(--card-radius);background:#fdfdfd;border:0}
.auth-shell__hero img{object-fit:contain;padding:0;transform:scale(1.1)}
.auth-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(48px,9vw,72px);line-height:.95;text-align:center;margin-bottom:12px}
.auth-title span{color:transparent;-webkit-text-stroke:1.5px var(--fg-muted)}
.auth-shell__footer-logo{display:none}
.auth-shell__lede{margin-bottom:24px}

/* ---------- signed-in account ---------- */
.acct-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(52px,9vw,104px);line-height:.92;margin-bottom:22px}
.acct-title span{color:transparent;-webkit-text-stroke:1.5px var(--fg-muted)}
.acct-title::after{content:"";display:block;height:6px;width:min(220px,50%);margin-top:20px;
  background:linear-gradient(90deg,#1c1a19 0 25%,#6b6b45 25% 50%,#c9ad8f 50% 75%,#e8b4b8 75%)}
#account-app{counter-reset:pn}
#account-app .panel{counter-increment:pn;padding:clamp(20px,3vw,32px)}
#account-app .panel__head h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(20px,2.2vw,26px)}
#account-app .panel__head h2::before{content:counter(pn,decimal-leading-zero);font-family:var(--font-display);
  font-size:clamp(28px,3vw,38px);line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--fg-muted)}

/* ---------- claim flow ---------- */
.page-t .auth-card{max-width:480px}
.claim-product-preview{width:100%;height:auto;aspect-ratio:var(--media-ratio);border-radius:calc(var(--card-radius) - 6px);background:#fdfdfd}
.claim-product-preview img{object-fit:contain;transform:scale(1.1)}
.claim-step[id]:not(#claim-step-preview)::before{display:block;font-family:var(--font-display);font-size:clamp(64px,14vw,84px);line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px var(--fg-muted);margin-bottom:6px;text-align:center}
#claim-step-name::before{content:"01"}
#claim-step-phone::before{content:"02"}
#claim-step-login::before{content:"03"}
#claimed-success h1.section-head{font-size:clamp(48px,10vw,88px);line-height:.95}
#claimed-success h1::after,#invalid-state h1::after,#locked-state h1::after{content:"";display:block;height:6px;width:min(180px,50%);margin:20px auto 0;
  background:linear-gradient(90deg,#1c1a19 0 25%,#6b6b45 25% 50%,#c9ad8f 50% 75%,#e8b4b8 75%)}

/* ---------- public profile (what a stranger sees after a tap) ---------- */
.page-t .public-profile{max-width:560px;margin:0 auto}
.profile-card{position:relative;border-radius:var(--card-radius)}
.profile-card::before{content:"";position:absolute;z-index:2;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,#1c1a19 0 25%,#6b6b45 25% 50%,#c9ad8f 50% 75%,#e8b4b8 75%)}
.profile-card__banner{background:linear-gradient(135deg,#6b6b45 0%,var(--bg-raised) 85%);opacity:.5}
.profile-mission{margin:18px auto 0!important;max-width:34ch;font-size:12.5px!important;text-transform:none!important;letter-spacing:0!important;font-weight:400!important;line-height:1.5}

/* mini footer for task pages */
.sf--mini{margin-top:0}
.sf__minirow{max-width:1280px;margin:0 auto;padding:clamp(28px,4vw,40px) var(--gutter);display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.sf__minirow .sf__mission{flex:1 1 260px}
.sf__minilinks{display:flex;gap:6px 20px;flex-wrap:wrap}
.sf__minilinks a{font-size:12px;color:var(--fg-muted);text-decoration:underline;text-underline-offset:3px}
.sf__minilinks a:hover{color:var(--fg)}

/* ghost buttons were dark-on-dark (btn text color #0a0a0a + inline background:none) */
.btn[style*="background:none"]{color:var(--fg)}

/* Card photo in tall/narrow photo boxes (horizontal cards, shop hero cards): enlarge a little so the card reads */
.page-shop .shop-products .acc-card__photo img[src*="bnu-card"]{transform:scale(1.12);padding:0}

/* bnu-card-v3 (card front + back) is already framed with its own margin on the #fdfdfd
   backdrop, so show it as-is: no zoom and no oversizing like the older product photos. */
img[src*="bnu-card-v3"]{width:100% !important;height:100% !important;max-width:none !important;transform:none !important;padding:0 !important;object-fit:contain !important}