/* ORDERPAD landing */
.hero { padding: 34px 0 20px; position: relative }
.hgrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center }
.htext { display: grid; gap: 22px; justify-items: start }
.pill { font-size: 15px; min-height: 36px; padding: 0 16px }
#h1 { display: grid; gap: 6px; margin: 0 }
#h1 .h1a { font-size: clamp(60px, 10.5vw, 132px); line-height: .9; letter-spacing: -.035em; color: var(--ink); padding-right: .12em; padding-bottom: .06em; text-shadow: 4px 5px 0 var(--mint); display: inline-block }
#h1 .h1b { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.01em; padding-bottom: .1em }
#h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--mint) 62%, var(--mint) 92%, transparent 92%); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone }
.three { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 540px }
.three li { display: flex; align-items: flex-start; gap: 14px; font-size: 19px; font-weight: 700; line-height: 1.35 }
.three .n { flex: none; width: 36px; height: 36px; border: 3px solid var(--ink); border-radius: 12px; background: var(--mint); display: inline-flex; align-items: center; justify-content: center; font: 700 19px/1 var(--display); box-shadow: 0 3px 0 var(--ink) }
.ctas { gap: 16px }
.fine { font-size: 15px; font-weight: 700; color: var(--ink2); max-width: 520px }

/* hero art */
.hart { position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: center }
.hart .blob { position: absolute; inset: 7% 6% 5%; border: var(--line); border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; background: var(--mintl); box-shadow: var(--sh2); animation: morph 9s ease-in-out infinite }
@keyframes morph { 0%, 100% { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48% } 50% { border-radius: 54% 46% 44% 56% / 46% 56% 44% 54% } }
.hart .cart { position: absolute; inset: 6% 4% 4% 4%; width: 92%; height: 90%; object-fit: contain; animation: cartfloat 4.2s ease-in-out infinite; filter: drop-shadow(0 10px 0 rgba(5, 74, 43, .12)) }
@keyframes cartfloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg) } 50% { transform: translateY(-16px) rotate(1.5deg) } }
.hart .cloud { position: absolute; width: 30%; animation: drift 7s ease-in-out infinite }
.hart .c1 { left: -4%; top: 6% } .hart .c2 { right: -3%; bottom: 14%; width: 26%; animation-delay: -3s }
@keyframes drift { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(14px) } }
.hart .coin { position: absolute; width: 56px; height: 56px; border: var(--line); border-radius: 50%; background: var(--mint); box-shadow: 0 4px 0 var(--ink); display: flex; align-items: center; justify-content: center; font: 700 28px/1 var(--display); animation: bob 3.2s ease-in-out infinite }
.hart .coin b { font-weight: 700 }
.hart .k1 { right: 6%; top: 14% } .hart .k2 { left: 3%; bottom: 20%; width: 44px; height: 44px; font-size: 22px; animation-delay: -1s } .hart .k3 { right: 16%; bottom: 3%; width: 38px; height: 38px; font-size: 19px; animation-delay: -2s }
.hart .spark { position: absolute; width: 34px; animation: twinkle 2.4s ease-in-out infinite } .hart .s1 { left: 12%; top: 30% } .hart .s2 { right: 4%; top: 48%; width: 26px; animation-delay: -1.2s }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0) } 50% { transform: scale(.6) rotate(25deg) } }

/* sections */
.sec { padding: 56px 0 }
.shead { margin-bottom: 30px } .shead h2 { font-size: clamp(34px, 5vw, 54px) } .shead p { margin-top: 10px; font-size: 19px; font-weight: 600; color: var(--ink2); max-width: 620px }

/* brand cards */
.brands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px }
.brands > * { min-width: 0 }
.bcard { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; border: var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh); text-decoration: none; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, background .2s; transform-style: preserve-3d }
.bcard:nth-child(odd) { --tilt: -1.2deg } .bcard:nth-child(even) { --tilt: 1.2deg }
.bcard:hover { transform: translateY(-8px) rotate(var(--tilt)); box-shadow: 6px 14px 0 var(--ink); background: var(--mintxl) }
.bcard .btile { align-self: stretch; height: 84px; font-size: 28px }
.bcard .pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.bcard h3 { font-size: 24px }
.bcard p { font-size: 15px; font-weight: 600; color: var(--ink2); line-height: 1.35 }
.bcard .go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 17px/1 var(--display) }
.bcard .go::after { content: '→'; transition: transform .2s } .bcard:hover .go::after { transform: translateX(5px) }
@media (max-width: 1100px) { .brands { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 640px) { .bcard .chip.plain { display: none } .brands { grid-template-columns: 1fr 1fr; gap: 14px } .bcard { padding: 16px } .bcard .btile { height: 64px; font-size: 22px } .bcard h3 { font-size: 21px } .bcard:last-child:nth-child(odd) { grid-column: 1 / -1 } }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; counter-reset: s }
.steps::before { content: ''; position: absolute; left: 12%; right: 12%; top: 76px; border-top: 5px dashed var(--mint2); z-index: 0 }
.step { position: relative; z-index: 1; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 8px 14px 0 }
.step .ico { position: relative; width: 168px; height: 168px; border: var(--line); border-radius: 50%; background: var(--paper); box-shadow: var(--sh); display: flex; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1) }
.step:hover .ico { transform: scale(1.06) rotate(-3deg) }
.step .ico svg { width: 120px; height: 120px }
.step .num { position: absolute; left: -2px; top: -2px; width: 46px; height: 46px; border: var(--line); border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; font: 700 24px/1 var(--display); box-shadow: 0 3px 0 var(--ink) }
.step h3 { font-size: 30px; margin-top: 10px } .step p { font-size: 17.5px; font-weight: 600; color: var(--ink2); max-width: 340px }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 20px }
  .steps::before { display: none }
  .step { grid-template-columns: 96px 1fr; justify-items: start; text-align: left; align-items: center; gap: 4px 16px; padding: 18px; border: var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh) }
  .step .ico { width: 96px; height: 96px; grid-row: 1 / 3; box-shadow: none; border-width: 3px } .step .ico svg { width: 66px; height: 66px } .step .num { width: 34px; height: 34px; font-size: 18px }
  .step h3 { font-size: 25px; margin: 0; align-self: end } .step p { font-size: 16px; align-self: start }
}

/* honest */
.honest { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: center; padding: 32px }
.honest h2 { font-size: clamp(30px, 4vw, 44px) }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.ticks li { display: flex; gap: 14px; align-items: flex-start; font-weight: 700; font-size: 17.5px; line-height: 1.4 }
.tk { flex: none; width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 10px; background: var(--mint); position: relative; margin-top: 1px }
.tk::after { content: ''; position: absolute; left: 8px; top: 3px; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 3.5px 3.5px 0; transform: rotate(45deg) }
@media (max-width: 860px) { .honest { grid-template-columns: 1fr; padding: 22px } }

/* final band */
.cta { padding-top: 24px }
.band { display: flex; align-items: center; gap: 22px; padding: 28px 32px; border: var(--line); border-radius: 30px; background: var(--mint); box-shadow: var(--sh2) }
.band img { flex: none; width: 84px; height: 84px; object-fit: contain; animation: bob 3.4s ease-in-out infinite }
.band h2 { font-size: clamp(28px, 3.6vw, 42px) } .band p { margin-top: 6px; font-weight: 700; font-size: 18px }
.band .btn { margin-left: auto; flex: none }
@media (max-width: 760px) { .band { flex-direction: column; text-align: center; padding: 24px 20px } .band .btn { margin: 0; width: 100% } }

/* phone: hero is its own layout (art first and smaller, big buttons) */
@media (max-width: 900px) {
  .hgrid { grid-template-columns: 1fr; gap: 6px }
  .hart { order: -1; max-width: 300px; margin-bottom: -6px }
  .htext { justify-items: stretch }
  .htext .pill { justify-self: start }
  .three li { font-size: 17.5px }
  .ctas .btn { flex: 1 1 100% }
  #h1 .h1a { font-size: clamp(56px, 17vw, 96px) }
}