/* Fine-tuned against the Buy Me a Coffee home-page rhythm. */
.landing .hero{min-height:400px;padding-bottom:42px}
.landing .feature.support{padding-top:72px}
.bmc-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(39,37,37,.06);transition:background-color .2s ease,border-color .2s ease}
.coffee-card{position:relative}.coffee-card::before,.coffee-card::after{position:absolute;z-index:3;display:block;width:38px;white-space:pre;line-height:2.24;text-align:center;font-size:18px;filter:drop-shadow(0 3px 5px rgba(50,35,15,.18));animation:reaction-bob 3.5s ease-in-out infinite}.coffee-card::before{content:"💯\A❤️\A👋";left:-30px;top:225px}.coffee-card::after{content:"✨\A☕\A👍";right:-30px;top:225px;animation-delay:-1.7s}@keyframes reaction-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.04)}}
.creator-search{display:flex;align-items:center;gap:8px;width:min(300px,30vw);margin-left:auto;margin-right:28px;padding:10px 13px;border:1px solid #e7e3df;border-radius:10px;color:#6b6866;background:#fff}.creator-search input{width:100%;border:0;outline:0;font:inherit;font-size:13px;color:#272525}.creator-search span{font-size:19px;line-height:1}
.creator-showcase{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:14px;max-width:1160px;margin:0 auto 28px;padding:0 28px;overflow:hidden}.creator-showcase article{display:flex;align-items:center;gap:9px;min-width:150px}.creator-showcase img{width:43px;height:43px;border-radius:50%;object-fit:cover}.creator-showcase b,.creator-showcase span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.creator-showcase b{font-size:12px}.creator-showcase span{font-size:11px;color:#77736e;margin-top:3px}
.reference-product-image{display:block;width:100%;max-width:430px;justify-self:center;filter:drop-shadow(0 18px 24px rgba(48,35,22,.10))}
.benefit-grid{grid-template-columns:repeat(5,1fr)}
.hero>*:not(.hero-doodles){animation:rise-in .62s cubic-bezier(.2,.8,.2,1) both}.hero .stars{animation-delay:.04s}.hero h1{animation-delay:.1s}.hero .hero-copy{animation-delay:.16s}.hero .yellow-button{animation-delay:.22s}.hero .fine-print{animation-delay:.28s}.creator-showcase article{animation:rise-in .55s cubic-bezier(.2,.8,.2,1) both}.creator-showcase article:nth-child(2){animation-delay:.06s}.creator-showcase article:nth-child(3){animation-delay:.12s}.creator-showcase article:nth-child(4){animation-delay:.18s}.creator-showcase article:nth-child(5){animation-delay:.24s}.creator-showcase article:nth-child(6){animation-delay:.3s}.reference-product-image{animation:soft-float 5s ease-in-out infinite}.coffee-card{animation:soft-float 5.5s ease-in-out infinite}.yellow-button,.support-button,.product-card button{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.yellow-button:active,.support-button:active,.product-card button:active{transform:translateY(1px) scale(.98)}.support-demo .counter label{transition:transform .16s ease,background-color .16s ease,color .16s ease}.support-demo .counter label:hover{transform:scale(1.08)}.creator-showcase article{transition:transform .2s ease}.creator-showcase article:hover{transform:translateY(-3px)}@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes soft-float{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-8px) rotate(1deg)}}.shop.reference-product-image{animation:none}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.support-demo input[type="radio"]{position:absolute;opacity:0;pointer-events:none}.support-demo .counter label{border:1px solid #d8aaa2;color:#9e4f42;background:#fff;border-radius:50%;height:29px;width:29px;font-weight:700;text-align:center;line-height:27px;cursor:pointer}.support-demo #coffee-1:checked+label,.support-demo #coffee-3:checked+label,.support-demo #coffee-5:checked+label{background:#d36d5f;color:#fff}.support-demo .coffee-custom{border-radius:4px}.support-button .amount-three,.support-button .amount-five{display:none}.support-demo:has(#coffee-3:checked) .amount-one,.support-demo:has(#coffee-5:checked) .amount-one{display:none}.support-demo:has(#coffee-3:checked) .amount-three,.support-demo:has(#coffee-5:checked) .amount-five{display:inline}
@media (max-width:700px){
  .bmc-header{height:104px;padding:0 20px}
  .menu{display:inline-block}
  .logo{gap:12px}
  nav{gap:18px}
  .landing .hero{min-height:350px;padding:40px 20px 36px}
  .creator-search{display:none}
  .landing .feature.support{padding-top:56px}
  .landing .hero h1{font-size:42px;line-height:1.08}
  .landing .fine-print{margin-bottom:0}
  .creator-showcase{display:flex;overflow:hidden;gap:18px;padding:0 20px;margin:8px 0 22px}.creator-showcase article{min-width:154px}.creator-showcase article:nth-child(n+4){display:none}
  .reference-product-image{max-width:360px}
  .benefit-grid{grid-template-columns:1fr 1fr}
}

/* The reference landing page keeps the first fold deliberately sparse. */
.creator-search,.creator-showcase{display:none}
.mobile-label{display:none}

@media (max-width:700px){
  .desktop-label{display:none}.mobile-label{display:inline}
  .bmc-header{height:116px;padding:0 15px 0 16px;border-bottom:0;background:#fff;backdrop-filter:none}
  .logo{gap:10px}.cup{width:24px;height:30px;font-size:16px;box-shadow:3px 3px 0 var(--ink)}
  nav{gap:19px;font-size:14px}.yellow-button{padding:13px 20px}
  .landing .hero{min-height:333px;padding:29px 28px 29px}
  .landing .hero .stars{font-size:15px;margin-bottom:18px}.stars span{font-size:12px}
  .landing .hero h1{font-size:44px;line-height:1.08;letter-spacing:-2.45px;margin:0 0 10px}
  .landing .hero-copy{max-width:540px;font-size:20px;line-height:1.48;margin-bottom:25px}
  .large{font-size:15px;padding:14px 37px}.fine-print{font-size:14px;margin-top:14px}
  .landing .feature.support{padding:19px 38px 68px;gap:32px}
  .feature,.feature.reverse{padding:76px 38px;gap:42px}
  .feature h2,.creators h2,.benefits h2{font-size:31px;line-height:1.12;letter-spacing:-1.55px;margin-bottom:14px}
  .feature-copy>p:last-child{font-size:17px;line-height:1.35;max-width:540px}
  .feature .eyebrow{font-size:12px;margin-bottom:13px}
  .coffee-card{width:305px;max-width:305px;padding:21px;border-radius:23px;align-self:center}
  .coffee-card h3{font-size:16px;margin-bottom:16px}.counter{padding:8px;gap:6px}
  .coffee-card textarea{height:51px;margin:10px 0 8px}.support-button{padding:11px;font-size:14px}
  .coffee-card h4{margin:17px 0 10px}.mini-supporter{margin-top:8px;font-size:11px;gap:8px}
  .mini-supporter i{width:27px;height:27px;font-size:9px}
  .coffee-card::before,.coffee-card::after{top:205px}
}

/* Small-screen header: draw the same outlined takeaway cup used by the reference
   instead of relying on an operating-system emoji glyph. */
@media (max-width:700px){
  .header-menu-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:6px;cursor:pointer}
  .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
  .bmc-brand-logo{display:block;height:28px;width:auto;max-width:145px;transition:transform .2s ease}
  .logo:hover .bmc-brand-logo{transform:scale(1.04)}
}

@supports (animation-timeline: view()){
  .feature,.creators,.benefits{animation:section-reveal linear both;animation-timeline:view();animation-range:entry 8% cover 28%}
  .feature .feature-copy{animation:copy-reveal linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
  .coffee-card::before,.coffee-card::after{animation:reaction-collapse linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes section-reveal{from{opacity:.2;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
  @keyframes copy-reveal{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}
  @keyframes reaction-collapse{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(18px) scale(.18)}}
}

/* Desktop composition from the current Buy Me a Coffee home page. */
@media (min-width:701px){
  .bmc-header{height:96px;padding:0 46px;position:relative;background:#fff;border:0;backdrop-filter:none;display:flex;align-items:center;box-sizing:border-box}
  .header-menu-btn{display:none}
  .bmc-header::before{content:"FAQ     Wall of ♡     Apps⌄     Resources⌄";font-size:16px;font-weight:800;white-space:pre;letter-spacing:-.35px;color:#272525}
  .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
  .logo .menu{display:none}
  .bmc-brand-logo{display:block;height:36px;width:auto;max-width:180px;transition:transform .2s ease}
  .logo:hover .bmc-brand-logo{transform:scale(1.04)}
  .creator-search{display:flex;position:relative;margin-left:auto;margin-right:24px;width:240px;height:49px;border:0;border-radius:999px;background:#f7f7f7;padding:0 17px;align-items:center}
  .creator-search input{font-size:16px;background:transparent;border:0;outline:0;width:100%}
  .creator-search span{font-size:22px;color:#777}
  nav{position:relative;display:flex;align-items:center;gap:25px;font-size:16px}
  .yellow-button{padding:14px 24px;font-size:16px}
  .landing .hero{min-height:880px;padding:80px 20px 55px;overflow:visible}
  .hero-doodles{display:none}.landing .hero .stars{font-size:22px;letter-spacing:1.5px;margin:0 0 48px}.stars span{font-size:20px;margin-left:12px;font-weight:500;letter-spacing:0}
  .landing .hero h1{max-width:720px;margin:0 auto 18px;font-size:clamp(76px,7.1vw,132px);line-height:.94;letter-spacing:-7px}
  .landing .hero-copy{max-width:700px;font-size:23px;line-height:1.45;margin-bottom:46px}
  .landing .hero .large{min-width:265px;min-height:77px;padding:18px 35px;font-size:22px}.landing .hero .fine-print{font-size:18px;margin-top:23px}
  .creator-showcase{display:none}
  .hero-floating-cards{display:block;position:absolute;z-index:4;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  .floating-creator-card{position:absolute;width:192px;height:172px;pointer-events:auto;text-decoration:none;color:inherit;will-change:transform,opacity;transition:transform .12s cubic-bezier(.2,.75,.28,.9),opacity .12s linear}
  .creator-card-tile{width:100%;height:100%;border-radius:16px;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:14px 12px;box-sizing:border-box;box-shadow:0 10px 25px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.05);transition:transform .2s cubic-bezier(.2,.75,.28,.9),box-shadow .2s ease}
  .creator-card-tile:hover{transform:scale(1.04);box-shadow:0 16px 36px rgba(0,0,0,.12)}
  .creator-card-tile img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#fdfbf7}
  .creator-card-tile p{font-size:13px;line-height:1.35;color:#111827;text-align:center;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:600}
  .card-supporters{display:flex;align-items:center;gap:4px;font-size:12px;color:#6b7280;margin-top:2px}
  .card-supporters svg{flex-shrink:0}

  .card-1{top:110px;left:max(16px,calc(50% - 630px));transform:rotate(2.5deg)}
  .card-2{top:270px;left:max(28px,calc(50% - 580px));transform:rotate(-5deg)}
  .card-3{top:460px;left:max(16px,calc(50% - 630px));transform:rotate(9deg)}
  .card-4{top:125px;right:max(24px,calc(50% - 590px));transform:rotate(10.5deg)}
  .card-5{top:290px;right:max(12px,calc(50% - 650px));transform:rotate(-5deg)}
  .card-6{top:490px;right:max(30px,calc(50% - 580px));transform:rotate(8deg)}
  .landing .feature.support{padding-top:130px}.feature{max-width:1220px;padding:150px 32px;gap:130px}.feature h2,.creators h2,.benefits h2{font-size:54px;line-height:1.05;letter-spacing:-3px}.feature-copy>p:last-child{font-size:21px;line-height:1.45;max-width:535px}.feature .eyebrow{font-size:15px}
}

@media (min-width:701px) and (max-width:1400px){
  .bmc-header::before{font-size:15px}
  .creator-search{width:220px}
  nav{gap:18px;font-size:15px}
  .creator-showcase{display:block}
  .landing .hero{min-height:660px;padding-top:40px}.landing .hero .stars{margin-bottom:78px}.landing .hero h1{max-width:730px;font-size:96px;line-height:95px;letter-spacing:-2.4px}.landing .hero-copy{font-size:24px;margin-bottom:40px}.landing .hero .large{min-height:72px;font-size:22px}
}

/* The reference keeps the product story in a narrow, editorial column: copy
   first, then the illustrated product surface.  The earlier split layout made
   the local page look like a generic marketing site on large screens. */
@media (min-width:701px){
  .landing .hero>*,.feature,.feature .feature-copy,.creators,.benefits,.creator-showcase article,.reference-product-image,.coffee-card,.coffee-card::before,.coffee-card::after{animation:none!important}
  .feature,.feature.reverse{
    display:flex;
    max-width:936px;
    padding:132px 24px;
    flex-direction:column;
    align-items:center;
    gap:44px;
  }
  .feature.reverse .feature-copy{order:0}
  .feature-copy{text-align:center}
  .feature h2{font-size:64px;line-height:80px;letter-spacing:-2px}
  .feature-copy>p:last-child{max-width:580px;font-size:18px;line-height:1.42}
  .feature .eyebrow{margin-bottom:15px}
  .feature .reference-product-image{max-width:500px}
  /* Match the vertical rhythm of the reference's three product illustrations. */
  main>.feature:nth-of-type(4){padding-bottom:23px}
  main>.feature:nth-of-type(5){padding-bottom:46px}
  main>.feature:nth-of-type(5) .reference-product-image{max-width:400px}
  main>.feature:nth-of-type(6){padding-bottom:214px}
  .landing .feature.support{padding-top:63px;padding-bottom:113px}
  main>.feature.support .eyebrow{margin-bottom:34px}
  .coffee-card{width:360px;max-width:100%}
  .coffee-card h4{display:none}
  .coffee-card .mini-supporter{position:absolute;z-index:4;display:flex;align-items:flex-start;width:185px;margin:0;padding:11px 12px;border:1px solid #f0ece7;border-radius:13px;background:#fff;box-shadow:0 10px 24px rgba(43,34,25,.10);font-size:10px;text-align:left}
  .coffee-card .mini-supporter i{flex:none;width:22px;height:22px;font-size:7px}
  .coffee-card .mini-supporter:nth-of-type(1){left:-146px;top:104px}
  .coffee-card .mini-supporter:nth-of-type(2){left:-126px;top:183px}
  .coffee-card .mini-supporter:nth-of-type(3){right:-138px;top:54px}
  .coffee-card .mini-supporter:nth-of-type(4){right:-187px;top:139px;width:235px}
  .creators{background:#fff;padding:132px 24px 210px;max-width:1002px;margin:auto}
  .creators h2{text-align:left;font-size:64px;line-height:80px;letter-spacing:-2px}
  .values{margin:48px 0 0;grid-template-columns:repeat(2,1fr);gap:32px 64px}
  .values article{position:relative;padding-left:34px}
  .values span{position:absolute;left:0;top:-2px;font-size:0;color:#272525}
  .values span::after{content:"✓";display:grid;place-items:center;width:19px;height:19px;border:1.5px solid #272525;border-radius:50%;font-size:12px;font-weight:800}
  .values h3{display:none}
  .values p{font-size:16px;line-height:1.28;color:#57524f}
  .benefits{max-width:1128px;margin:auto;padding:132px 24px}
  .benefits h2{text-align:left;font-size:64px;line-height:80px;letter-spacing:-2px}
  .benefit-grid{margin:48px 0 0;grid-template-columns:repeat(3,1fr);gap:35px 42px}
  .benefit-grid article,.benefit-grid article:nth-child(n){padding:0;background:transparent;border-radius:0}
  .benefit-grid div{font-size:0;margin-bottom:12px}
  .benefit-grid div::after{display:block;font-size:23px;color:#272525}
  .benefit-grid article:nth-child(1) div::after{content:"▣"}.benefit-grid article:nth-child(2) div::after{content:"◎"}.benefit-grid article:nth-child(3) div::after{content:"✉"}.benefit-grid article:nth-child(4) div::after{content:"♥"}.benefit-grid article:nth-child(5) div::after{content:"♙"}
  .benefit-grid h3{margin:0 0 6px;font-size:15px}.benefit-grid p{font-size:14px;line-height:1.35}
  footer{background:#fffcf5;border:0;padding:36px max(5vw,28px);font-size:12px}
}