/* loupfeed.com — shared design system.
   One stylesheet behind the platform page and every product page. */

:root{
  --brand:#FFD23F; --brand-tint:#FFF7DB; --brand-deep:#a16207; --ink:#1A1A1A;
  --bg:#ffffff; --bg-warm:#FDFCFA; --mut:#6b7280; --ink-2:#3f3f46;
  --line:rgba(26,26,26,.08); --line-2:rgba(26,26,26,.14);
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --gap:20px;
  --mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'InterVariable',Inter,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- atoms ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;border-radius:var(--r-sm);padding:12px 20px;font-size:15px;transition:transform .12s ease, box-shadow .12s ease;cursor:pointer;border:0}
.btn:hover{transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{box-shadow:0 6px 18px rgba(26,26,26,.25)}
.btn-brand{background:var(--brand);color:var(--ink)}
.btn-brand:hover{box-shadow:0 6px 18px rgba(255,210,63,.5)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-onink{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--brand-tint);color:var(--ink);border:1px solid rgba(26,26,26,.12);border-radius:999px;padding:5px 13px;font-size:13px;font-weight:600}
.pill .dot{width:8px;height:8px;border-radius:99px;background:var(--brand);border:1px solid rgba(26,26,26,.4)}
.kicker{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-deep)}
h2{font-size:34px;letter-spacing:-1.2px;font-weight:800;margin-top:10px}
h3{letter-spacing:-.2px}
.lead{margin-top:12px;color:var(--ink-2);max-width:40rem;font-size:16.5px}
section{padding:76px 0}
.band{background:var(--bg-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ic{width:40px;height:40px;border-radius:11px;background:var(--brand-tint);border:1px solid rgba(26,26,26,.1);display:grid;place-items:center;flex:none}
.ic-sm{width:34px;height:34px;border-radius:9px}
.code{background:var(--ink);color:#e5e7eb;border-radius:var(--r-md);padding:20px 22px;font-family:var(--mono);font-size:13px;line-height:1.85;overflow-x:auto;box-shadow:0 14px 34px rgba(26,26,26,.18);white-space:pre}
.code .c{color:#9ca3af}.code .y{color:var(--brand)}.code .g{color:#4ade80}.code .r{color:#fca5a5}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:40px}
.split.top{align-items:start}
.cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.plat{font-size:10.5px;font-weight:700;letter-spacing:.04em;border:1px solid var(--line-2);border-radius:999px;padding:3px 9px;color:var(--mut);background:#fff}
.plat.on{background:var(--brand-tint);color:var(--ink);border-color:rgba(26,26,26,.2)}
.mono{font-family:var(--mono)}
.src{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono);font-size:11px;background:var(--brand-tint);border:1px solid rgba(26,26,26,.12);padding:4px 9px;border-radius:6px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:50}
.nav-i{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-links{display:flex;gap:22px;font-size:14.5px;font-weight:500;color:var(--ink-2);align-items:center}
.nav-links a:hover{color:var(--ink)}
.nav-links a.here{color:var(--ink);font-weight:700}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.5px}
.logo .mark{width:32px;height:32px;border-radius:9px;background:var(--brand);display:grid;place-items:center}

/* ---------- hero ---------- */
header{padding:80px 0 52px;background:
    radial-gradient(900px 340px at 82% -10%, rgba(255,210,63,.32), transparent 70%),
    radial-gradient(620px 280px at 2% 6%, rgba(255,210,63,.13), transparent 70%)}
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
h1{font-size:52px;line-height:1.06;letter-spacing:-2px;font-weight:800;margin-top:18px}
h1 .hl{background:linear-gradient(transparent 62%, var(--brand) 62%)}
.sub{margin-top:20px;font-size:18.5px;color:var(--ink-2);max-width:34rem}
.hero-note{margin-top:16px;font-size:13.5px;color:var(--mut)}
.hero-note code{font-family:var(--mono);background:#f4f4f5;padding:2px 7px;border-radius:6px;font-size:12.5px}
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mut);font-weight:600}
.crumb a:hover{color:var(--ink)}

/* ---------- mock chrome (browser + phone), shared by every page ---------- */
.browser{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 18px 46px rgba(26,26,26,.11);overflow:hidden}
.browser .bar{display:flex;gap:5px;padding:10px 13px;border-bottom:1px solid var(--line);align-items:center}
.browser .bar i{width:9px;height:9px;border-radius:99px;background:#e4e4e7;display:block}
.browser .bar span{font-size:11px;color:var(--mut);margin-left:8px;font-family:var(--mono)}
.browser .body{padding:16px}
.mockrow{height:10px;border-radius:5px;background:#f1f1f2;margin:9px 0}
.mockmask{height:10px;border-radius:5px;margin:9px 0;background:repeating-linear-gradient(115deg,#e6e6e9 0 7px,#f3f3f5 7px 14px)}
.mockbtn{display:inline-block;background:#3b82f6;color:#fff;border-radius:8px;padding:8px 15px;font-size:12px;font-weight:600;position:relative;margin-top:8px}
.mockbtn.anchored{box-shadow:0 0 0 3.5px var(--brand),0 0 0 5px rgba(26,26,26,.3)}
.pin{position:absolute;top:-12px;right:-12px;width:23px;height:23px;border-radius:99px;background:var(--brand);border:2.5px solid var(--ink);font-size:11.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 3px 8px rgba(26,26,26,.25)}
.pin.pulse{animation:pulse 3.6s ease-in-out infinite}
@keyframes pulse{0%,72%,100%{transform:scale(1)}80%{transform:scale(1.16)}}

.phone{width:150px;height:286px;background:#fff;border:7px solid var(--ink);border-radius:26px;box-shadow:0 22px 50px rgba(26,26,26,.22);overflow:hidden;position:relative;flex:none}
.phone .notch{height:16px;display:grid;place-items:center}
.phone .notch i{width:44px;height:5px;border-radius:99px;background:var(--ink);display:block}
.phone .body{padding:8px 10px}
.phone .prow{height:8px;border-radius:4px;background:#f1f1f2;margin:7px 0}
.phone .pmask{height:8px;border-radius:4px;margin:7px 0;background:repeating-linear-gradient(115deg,#e6e6e9 0 6px,#f3f3f5 6px 12px)}
.phone .ptile{height:38px;border-radius:8px;background:#f6f6f7;margin-top:9px;position:relative}
.phone .ptile.on{background:#fff;box-shadow:0 0 0 2.5px var(--brand),0 0 0 4px rgba(26,26,26,.3)}
.phone .pin{width:20px;height:20px;font-size:10.5px;top:-10px;right:-8px}
.phone .pbar{position:absolute;left:10px;right:10px;bottom:9px;background:var(--ink);color:#fff;font-size:8.5px;font-weight:700;border-radius:7px;padding:5px 8px;text-align:center}

/* ---------- generic card grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:40px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:40px}
.card-b{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:#fff}
.card-b h3{font-size:16px;margin-top:13px}
.card-b p{font-size:13.5px;color:var(--mut);margin-top:8px}
.card-b code,.prod code,.feature code,.lead code{font-family:var(--mono);font-size:12px;background:var(--brand-tint);padding:1px 6px;border-radius:5px}

/* bulleted lists inside cards — never flex, so inline <code> flows */
.blist{list-style:none;display:grid;gap:7px;font-size:13px;color:var(--ink-2);margin-top:14px}
.blist li{position:relative;padding-left:16px}
.blist li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:99px;background:var(--brand);border:1px solid rgba(26,26,26,.35)}

/* icon + text rows */
.points{display:grid;gap:18px;margin-top:26px}
.point{display:flex;gap:13px;align-items:flex-start}
.point h4{font-size:15px;margin-bottom:3px}
.point p{font-size:13.5px;color:var(--mut)}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:40px}
.step{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.step .n{width:30px;height:30px;border-radius:9px;background:var(--brand);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:14px;border:1.5px solid rgba(26,26,26,.35)}
.step h3{font-size:15.5px;margin:13px 0 6px}
.step p{font-size:13.5px;color:var(--mut)}

/* product cards (home + cross-links) */
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:40px}
.prod{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:#fff;display:flex;flex-direction:column;transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease}
.prod:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 12px 30px rgba(26,26,26,.07)}
.prod-h{display:flex;align-items:center;gap:13px}
.prod h3{font-size:18px}
.prod .tagline{font-size:14px;color:var(--mut);margin-top:12px}
.prod .more{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.prod .more .arw{transition:transform .15s ease}
.prod:hover .more .arw{transform:translateX(3px)}
.platforms{display:flex;gap:6px;margin-left:auto}

/* compact cross-link row at the bottom of product pages */
.xlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:36px}
.xlink{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:#fff;transition:border-color .15s ease,transform .15s ease}
.xlink:hover{border-color:var(--line-2);transform:translateY(-2px)}
.xlink h3{font-size:15px;margin-top:11px}
.xlink p{font-size:13px;color:var(--mut);margin-top:6px}
.xlink .go{margin-top:12px;font-size:13px;font-weight:700}

/* spec table */
.spec{width:100%;border-collapse:collapse;margin-top:26px;font-size:13.5px}
.spec th,.spec td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:800}
.spec td:first-child{font-weight:700;white-space:nowrap}
.spec td code{font-family:var(--mono);font-size:12px;background:var(--brand-tint);padding:1px 6px;border-radius:5px}
.spec-scroll{overflow-x:auto}

/* closing band + footer */
.close-band{background:var(--ink);border-radius:22px;padding:52px 44px;color:#fff;display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.close-band h2{margin-top:0;font-size:32px}
.close-band p{color:#d4d4d8;margin-top:12px;font-size:15.5px}
.close-band .cta{margin-top:0;justify-content:flex-end}
footer{background:var(--ink);color:#a1a1aa;padding:44px 0;font-size:13.5px;margin-top:76px}
.f-i{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .logo{color:#fff}
footer a:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:900px){
  header{padding-top:56px}
  .hero{grid-template-columns:1fr;gap:44px}
  h1{font-size:38px}
  h2{font-size:28px}
  .prods,.grid-2,.grid-3,.split,.xlinks{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .close-band{grid-template-columns:1fr;padding:36px 26px}
  .close-band .cta{justify-content:flex-start}
  .nav-links a:not(.btn){display:none}
}
@media (max-width:560px){
  .prod-h{flex-wrap:wrap}
  .prod-h h3{flex:1 1 auto}
  .platforms{margin-left:0;order:3;flex-basis:100%;margin-top:6px}
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}