.marketing-page ::selection { background: var(--lime); color: var(--ink); }
.marketing-page a { text-underline-offset: 4px; }
.marketing-page main { padding-bottom: 20px; }
.tracking-demo, .marketing-download { --muted: #786355; }
.marketing-nav { display: flex; gap: 26px; margin-left: auto; font-size: 13px; font-weight: 600; }
.marketing-nav a:hover { text-decoration: underline; }
.marketing-page .site-header { gap: 30px; }
.marketing-hero { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr); align-items: center; gap: 54px; padding: 42px 0 64px; }
.marketing-hero > * { min-width: 0; }
.marketing-hero-copy h1 { font-size: clamp(44px, 4.6vw, 64px); letter-spacing: -.035em; line-height: 1.1; text-wrap: balance; max-width: 580px; }
.hero-description { font-size: 16px; line-height: 1.8; max-width: 455px; margin-top: 23px; }
.store-links { --store-badge-height: 44px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.store-links a { display: inline-flex; min-height: 48px; align-items: center; border-radius: 7px; }
.store-links img { height: var(--store-badge-height); width: auto; }
/* Original Google Play artwork occupies x=41..605, y=41..209 of its 646x250 canvas. */
.google-play-badge { display: block; position: relative; height: var(--store-badge-height); width: calc(var(--store-badge-height) * 3.357142857); overflow: hidden; }
.store-links .google-play-badge img { position: absolute; width: 114.5390071%; max-width: none; height: auto; left: -7.2695035%; top: -24.4047619%; }
.store-links a:hover { opacity: .85; }
.marketing-hero .store-links { margin-top: 28px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 650; line-height: 1.6; }
.text-link:hover { text-decoration: underline; }
.text-link svg { width: 17px; height: 17px; }
.catalog-hero-link { margin-top: 17px; }
.hero-fine-print { color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 23px; }
.app-proof { position: relative; height: 566px; margin: 0; min-width: 0; }
.phone-frame { padding: 7px; background: #32251F; border-radius: 36px; box-shadow: 0 20px 35px #3B1F1417; overflow: hidden; }
.phone-frame img { width: 100%; height: auto; border-radius: 29px; }
.phone-front { position: absolute; width: 244px; left: 30px; top: 5px; transform: rotate(-4deg); }
.phone-back { position: absolute; width: 211px; right: 20px; top: 73px; transform: rotate(6deg); }
.app-proof figcaption { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 10px; color: var(--muted); }
.marketing-page h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.section-copy > p { font-size: 14px; line-height: 1.8; color: var(--muted); margin-top: 18px; max-width: 470px; }
.section-copy > .text-link { margin-top: 24px; }
.marketing-tracking { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; padding: 61px 0 66px; border-top: 1px solid var(--line); }
.tracking-benefits { margin: 24px 0 0; }
.tracking-benefits > div { padding: 13px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 100px 1fr; gap: 15px; }
.tracking-benefits > div:last-child { border-bottom: 0; }
.tracking-benefits dt { font-size: 13px; font-weight: 700; padding-top: 1px; }
.tracking-benefits dd { font-size: 12px; color: var(--muted); line-height: 1.65; margin: 0; }
.tracking-demo { padding: 22px; background: var(--cream); border-radius: 16px; }
.demo-header { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 18px; }
.demo-header h3 { font-size: 21px; }
.demo-header p { font-size: 10px; color: var(--muted); margin-top: 4px; }
.demo-count { font-size: 11px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 9px; }
.demo-figure { padding: 0; background: none; border: 0; color: var(--ink); text-align: left; min-width: 0; border-radius: 10px; }
.demo-image { display: block; position: relative; border-radius: 10px; background: var(--series-color); padding: 5px; aspect-ratio: 1; overflow: hidden; }
.demo-image img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.demo-check { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border: 1px solid #75523C; border-radius: 6px; background: #FFF9F0; color: #FFF9F0; display: grid; place-items: center; }
.demo-check svg { width: 18px; height: 18px; visibility: hidden; }
.demo-figure[aria-pressed=true] .demo-check { background: var(--ink); border-color: var(--ink); }
.demo-figure[aria-pressed=true] .demo-check svg { visibility: visible; }
.demo-figure:hover .demo-image { outline: 2px solid #947456; outline-offset: -2px; }
.demo-title { display: block; font-size: 9px; font-weight: 600; line-height: 1.5; padding: 6px 1px 0; overflow-wrap: anywhere; }
.demo-secret { display: flex; align-items: center; gap: 3px; position: absolute; bottom: 7px; left: 7px; padding: 3px 5px; border-radius: 4px; background: #FFF9F0; color: var(--gold); font-size: 8px; }
.demo-secret svg { width: 10px; height: 10px; }
.demo-note { font-size: 10px; color: var(--muted); margin-top: 17px; line-height: 1.6; }
.marketing-catalog { padding: 25px 0 61px; }
.marketing-catalog .section-heading { align-items: flex-end; margin-bottom: 15px; }
.marketing-catalog .section-heading h2 { max-width: 680px; }
.marketing-catalog .section-heading p { color: var(--muted); font-size: 13px; line-height: 1.7; margin-top: 10px; }
.supported-description { font-size: 12px; color: var(--muted); line-height: 1.8; max-width: 860px; margin-bottom: 22px; }
.marketing-share { display: grid; grid-template-columns: .9fr 1fr; gap: 95px; align-items: center; padding: 57px 0 65px; border-top: 1px solid var(--line); }
.share-proof { margin: 0 auto; width: 100%; max-width: 358px; }
.export-crop { position: relative; width: 100%; aspect-ratio: 320 / 424.581024; border-radius: 12px; overflow: hidden; }
.export-crop img { position: absolute; width: 121.875%; max-width: none; left: -10.9375%; top: -46.505965%; height: auto; }
.share-proof figcaption { color: var(--muted); font-size: 10px; text-align: center; line-height: 1.5; margin-top: 12px; }
.marketing-club { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; padding: 42px 48px; background: #F0F5E5; border-radius: 16px; align-items: center; }
.marketing-club .section-copy > p { color: #596445; }
.club-benefits { margin: 0; padding: 0; list-style: none; }
.club-benefits li { padding: 16px 0; border-bottom: 1px solid #D3DEC1; }
.club-benefits li:first-child { padding-top: 0; }
.club-benefits li:last-child { padding-bottom: 0; border: 0; }
.club-benefits h3 { font-size: 16px; }
.club-benefits p { font-size: 12px; line-height: 1.7; color: #596445; margin-top: 5px; }
.marketing-faq { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; padding: 73px 0; align-items: start; scroll-margin-top: 24px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { padding: 19px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 650; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: #6A4B35; }
.faq-list summary:focus-visible { outline: 3px solid #70A23F; outline-offset: 3px; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { font-size: 12px; color: var(--muted); line-height: 1.8; padding: 0 30px 20px 0; }
.marketing-download { display: flex; gap: 35px; justify-content: space-between; align-items: center; padding: 39px 43px; background: var(--cream); border-radius: 16px; scroll-margin-top: 24px; }
.marketing-download h2 { font-size: 34px; }
.marketing-download p { font-size: 13px; color: var(--muted); margin-top: 12px; }
.marketing-download .text-link { margin-top: 14px; font-size: 11px; }
.independent-note { max-width: 760px; font-size: 10px; line-height: 1.7; color: var(--muted); margin-top: 27px; }

@media (max-width: 1000px) {
  .marketing-hero { gap: 20px; }
  .marketing-hero-copy h1 { font-size: 48px; }
  .app-proof { height: 490px; }
  .phone-front { width: 215px; left: 5px; }
  .phone-back { width: 177px; right: 4px; top: 60px; }
  .marketing-tracking, .marketing-share, .marketing-faq { gap: 40px; }
  .demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marketing-club { gap: 40px; padding: 34px; }
  .marketing-download { padding: 32px; }
  .marketing-download h2 { font-size: 29px; }
}
@media (max-width: 750px) {
  .marketing-page .site-header { gap: 16px; }
  .marketing-nav { gap: 16px; }
  .marketing-nav a:not([href='/collections/']) { display: none; }
  .marketing-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 31px 0 45px; }
  .marketing-hero-copy { max-width: 580px; }
  .marketing-hero-copy h1 { max-width: 530px; font-size: 49px; }
  .hero-description { max-width: 510px; }
  .app-proof { width: 450px; max-width: 100%; margin: 0 auto; height: 505px; }
  .phone-front { width: 225px; left: 45px; }
  .phone-back { width: 193px; right: 30px; }
  .marketing-tracking, .marketing-share, .marketing-club, .marketing-faq { grid-template-columns: 1fr; }
  .marketing-tracking { padding: 43px 0; gap: 27px; }
  .section-copy > p { max-width: 600px; }
  .tracking-benefits { margin-top: 18px; }
  .demo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .marketing-catalog { padding-top: 20px; padding-bottom: 42px; }
  .marketing-catalog .section-heading { flex-wrap: wrap; gap: 12px; }
  .marketing-share { padding: 40px 0; gap: 30px; }
  .marketing-share .section-copy { grid-row: 1; }
  .share-proof { max-width: 315px; }
  .marketing-club { padding: 28px; gap: 27px; }
  .marketing-faq { padding: 44px 0; gap: 23px; }
  .marketing-faq h2 br { display: none; }
  .marketing-download { flex-direction: column; align-items: flex-start; gap: 24px; padding: 27px; }
}
@media (max-width: 450px) {
  .marketing-page .site-header { gap: 10px; }
  .marketing-nav { font-size: 11px; }
  .marketing-page .app-link { margin-left: 0; }
  .marketing-hero { padding-top: 26px; gap: 27px; }
  .marketing-hero-copy h1 { font-size: 41px; letter-spacing: -.03em; }
  .hero-description { font-size: 13px; margin-top: 17px; line-height: 1.8; }
  .marketing-hero .store-links { margin-top: 20px; }
  .store-links { --store-badge-height: 39px; gap: 10px; }
  .catalog-hero-link { margin-top: 10px; font-size: 12px; }
  .hero-fine-print { margin-top: 15px; font-size: 10px; }
  .app-proof { height: 465px; }
  .phone-front { width: 206px; left: 24px; }
  .phone-back { width: 173px; right: 10px; top: 66px; }
  .phone-frame { padding: 6px; border-radius: 29px; }
  .phone-frame img { border-radius: 23px; }
  .marketing-page h2 { font-size: 28px; }
  .section-copy > p { font-size: 12px; margin-top: 14px; }
  .tracking-benefits > div { grid-template-columns: 80px 1fr; }
  .tracking-benefits dt, .tracking-benefits dd { font-size: 11px; }
  .tracking-demo { padding: 16px; }
  .demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  .demo-header h3 { font-size: 20px; }
  .demo-header p, .demo-count { font-size: 9px; }
  .demo-title { font-size: 9px; }
  .demo-check { width: 20px; height: 20px; }
  .demo-secret { font-size: 7px; left: 5px; bottom: 5px; }
  .marketing-catalog .section-heading p, .supported-description { font-size: 11px; }
  .marketing-catalog .section-heading > a { font-size: 11px; }
  .marketing-club { padding: 25px; }
  .club-benefits h3 { font-size: 15px; }
  .club-benefits p { font-size: 11px; }
  .marketing-download { padding: 25px; }
  .marketing-download h2 { font-size: 27px; }
  .marketing-download .store-links { --store-badge-height: 35px; gap: 8px; }
}