
/* HANSITES / VALUE FIRST — boutique black & champagne-gold pricing experience */
/* Kept separate from the established Ultra visual system and its animations. */
#pricing.pricing-spotlight{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(95px,9vw,150px) 0 clamp(100px,10vw,165px);
  background:radial-gradient(ellipse at 15% 11%,#b8873824,transparent 32%),
             radial-gradient(ellipse at 95% 75%,#b68a4b17,transparent 42%),#121313;
}
#pricing.pricing-spotlight::before{
  content:"";position:absolute;top:2%;right:-5%;height:440px;width:440px;
  border:1px solid #e0bc7940;border-radius:50%;z-index:-1;pointer-events:none;
  box-shadow:0 0 0 44px #cfa65f0b,0 0 0 110px #cfa65f07;
}
#pricing .section-top{margin-bottom:36px}
#pricing .section-top .overline{color:#e1bf84}
#pricing .section-count{color:#b1a28c}
#pricing .pricing-intro{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.35fr);
  align-items:end;gap:50px;margin-bottom:66px
}
#pricing .pricing-intro .display-heading{
  font-size:clamp(58px,7.45vw,126px);line-height:.96;
  letter-spacing:-.09em;margin:0
}
#pricing .pricing-intro .serif{color:#e1bb7c}
#pricing .pricing-intro-note{
  display:flex;flex-direction:column;align-items:flex-start;gap:21px;
  max-width:385px;padding-bottom:7px
}
#pricing .pricing-intro-note .note-line{height:1px;width:56px;background:#cdaa72}
#pricing .pricing-intro-note p{margin:0;color:#b4b0a5;font:400 16px/1.85 'DM Sans',sans-serif}
#pricing .pricing-intro-note strong{color:#f5e2bc;font-weight:700}
#pricing .pricing-columns{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:18px;align-items:stretch
}
#pricing .pricing-card{
  display:flex;flex-direction:column;min-width:0;
  padding:clamp(28px,3.4vw,53px);
  background:linear-gradient(153deg,#302a1f,#1c1c1a 59%,#17191a);
  border:1px solid #c9a263a0;box-shadow:0 35px 88px #0006;
  position:relative;overflow:hidden;
}
#pricing .pricing-card::before{
  content:"✳";position:absolute;pointer-events:none;top:-96px;right:-20px;
  font:300 330px 'Italiana',serif;color:#d2a35b0d
}
#pricing .pricing-card .price-top{
  position:relative;display:flex;gap:18px;align-items:center;justify-content:space-between;
  border-bottom:1px solid #b1965e70;padding:0 0 25px;
  font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.14em;color:#e6ca98
}
#pricing .pricing-card .price-top span:last-child{font-size:10px;line-height:1}
#pricing .price-top .tag-flag{border:1px solid #e5ba76;padding:9px 12px;background:#ca9a4530;color:#f7ddb0}
#pricing .price-line{
  display:grid;grid-template-columns:min-content minmax(0,1fr);align-items:baseline;
  gap:0 14px;padding:40px 0 26px;position:relative;margin:0
}
#pricing .price-line>small{font:700 10px 'Space Grotesk';color:#c6b393;letter-spacing:.13em}
#pricing .price-line strong{
  font:600 clamp(98px,11.9vw,177px)/.85 'Space Grotesk',sans-serif;
  letter-spacing:-.12em;color:#f6e5be
}
#pricing .price-line>span{grid-column:2;color:#d5b684;font:700 10px 'Space Grotesk';letter-spacing:.13em;margin:23px 0 0}
#pricing .pricing-card>p{max-width:390px;color:#d4ccbd;font:400 15px/1.72 'DM Sans';margin:4px 0 23px}
#pricing .pricing-card ul{list-style:none;margin:6px 0 35px;padding:0;border-top:1px solid #6a5a4563}
#pricing .pricing-card li{
  position:relative;border-bottom:1px solid #77664c45;
  padding:11px 0 11px 28px;font-size:13px;color:#e0dbd1
}
#pricing .pricing-card li::before{content:"✳";position:absolute;left:2px;top:10px;color:#ddbb7c;font-size:13px}
#pricing .price-card-actions{margin-top:auto}
#pricing .price-cta{
  background:#d6ae68;color:#0e0d0b;min-height:58px;
  padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font:800 11px 'Space Grotesk';letter-spacing:.09em;
  transition:background .2s,transform .3s
}
#pricing .price-cta span{font-size:22px}
#pricing .price-cta:hover{background:#f3d7a1;transform:translateY(-3px)}
#pricing .pricing-card>.price-card-actions>small{
  display:block;margin-top:22px;color:#aaa18f;font:400 11px/1.8 'DM Sans'
}
#pricing .market-card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  padding:clamp(28px,3.2vw,48px);
  background:#20211e;border:1px solid #605544;
  box-shadow:0 22px 65px #0002
}
#pricing .market-eyebrow{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:#cdb88e;font:700 10px 'Space Grotesk';letter-spacing:.12em
}
#pricing .market-eyebrow .market-pulse{color:#c2b7a3}
#pricing .market-pulse i{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:#d6ae68;
  margin-right:7px;vertical-align:middle;box-shadow:0 0 14px #e0b46b9b
}
#pricing .market-card h3{
  margin:27px 0 12px;color:#f5f2e9;font:600 clamp(32px,3.15vw,53px)/1.07 'Space Grotesk';
  letter-spacing:-.07em
}
#pricing .market-card h3 em{
  display:inline-block;font:400 1.12em 'Italiana',serif;color:#dfb879
}
#pricing .market-lede{max-width:430px;color:#adaaa2;font:400 13px/1.75 'DM Sans';margin:0 0 27px}
#pricing .market-list{display:flex;flex-direction:column;border-top:1px solid #665e50}
#pricing .market-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,max-content) 17px;
  gap:13px;align-items:center;padding:22px 2px;
  border-bottom:1px solid #665e50;color:#eeeae2;
  position:relative;transition:background .3s,padding .3s
}
#pricing .market-row:hover{background:#333027;padding-inline:12px}
#pricing .market-row .market-row-name{display:block;color:#f1eee6;font:700 clamp(16px,1.6vw,22px) 'Space Grotesk';letter-spacing:-.045em}
#pricing .market-row .market-row-type{
  display:block;color:#c7a970;font:700 9px 'Space Grotesk';letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:6px
}
#pricing .market-row .market-row-desc{
  display:block;margin-top:7px;color:#aaa499;font:400 11px/1.55 'DM Sans'
}
#pricing .market-row .market-row-cost{text-align:right;white-space:nowrap}
#pricing .market-row .market-row-cost b{
  display:block;font:600 clamp(24px,2.7vw,42px)/1.1 'Space Grotesk';letter-spacing:-.075em;color:#f2d4a1
}
#pricing .market-row .market-row-cost small{
  display:block;font:700 8px/1.65 'Space Grotesk';letter-spacing:.09em;
  color:#b6ada0;text-transform:uppercase;white-space:normal;max-width:128px;margin-left:auto;margin-top:5px
}
#pricing .market-row .market-arrow{
  color:#d8b47a;font-size:21px;align-self:start;margin-top:18px
}
#pricing .market-ethics{
  margin-top:auto;padding-top:32px
}
#pricing .market-ethics strong{
  display:block;color:#e1c69b;font:700 11px 'Space Grotesk';letter-spacing:.06em;margin-bottom:10px
}
#pricing .market-ethics p{
  margin:0;color:#a8a69e;font:400 11px/1.8 'DM Sans',sans-serif
}
#pricing .market-ethics a{color:#dfc08b;text-decoration:underline;text-underline-offset:3px}
#pricing .pricing-foot{
  margin-top:25px;display:flex;align-items:center;justify-content:space-between;
  gap:18px 40px;flex-wrap:wrap;color:#b7a88f;
  font:700 10px/1.7 'Space Grotesk';letter-spacing:.075em
}
#pricing .pricing-foot>span{display:inline-flex;align-items:center;gap:11px}
#pricing .pricing-foot>span::before{content:"✧";font-size:17px;color:#e4bc7b}
#pricing .pricing-foot a{
  margin-left:auto;border-bottom:1px solid #d9b57d;padding:0 0 7px;color:#e8cb9b
}
/* Announce the starting price immediately, without compromising the original hero. */
.hero-eyebrow .gold-dash{background:#e5bd80}
.hero-price-spotlight{
  display:inline-flex;align-items:baseline;gap:9px;
  border:1px solid #bd9665aa;background:#231e17c7;color:#e7cc9d;
  padding:12px 16px;font:700 10px 'Space Grotesk',sans-serif;
  letter-spacing:.07em;white-space:nowrap;transition:background .25s,transform .25s
}
.hero-price-spotlight strong{
  color:#f9e8be;font:600 27px 'Space Grotesk';letter-spacing:-.08em
}
.hero-price-spotlight:hover{background:#40311f;transform:translateY(-3px)}
.hero-price-spotlight span:last-child{color:#c5b08f;font-size:16px}
@media(max-width:1160px){
 #pricing .pricing-intro{grid-template-columns:1fr minmax(190px,.4fr);gap:27px}
 #pricing .pricing-card{padding:30px}
 #pricing .market-card{padding:30px}
 #pricing .market-row{gap:9px}
 #pricing .market-row .market-row-cost b{font-size:30px}
 #pricing .pricing-intro .display-heading{font-size:clamp(55px,7.8vw,103px)}
}
@media(max-width:900px){
 #pricing .pricing-intro{grid-template-columns:1fr;gap:22px;margin-bottom:46px}
 #pricing .pricing-intro-note{max-width:620px}
 #pricing .pricing-columns{grid-template-columns:1fr;max-width:740px;margin:auto}
 #pricing .price-line strong{font-size:clamp(120px,20vw,175px)}
 #pricing .market-card h3{font-size:48px}
 #pricing .market-row .market-row-cost b{font-size:36px}
 #pricing .pricing-foot{max-width:740px;margin-inline:auto;padding-top:15px}
}
@media(max-width:680px){
 #pricing.pricing-spotlight{padding:85px 0 100px}
 #pricing .section-top{margin-bottom:27px}
 #pricing .section-count{font-size:8px}
 #pricing .pricing-intro .display-heading{font-size:clamp(48px,11vw,72px)}
 #pricing .pricing-intro-note p{font-size:14px;line-height:1.75}
 #pricing .pricing-card,#pricing .market-card{padding:25px 21px}
 #pricing .price-top{align-items:start;gap:10px}
 #pricing .price-line{gap:0 9px;padding-top:35px}
 #pricing .price-line strong{font-size:clamp(97px,24vw,142px)}
 #pricing .price-line>span{font-size:9px}
 #pricing .pricing-card li{font-size:12px}
 #pricing .market-card h3{font-size:clamp(37px,10vw,52px)}
 #pricing .market-row{grid-template-columns:minmax(0,1fr) minmax(88px,max-content) 14px;gap:8px}
 #pricing .market-row .market-row-name{font-size:17px}
 #pricing .market-row .market-row-cost b{font-size:clamp(23px,7.5vw,35px)}
 #pricing .market-row .market-row-desc{font-size:10px}
 #pricing .market-row .market-row-cost small{font-size:8px;max-width:105px}
 #pricing .market-row .market-arrow{font-size:15px}
 #pricing .pricing-foot{font-size:9px}
 #pricing .pricing-foot a{margin-left:0}
 .hero-price-spotlight{padding:9px 13px;font-size:9px}
 .hero-price-spotlight strong{font-size:24px}
}
@media(max-width:360px){
 #pricing .market-row{grid-template-columns:minmax(0,1fr) minmax(78px,max-content) 12px;gap:6px}
 #pricing .market-row .market-row-cost b{font-size:23px}
 #pricing .price-line strong{font-size:94px}
}
@media(prefers-reduced-motion:reduce){
 #pricing .market-row,#pricing .price-cta,.hero-price-spotlight{transition:none!important}
}

/* Natural alignment for the new first-screen price callout. */
.hero-sub{gap:clamp(18px,2.3vw,40px);flex-wrap:wrap}
@media(max-width:680px){
 .hero-sub .hero-price-spotlight{display:inline-flex;margin-top:20px}
 .hero-sub .hero-link{margin-right:12px}
}

/* Transparent pricing, prominently alongside the $250 offer. */
#pricing .site-cost-note{
  position:relative;isolation:isolate;
  background:linear-gradient(115deg,rgba(209,166,93,.14),rgba(209,166,93,.035));
  border:1px solid rgba(231,191,126,.5);
  border-left:3px solid #ddb674;
  margin:4px 0 23px;
  padding:19px 21px 18px;
}
#pricing .site-cost-note .site-cost-label{
  display:block;
  color:#e9c58b;
  font:700 10px/1.6 'Space Grotesk',sans-serif;
  letter-spacing:.13em;
  margin-bottom:10px
}
#pricing .site-cost-note p{
  max-width:450px;
  margin:0;
  color:#ddd3bf;
  font:400 13px/1.82 'DM Sans',sans-serif
}
#pricing .site-cost-note strong{font-weight:700;color:#fff0ce}
@media(max-width:680px){
  #pricing .site-cost-note{padding:17px 16px;margin-bottom:20px}
  #pricing .site-cost-note p{font-size:12px}
}


/* Free follow-up edit, built into the one-time $250 offer. */
#pricing .edit-perk{
  position:relative;
  margin:24px 0 28px;
  padding:23px 24px 22px;
  border:1px solid rgba(222,180,113,.37);
  border-radius:4px;
  background:linear-gradient(118deg,rgba(232,185,107,.12) 0%,rgba(232,185,107,.035) 85%);
}
#pricing .edit-perk-eyebrow{
  display:block;
  margin-bottom:12px;
  color:#e4bd82;
  font:700 10px/1.5 'Space Grotesk',sans-serif;
  letter-spacing:.15em;
}
#pricing .edit-perk>strong{
  display:block;
  margin-bottom:10px;
  color:#fff2d7;
  font:700 clamp(19px,2.1vw,28px)/1.15 'Space Grotesk',sans-serif;
  letter-spacing:-.045em;
}
#pricing .edit-perk>strong span{color:#edc68c;font-size:.72em;margin-left:3px}
#pricing .edit-perk p{
  max-width:490px;
  margin:0;
  color:#d9cdb8;
  font:400 13px/1.75 'DM Sans',sans-serif;
}
#pricing .edit-perk p b{color:#fff0cf;font-weight:700}
@media(max-width:680px){
  #pricing .edit-perk{padding:20px 17px;margin:22px 0 25px}
  #pricing .edit-perk>strong{font-size:21px}
  #pricing .edit-perk p{font-size:12px;line-height:1.8}
}
