/* Ruu landing — Ruu brand tokens on an eBay-white canvas */
:root{
  --green:#0B7A45;--green-dark:#095C35;--green-deep:#063D24;--green-soft:#E6F4EA;--green-line:#CFE7D7;
  --gold:#C1912E;--gold-soft:#FBF1DC;--coral:#D2573F;
  --white:#FFFFFF;--panel:#F7F7F7;--line:#E5E5E5;--ink:#191919;--ink-soft:#555;--muted:#767676;
  --ok-bg:#E7F5EA;--ok-fg:#0B6B3A;--warn-bg:#FCF2DC;--warn-fg:#8A5A00;
  --shadow:0 10px 30px rgba(0,0,0,.08);--shadow-lg:0 24px 60px rgba(0,0,0,.16);
  --fd:'Manrope',system-ui,sans-serif;--fb:'DM Sans',system-ui,sans-serif;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.6 var(--fb);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fd);margin:0;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
p{margin:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hp{position:absolute;left:-9999px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* top bar + nav */
.topbar{background:var(--green);color:#fff;text-align:center;font:600 14px var(--fb);padding:9px 16px}
.nav-wrap{position:sticky;top:0;z-index:50;padding:14px 20px 0;pointer-events:none}
.nav{pointer-events:auto;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1.5px solid var(--ink);border-radius:999px;padding:9px 10px 9px 20px;transition:box-shadow .3s}
.nav-wrap.scrolled .nav{box-shadow:var(--shadow)}
.brand{display:inline-flex;align-items:center;gap:9px}
.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,var(--green),var(--green-deep));color:#fff;font:800 19px var(--fd)}
.brand-word{font:800 24px var(--fd);letter-spacing:-.03em}.dot{color:var(--gold)}
.links{display:flex;gap:30px;font-weight:600;font-size:15px}.links a{color:var(--ink-soft);transition:.2s}.links a:hover{color:var(--green)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;background:var(--green);color:#fff;font:700 16px var(--fd);padding:15px 28px;border-radius:999px;transition:transform .2s,background .2s,box-shadow .2s;box-shadow:0 8px 20px rgba(11,122,69,.25)}
.btn:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,122,69,.32)}
.btn-sm{padding:11px 22px;font-size:14px}.btn-block{width:100%}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding:56px 20px 70px;display:grid;gap:44px;justify-items:center;text-align:center}
h1{font-size:clamp(46px,8vw,96px);font-weight:800;letter-spacing:-.04em;line-height:1}
.rot-wrap{display:inline-block;overflow:hidden;vertical-align:bottom;height:1.08em;padding-bottom:.04em}
.rot{display:inline-block;color:var(--green);transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .45s}
.rot.out{transform:translateY(-110%);opacity:0}.rot.pre{transform:translateY(110%);opacity:0;transition:none}
.lead{font-size:clamp(18px,2vw,21px);color:var(--ink-soft);max-width:34em;margin:22px auto 0}
.wl-inline{display:flex;flex-wrap:wrap;gap:8px;margin:30px auto 0;max-width:540px;background:#fff;padding:8px;border-radius:999px;border:1.5px solid var(--ink);box-shadow:var(--shadow)}
.wl-inline input{flex:1 1 200px;border:0;background:transparent;font:500 16px var(--fb);padding:12px 18px;outline:0;min-width:0;color:var(--ink)}
.wl-inline .form-msg{flex-basis:100%;text-align:center}
.form-msg{font-size:14px;font-weight:600}.form-msg:empty{display:none}.form-msg.ok{color:var(--ok-fg)}.form-msg.err{color:var(--coral)}
.form-msg:not(:empty){padding:2px 12px 8px}

.hero-stage{position:relative;width:min(560px,100%);margin-top:6px}
.arch{position:relative;aspect-ratio:4/5;border-radius:999px 999px 36px 36px;overflow:hidden;border:10px solid #fff;outline:1.5px solid var(--ink);background:var(--green-soft);box-shadow:var(--shadow-lg)}
.arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12) translateY(-1%)}}
.sticker{position:absolute;margin:0;width:170px;background:#fff;border:1.5px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);text-align:left;animation:bob 6s ease-in-out infinite}
.sticker img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sticker figcaption{padding:8px 12px 10px;display:grid;line-height:1.25}.sticker b{font:700 13.5px var(--fd)}.sticker span{font:800 14px var(--fd);color:var(--green)}
.s1{left:-110px;top:60px;rotate:-6deg}.s2{right:-100px;top:140px;rotate:6deg;animation-delay:-2s}.s3{left:-70px;bottom:50px;rotate:4deg;animation-delay:-4s}
.badge-float{position:absolute;right:-30px;bottom:70px;display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font:700 14px var(--fd);padding:11px 18px;border-radius:999px;box-shadow:var(--shadow);animation:bob 5s ease-in-out infinite;animation-delay:-1s}
.badge-float .ic{font-size:18px}
@keyframes bob{50%{translate:0 -10px}}

/* photo strip */
.strip{overflow:hidden;padding:6px 0 0}
.strip-track{display:flex;gap:16px;width:max-content;animation:slide 50s linear infinite}
.strip-track img{width:280px;height:200px;object-fit:cover;border-radius:22px;border:1.5px solid var(--ink)}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(calc(-50% - 8px))}}

/* sections */
.sec{max-width:var(--max);margin:0 auto;padding:110px 20px 0}
.head{margin-bottom:48px}.head.center{text-align:center}
.head h2,.safe h2,.wl h2{font-size:clamp(34px,5vw,56px);font-weight:800}
.head p{margin-top:12px;color:var(--ink-soft);font-size:19px}.head em{font-style:normal;color:var(--muted)}

.do-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.do-card{background:var(--panel);border:1.5px solid var(--ink);border-radius:30px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.do-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.do-photo{aspect-ratio:4/4.4;overflow:hidden}.do-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.do-card:hover .do-photo img{transform:scale(1.07)}
.do-body{padding:24px 26px 28px;border-top:1.5px solid var(--ink);background:var(--green-soft)}
.do-card:nth-child(2) .do-body{background:var(--gold-soft)}
.do-body h3{font-size:30px;margin-bottom:8px}.do-body p{color:var(--ink-soft);font-size:16.5px}

/* safety */
.safe{margin-top:110px;background:var(--green-deep);color:#fff;padding:96px 20px;position:relative;overflow:hidden}
.safe:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:rgba(255,255,255,.04);right:-180px;top:-200px}
.safe-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;position:relative}
.safe-photo{position:relative;width:min(440px,100%);margin:0 auto}
.arch-sm{border-color:var(--green-deep);outline-color:#9FE0BB;background:var(--green)}
.b2{right:-24px;bottom:50px;background:var(--gold);color:var(--green-deep)}
.safe h2{margin-bottom:14px}.safe .sub{color:#B9D9C6;font-size:19px;margin-bottom:34px;max-width:30em}
.safe-list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.safe-list li{display:flex;gap:18px;align-items:flex-start}
.ico{width:52px;height:52px;border-radius:16px;background:var(--gold);color:var(--green-deep);display:grid;place-items:center;flex:none;font-size:26px;transition:transform .3s}
.safe-list li:hover .ico{transform:rotate(-8deg) scale(1.08)}
.safe-list b{display:block;font:700 20px var(--fd);margin-bottom:2px}.safe-list p{color:#B9D9C6;font-size:16.5px}
.promise{margin-top:34px;display:inline-block;font:800 clamp(20px,2.4vw,26px) var(--fd);letter-spacing:-.02em;padding:14px 22px;border-radius:18px;background:rgba(255,255,255,.08);border:1.5px dashed #9FE0BB}

/* listing cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1.5px solid var(--ink);border-radius:26px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.card-img{position:relative;aspect-ratio:7/6.2;overflow:hidden}.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.card:hover .card-img img{transform:scale(1.08)}
.tag{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;font:700 12px var(--fb);padding:6px 11px;border-radius:999px}.tag .ic{font-size:13px;stroke-width:3}
.tag.ok{background:var(--ok-bg);color:var(--ok-fg)}.tag.warn{background:var(--warn-bg);color:var(--warn-fg)}
.card-body{padding:16px 18px 20px;border-top:1.5px solid var(--ink);background:var(--green-soft);display:grid;gap:3px}
.card:nth-child(even) .card-body{background:var(--gold-soft)}
.card-body h3{font-size:18px}.card-body b{font:800 20px var(--fd);color:var(--green-deep)}.loc{display:flex;align-items:center;gap:5px;color:var(--ink-soft);font-size:14.5px}.loc .ic{font-size:15px}

/* phones */
.app{padding-bottom:110px}
.phones{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;align-items:flex-start}
.pcol{width:290px;text-align:center}.pcol.up{margin-top:-34px}
.pcol h3{font-size:26px;margin:26px 0 6px}.pcol p{color:var(--ink-soft);font-size:16px}
.phone{width:290px;height:590px;border-radius:46px;background:#111;padding:9px;box-shadow:var(--shadow-lg);transition:transform .4s}
.pcol:hover .phone{transform:translateY(-8px) rotate(-1deg)}
.scr{position:relative;height:100%;border-radius:38px;background:#fff;overflow:hidden;display:flex;flex-direction:column;text-align:left;font-size:13px}
.scr:before{content:"";position:absolute;z-index:4;left:50%;top:9px;translate:-50% 0;width:86px;height:24px;border-radius:14px;background:#111}
.sb{display:flex;justify-content:space-between;align-items:center;padding:13px 24px 6px;font:700 12.5px var(--fb);position:relative;z-index:3}
.sb i{width:22px;height:11px;border-radius:3px;border:1.5px solid currentColor;position:relative}.sb i:after{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;background:currentColor;border-radius:1px}
.p-hero{position:relative;height:196px;margin-top:-30px;z-index:1}.p-hero img{width:100%;height:100%;object-fit:cover}
.p-back,.p-heart{position:absolute;top:44px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:17px}.p-back{left:14px}.p-heart{right:14px}
.p-pad{padding:16px 18px;display:grid;gap:9px;flex:1;align-content:start}
.p-pad h4{font-size:19px}.p-price{font:800 24px var(--fd);color:var(--green-deep)}
.p-meta{display:flex;gap:7px;flex-wrap:wrap}.p-meta span{display:inline-flex;align-items:center;gap:4px;background:var(--panel);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--ink-soft)}
.p-seller{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:16px;margin-top:2px}
.av{width:40px;height:40px;border-radius:50%;background:var(--green-soft) center/cover;flex:none}
.p-seller b,.c-head b{display:block;font:700 14px var(--fd)}.ok{color:var(--ok-fg)}small.ok{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600}small.ok .ic{stroke-width:3;font-size:12px}
.p-btn{margin-top:auto;background:var(--green);color:#fff;text-align:center;font:700 15px var(--fd);padding:14px;border-radius:999px;position:absolute;left:18px;right:18px;bottom:20px}
.c-head{display:flex;align-items:center;gap:10px;padding:8px 16px 12px;border-bottom:1px solid var(--line)}.c-head>.ic{font-size:20px}.c-head small{color:var(--muted);font-size:12px}
.c-item{display:flex;gap:10px;align-items:center;margin:12px 14px 0;padding:8px;border:1px solid var(--line);border-radius:16px}
.c-item img{width:44px;height:44px;border-radius:11px;object-fit:cover}.c-item b{display:block;font:700 13.5px var(--fd)}.c-item small{color:var(--green-deep);font-weight:700;font-size:13px}
.c-msgs{display:grid;gap:9px;padding:14px;align-content:start;flex:1}
.m{max-width:80%;padding:9px 13px;border-radius:18px;font-size:13px}.m.in{background:var(--panel);border-bottom-left-radius:5px}.m.out{background:var(--green);color:#fff;margin-left:auto;border-bottom-right-radius:5px}
.offer{border:1.5px solid var(--green-line);background:var(--green-soft);border-radius:18px;padding:13px}.offer small{display:block;color:var(--green-deep);font-weight:700;font-size:12px}.offer b{display:block;font:800 24px var(--fd);color:var(--green-deep);margin-bottom:10px}
.o-btns{display:flex;gap:7px}.o-btns span{flex:1;text-align:center;padding:9px;border-radius:999px;font:700 13px var(--fd)}.o-btns .y{background:var(--green);color:#fff}.o-btns .n{background:#fff;color:var(--green-deep);border:1px solid var(--green-line)}
.note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--warn-fg);background:var(--gold-soft);padding:8px;border-radius:12px}
.c-input{margin:0 14px 16px;display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-radius:999px;padding:6px 6px 6px 16px;color:var(--muted)}
.c-input i{width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:16px}
.t-head{display:flex;align-items:center;gap:10px;padding:8px 16px 4px;font:700 16px var(--fd)}.t-head .ic{font-size:20px}
.steps{list-style:none;margin:20px 22px 0;padding:0;display:grid}
.steps li{display:flex;gap:14px;position:relative;padding-bottom:22px}
.steps li:before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}.steps li:last-child:before{display:none}.steps li.done:before{background:var(--green)}
.steps span{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center;flex:none;position:relative;z-index:1}
.steps .done span{background:var(--green);border-color:var(--green);color:#fff;font-size:14px}.steps .done .ic{stroke-width:3}
.steps .now span{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 5px rgba(193,145,46,.2);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(193,145,46,0)}}
.steps b{display:block;font:700 14.5px var(--fd);margin-top:2px}.steps small{color:var(--muted);font-size:12.5px}
.t-help{margin:auto 18px 20px;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:13px;font:700 13.5px var(--fd);color:var(--ink-soft)}.t-help .ic{font-size:17px}

/* waitlist */
.wl{background:var(--panel);border-top:1.5px solid var(--ink);padding:100px 20px}
.wl-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.wl-photo{border-radius:34px;overflow:hidden;border:1.5px solid var(--ink);aspect-ratio:4/4.8;box-shadow:var(--shadow-lg)}.wl-photo img{width:100%;height:100%;object-fit:cover}
.wl-card{display:grid;gap:18px}.wl-card p{color:var(--ink-soft);font-size:19px;max-width:28em}
.field{display:grid;gap:6px}.field label,.roles legend{font:700 14px var(--fb)}
.field input,.field select{font:500 17px var(--fb);padding:16px 18px;border:1.5px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field select:focus{outline:0;box-shadow:0 0 0 4px var(--green-soft);border-color:var(--green)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.roles{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start}.roles legend{grid-column:1/-1;margin-bottom:6px;padding:0}
.roles label{cursor:pointer}.roles input{position:absolute;opacity:0}
.roles span{display:block;text-align:center;padding:15px 4px;border-radius:16px;border:1.5px solid var(--ink);background:#fff;font-weight:700;transition:.15s}
.roles input:checked+span{background:var(--green);color:#fff;border-color:var(--green)}.roles input:focus-visible+span{outline:3px solid var(--gold)}
.fine{color:var(--muted);font-size:13.5px}

.foot{border-top:1.5px solid var(--ink);padding:36px 20px;display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto}
.foot nav{display:flex;gap:26px;font-weight:600;color:var(--ink-soft)}.foot nav a:hover{color:var(--green)}.foot small{color:var(--muted);flex-basis:100%}

/* reveal */
.rv{opacity:0;translate:0 34px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;translate:0}
.do-card:nth-child(2),.card:nth-child(2){transition-delay:.1s}.do-card:nth-child(3),.card:nth-child(3){transition-delay:.2s}.card:nth-child(4){transition-delay:.3s}

@media(max-width:1100px){.s1{left:-60px}.s2{right:-50px}.s3{left:-30px}.badge-float{right:-10px}}
@media(max-width:980px){
  .links{display:none}.safe-in,.wl-in{grid-template-columns:1fr;gap:48px}
  .do-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}.cards{grid-template-columns:1fr 1fr}
  .pcol.up{margin-top:0}.wl-photo{max-width:420px;margin:0 auto}
}
@media(max-width:640px){
  .sec{padding-top:80px}.safe{padding:72px 20px;margin-top:80px}
  .hero{padding-top:36px}.sticker{width:122px;border-radius:16px}.sticker figcaption{padding:6px 9px 8px}.sticker b{font-size:11.5px}.sticker span{font-size:12px}
  .s1{left:-8px;top:auto;bottom:24px}.s2{right:-8px;top:auto;bottom:90px}.s3{display:none}.badge-float{right:8px;bottom:auto;top:26px;font-size:12.5px}
  .cards{grid-template-columns:1fr;max-width:380px;margin:0 auto}
  .wl-inline{border-radius:26px}.wl-inline .btn{width:100%}.two{grid-template-columns:1fr}
  .b2{right:0}.nav{padding-left:14px}
}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}.rv{opacity:1;translate:0}}