/* PostMyPace landing styles. Ported from the approved canvas; container queries became viewport media queries. */
html body { margin: 0; background: #ffffff; }
a { color: inherit; } a:hover { opacity: 0.72; }
.lp a, .lp a:hover { color: inherit; }
.lp .social a, .lp .social a:hover { color: #000000; }
button { font-family: inherit; }
.lp { font-family: 'Google Sans Flex', 'Google Sans', system-ui, sans-serif; background: #ffffff; color: #000000; min-height: 100vh; overflow-x: clip; }
.lp * { box-sizing: border-box; }
.wrap { max-width: 1040px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.topbar { position: sticky; top: 0; z-index: 20; padding-top: 14px; padding-bottom: 14px; background: rgba(255,255,255,0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0,0,0,0.08); }
.navlinks { display: flex; }
.h1 { font-size: clamp(46px, 7.4vw, 88px); }
.h2 { font-size: clamp(36px, 4.6vw, 56px); }
.h1, .h2 { text-wrap: balance; }
.band { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 12%, #000000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000000 12%, #000000 88%, transparent 100%); }
.tcard { width: 168px; height: 299px; flex-shrink: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(0,0,0,0.12); background: #F4F4F4; }
.tcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: center; }
.darkgrid { display: grid; grid-template-columns: 324px minmax(0, 1fr); gap: 64px; align-items: center; }
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 24px, #000000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000000 24px, #000000 calc(100% - 56px), transparent 100%); }
.chips::-webkit-scrollbar { display: none; }
.footrow { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.attrib { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: rgba(0,0,0,0.45); }
.social { display: flex; align-items: center; gap: 14px; }
.social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); color: #000000; }
.btn { transition: transform 0.2s, opacity 0.2s; }
.btn:hover { transform: translateY(-2px); opacity: 1; }

/* pricing toggle, source cards and the Save pill beam */
.seg { background: transparent; color: #000000; transition: background 0.25s, color 0.25s; }
.seg.on { background: #000000; color: #ffffff; }
.lift { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s; }
.lift:hover { transform: translateY(-4px); border-color: rgba(0,0,0,0.4); }
.save[hidden] { display: none !important; }
@property --beam { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes beam { to { --beam: 360deg; } }
.save { position: relative; }
.save::before { content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--beam), transparent 0deg 200deg, #FF5F6D 245deg, #FFC371 280deg, #3DDC84 310deg, #47C3FF 335deg, #A06BFF 352deg, transparent 360deg); -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: beam 2.6s linear infinite; pointer-events: none; }

/* motion */
@keyframes mq { to { transform: translateX(-50%); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.35); } 70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
.mq { display: flex; width: max-content; animation: mq 70s linear infinite; }
.mq.rev { animation-direction: reverse; animation-duration: 80s; }
.mq > div { margin-right: 14px; }
.band:hover .mq { animation-play-state: paused; }
.dot { animation: pulse 2s infinite; }

/* entrance system: data-reveal = up (default) | fade | scale; data-reveal-group staggers its children */
html.js [data-reveal]:not(.reveal-done),
html.js [data-reveal-group] > *:not(.reveal-done) {
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal-group] > * { --reveal-delay: calc(var(--i, 0) * 80ms); }
html.js [data-reveal]:not(.is-in),
html.js [data-reveal-group] > *:not(.is-in) { opacity: 0; transform: translateY(24px); }
html.js [data-reveal="fade"]:not(.is-in) { transform: none; }
html.js [data-reveal="scale"]:not(.is-in) { transform: scale(0.96); }

/* how it works: steps and phone. Screen animations only run while the screen is .on, so they restart on every entrance. */
@keyframes feed { to { transform: translateY(-50%); } }
@keyframes bar { from { width: 0%; } to { width: 100%; } }
@keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes press { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.9); } }
@keyframes peek { 0%, 100% { transform: none; } 45%, 60% { transform: translateX(-150px); } }
.step { transition: background 0.3s, border-color 0.3s; }
.step .txt { color: rgba(0,0,0,0.5); transition: color 0.3s; text-wrap: balance; }
.step.on { background: #F4F4F4; border-color: transparent; }
.step.on .txt { color: rgba(0,0,0,0.72); }
.step .bar { display: none; }
.step.on .bar { display: block; animation: bar 4.2s linear both; }
.scr { opacity: 0; transform: translateY(18px) scale(0.98); pointer-events: none; transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.scr.on { opacity: 1; transform: none; pointer-events: auto; }
.scr.on .feed { animation: feed 26s linear infinite; }
.scr.on .sheet { animation: sheet 0.6s 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.scr.on .dimmer { animation: dim 0.4s 1s both; }
.scr.on .tap { animation: press 0.5s 0.6s ease both; }
.scr.on .sheet2 { animation: sheet 0.6s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.scr.on .peek { animation: peek 1.6s 1s cubic-bezier(0.6, 0, 0.2, 1) both; }
.scr.on .tap2 { animation: press 0.5s 3.1s ease both; }

/* templates showcase */
.big { opacity: 0; transform: scale(1.06); transition: opacity 0.7s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.big.on { opacity: 1; transform: none; }
.chip { background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.22); transition: background 0.2s, color 0.2s; }
.chip.on { background: #ffffff; color: #000000; border-color: #ffffff; }
.th { outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 0.25s, transform 0.25s; }
.th:hover { transform: translateY(-3px); }
.th.on { outline-color: #ffffff; }
/* keyboard focus: a visible ring on every custom control (the .th base rule would otherwise hide it) */
.step:focus-visible, .seg:focus-visible { outline: 2px solid #000000; outline-offset: 2px; }
.chip:focus-visible, .th:focus-visible { outline: 2px solid #47C3FF; outline-offset: 3px; }
.social a:focus-visible, .btn:focus-visible { outline: 2px solid #000000; outline-offset: 3px; }
.pro-card .btn:focus-visible, .pro-card a:focus-visible, .pro-card button:focus-visible { outline-color: #ffffff; }
section[id] { scroll-margin-top: 82px; }

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp { animation: none !important; transition: none !important; }
  .save::before { animation: none !important; }
  html.js [data-reveal], html.js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
}

/* route templates */
.rgrid { display: grid; grid-template-columns: repeat(4, 232px); justify-content: space-between; gap: 16px; }
.story { margin: 0; }
.rstory { position: relative; width: 232px; height: 412px; border-radius: 24px; overflow: hidden; background: #111111; }
.rstory video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 1040 not 1000: 4x232 + 3x16 = 976px does not fit the content box (viewport - 64px) below 1040px */
@media (max-width: 1040px) {
  .rgrid { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding: 0 20px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 20px, #000000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000000 20px, #000000 calc(100% - 48px), transparent 100%); }
  .rgrid::-webkit-scrollbar { display: none; }
  .rgrid > * { flex: none; width: 200px; }
  .rstory { width: 200px; height: 356px; }
}

/* showcase strip: six thumbs would be ~44px wide between 761 and 1000px, so it scrolls like on phones */
@media (max-width: 1000px) {
  .strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-left: -24px; margin-right: -24px; padding: 6px 24px; }
  .strip::-webkit-scrollbar { display: none; }
  .strip > * { flex: none; width: 112px; border-radius: 16px !important; }
}

/* tablet and phone */
@media (max-width: 760px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .navlinks { display: none; }
  .tcard { width: 120px; height: 213px; }
  .stores { flex-wrap: wrap; justify-content: center; }
  .footrow { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .footrow nav { justify-content: center; }
  .attrib { text-align: center; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .split .phonecol { order: -1; }
  .darkgrid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .darkgrid .stagecol { order: 2; }
  .chips { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding: 6px 20px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000000 20px, #000000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000000 20px, #000000 calc(100% - 48px), transparent 100%); }
  .strip::-webkit-scrollbar { display: none; }
  .strip > * { flex: none; width: 132px; border-radius: 16px !important; }
  .darkpad { padding: 56px 0 !important; border-radius: 32px !important; }
  .secpad { padding-top: 64px !important; padding-bottom: 64px !important; }
  .herotop { padding-top: 36px !important; }
  .band { margin-top: 0 !important; padding-top: 40px !important; padding-bottom: 48px !important; }
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cards2 { grid-template-columns: minmax(0, 1fr); }
  .dlpad { padding-top: 24px !important; padding-bottom: 64px !important; }
  .rgrid { -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; scroll-padding: 0 20px; gap: 16px; overscroll-behavior-x: contain; }
  .rgrid > * { width: 300px; scroll-snap-align: center; scroll-snap-stop: always; }
  .rstory { width: 300px; height: 533px; }
}
@media (max-width: 440px) {
  .cards4 { grid-template-columns: minmax(0, 1fr); }
}