.reach-page { max-width: 72rem; }
.reach-page h1 { max-width: 15ch; font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: 1.02; }
.reach-page__shot { margin-top: 1.25rem; color: var(--paper); font-size: var(--step-1); }
.reach-match { --strike: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: clamp(1.25rem, 4vw, 2.5rem); min-height: 14rem; padding: clamp(1.5rem, 4vw, 2.5rem); margin: var(--space-3) 0 var(--space-4); border: 1px solid var(--line); background: var(--ink-soft); }
.reach-match [hidden] { display: none !important; }
.reach-match__art { position: relative; width: 4rem; height: 10rem; pointer-events: none; }
.reach-match__stick { position: absolute; left: 1.7rem; bottom: 0; height: 8rem; width: .55rem; border-radius: .12rem; background: linear-gradient(90deg, #a77e4b, #d6b57d 55%, #b18b56); }
.reach-match__head { position: absolute; left: 1.48rem; bottom: 7.65rem; width: 1rem; height: 1.35rem; border-radius: 50% 50% 42% 42%; background: var(--signal); transition: background .25s; }
.reach-match__flame { position: absolute; left: 1.03rem; bottom: 8.5rem; width: 1.9rem; height: 4.3rem; border-radius: 52% 48% 48% 52% / 74% 72% 28% 26%; background: radial-gradient(ellipse at 50% 88%, #fff9d6 0 18%, #ffdc7d 32%, #ff992c 57%, #ed5421 78%, transparent 92%); transform-origin: 50% 100%; transform: scale(0); opacity: 0; filter: drop-shadow(0 -.4rem 1rem #f78a2355); }
.reach-match__smoke { position: absolute; left: 1.8rem; bottom: 8.6rem; width: .35rem; height: 2.8rem; border-radius: 50%; background: #b9b4aa; opacity: 0; filter: blur(.3rem); }
.reach-match__eyebrow { margin: 0 0 .5rem; color: var(--paper-dim); font-family: var(--font-sans); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
.reach-match__message, .reach-match__email { margin: 0; font-family: var(--font-sans); font-size: clamp(1.55rem, 4vw, 2.5rem); line-height: 1.2; }
.reach-match__message:empty { display: none; }
.reach-match__email { position: relative; z-index: 2; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.reach-match__email a { text-decoration: none; border-bottom: 1px solid var(--signal); padding-bottom: .1rem; }
.reach-match__progress { display: block; height: 3px; width: min(100%, 17rem); margin-top: 1.2rem; background: var(--line); overflow: hidden; }
.reach-match__progress > span { display: block; width: 100%; height: 100%; background: var(--signal); transform: scaleX(var(--strike)); transform-origin: left; }
/* Keep a one-finger hold despite drift; two-finger browser zoom remains available. */
.reach-match__strike { position: absolute; z-index: 1; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; touch-action: pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.reach-match__strike:focus-visible { outline: 2px solid var(--signal); outline-offset: 5px; }
.reach-match__strike[aria-disabled="true"] { cursor: default; pointer-events: none; }
.reach-match[data-state="striking"] .reach-match__flame { opacity: 1; transform: scale(calc(.2 + var(--strike) * .8)); }
.reach-match[data-state="lit"] { --strike: 1; }
.reach-match[data-state="lit"] .reach-match__flame { opacity: 1; transform: scale(1); animation: reach-flicker .7s ease-in-out infinite alternate; }
.reach-match[data-state="failed"] .reach-match__head, .reach-match[data-state="used"] .reach-match__head { background: #343132; }
.reach-match[data-state="failed"] .reach-match__smoke { animation: reach-smoke .8s ease-out; }
.reach-match[data-state="used"] .reach-match__stick { background: linear-gradient(to top, #c5a16b 0%, #bc985f 24%, #403b34 48%, #252426 75%); height: 5.2rem; }
.reach-match[data-state="used"] .reach-match__head { bottom: 4.85rem; }
.reach-match[data-state="used"] .reach-match__email a { border-color: var(--line-strong); }
.reach-match:is([data-state="used"], [data-state="failed"], [data-state="plain"]) .reach-match__progress { visibility: hidden; }
@keyframes reach-flicker { from { transform: scale(.95, 1) rotate(-2deg); } to { transform: scale(1.04, 1.05) rotate(2deg); } }
@keyframes reach-smoke { from { opacity: .3; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-2rem) scale(2); } }
@media (max-width: 420px) { .reach-match { grid-template-columns: 2.8rem minmax(0, 1fr); gap: .8rem; padding: 1.2rem; } .reach-match__art { width: 2.8rem; transform: translateX(-.5rem); } }
@media (prefers-reduced-motion: reduce) { .reach-match__flame, .reach-match__smoke { animation: none !important; } .reach-match[data-state="striking"] .reach-match__flame { transform: scale(.65); } }