/* Reference-matched Celebrate With Us screen */
.exact-support{
  --support-gold:#b77a25;
  --support-brown:#3d2018;
  --support-line:#eadfd4;
  padding:24px 20px 124px!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,253,249,.92) 22%,rgba(255,253,249,.94) 78%,rgba(255,255,255,.72)),
    url('../images/invitation-silk-floral-v2.png') center top/cover fixed!important;
  color:var(--support-brown);
}
.exact-support>header{height:58px;position:relative;z-index:4}
.exact-support>header button{
  width:48px!important;height:48px!important;
  border:1px solid #eee5dc!important;border-radius:50%!important;
  background:#fff!important;color:#4d2b21!important;
  box-shadow:0 8px 24px rgba(72,45,26,.12)!important;
}
.exact-support>header .app-icon{width:23px;height:23px}
.support-hero{
  grid-template-columns:1.08fr .92fr;
  min-height:300px;
  margin:-22px -4px 0;
  position:relative;
}
.support-hero>div:first-child{position:relative;z-index:2;text-align:center;padding:24px 0 8px}
.support-hero .ornament{font:22px/1 var(--serif);color:var(--support-gold);letter-spacing:.14em}
.support-hero h1{
  margin:12px 0 18px;
  font:italic 64px/.78 'Cormorant Garamond',Georgia,serif;
  color:#a56b19;
  letter-spacing:-.035em;
}
.support-hero h1 small{
  margin-top:18px;
  font:600 27px/1 'Cormorant Garamond',Georgia,serif;
  letter-spacing:.17em;color:#462219;
}
.support-hero p{
  max-width:245px;margin:0 auto;
  font:17px/1.4 'Cormorant Garamond',Georgia,serif;
  color:#3f332d;
}
.support-hero p:after{
  content:"—  ♥  —";display:block;
  margin-top:18px;color:var(--support-gold);letter-spacing:.18em;
}
.support-photo{
  align-self:end;height:272px;
  border:1px solid #d89c49;
  border-radius:49% 49% 5px 5px;
  background-position:center 20%!important;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.48);
}
.support-summary{
  grid-template-columns:104px minmax(0,1fr) 118px;
  gap:13px;padding:15px 18px;margin-top:-2px;
  border:1px solid #eee5dc;border-radius:20px;
  background:rgba(255,255,255,.94);
  box-shadow:0 9px 25px rgba(92,55,29,.11);
}
.support-summary .crest{width:92px;height:92px;border-color:#d5a45c;color:#4c2017}
.support-summary h2{font:600 27px/1.15 var(--serif);color:#4b2018;white-space:nowrap}
.support-summary h2 em{color:var(--support-gold)}
.support-summary div>p{font:14px/1.35 var(--serif);color:#4f3a31}
.support-summary>p{
  align-self:stretch;display:grid;place-content:center;
  padding-left:14px;border-left:1px solid var(--support-line);
  font:14px/1.35 var(--serif);color:#49352d;
}
.support-summary>p:after{content:"♥";display:block;margin-top:10px;color:#c68c36;font-size:18px}
.support-heading{margin:25px 0 16px}
.support-heading h2{
  display:flex;align-items:center;justify-content:center;gap:17px;
  font:600 29px/1 var(--serif);color:#251d19;
}
.support-heading h2:before,.support-heading h2:after{content:"";width:50px;height:1px;background:#cfa766}
.support-heading p{margin:10px 0 0;font:14px/1.4 var(--serif);color:#5a4033}
.support-tabs{
  overflow:hidden;border:1px solid #ece2d8;border-radius:18px 18px 0 0;
  background:rgba(255,255,255,.94);box-shadow:0 7px 24px rgba(76,47,26,.07);
}
.support-tabs button{min-height:82px;color:#3f3d3b}
.support-tabs button.active{color:#a86c1d;background:linear-gradient(#fff,#fffaf3);box-shadow:inset 0 -2px #bd7b22}
.support-tabs .app-icon{width:28px;height:28px}
.support-tabs span{font:14px var(--serif);color:#2e231e}
.support-gift{
  padding:20px 16px 18px;
  border-color:#ece2d8;border-radius:0 0 18px 18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 27px rgba(76,47,26,.08);
}
.support-gift legend,.gift-amount{font:600 14px/1.2 var(--serif);color:#241c18}
.gift-options{gap:12px}
.gift-options span{
  min-height:94px;border-color:#eee2d6;border-radius:11px;
  background:linear-gradient(145deg,#fffdf9,#faf4ec);
}
.gift-options input:checked+span{
  border-color:#c17c21;background:#fffaf2;
  box-shadow:inset 0 0 0 1px #c17c21;
}
.gift-options .app-icon{width:31px;height:31px}
.gift-options b{margin-top:10px;font-size:13px;color:#4c3227}
.gift-amount{margin-top:20px}
.gift-amount>span{
  min-height:58px;border-color:#eadfd5;border-radius:11px;background:#fff;
}
.gift-amount input{font:16px var(--serif)}
.gift-amount b{padding-left:13px;border-left:1px solid #eadfd5;font-size:14px}
.payment-methods{gap:8px}
.payment-methods span{
  min-height:57px;border-color:#eadfd5;border-radius:9px;background:#fff;
  color:#322823;
}
.payment-methods input:checked+span{border-color:#bd7a20;background:#fffdfa;box-shadow:inset 0 0 0 1px #bd7a20}
.secure-payment{margin:18px 0 3px;font:11px var(--serif);color:#625c57}
.support-gratitude{
  min-height:86px;margin-top:18px;padding:14px 20px;
  border-color:#eee4da;border-radius:18px;background:rgba(255,255,255,.93);
  box-shadow:0 8px 23px rgba(76,47,26,.07);
}
.support-gratitude>.app-icon{
  width:52px;height:52px;padding:13px;border-radius:50%;
  background:#fae4df;color:#8c352c;
}
.support-gratitude p{font:15px/1.4 var(--serif)}
.support-confirmation{
  margin-top:18px!important;border-radius:18px!important;
  border-color:#e9dccc!important;background:rgba(255,255,255,.96)!important;
}
.bottom-nav button[data-go="support"]{color:#b47724}
.screen[data-screen="support"].active~* .bottom-nav button[data-go="support"]{color:#b47724}
.app-shell .exact-support{
  padding:24px 20px 124px!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,253,249,.92) 22%,rgba(255,253,249,.94) 78%,rgba(255,255,255,.72)),
    url('../images/invitation-silk-floral-v2.png') center top/cover fixed!important;
  color:var(--support-brown)!important;
}
.app-shell .exact-support .support-hero h1{color:#a56b19!important}
.app-shell .exact-support .support-heading h2{color:#251d19!important}
.app-shell .exact-support .support-summary,
.app-shell .exact-support .support-tabs,
.app-shell .exact-support .support-gift,
.app-shell .exact-support .support-gratitude{
  border-color:#ece2d8!important;background:rgba(255,255,255,.96)!important;
  box-shadow:0 9px 25px rgba(92,55,29,.09)!important;
}
.app-shell .exact-support .support-tabs button.active{
  color:#a86c1d!important;background:linear-gradient(#fff,#fffaf3)!important;
  box-shadow:inset 0 -2px #bd7b22!important;
}
.app-shell .exact-support .gift-options label>span,
.app-shell .exact-support .payment-methods label>span{
  border-color:#eee2d6!important;background:linear-gradient(145deg,#fffdf9,#faf4ec)!important;
}
.app-shell .exact-support .gift-options input:checked+span,
.app-shell .exact-support .payment-methods input:checked+span{
  border-color:#c17c21!important;background:#fffaf2!important;
  box-shadow:inset 0 0 0 1px #c17c21!important;
}
.app-shell .bottom-nav button[data-go="details"] svg{display:none}
.app-shell .bottom-nav button[data-go="details"]:before{
  content:"i";width:24px;height:24px;border:1.7px solid currentColor;border-radius:50%;
  display:grid;place-items:center;font:600 15px/1 Georgia,serif;margin-bottom:2px;
}
@media(max-width:430px){
  .exact-support,.app-shell .exact-support{padding:17px 14px 112px!important}
  .support-hero{grid-template-columns:1.05fr .95fr;min-height:260px;margin-top:-18px}
  .support-hero h1{font-size:50px}.support-hero h1 small{font-size:21px}
  .support-hero p{font-size:13px;max-width:190px}.support-photo{height:230px}
  .support-summary{grid-template-columns:75px minmax(0,1fr) 82px;padding:12px 10px;gap:8px}
  .support-summary .crest{width:68px;height:68px}.support-summary h2{font-size:21px}
  .support-summary div>p,.support-summary>p{font-size:11px}.support-summary>p{padding-left:8px}
  .gift-options{gap:7px}.gift-options span{min-height:82px;padding:6px}.gift-options b{font-size:11px}
  .payment-methods{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:350px){
  .support-hero{grid-template-columns:1fr}.support-photo{height:210px}.support-hero p{max-width:260px}
  .support-summary{grid-template-columns:70px 1fr}.support-summary>p{grid-column:1/-1;border-left:0;border-top:1px solid var(--support-line);padding:8px 0 0}
  .gift-options{grid-template-columns:repeat(2,1fr)}
}
