@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--tint:#FBE0DD;--coral:#FC9889;--flame:#F26451;--red:#DD3B2A;--crimson:#C0271A;--wine:#8B1410;--ink:#2E0804;--bg:#FBF6F4;--surface:#FFF;--soft:#FFF8F6;--bd:rgba(192,39,26,0.13);--bd-s:rgba(192,39,26,0.26);--tx:#4A1C16;--tx-s:#2E0804;--tx-m:#8A4E44;--tx-f:#B98E84;--acc:#DD3B2A;--acc-d:#C0271A;--glow:rgba(221,59,42,0.18);--ok:#1F9E6A;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;color:var(--tx);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.disp{font-family:'Space Grotesk','Inter',sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px; background: #FBF6F4;}
a{color:inherit;text-decoration:none}
.accent-text{background:linear-gradient(120deg,var(--flame),var(--crimson));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,246,244,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:18px;color:var(--tx-s)}
.logo-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(150deg,var(--flame),var(--crimson));display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500;color:var(--tx-m)}
.nav-links a:hover{color:var(--acc)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk';font-weight:600;font-size:14px;padding:11px 22px;border-radius:10px;cursor:pointer;border:1px solid var(--bd-s);background:var(--surface);color:var(--tx);transition:all .2s}
.btn:hover{border-color:var(--acc)}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:var(--acc);border-color:var(--acc)}
@media(max-width:760px){.nav-links{display:none}}

/* hero */
.hero{padding:80px 0 60px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:900px;height:600px;background:radial-gradient(circle,rgba(252,152,137,0.22),transparent 60%);z-index:0}
.hero-in{position:relative;z-index:1}
.eyebrow{display:inline-block;font-family:'Space Grotesk';font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--acc);background:var(--tint);padding:7px 16px;border-radius:100px;margin-bottom:24px}
.hero h1{font-family:'Space Grotesk';font-size:56px;font-weight:700;line-height:1.05;letter-spacing:-0.025em;color:var(--tx-s);margin-bottom:22px}
.hero p{font-size:19px;color:var(--tx-m);max-width:620px;margin:0 auto 34px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap; padding-bottom: 20px;}
.btn-lg{padding:15px 30px;font-size:15px}
.hero-note{margin-top:18px;font-size:13px;color:var(--tx-f)}
@media(max-width:680px){.hero h1{font-size:38px}.hero p{font-size:17px}}

/* hero visual — ticket */
.hero-visual{margin:56px auto 0;max-width:440px;position:relative;z-index:1}
.tk{display:flex;background:var(--surface);border:1px solid var(--bd);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(192,39,26,0.13)}
.tk-stub{width:50px;background:linear-gradient(170deg,var(--flame),var(--crimson));display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 0;position:relative}
.tk-stub::after{content:"";position:absolute;right:-1px;top:8px;bottom:8px;width:2px;background-image:radial-gradient(circle,#fff 0 1.4px,transparent 1.6px);background-size:2px 9px;background-repeat:repeat-y;opacity:.85}
.tk-code{font-family:'Space Grotesk';font-weight:700;font-size:14px;color:#fff;writing-mode:vertical-rl;transform:rotate(180deg)}
.tk-punch{width:13px;height:13px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.tk-body{flex:1;padding:22px}
.tk-title{text-align:center;font-family:'Space Grotesk';font-size:11px;font-weight:700;letter-spacing:0.14em;color:var(--tx-s);margin-bottom:16px}
.bar{position:relative;border:1.5px solid var(--bd-s);border-radius:12px;padding:13px 15px;display:flex;align-items:center;gap:12px;margin-bottom:10px;text-align:left}
.bar.sel{border:2px solid var(--acc)}.bar.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--acc)}
.bar-r{width:18px;height:18px;border-radius:50%;border:2px solid var(--bd-s);flex-shrink:0}.bar.sel .bar-r{border-color:var(--acc);background:radial-gradient(circle,var(--acc) 42%,transparent 46%)}
.bar-m{flex:1}.bar-t{font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--tx-s)}.bar-s{font-size:11px;color:var(--tx-m)}
.bar-p{font-family:'Space Grotesk';font-weight:700;font-size:15px;color:var(--tx-s);text-align:right}.bar-w{font-size:11px;color:var(--tx-f);text-decoration:line-through}
.pop{position:absolute;top:-9px;right:13px;background:var(--acc);color:#fff;font-family:'Space Grotesk';font-size:9px;font-weight:700;padding:3px 10px;border-radius:100px}

/* logos strip */
.strip{padding:30px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin-top:70px}
.strip p{text-align:center;font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--tx-f);margin-bottom:6px}
.strip-stats{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;margin-top:18px}
.stat{text-align:center}.stat-n{font-family:'Space Grotesk';font-size:30px;font-weight:700;color:var(--tx-s)}.stat-l{font-size:13px;color:var(--tx-m)}

/* sections */
/* Global section padding removed to avoid inflating Shopify sections */
.sec-head{text-align:center;max-width:640px;margin:0 auto 54px}
.sec-eyebrow{font-family:'Space Grotesk';font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
.sec-head h2{font-family:'Space Grotesk';font-size:38px;font-weight:700;letter-spacing:-0.02em;color:var(--tx-s);margin-bottom:14px}
.sec-head p{font-size:17px;color:var(--tx-m)}

/* feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:880px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--surface);border:1px solid var(--bd);border-radius:16px;padding:28px;transition:all .2s}
.feat:hover{transform:translateY(-4px);box-shadow:0 14px 34px var(--glow)}
.feat-ic{width:46px;height:46px;border-radius:12px;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--acc);margin-bottom:18px}
.feat h3{font-family:'Space Grotesk';font-size:17px;font-weight:700;color:var(--tx-s);margin-bottom:8px}
.feat p{font-size:14px;color:var(--tx-m)}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:10px}
.step-n{font-family:'Space Grotesk';font-size:13px;font-weight:700;color:#fff;background:linear-gradient(150deg,var(--flame),var(--crimson));width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{font-family:'Space Grotesk';font-size:18px;font-weight:700;color:var(--tx-s);margin-bottom:8px}
.step p{font-size:14px;color:var(--tx-m)}

/* types */
.types{background:var(--soft)}
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:880px){.type-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.type-grid{grid-template-columns:1fr}}
.type{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--bd);border-radius:14px;padding:20px}
.type-code{font-family:'Space Grotesk';font-weight:700;font-size:12px;color:#fff;background:linear-gradient(150deg,var(--flame),var(--crimson));border-radius:8px;padding:8px 10px;flex-shrink:0;letter-spacing:0.04em}
.type h4{font-family:'Space Grotesk';font-size:15px;font-weight:700;color:var(--tx-s);margin-bottom:3px}
.type p{font-size:13px;color:var(--tx-m)}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:880px){.price-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.price-grid{grid-template-columns:1fr}}
.tier{background:var(--surface);border:1px solid var(--bd);border-radius:16px;padding:26px 22px;display:flex;flex-direction:column;position:relative}
.tier.feat-tier{border:2px solid var(--acc)}
.tier-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;font-family:'Space Grotesk';font-size:10px;font-weight:700;padding:5px 14px;border-radius:100px;white-space:nowrap}
.tier-name{font-family:'Space Grotesk';font-size:16px;font-weight:700;color:var(--tx-s);margin-bottom:8px}
.tier-price{font-family:'Space Grotesk';font-size:32px;font-weight:700;color:var(--tx-s);line-height:1}.tier-price small{font-size:14px;font-weight:500;color:var(--tx-f)}
.tier-cap{font-size:12px;color:var(--tx-m);margin:8px 0 16px}
.tier ul{list-style:none;flex:1;margin-bottom:18px}
.tier li{font-size:12.5px;padding:6px 0;display:flex;gap:8px;border-bottom:1px dashed var(--bd)}
.tier li:last-child{border:none}.tier li svg{color:var(--ok);flex-shrink:0}
.tier-price-up {
    color: #1f9e6a;
    font-size: 14px;
}
/* cta band */
.cta-band{background:linear-gradient(135deg, #F0624F 0%, #C32B1D 100%) !important;color:#fff !important;text-align:center;border-radius:24px;padding:64px 30px;margin-bottom:80px;box-shadow: 0 20px 48px -12px rgba(195, 43, 29, 0.45) !important;}
.cta-band h2{color: #FFFFFF !important;font-family:'Space Grotesk', sans-serif;font-size:36px;font-weight:700;margin-bottom:14px;letter-spacing:-0.02em}
.cta-band p{font-size:17px;color:rgba(255, 255, 255, 0.92) !important;opacity:1 !important;max-width:520px;margin:0 auto 28px}
.cta-band .btn{background:#fff;color:#C32B1D !important;border:none}.cta-band .btn:hover{background:#FFF0ED}

/* footer */
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
.foot-links{display:flex;gap:30px;font-size:14px;color:var(--tx-m)}
.foot-links a:hover{color:var(--acc)}
.foot-copy{font-size:13px;color:var(--tx-f);margin-top:24px}
.hero,
custom-html-editor-anxvnnfbemfruetm1naigenblockaa3cb826jgwyd,
.strip { 
    background: #FBF6F4 !important;
}
.shopify-section:has(.zs-announcement-bar),
.zs-announcement-bar-section {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* ======================================================
   ZS FADE UP ANIMATIONS
   ====================================================== */
.zs-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.zs-fade-up.zs-in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.zs-delay-1 { transition-delay: 0.08s; }
.zs-delay-2 { transition-delay: 0.16s; }
.zs-delay-3 { transition-delay: 0.24s; }
.zs-delay-4 { transition-delay: 0.32s; }
.zs-delay-5 { transition-delay: 0.40s; }
.zs-delay-6 { transition-delay: 0.48s; }

.no-js .zs-fade-up,
.shopify-design-mode .zs-fade-up {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* ======================================================
   ZS PAGE GRID
   Sections line up with the header: Dawn's .page-width is
   1600px with 1.5rem / 5rem gutters, so these match it.
   ====================================================== */
:root { --zs-gutter: 15px; }
@media screen and (min-width: 750px) { :root { --zs-gutter: 50px; } }
/* section spacing is set for desktop; phones get two thirds of it */
:root { --zs-space: .66; }
@media screen and (min-width: 990px) { :root { --zs-space: 1; } }
/* menu links land below the sticky header, not under it */
.zs-anchor { display: block; position: relative; top: -96px; visibility: hidden; height: 0; }
html { scroll-behavior: smooth; }

/* ======================================================
   ZS HEADER
   Dawn's header in the site's own type and colours: a
   translucent sticky bar, Manrope menu with an accent
   underline for the current page, and an install button.
   ====================================================== */
.section-header .header-wrapper {
  background: rgba(251, 246, 244, .86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid #F0E1DF;
  transition: box-shadow .25s, background .25s;
}
.section-header.scrolled-past-header .header-wrapper,
.shopify-section-header-sticky.scrolled-past-header .header-wrapper {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 30px -18px rgba(42, 14, 18, .35);
}
.header-wrapper--border-bottom { border-bottom: 1px solid #F0E1DF !important; }

.header__inline-menu .list-menu { gap: 4px; }
.header__menu-item {
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #2A0E12 !important;
  padding: 10px 12px !important;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.header__menu-item span { text-decoration: none !important; position: relative; }
.header__menu-item:hover { background: #FFF0ED; color: #C32B1D !important; }
.header__menu-item:hover span { text-decoration: none !important; }
.header__active-menu-item { color: #C32B1D !important; }
.header__active-menu-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: #C32B1D;
}

.header__icon { color: #2A0E12; border-radius: 50%; transition: background .15s; }
.header__icon:hover { background: #FFF0ED; }
.header__icon:hover .icon { transform: none; }

.header__icons { align-items: center; gap: 2px; }
.zs-header-cta {
  order: 99;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: #fff !important;
  background: #C32B1D;
  border-radius: 999px;
  padding: 12px 20px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(195, 43, 29, .7);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.zs-header-cta::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.zs-header-cta:hover { transform: translateY(-1px); filter: brightness(.95); box-shadow: 0 14px 26px -12px rgba(195, 43, 29, .8); }
@media screen and (max-width: 989px) { .zs-header-cta { display: none; } }
