/* ============================================================================
   Little & Youth — first-run onboarding (card / ribbon / tour)
   Self-contained. Namespaced .lyob-* to avoid collisions with site chrome.
   Reuses the header's .logo/.amp/.beta-pill classes INSIDE .lyob-card so the
   lockup inherits the exact header geometry; only colors are overridden.
   Pure front-end, additive. Safe to remove by deleting this file + its <link>.
   ============================================================================ */
:root{
  --lyob-bg:#464738; --lyob-bg2:#50513f; --lyob-ln:#5c5d49;
  --lyob-text:#f4f2e9; --lyob-body:#d7d5c6; --lyob-mut:#a6a390;
  --lyob-gold:#cfbe8d; --lyob-btnk:#33342a;
}
.lyob-ovl{position:fixed;inset:0;z-index:9999;display:none}
.lyob-ovl.on{display:block}
.lyob-scrim{position:absolute;inset:0;background:rgba(38,37,30,.5);backdrop-filter:blur(2px);animation:lyob-fade .25s ease}
@keyframes lyob-fade{from{opacity:0}to{opacity:1}}
@keyframes lyob-rise{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes lyob-slidein{from{transform:translateY(-100%)}to{transform:none}}

/* ---- card ---- */
.lyob-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(410px,92vw);max-height:92vh;overflow:auto;
  background:var(--lyob-bg);border:1px solid var(--lyob-ln);border-radius:20px;padding:30px 26px 24px;color:var(--lyob-body);
  box-shadow:0 30px 70px -22px rgba(30,30,20,.55);animation:lyob-rise .32s cubic-bezier(.2,.7,.3,1);text-align:center;
  font-family:'Palanquin',system-ui,-apple-system,sans-serif;line-height:1.5}
.lyob-card *{box-sizing:border-box}
.lyob-card .lyob-close{position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:8px;border:1px solid var(--lyob-ln);background:var(--lyob-bg2);color:var(--lyob-mut);cursor:pointer;font-size:15px;line-height:1}
.lyob-card .lyob-close:hover{color:var(--lyob-text);border-color:var(--lyob-gold)}
/* reuse the REAL logo classes; recolor for the dark card only */
.lyob-card .logo-stack{width:fit-content;margin:0 auto}
.lyob-card .logo{color:var(--lyob-text)}
.lyob-card .logo .amp{color:var(--lyob-gold)}
.lyob-card .logo-divider{border-top-color:var(--lyob-gold);opacity:.55}
.lyob-card .logo-tagline{color:var(--lyob-mut)}
.lyob-card .beta-pill{color:var(--lyob-gold);background:var(--lyob-bg2);border-color:var(--lyob-ln)}
.lyob-card h4{margin:22px 0 10px;font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.16;color:var(--lyob-text);text-wrap:balance}
.lyob-card .lyob-vp{margin:0 auto;font-size:14.5px;color:var(--lyob-body);max-width:32ch;line-height:1.5}
.lyob-card .lyob-actions{margin-top:22px}
.lyob-card .lyob-cta{display:block;width:100%;border:0;border-radius:12px;background:var(--lyob-gold);color:var(--lyob-btnk);font:inherit;font-size:15px;font-weight:700;padding:13px;cursor:pointer}
.lyob-card .lyob-cta:hover{filter:brightness(1.05)}
.lyob-card .lyob-see{display:block;width:100%;margin-top:10px;background:transparent;border:1px solid var(--lyob-ln);border-radius:12px;color:var(--lyob-body);font:inherit;font-size:13.5px;font-weight:600;padding:11px;cursor:pointer}
.lyob-card .lyob-see:hover{border-color:var(--lyob-gold);color:var(--lyob-text)}

/* ---- tour ---- */
.lyob-card .lyob-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lyob-gold);font-weight:700}
.lyob-card h4.lyob-step{margin:8px 0 10px}
.lyob-frame{margin:14px 0 6px;width:100%;aspect-ratio:3/2;border-radius:12px;border:1px solid var(--lyob-ln);background:#f4f2ec;overflow:hidden;position:relative}
.lyob-shot{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#f4f2ec}
.lyob-shot--search{background-image:url('/img/tour-search.jpg?v=3')}
.lyob-shot--save{background-image:url('/img/tour-save.jpg?v=2')}
.lyob-shot--share{background-image:url('/img/tour-share.jpg?v=2')}
.lyob-shot--shop{background-image:url('/img/tour-shop.jpg?v=2')}
.lyob-shot--beta{background-image:url('/img/tour-beta.jpg?v=2')}
.lyob-hl{position:absolute;border:4px solid var(--lyob-gold);border-radius:9px;transform-origin:center;animation:lyob-hl 1.5s ease-in-out infinite;pointer-events:none}
@keyframes lyob-hl{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(207,190,141,.6)}55%{transform:scale(1.06);box-shadow:0 0 0 16px rgba(207,190,141,0)}}
@media (prefers-reduced-motion:reduce){.lyob-hl{animation:none}}
.lyob-mini{position:absolute;inset:0;padding:14px 16px;text-align:left;background:#3c3d31}
.lyob-mini .mh{height:8px;width:70px;border-radius:4px;background:var(--lyob-ln)}
.lyob-mini .mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.lyob-mini .mi{height:26px;border-radius:6px;border:1px solid var(--lyob-ln);background:#474839}
.lyob-mini .mbtn{height:26px;width:120px;border-radius:7px;background:var(--lyob-gold);margin-top:12px}
.lyob-mini .mcards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.lyob-mini .mc{height:50px;border-radius:7px;border:1px solid var(--lyob-ln);background:#474839;position:relative}
.lyob-mini .mc::after{content:"";position:absolute;left:8px;bottom:8px;width:26px;height:9px;border-radius:3px;background:#5c5d49}
.lyob-mini .mtag{position:absolute;right:12px;top:12px;font-size:10px;font-weight:700;color:var(--lyob-gold);background:var(--lyob-bg2);border:1px solid var(--lyob-ln);border-radius:999px;padding:3px 9px}
.lyob-mini .survey{display:flex;flex-direction:column;gap:7px}
.lyob-mini .survey .q{height:10px;width:130px;border-radius:4px;background:var(--lyob-ln)}
.lyob-mini .survey .opts{display:flex;gap:6px}
.lyob-mini .survey .op{height:22px;width:52px;border-radius:6px;border:1px solid var(--lyob-ln);background:var(--lyob-bg2)}
.lyob-beta{margin-top:8px;display:flex;gap:8px}
.lyob-beta a{flex:1 1 0;text-align:center;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--lyob-body);background:transparent;border:1px solid var(--lyob-ln);border-radius:8px;padding:8px 10px;text-decoration:none;cursor:pointer}
.lyob-beta a:hover{border-color:var(--lyob-gold);color:var(--lyob-text)}
.lyob-pager{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.lyob-dots{display:flex;gap:6px}.lyob-dot{width:7px;height:7px;border-radius:50%;background:#63644f}
.lyob-dot.on{background:var(--lyob-gold);width:20px;border-radius:4px}
.lyob-pgb{display:flex;gap:8px}
.lyob-pgb button{border:1px solid var(--lyob-ln);background:var(--lyob-bg2);color:var(--lyob-body);font:inherit;font-size:13px;font-weight:600;padding:8px 15px;border-radius:9px;cursor:pointer}
.lyob-pgb .next{background:var(--lyob-gold);color:var(--lyob-btnk);border-color:transparent}

/* ---- ribbon (C) ---- */
.lyob-ribbon{position:fixed;left:0;right:0;top:0;z-index:9998;background:var(--lyob-bg);color:#f1efe6;display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:13px;
  font-family:'Palanquin',system-ui,-apple-system,sans-serif;animation:lyob-slidein .3s ease;box-shadow:0 6px 20px -10px rgba(30,30,20,.5)}
.lyob-ribbon b{color:#fff}
.lyob-ribbon .r-ico{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:0 0 auto;font-size:14px}
.lyob-ribbon .r-cta{margin-left:auto;background:var(--lyob-gold);color:var(--lyob-btnk);border:0;border-radius:999px;padding:6px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.lyob-ribbon .r-x{background:none;border:0;color:rgba(255,255,255,.6);font-size:16px;cursor:pointer;padding:0 2px;line-height:1}
.lyob-pill{position:fixed;right:14px;bottom:14px;z-index:9998;background:var(--lyob-bg);color:#f1efe6;border:1px solid var(--lyob-ln);border-radius:999px;padding:9px 14px;
  font-family:'Palanquin',system-ui,-apple-system,sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:0 12px 26px -12px rgba(30,30,20,.5)}
.lyob-pill b{color:var(--lyob-gold)}

@media (prefers-reduced-motion:reduce){.lyob-scrim,.lyob-card,.lyob-ribbon,.lyob-shot{animation:none!important}}