:root{
  --coastline-ink:#004b6c;
  --coastline-blue:#0e6d97;
  --coastline-cream:#fbfae9;
  --coastline-pale:#eff7fb;
  --line:#d7e5ec;
  --white:#ffffff;
  --shadow:0 18px 48px rgba(0,75,108,.15);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--coastline-ink);
  background:linear-gradient(180deg,var(--coastline-cream),#fff 14%,var(--coastline-pale) 100%);
}
.topbar{
  min-height:104px;background:var(--coastline-cream);display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:20px;padding:0 3vw;border-bottom:1px solid #e3e2cf;position:sticky;top:0;z-index:20;
}
.coastline-logo{height:72px;width:auto;object-fit:contain}
.nav{display:flex;gap:28px;font-size:15px;font-weight:700;justify-self:end}
.nav a{text-decoration:none;color:var(--coastline-ink)}
.page{padding:24px 3vw 30px;min-height:calc(100vh - 104px)}
.header-brand{
  display:flex;justify-content:center;align-items:center;gap:14px;text-align:center;
}
.header-brand img{height:56px;width:auto;object-fit:contain}
.header-brand h1{
  margin:0;font-size:36px;line-height:1;font-weight:800;letter-spacing:-1.2px;color:#111;
}
.header-brand h1 .bag-word{color:#111}
.header-brand h1 .loyalty-word{color:#b98a4a}
.title-lockup{display:none}
.insert-shell{
  background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:18px;
  padding:16px;box-shadow:var(--shadow);
}
.offer-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.offer-card{
  background:#fff;border:1px solid #dbe8ee;border-radius:12px;min-height:218px;
  padding:10px 8px 10px;text-align:center;position:relative;cursor:pointer;
  transition:.18s ease;display:flex;flex-direction:column;align-items:center;
}
.offer-card:hover{
  transform:translateY(-3px);border-color:var(--coastline-blue);
  box-shadow:0 10px 24px rgba(14,109,151,.2);
}
.logo-wrap{
  height:122px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin-bottom:6px;
}
.logo-wrap img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:118px;
  object-fit:contain;
}

/* V25.3: use the space freed by removing digital QR codes.
   Wide Jiffy Lube and Pep Boys marks receive a little extra width. */
.offer-card.merchant-jiffy-lube .logo-wrap img,
.offer-card.merchant-pep-boys .logo-wrap img{
  width:112%;
  max-width:none;
  max-height:120px;
}

.offer{
  font-weight:800;
  font-size:15px;
  margin-top:2px;
}
.detail{
  font-size:12px;
  line-height:1.2;
  min-height:28px;
}
.ad-here{border:2px dashed #d99024;background:linear-gradient(180deg,#fff8e8,#fbf0d6);justify-content:center;color:var(--coastline-ink)}
.ad-here .megaphone{font-size:30px}
.ad-here strong{font-size:20px;line-height:1.1}
.bottom-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;margin-top:18px}

.bottom-tagline{
  text-align:center;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.5px;
  color:#111;
  white-space:nowrap;
}
.bottom-tagline .accent{color:#b98a4a}

.edition{
  font-size:17px;font-weight:800;letter-spacing:.02em;padding:15px 20px;
  background:var(--coastline-cream);border:1px solid #dedcc6;border-radius:12px;
}
.shop-button{
  display:inline-flex;align-items:center;gap:14px;background:var(--coastline-ink);
  color:#fff;text-decoration:none;font-size:29px;font-weight:800;padding:19px 28px;border-radius:14px;
  box-shadow:0 12px 24px rgba(0,75,108,.24);
}
.modal{position:fixed;inset:0;background:rgba(0,45,65,.65);display:none;align-items:center;justify-content:center;padding:24px;z-index:50}
.modal.open{display:flex}
.modal-card{width:min(560px,96vw);background:#fff;border-radius:20px;padding:25px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:28px;cursor:pointer}
.modal-logo{max-width:280px;max-height:90px;display:block;margin:4px auto 18px}
.modal-offer{text-align:center;font-size:34px;font-weight:900}
.modal-detail{text-align:center;font-size:18px;margin:6px 0 18px}
.value-note{text-align:center;background:var(--coastline-pale);border-radius:10px;padding:10px;margin-bottom:16px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.action{border:0;border-radius:10px;padding:14px;font-size:16px;font-weight:800;cursor:pointer}
.primary{background:var(--coastline-blue);color:#fff}.secondary{background:#eaf4f7;color:var(--coastline-ink)}
.saved{background:#1a9b62!important;color:#fff!important}
.demo-note{font-size:12px;color:#55718c;margin-top:14px;text-align:center}
@media(max-width:1200px){.offer-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){
  .topbar{height:76px;padding:0 16px}.coastline-logo{height:58px}.nav{display:none}
  .page{padding:18px 14px}.title-lockup img{height:54px}.title-lockup h1{font-size:34px}
  .offer-grid{grid-template-columns:repeat(2,1fr)}
  .bottom-row{display:flex;align-items:stretch;flex-direction:column}.shop-button{justify-content:center;font-size:24px}
  
.bottom-tagline{
  text-align:center;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.5px;
  color:#111;
  white-space:nowrap;
}
.bottom-tagline .accent{color:#b98a4a}

.edition{text-align:center}.bottom-tagline{white-space:normal;font-size:24px}.actions{grid-template-columns:1fr}
}

.shop-button{
  position:relative;
  min-width:335px;
  justify-content:center;
  padding:16px 28px 14px;
  background:var(--coastline-cream);
  color:var(--coastline-ink);
  border:2px solid var(--coastline-ink);
  box-shadow:none;
  font-family:Georgia,"Times New Roman",serif;
}
.shop-mark{
  font-size:27px;
  font-weight:900;
  letter-spacing:.06em;
}
.shop-small{
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  letter-spacing:.22em;
  font-family:Arial,Helvetica,sans-serif;
}
.shop-arrow{
  position:absolute;
  right:20px;
  font-size:34px;
  font-family:Arial,Helvetica,sans-serif;
}
.hidden{display:none!important}
.flow-panel h2,.confirmation h3{text-align:center;margin:4px 0 8px}
.flow-copy{text-align:center;margin:0 0 18px;color:#55718c}
.claim-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.claim-choice{
  border:1px solid var(--line);background:#fff;border-radius:14px;padding:18px 12px;
  color:var(--coastline-ink);cursor:pointer;text-align:center;
}
.claim-choice:hover{border-color:var(--coastline-blue);box-shadow:0 8px 20px rgba(14,109,151,.12)}
.claim-choice strong,.claim-choice small{display:block}
.claim-choice small{margin-top:4px;color:#6a7f90}
.choice-icon{display:block;font-size:28px;margin-bottom:8px}
.share-choice{grid-column:1 / -1}
.contact-form{display:grid;gap:10px}
.contact-form label{font-weight:800}
.contact-form input{
  width:100%;padding:14px 15px;border:1px solid #adc6d6;border-radius:10px;font-size:17px;
}
.full{width:100%}
.link-button{
  border:0;background:none;color:var(--coastline-blue);font-weight:800;cursor:pointer;padding:8px
}
.link-action{display:block;text-align:center;text-decoration:none}
.confirmation{text-align:center;padding:12px 4px}
.checkmark{
  width:64px;height:64px;border-radius:50%;background:#1a9b62;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:900;margin:0 auto 14px;
}
@media(max-width:700px){
  .shop-button{min-width:0;width:100%}
}

.dashboard-home-link{
  display:flex;align-items:center;gap:10px;text-decoration:none!important;
  color:var(--coastline-ink)!important;font-weight:800;
}
.dashboard-home-link img{height:40px;width:auto;object-fit:contain}

/* InaBag Platform V18 responsive foundation */
.platform-version{
  margin-top:18px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:#6d8795;
}
@media(max-width:700px){
  body{background:linear-gradient(180deg,var(--coastline-cream) 0,#fff 190px,var(--coastline-pale) 100%)}
  .topbar{
    min-height:74px;height:auto;grid-template-columns:auto 1fr auto;gap:9px;padding:8px 12px;
  }
  .coastline-logo{height:48px;max-width:86px}
  .header-brand{gap:7px;justify-content:center;min-width:0}
  .header-brand img{height:35px}
  .header-brand h1{font-size:18px;line-height:1.04;letter-spacing:-.45px;text-align:left}
  .header-brand h1 span{display:block}
  .nav{display:flex;justify-self:end;gap:0}
  .dashboard-home-link{display:flex;flex-direction:column;gap:2px;font-size:11px;white-space:nowrap}
  .dashboard-home-link img{height:26px}
  .page{padding:12px 10px 24px}
  .insert-shell{padding:9px;border-radius:15px;box-shadow:0 10px 28px rgba(0,75,108,.12)}
  .offer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .offer-card{min-height:155px;border-radius:11px;padding:7px 6px 9px}
  .logo-wrap{height:82px;margin-bottom:3px}
  .logo-wrap img{max-height:78px;max-width:100%}
  .offer-card.merchant-jiffy-lube .logo-wrap img,
  .offer-card.merchant-pep-boys .logo-wrap img{width:94%;max-width:94%;max-height:76px}
  .offer{font-size:15px;line-height:1.05}
  .detail{font-size:11px;line-height:1.15;min-height:25px;margin-top:3px}
  .ad-here{min-height:155px}
  .ad-here .megaphone{font-size:25px}
  .ad-here strong{font-size:17px}
  .bottom-row{gap:10px;margin-top:11px}
  .edition{font-size:14px;padding:11px 12px}
  .bottom-tagline{font-size:20px;line-height:1.15}
  .shop-button{font-size:22px;padding:15px 20px 13px;min-width:0;width:100%}
  .shop-mark{font-size:23px}
  .modal{align-items:flex-end;padding:0;background:rgba(0,45,65,.55)}
  .modal-card{
    width:100%;max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;
    padding:24px 18px calc(24px + env(safe-area-inset-bottom));
    animation:sheetUp .22s ease-out;
  }
  .modal-card:before{content:"";display:block;width:44px;height:5px;border-radius:99px;background:#c7d7df;margin:-12px auto 14px}
  .close{right:14px;top:14px;font-size:30px}
  .modal-logo{max-width:220px;max-height:76px;margin:0 auto 13px}
  .modal-offer{font-size:31px}
  .modal-detail{font-size:17px;margin-bottom:14px}
  .actions{grid-template-columns:1fr;position:sticky;bottom:0;background:#fff;padding-top:8px}
  .action{min-height:50px;font-size:17px}
  .claim-choice-grid{grid-template-columns:1fr;gap:9px}
  .share-choice{grid-column:auto}
  .claim-choice{padding:14px 12px}
  .choice-icon{font-size:24px;margin-bottom:5px}
  .platform-version{margin-top:14px}
}
@keyframes sheetUp{from{transform:translateY(22px);opacity:.7}to{transform:translateY(0);opacity:1}}

/* V18.18 navigation and merchant CTA */
.dashboard-home-link{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border:1.5px solid var(--coastline-ink);border-radius:999px;background:#fff;color:var(--coastline-ink)!important;font-weight:800;text-decoration:none!important;box-shadow:0 2px 6px rgba(23,63,95,.14)}
.dashboard-home-link img{height:30px!important;width:auto;object-fit:contain}
.lead-side{display:flex;flex-direction:column;gap:14px}
.sample-dashboard-bubble{display:flex!important;align-items:center;justify-content:center;text-align:center;border-radius:999px!important;padding:14px 18px!important;box-shadow:0 3px 9px rgba(23,63,95,.16)}
.lead-side .video-placeholder{flex:1}
@media(max-width:700px){.lead-side{width:100%}}

/* V25.6 continuous InaBag swoosh intro for desktop and mobile */
.swoosh-intro{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  background:#fff;
  opacity:1;
  transition:opacity .35s ease;
}
.swoosh-bag{
  position:absolute;
  top:50%;
  left:50%;
  width:min(92vw,980px);
  height:auto;
  transform:translate(-145vw,-50%);
  opacity:0;
  will-change:transform,opacity,filter;
}
.swoosh-intro.intro-running .swoosh-bag{
  animation:continuousBagSwoosh 2.145s cubic-bezier(.18,.72,.22,1) forwards;
}
.swoosh-intro.intro-finished{opacity:0;pointer-events:none}
@keyframes continuousBagSwoosh{
  0%{transform:translate(-145vw,-50%) scale(1.02);opacity:0;filter:blur(1.5px)}
  8%{opacity:1}
  100%{transform:translate(45vw,-50%) scale(1.02);opacity:1;filter:blur(.5px)}
}
@media(prefers-reduced-motion:reduce){
  .swoosh-bag{animation:none!important}
}