/* BIY Referral Rewards | October 13 approved premium KPI/glass reference.
   Scoped to #referral-rewards. CSS only: existing Copy Message and card flips remain functional. */
#referral-rewards {
  --ref-neon: #04cfff; --ref-ice: #72e9ff; --ref-blue: #007fff;
  color: #eff8ff;
}
#referral-rewards .ref-stage {
  padding: clamp(32px, 3.35vw, 52px) clamp(22px, 2.55vw, 42px) clamp(28px, 2.45vw, 40px);
  border: 1.5px solid rgba(65, 215, 255, .88);
  border-radius: clamp(22px, 2.9vw, 39px);
  background:
    radial-gradient(ellipse 56% 52% at 98% 0%, rgba(11, 151, 255, .34), transparent 78%),
    radial-gradient(ellipse 45% 62% at 0% 98%, rgba(13, 88, 187, .26), transparent 75%),
    linear-gradient(150deg, #0a203e 0%, #07192f 43%, #051226 100%);
  box-shadow: 0 0 0 5px rgba(0,150,255,.05), 0 0 37px rgba(0,186,255,.14), 0 30px 75px rgba(0,0,0,.32), inset 0 0 14px rgba(3,193,255,.11), inset 0 1px rgba(222,252,255,.22);
}
#referral-rewards .ref-stage::before {
  background-image: linear-gradient(rgba(96,184,255,.055) 1px, transparent 1px), linear-gradient(90deg,rgba(96,184,255,.055) 1px,transparent 1px);
  background-size: 47px 47px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 97%);
  mask-image:linear-gradient(to bottom,#000,transparent 97%);
}
#referral-rewards .ref-stage::after {
  top: -300px; right: -185px; width: min(720px,77%);
  border-color:rgba(1,190,255,.28);
  box-shadow: 0 0 0 78px rgba(0,149,255,.033),0 0 0 150px rgba(0,137,255,.026),0 0 25px rgba(0,156,255,.13);
}
#referral-rewards .ref-head { max-width: 1060px; }
#referral-rewards .ref-eyebrow {
  display:flex; align-items:center; justify-content:center; gap:16px;
  color:#74e9ff; font-size:clamp(10px,.82vw,12px); font-weight:800; letter-spacing:.29em;
}
#referral-rewards .ref-eyebrow::before,
#referral-rewards .ref-eyebrow::after {
  content:""; display:block; flex:0 1 125px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(67,208,255,.69));
}
#referral-rewards .ref-eyebrow::after { transform:rotate(180deg); }
#referral-rewards .ref-head h3 {
  margin:16px 0 0; color:#fff; font-size:clamp(35px,4.05vw,66px);
  line-height:1.06; letter-spacing:-.052em;
  text-shadow:0 0 18px rgba(247,252,255,.15),0 4px 5px rgba(0,0,0,.18);
}
#referral-rewards .ref-head h3 em { color:#05ccff; text-shadow:0 0 25px rgba(0,195,255,.37); }
#referral-rewards .ref-tagline { margin-top:17px; font-size:clamp(13px,1.15vw,18px); letter-spacing:.23em; }
#referral-rewards .ref-sub { margin-top:12px; max-width:480px; font-size:clamp(15px,1.14vw,18px); line-height:1.58; color:#d0e1ef; }
#referral-rewards .ref-grid { margin-top:clamp(30px,2.35vw,40px); gap:clamp(17px,1.8vw,26px); }
#referral-rewards .ref-share {
  isolation:isolate;
  grid-template-columns:minmax(185px,242px) minmax(0,1fr) minmax(164px,211px);
  padding:clamp(17px,1.85vw,26px) clamp(19px,2.05vw,32px);
  gap:12px clamp(16px,2vw,30px);
  border:1.4px solid rgba(75,219,255,.91); border-radius:22px;
  background:
    radial-gradient(ellipse 60% 120% at 105% -15%,rgba(20,153,255,.4),transparent 72%),
    linear-gradient(115deg,rgba(15,107,213,.35),transparent 36%),
    linear-gradient(140deg,#122d51,#0a2344 60%,#11365b);
  box-shadow:0 0 18px rgba(0,190,255,.23),0 20px 45px rgba(0,0,0,.26),inset 0 1px rgba(226,249,255,.31),inset 0 -10px 17px rgba(0,84,209,.22);
}
#referral-rewards .ref-share::before {
  left:0; top:18px; bottom:18px; width:4px;
  background:linear-gradient(#49f4ff,#0085ff); box-shadow:0 0 17px rgba(0,211,255,.77);
}
#referral-rewards .ref-share::after {
  content:""; position:absolute; z-index:-1; top:0;right:0;bottom:0;width:35%;
  background:linear-gradient(132deg,transparent 31%,rgba(98,208,255,.07) 31.5%,transparent 81%);
  pointer-events:none;
}
#referral-rewards .ref-share .ref-top { padding-right:clamp(9px,1.3vw,22px); border-right:1px solid rgba(55,212,255,.41); }
#referral-rewards .ref-ico {
  width:clamp(49px,4.35vw,66px); height:clamp(49px,4.35vw,66px); border-radius:14px;
  border:1.4px solid rgba(97,225,255,.91); color:#75f0ff;
  background:radial-gradient(ellipse at 35% 12%,rgba(103,236,255,.35),transparent 65%),linear-gradient(142deg,#064579,#053277 72%,#001d55);
  box-shadow:0 0 13px rgba(0,179,255,.38),inset 0 2px rgba(192,243,255,.18),inset 0 -9px 17px rgba(1,82,214,.32);
}
#referral-rewards .ref-ico svg { width:28px; height:28px; filter:drop-shadow(0 0 4px rgba(111,237,255,.5)); }
#referral-rewards .ref-titles { gap:6px; }
#referral-rewards .ref-label {color:#71e5ff; font-size:clamp(10px,.83vw,12px); letter-spacing:.24em;}
#referral-rewards .ref-share h4 { font-size:clamp(20px,1.85vw,28px); letter-spacing:-.04em; text-shadow:0 0 10px rgba(255,255,255,.16); }
#referral-rewards .ref-message { color:#e9f3fe; font-size:clamp(13px,1.05vw,16px); line-height:1.55; }
#referral-rewards .ref-message a { color:#7ceaff; text-decoration-thickness:1.5px; }
#referral-rewards .ref-copy {
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:12px 15px; min-height:56px; border:1px solid rgba(156,249,255,.87);
  border-radius:13px; color:#041829;
  background:linear-gradient(118deg,#64e5ff 0%,#06c7ff 55%,#029eff 100%);
  box-shadow:0 0 19px rgba(0,197,255,.29),inset 0 2px rgba(255,255,255,.37),0 12px 24px rgba(0,0,0,.18);
  font:800 clamp(13px,1.04vw,15px)/1.25 var(--font-b);
}
#referral-rewards .ref-copy-symbol { width:20px; height:20px; flex:none; }
#referral-rewards .ref-flip { min-height:clamp(355px,29vw,405px); }
#referral-rewards .ref-face {
  border:1.4px solid rgba(51,209,255,.87); border-radius:21px;
  background:
    radial-gradient(ellipse 95% 63% at 114% -12%,rgba(36,180,255,.42),transparent 75%),
    linear-gradient(153deg,rgba(36,145,237,.19),transparent 47%),
    radial-gradient(ellipse 97% 43% at 103% 108%,rgba(4,103,251,.6),transparent 73%),
    linear-gradient(154deg,#102e56 0%,#071e3a 52%,#06172f 100%);
  box-shadow:inset 0 1px rgba(232,251,255,.35),inset 0 -4px 17px rgba(0,95,239,.21),0 20px 39px rgba(0,0,0,.24),0 0 19px rgba(0,190,255,.14);
}
#referral-rewards .ref-front { padding:clamp(22px,2.35vw,32px); }
#referral-rewards .ref-front::after {
  left:clamp(22px,2.35vw,32px); top:0; width:clamp(64px,6.2vw,96px); height:4px;
  border-radius:0 0 6px 6px; background:linear-gradient(90deg,#41f6ff,#008fff);
  box-shadow:0 0 18px rgba(0,222,255,.9),0 0 34px rgba(0,151,255,.4);
}
#referral-rewards .ref-front::before {
  position:absolute; right:clamp(23px,2.3vw,34px); top:clamp(22px,2vw,31px);
  width:auto; height:auto; padding:0; display:block; z-index:0;
  color:rgba(76,181,255,.28); font:400 24px/1 var(--font-h); pointer-events:none;
}
#referral-rewards .ref-item--2 .ref-front::before {content:"01";}
#referral-rewards .ref-item--3 .ref-front::before {content:"02";}
#referral-rewards .ref-item--4 .ref-front::before {content:"03";}
#referral-rewards .ref-front .ref-top {gap:14px;position:relative;z-index:1;}
#referral-rewards .ref-amount {
  margin-top:23px; color:#fff; font-size:clamp(61px,5.3vw,84px); line-height:.96;
  text-shadow:0 3px 2px rgba(7,22,48,.6),0 0 21px rgba(165,216,255,.23);
  position:relative; z-index:1;
}
#referral-rewards .ref-unit {
  margin-top:6px; color:#65e6ff; font-size:clamp(19px,1.72vw,25px);
  text-shadow:0 0 11px rgba(0,199,255,.23); position:relative;z-index:1;
}
#referral-rewards .ref-detail {
  position:relative;z-index:1;
  margin-top:21px; padding-top:17px; border-top:1px solid rgba(111,211,255,.46);
  font-size:clamp(13px,1.13vw,16px); line-height:1.45; color:#eff7ff;
}
#referral-rewards .ref-hint {
  position:relative; z-index:1; margin-top:auto; min-height:44px; padding-top:16px;
  display:inline-flex; gap:15px; align-items:center;
  color:#53ecff; font-weight:700; font-size:clamp(12.5px,1vw,14px);
  text-decoration:underline; text-underline-offset:5px;
}
#referral-rewards .ref-hint::before {
  content:""; display:inline-block; flex:none; width:28px;height:28px;
  border-radius:50%;border:1.4px solid #10d6ff;
  background:radial-gradient(circle,rgba(36,211,255,.47) 2px,transparent 4px),linear-gradient(135deg,rgba(0,178,255,.34),rgba(0,61,159,.5));
  box-shadow:0 0 9px rgba(0,193,255,.32),inset 0 0 8px rgba(0,156,255,.23);
}
#referral-rewards .ref-front:hover {
  border-color:#7af2ff; filter:brightness(1.065);
  box-shadow:0 0 29px rgba(2,199,255,.27),0 23px 42px rgba(0,0,0,.28),inset 0 1px rgba(233,252,255,.35);
}
#referral-rewards .ref-back { padding:clamp(20px,1.95vw,27px); }
#referral-rewards .ref-back h4 {font-size:clamp(16px,1.35vw,19px);}
#referral-rewards .ref-back ul { font-size:clamp(12.5px,1.02vw,14px); line-height:1.46; margin-top:12px; }
#referral-rewards .ref-back li + li {margin-top:7px;}
#referral-rewards .ref-terms-panel {
  margin-top:clamp(19px,2vw,27px);
  padding:clamp(20px,2vw,29px) clamp(23px,2.2vw,33px);
  border:1.3px solid rgba(61,216,255,.84);border-radius:20px;
  grid-template-columns:minmax(182px,255px) minmax(0,1fr);
  background:radial-gradient(ellipse 42% 112% at 100% 0%,rgba(14,151,255,.29),transparent 87%),linear-gradient(130deg,#102c4e,#091c36 72%,#11345a);
  box-shadow:0 0 15px rgba(0,194,255,.14),inset 0 1px rgba(196,242,255,.2),0 15px 30px rgba(0,0,0,.19);
}
#referral-rewards .ref-terms-panel-rule {
  width:45px;height:4px;background:linear-gradient(90deg,#00c3ff,#7aefff);box-shadow:0 0 13px rgba(0,213,255,.65);
}
#referral-rewards .ref-terms-panel-title { color:#75e7ff;font-size:clamp(11px,.95vw,13px);letter-spacing:.17em; }
#referral-rewards .ref-terms-panel-copy p { color:#e0ebf8;font-size:clamp(12.5px,1.01vw,15px);line-height:1.48; }
#referral-rewards .ref-terms-panel-copy strong { color:#fff; }
@media (min-width:1101px) {
  #referral-rewards .ref-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1100px) {
  #referral-rewards .ref-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #referral-rewards .ref-item--4 {grid-column:1/-1;justify-self:center;width:min(100%,460px);}
  #referral-rewards .ref-share {grid-template-columns:minmax(0,1fr) minmax(170px,210px); }
  #referral-rewards .ref-share .ref-top {border-right:0;padding-right:0;}
  #referral-rewards .ref-message {grid-column:1;grid-row:2;}
  #referral-rewards .ref-copy {grid-column:2;grid-row:1/span 2;width:100%;}
  #referral-rewards .ref-flip {min-height:430px;}
}
@media (max-width:720px) {
  #referral-rewards .ref-stage {padding:31px clamp(15px,4vw,26px);}
  #referral-rewards .ref-head h3 {font-size:clamp(31px,8vw,43px);}
  #referral-rewards .ref-grid {grid-template-columns:minmax(0,1fr);gap:16px;margin-top:29px;}
  #referral-rewards .ref-item--4 {grid-column:1; width:100%;}
  #referral-rewards .ref-share {grid-template-columns:minmax(0,1fr);padding:21px 20px;gap:15px;}
  #referral-rewards .ref-share .ref-top {border-right:0;padding-right:0;}
  #referral-rewards .ref-message,#referral-rewards .ref-copy {grid-column:1;grid-row:auto;width:100%;}
  #referral-rewards .ref-share .ref-ico {width:57px;height:57px;}
  #referral-rewards .ref-flip {min-height:420px;}
  #referral-rewards .ref-front {padding:25px;}
  #referral-rewards .ref-amount {font-size:clamp(62px,14vw,79px);}
  #referral-rewards .ref-detail {margin-top:24px;}
  #referral-rewards .ref-terms-panel {grid-template-columns:minmax(0,1fr);gap:13px;}
}
@media (max-width:360px) {
  #referral-rewards .ref-stage {padding:26px 14px;}
  #referral-rewards .ref-eyebrow {letter-spacing:.15em;gap:8px;}
  #referral-rewards .ref-flip {min-height:475px;}
  #referral-rewards .ref-front,#referral-rewards .ref-back {padding:20px;}
  #referral-rewards .ref-amount {font-size:62px;}
  #referral-rewards .ref-back ul {font-size:12.6px;}
}
@media (prefers-reduced-motion:reduce) {
  #referral-rewards .ref-front,#referral-rewards .ref-copy {transition:none;}
}


/* Captain-approved half-scale adjustment: shrink the ENTIRE referral stage,
   not only the heading or reward cards. CSS zoom preserves document flow,
   rather than leaving a full-height blank area as transform:scale would.
   Smaller touch devices use a legible compact scaling instead of 7px text. */
@media (min-width: 901px) {
  #referral-rewards {
    width: 72%;
    margin-left: auto;
    margin-right: auto;
  }
  #referral-rewards .ref-stage {
    zoom: .72;
  }
}
@media (min-width: 661px) and (max-width: 900px) {
  #referral-rewards .ref-stage { zoom: .82; }
}
@media (max-width: 660px) {
  #referral-rewards .ref-stage { zoom: .88; }
}

/* Half-width desktop panel with accessible, legible type.
   Zoom scales layout, so the unscaled font values below are ~2x normal. */
@media (min-width: 901px) {
  #referral-rewards .ref-eyebrow { font-size:22px; letter-spacing:.15em; }
  #referral-rewards .ref-head h3 { font-size:64px; }
  #referral-rewards .ref-tagline { font-size:26px; }
  #referral-rewards .ref-sub { font-size:27px; max-width:780px; line-height:1.46; }
  #referral-rewards .ref-label { font-size:24px; letter-spacing:.14em; }
  #referral-rewards .ref-share h4 { font-size:34px; }
  #referral-rewards .ref-message { font-size:26px; line-height:1.39; }
  #referral-rewards .ref-copy { font-size:28px; }
  #referral-rewards .ref-unit { font-size:27px; }
  #referral-rewards .ref-detail { font-size:26px; line-height:1.4; }
  #referral-rewards .ref-hint { font-size:27px; }
  #referral-rewards .ref-back h4 { font-size:30px; }
  #referral-rewards .ref-back ul { font-size:25px; line-height:1.32; }
  #referral-rewards .ref-back li + li { margin-top:6px; }
  #referral-rewards .ref-proposed { font-size:22px; }
  #referral-rewards .ref-close { font-size:27px; }
  #referral-rewards .ref-terms-panel-title { font-size:24px; letter-spacing:.13em; }
  #referral-rewards .ref-terms-panel-copy p { font-size:26px; line-height:1.42; }
  #referral-rewards .ref-flip { min-height:500px; }
}

/* Touch-device readability: preserve the compact layout without tiny captions. */
@media (max-width: 900px) {
  #referral-rewards .ref-eyebrow { font-size:14px; letter-spacing:.15em; }
  #referral-rewards .ref-tagline { font-size:17px; }
  #referral-rewards .ref-sub { font-size:18px; line-height:1.5; }
  #referral-rewards .ref-label { font-size:16px; letter-spacing:.12em; }
  #referral-rewards .ref-share h4 { font-size:25px; }
  #referral-rewards .ref-message { font-size:18px; line-height:1.48; }
  #referral-rewards .ref-copy { font-size:18px; }
  #referral-rewards .ref-unit { font-size:24px; }
  #referral-rewards .ref-detail { font-size:18px; line-height:1.43; }
  #referral-rewards .ref-hint { font-size:18px; }
  #referral-rewards .ref-back h4 { font-size:23px; }
  #referral-rewards .ref-back ul { font-size:18px; line-height:1.4; }
  #referral-rewards .ref-proposed { font-size:17px; }
  #referral-rewards .ref-close { font-size:18px; }
  #referral-rewards .ref-terms-panel-title { font-size:16px; }
  #referral-rewards .ref-terms-panel-copy p { font-size:18px; line-height:1.48; }
  #referral-rewards .ref-flip { min-height: 520px; }
}
@media (max-width:660px) {
  #referral-rewards .ref-flip { min-height: 560px; }
}
@media (max-width:360px) {
  #referral-rewards .ref-flip { min-height: 615px; }
}

/* Shelby QA legibility remediation: 2026-10-13.
   Previous desktop render had 11px pending note and eyebrow and 8px status.
   Keep the half-width outer section while making these text items readable. */
@media (min-width: 901px) {
  #referral-rewards .ref-eyebrow { font-size: 26px; }
  #referral-rewards .ref-proposed { font-size: 26px; line-height: 1.35; }
  #referral-rewards .ref-status { font-size: 25px; line-height: 1.3; }
}

/* Referral spacing & typography refinement | Captain 2026-10-13
   The 50%-width section crammed the flipped terms, Share BIY and Copy Message.
   Keep this at 72% of the ORIGINAL stage, centered. Typography is explicitly
   rebalanced to remain legible when the stage scales down to 72%. */
@media (min-width: 901px) {
  #referral-rewards .ref-head h3 { font-size: 64px; }
  #referral-rewards .ref-eyebrow { font-size: 18px; letter-spacing: .15em; }
  #referral-rewards .ref-tagline { font-size: 26px; }
  #referral-rewards .ref-sub { font-size: 22px; line-height: 1.48; max-width: 780px; }
  #referral-rewards .ref-share h4 { font-size: 27px; }
  #referral-rewards .ref-label { font-size: 18px; letter-spacing: .14em; }
  #referral-rewards .ref-message { font-size: 20px; line-height: 1.5; }
  #referral-rewards .ref-copy {
    font-size: 20px;
    white-space: nowrap;
  }
  #referral-rewards .ref-status { font-size: 17px; }
  #referral-rewards .ref-detail { font-size: 20px; line-height: 1.45; }
  #referral-rewards .ref-unit { font-size: 24px; }
  #referral-rewards .ref-hint { font-size: 20px; }
  #referral-rewards .ref-flip { min-height: 575px; }
  #referral-rewards .ref-back h4 { font-size: 24px; line-height: 1.25; }
  #referral-rewards .ref-back ul { font-size: 20px; line-height: 1.42; }
  #referral-rewards .ref-back li + li { margin-top: 8px; }
  #referral-rewards .ref-proposed { font-size: 19px; line-height: 1.48; }
  #referral-rewards .ref-close { font-size: 20px; }
  #referral-rewards .ref-terms-panel-title { font-size: 20px; }
  #referral-rewards .ref-terms-panel-copy p { font-size: 20px; line-height: 1.48; }
}

/* Responsive reward-card grid relief 2026-10-13
   Above tablet width but below wide desktop, prioritize legible reward terms
   over forcing three too-narrow columns. A wider stage resolves wrapping. */
@media (min-width: 901px) and (max-width: 1349px) {
  #referral-rewards { width: 85%; }
  #referral-rewards .ref-stage { zoom: .85; }
  #referral-rewards .ref-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #referral-rewards .ref-item--4 {
    grid-column: 1 / -1;
    width: min(100%,460px);
    justify-self: center;
  }
}
@media (min-width: 901px) and (max-width: 1023px) {
  #referral-rewards .ref-flip { min-height: 655px; }
}
@media (min-width: 1200px) and (max-width: 1349px) {
  #referral-rewards .ref-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #referral-rewards .ref-item--4 {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
  #referral-rewards .ref-flip { min-height: 620px; }
}
@media (min-width: 1350px) and (max-width: 1439px) {
  #referral-rewards .ref-flip { min-height: 655px; }
}

/* iOS Safari: enforce exactly one readable card face. Safari sometimes
   paints both sides of a flipped CSS grid and mirrors front-face text. */
#referral-rewards .ref-flip {position:relative; transform-style:flat;}
#referral-rewards .ref-flip.is-flipped {transform:none;}
#referral-rewards .ref-face {grid-area:1 / 1; transform:none!important; backface-visibility:visible; -webkit-backface-visibility:visible;}
#referral-rewards .ref-flip:not(.is-flipped) .ref-back,
#referral-rewards .ref-flip.is-flipped .ref-front {visibility:hidden;pointer-events:none;}
#referral-rewards .ref-flip:not(.is-flipped) .ref-front,
#referral-rewards .ref-flip.is-flipped .ref-back {visibility:visible;}
@media(max-width:660px){
 #referral-rewards .ref-stage{zoom:1!important;}
 #referral-rewards .ref-grid{grid-template-columns:minmax(0,1fr);}
 #referral-rewards .ref-flip{min-height:535px;}
 #referral-rewards .ref-face{overflow:hidden;}
 #referral-rewards .ref-back h4{font-size:clamp(19px,5vw,23px);line-height:1.26;}
 #referral-rewards .ref-back ul{font-size:clamp(15px,3.85vw,17px);line-height:1.4;}
 #referral-rewards .ref-back li + li{margin-top:9px;}
 #referral-rewards .ref-back{padding:20px;}
}

/* Card fronts: tier progress ring fills the space between the sale text and the hint. */
#referral-rewards .ref-ring{position:relative;display:grid;place-items:center;width:150px;height:150px;margin:auto auto 22px;align-self:center}
#referral-rewards .ref-ring svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 14px rgba(0,194,255,.45))}
#referral-rewards .ref-ring b{position:relative;font:800 46px/1 var(--font-h);color:#fff;text-align:center}
#referral-rewards .ref-ring small{display:block;margin-top:2px;font:800 11px/1 var(--font-h);letter-spacing:.2em;color:#74e9ff;text-transform:uppercase}
#referral-rewards .ref-item--2 .ref-front::before,#referral-rewards .ref-item--3 .ref-front::before,#referral-rewards .ref-item--4 .ref-front::before{display:none}
/* Ring: constant size, and aligned across the three cards even when the sale text wraps differently. */
#referral-rewards .ref-ring{flex:none;width:clamp(112px,9vw,150px);height:clamp(112px,9vw,150px)}
#referral-rewards .ref-front .ref-detail{min-height:3.2em}
@media(max-width:700px){#referral-rewards .ref-ring{width:150px;height:150px}}
#referral-rewards .ref-front .ref-detail{min-height:0}
#referral-rewards .ref-front .ref-hint{margin-top:0!important}
#referral-rewards .ref-front .ref-ring{margin-top:auto;margin-bottom:22px}