@import url('lrl-tokens.css');
/* =========================================================
   Learning Rewired Lab — Store
   Neutral surface: cyan is the only accent (STYLE-GUIDE.md §2).
   Scoped to body.shop-page; no html/body/bare-a restyles.
   ========================================================= */
.shop-page{
  --shop-ink:var(--lrl-ink,#07111f);
  --shop-muted:var(--lrl-slate,#475569);
  --shop-line:var(--lrl-line,#e6ebf1);
  --shop-accent:var(--lrl-cyan-700,#0789a2);
  scroll-padding-top:110px;
  margin:0;
  background:#fff;
  color:var(--shop-ink);
  font-family:var(--lrl-font-sans,Inter),ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.shop-shell{width:min(1220px,100%);margin:0 auto;padding-inline:26px}
.shop-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:850;color:var(--shop-accent);margin:0 0 16px}

.shop-hero-eyebrow{display:inline-flex;align-items:center;width:fit-content;padding:7px 14px;border:1px solid var(--lrl-cyan-tint-border,rgba(22,184,217,.38));border-radius:var(--lrl-radius-pill,999px);background:var(--lrl-cyan-tint,rgba(22,184,217,.08))}
.shop-sheen{color:var(--shop-accent);background:linear-gradient(100deg,var(--lrl-cyan,#16b8d9),var(--shop-accent) 42%,var(--lrl-cyan,#16b8d9) 72%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shop-sheen 8s linear infinite}
@keyframes shop-sheen{to{background-position:200% center}}
@media(prefers-reduced-motion:reduce){.shop-sheen{animation:none;background:none;-webkit-text-fill-color:currentColor}}

/* hero */
.shop-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(56px,7vw,88px) 56px}
.shop-hero h1{font-size:clamp(38px,5.6vw,62px);font-weight:900;line-height:1.03;letter-spacing:-.045em;color:var(--shop-ink);margin:0;max-width:760px;text-wrap:pretty}
.shop-lede{font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:var(--shop-muted);max-width:620px;margin:22px 0 28px;text-wrap:pretty}
.shop-actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}

/* buttons */
.shop-button{display:inline-flex;justify-content:center;align-items:center;text-align:center;min-height:52px;padding:12px 26px;border-radius:999px;background:var(--lrl-cyan,#16b8d9);color:var(--shop-ink);text-decoration:none;font-size:15px;font-weight:800;line-height:1.3;border:1px solid transparent;box-shadow:var(--lrl-shadow-cta-cyan,0 12px 28px rgba(22,184,217,.3));transition:background .2s,transform .2s,box-shadow .2s,border-color .2s,color .2s}
.shop-button:hover{background:var(--lrl-cyan-600,#0ea5c2);color:var(--shop-ink);transform:translateY(-2px)}
.shop-button--light{background:#fff;color:var(--shop-ink);border-color:#d8e0ea;box-shadow:var(--lrl-shadow-sm,0 4px 14px rgba(15,23,42,.05))}
.shop-button--light:hover{background:#fff;border-color:var(--lrl-cyan,#16b8d9);color:var(--shop-accent)}
.shop-text-link{color:var(--shop-accent);font-size:15px;font-weight:750;text-underline-offset:4px}
.shop-text-link:hover{color:var(--shop-ink)}

/* price receipt */
.shop-receipt{background:var(--lrl-frost,#fbfdfe);border:1px solid var(--shop-line);border-radius:28px;padding:30px;box-shadow:var(--lrl-shadow-card,0 15px 40px rgba(15,23,42,.06))}
.shop-receipt>div{padding:18px 0;display:grid;gap:6px;border-bottom:1px solid var(--shop-line)}
.shop-receipt>div span{font-size:14.5px;color:var(--shop-muted)}
.shop-receipt strong{font-size:26px;font-weight:900;letter-spacing:-.025em;color:var(--shop-ink)}
.shop-receipt>p:last-child{font-size:14.5px;line-height:1.6;color:var(--shop-muted);margin:18px 0 0}

/* offers */
.shop-offers{padding-block:32px 64px}
.shop-section-head{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:end;margin-bottom:28px}
.shop-section-head h2,.shop-how h2,.shop-free h2{font-size:clamp(27px,3.6vw,42px);font-weight:900;letter-spacing:-.038em;line-height:1.08;color:var(--shop-ink);margin:0;text-wrap:pretty}
.shop-section-head>a{font-size:15px;font-weight:750;color:var(--shop-accent)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:22px}
.shop-card{border:1px solid var(--shop-line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;background:#fff;box-shadow:var(--lrl-shadow-card,0 15px 40px rgba(15,23,42,.06));scroll-margin-top:110px;transition:transform .24s,box-shadow .24s,border-color .24s}
.shop-card:hover{transform:translateY(-4px);border-color:rgba(22,184,217,.38);box-shadow:var(--lrl-shadow-card-hover,0 24px 54px rgba(15,23,42,.1))}

/* one dark treatment for every card top; glow position varies, accent does not */
.shop-card-top{position:relative;padding:26px;min-height:205px;color:#fff;background:radial-gradient(70% 90% at 100% 0%,rgba(22,184,217,.22),transparent 60%),linear-gradient(158deg,#07111f,#10243d)}
.shop-card-top--review{background:radial-gradient(70% 90% at 0% 0%,rgba(110,231,216,.18),transparent 60%),linear-gradient(158deg,#07111f,#10243d)}
.shop-card-top--software{background:radial-gradient(80% 90% at 50% 120%,rgba(22,184,217,.22),transparent 62%),linear-gradient(158deg,#07111f,#10243d)}
.shop-category{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:850;padding:7px 14px;color:var(--lrl-mint,#6ee7d8);background:rgba(110,231,216,.08);border:1px solid rgba(110,231,216,.38);border-radius:999px}
.shop-card-top p{font-size:25px;line-height:1.2;font-weight:850;letter-spacing:-.025em;margin:22px 0 18px}
.shop-card-top>span:last-child{font-size:13px;line-height:1.5;color:rgba(226,242,247,.82)}

.shop-card-body{padding:26px;display:flex;flex-direction:column;flex:1}
.shop-card h3{font-size:clamp(20px,2.2vw,24px);font-weight:850;line-height:1.2;letter-spacing:-.025em;color:var(--shop-ink);margin:0 0 14px}
.shop-card-body>p{font-size:15px;line-height:1.6;color:var(--shop-muted)}
.shop-card-body .shop-price{font-size:36px;color:var(--shop-ink);font-weight:900;letter-spacing:-.03em;margin:0 0 10px;line-height:1.15}
.shop-price span{font-size:14.5px;font-weight:600;letter-spacing:0;display:block;margin-top:6px;color:var(--shop-muted)}
.shop-card ul{display:flex;flex-direction:column;gap:6px;padding-left:19px;margin:8px 0 22px;font-size:15px;line-height:1.55;color:var(--shop-ink)}
.shop-card details{background:var(--lrl-mist,#f8fafc);border:1px solid var(--shop-line);border-radius:13px;padding:14px 16px;font-size:14.5px;line-height:1.6;color:var(--shop-muted)}
.shop-card summary{font-weight:750;color:var(--shop-ink);cursor:pointer}
.shop-card .shop-access{font-size:14.5px;line-height:1.6;margin-top:auto;padding-top:18px}
.shop-card .shop-button{width:100%;margin:8px 0 14px}
.shop-card .shop-note{margin-bottom:0}
.shop-note{font-size:14.5px;line-height:1.6;color:var(--shop-muted)}
.shop-note a{color:var(--shop-accent)}

/* before you buy: numbered steps, not another card grid */
.shop-how{border-top:1px solid var(--shop-line);padding-block:clamp(56px,7vw,88px)}
.shop-how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px;margin:28px 0;counter-reset:shop-step}
.shop-how-grid>div{counter-increment:shop-step;padding-top:18px;border-top:3px solid var(--lrl-cyan,#16b8d9)}
.shop-how-grid>div::before{content:"0" counter(shop-step);display:block;font-size:11px;font-weight:850;letter-spacing:.16em;color:var(--shop-accent);margin-bottom:10px}
.shop-how h3{font-size:20px;font-weight:850;letter-spacing:-.02em;color:var(--shop-ink);margin:0 0 8px}
.shop-how p{line-height:1.6;font-size:15px;color:var(--shop-muted);margin:0}
.shop-how a{color:var(--shop-accent)}

/* free tools */
.shop-free{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 40px;align-items:center;width:min(1168px,calc(100% - 52px));margin-bottom:clamp(64px,8vw,104px);padding:36px 34px;background:radial-gradient(50% 120% at 100% 0%,rgba(22,184,217,.1),transparent 60%),var(--lrl-mist,#f8fafc);border:1px solid var(--shop-line);border-radius:28px}
.shop-free>div:first-child{flex:1 1 380px}
.shop-free p:not(.shop-eyebrow){font-size:15px;line-height:1.6;color:var(--shop-muted);margin:12px 0 0}

[aria-busy=true]{opacity:.7;pointer-events:none}
.resource-checkout-error{font-size:14.5px;line-height:1.6;padding:12px 16px;border:1px solid rgba(154,52,18,.28);border-radius:13px;background:#fff7ed;color:#7c2d12}

@media (max-width:700px){
  .shop-free{width:calc(100% - 40px);padding:28px 22px}
  .shop-receipt{padding:24px}
  .shop-card-body{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .shop-page{scroll-behavior:auto}
  .shop-button,.shop-card{transition:none}
  .shop-button:hover,.shop-card:hover{transform:none}
}