/* 20 · hero: the thesis, the signup, the shape engine beside them */

.rw-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.rw-hero__copy{display:flex;flex-direction:column;gap:18px;min-width:0}
/* the thesis in the block face: thick, packed tight like bricks, white */
.rw-hero__title{font-family:var(--f-block);font-weight:900;font-size:clamp(36px,5.6vw,60px);line-height:.98;letter-spacing:-.03em;color:var(--rw-hero-title-ink)}

/* signup: one field, one action; Kit receives it when the form id is set in config */
.rw-signup{display:flex;flex-direction:column;gap:8px;max-width:480px}
.rw-signup__label{font-family:var(--f-data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rw-signup-ink)}
.rw-signup__row{display:flex;gap:8px;flex-wrap:wrap}
.rw-signup__input{flex:1 1 220px;min-width:0;text-overflow:ellipsis;border:1px solid var(--rw-input-edge);border-radius:10px;padding:11px 14px;background:var(--rw-input-bg);color:var(--rw-input-ink);
  transition:border-color var(--t1) var(--e)}
.rw-signup__input::placeholder{color:var(--rw-input-hint)}
.rw-signup__input:focus{outline:none;border-color:var(--rw-focus)}
.rw-signup__status{font-size:13px;color:var(--rw-signup-ink);min-height:1.4em}
.rw-signup.is-done .rw-signup__status{color:var(--rw-status-done)}
.rw-signup.is-error .rw-signup__status{color:var(--rw-status-error)}
.rw-signup.is-busy .rw-btn{opacity:.7;cursor:progress}
/* the hero's pitch turns (module.signup): the old words lift away, the new ones rise in. The wink, once a visit,
   rises with a little bow. Reduced motion: the words simply change */
.rw-signup__label,.rw-signup__status{transform-origin:left center;transition:opacity .22s var(--e),translate .22s var(--e)}
.rw-signup__label.is-pitch-out,.rw-signup__status.is-pitch-out{opacity:0;translate:0 -4px}
.rw-signup__label.is-pitch-in,.rw-signup__status.is-pitch-in{animation:rw-signup-rise .42s var(--e) both}
.rw-signup__label.is-pitch-wink,.rw-signup__status.is-pitch-wink{animation:rw-signup-wink .6s var(--e) both}
@keyframes rw-signup-rise{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes rw-signup-wink{0%{opacity:0;translate:0 6px;scale:.96}60%{opacity:1;translate:0 -2px;scale:1.03}100%{opacity:1;translate:0 0;scale:1}}
@media (prefers-reduced-motion:reduce){.rw-signup__label,.rw-signup__status{transition:none;animation:none}}

/* the ghost placeholder (module.signup, Round 9): the field's own hint is hidden, a line over it carries the words,
   and each turn plays one of twelve swaps: out slowly (1.1 s), in sharp (.28 s). All crisp: no blur */
.rw-signup__input.has-ghost::placeholder{color:transparent}
.rw-signup__ghost{position:absolute;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;color:var(--rw-input-hint);font:inherit;font-size:16px}
.rw-signup__ghost.is-out{animation:var(--o) 1.1s ease-in both}
.rw-signup__ghost.is-in{animation:var(--i) .28s cubic-bezier(.2,1.4,.4,1) both}
.rw-signup__ghost[data-swap="0"]{--o:rw-g-fade;--i:rw-g-snap}
.rw-signup__ghost[data-swap="1"]{--o:rw-g-spots;--i:rw-g-spots-in}
.rw-signup__ghost[data-swap="2"]{--o:rw-g-wipe;--i:rw-g-wipe-in}
.rw-signup__ghost[data-swap="3"]{--o:rw-g-lift;--i:rw-g-drop-in}
.rw-signup__ghost[data-swap="4"]{--o:rw-g-squeeze;--i:rw-g-snap}
.rw-signup__ghost[data-swap="5"]{--o:rw-g-center;--i:rw-g-center-in}
.rw-signup__ghost[data-swap="6"]{--o:rw-g-shrink;--i:rw-g-pop}
.rw-signup__ghost[data-swap="7"]{--o:rw-g-skew;--i:rw-g-skew-in}
.rw-signup__ghost[data-swap="8"]{--o:rw-g-erase;--i:rw-g-type}
.rw-signup__ghost[data-swap="9"]{--o:rw-g-flicker;--i:rw-g-snap}
.rw-signup__ghost[data-swap="10"]{--o:rw-g-sink;--i:rw-g-rise}
.rw-signup__ghost[data-swap="11"]{--o:rw-g-flip;--i:rw-g-flip-in}
@keyframes rw-g-fade{to{opacity:0}}
@keyframes rw-g-snap{from{opacity:0}to{opacity:1}}
@keyframes rw-g-spots{from{-webkit-mask:radial-gradient(circle,#000 60%,transparent 61%) 0 0/9px 9px;mask:radial-gradient(circle,#000 60%,transparent 61%) 0 0/9px 9px}to{-webkit-mask:radial-gradient(circle,#000 0,transparent 1%) 0 0/9px 9px;mask:radial-gradient(circle,#000 0,transparent 1%) 0 0/9px 9px;opacity:0}}
@keyframes rw-g-spots-in{from{opacity:0;-webkit-mask:radial-gradient(circle,#000 20%,transparent 21%) 0 0/7px 7px;mask:radial-gradient(circle,#000 20%,transparent 21%) 0 0/7px 7px}to{opacity:1}}
@keyframes rw-g-wipe{to{clip-path:inset(0 0 0 100%)}}
@keyframes rw-g-wipe-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rw-g-lift{to{opacity:0;translate:0 -10px}}
@keyframes rw-g-drop-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@keyframes rw-g-squeeze{to{opacity:0;letter-spacing:-.4em}}
@keyframes rw-g-center{to{clip-path:inset(0 50% 0 50%)}}
@keyframes rw-g-center-in{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes rw-g-shrink{to{opacity:0;scale:.7}}
@keyframes rw-g-pop{from{opacity:0;scale:1.15}to{opacity:1;scale:1}}
@keyframes rw-g-skew{to{opacity:0;transform:skewX(-35deg) translateX(20px)}}
@keyframes rw-g-skew-in{from{opacity:0;transform:skewX(25deg) translateX(-12px)}to{opacity:1;transform:none}}
@keyframes rw-g-erase{to{clip-path:inset(0 100% 0 0)}}
@keyframes rw-g-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rw-g-flicker{0%,20%,40%{opacity:1}10%,30%{opacity:.2}60%,100%{opacity:0}}
@keyframes rw-g-sink{to{opacity:0;translate:0 10px}}
@keyframes rw-g-rise{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes rw-g-flip{to{opacity:0;transform:perspective(200px) rotateX(90deg)}}
@keyframes rw-g-flip-in{from{opacity:0;transform:perspective(200px) rotateX(-90deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rw-signup__ghost{animation:none!important}}

/* "Send my free five" in near-black that takes the page's colour (the user, Round 9): black mixed with the ground and
   the gem the backdrop is wearing, so it shifts as the page's colour shifts */
#rw-signup-submit,#rw-gift-submit{--btn-ink:color-mix(in oklab,#0b0508 80%,var(--hero-2,var(--rose)));--btn-hover-ink:color-mix(in oklab,#0b0508 70%,var(--hero-2,var(--rose)))}
:root[data-rw-theme="dark"] #rw-signup-submit,:root[data-rw-theme="dark"] #rw-gift-submit{--btn-ink:color-mix(in oklab,#fff 80%,var(--hero-2,var(--rose)))}

/* the hero's buttons are the Button type (06-button.css: --cta for the signup, --ghost for the plate) */

@media (max-width:820px){.rw-hero{grid-template-columns:minmax(0,1fr)}}