/* JustEnoughReorder marketing site: black and yellow, same look as the app's header. */
:root { --black:#111; --yellow:#FFD21F; --ink:#1b1b1b; --muted:#5b6672; --line:#e3e6ea; --soft:#f6f7f9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); line-height:1.6; background:#fff; }
img { max-width:100%; }
a { color:var(--black); }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }

/* Header */
.site-header { background:var(--black); border-bottom:5px solid var(--yellow); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; padding-top:14px; padding-bottom:14px; }
.brand { font-size:22px; font-weight:800; letter-spacing:.01em; color:#fff; text-decoration:none; }
.brand span { color:var(--yellow); }
.nav { display:flex; align-items:center; flex-wrap:wrap; gap:6px 6px; }
.nav a { color:#fff; text-decoration:none; font-weight:600; font-size:15px; padding:8px 12px; border-radius:8px; }
.nav a:hover, .nav a[aria-current="page"] { background:#2a2a2a; color:var(--yellow); }
.nav a.cta { background:var(--yellow); color:var(--black); }
.nav a.cta:hover { filter:brightness(.93); background:var(--yellow); color:var(--black); }

/* Hero */
.hero { background:var(--black); color:#fff; padding:64px 0 72px; }
.hero h1 { font-size:clamp(32px,5vw,52px); line-height:1.12; margin:0 0 16px; max-width:15em; }
.hero h1 em { font-style:normal; color:var(--yellow); }
.hero p.lead { font-size:clamp(17px,2.2vw,21px); color:#d5d9de; max-width:38em; margin:0 0 28px; }
.btns { display:flex; flex-wrap:wrap; gap:12px; }
.btn { display:inline-block; text-decoration:none; font-weight:700; padding:13px 22px; border-radius:10px; border:2px solid var(--yellow); }
.btn.primary { background:var(--yellow); color:var(--black); }
.btn.ghost { color:var(--yellow); background:transparent; }
.btn:hover { filter:brightness(.93); }
.btn.dark { background:var(--black); color:var(--yellow); border-color:var(--black); }

/* Sections */
section { padding:56px 0; }
section.soft { background:var(--soft); }
h2 { font-size:clamp(24px,3.4vw,34px); line-height:1.2; margin:0 0 10px; }
h2::after { content:""; display:block; width:56px; height:5px; background:var(--yellow); margin-top:10px; border-radius:3px; }
.centered h2::after { margin-left:auto; margin-right:auto; }
.centered { text-align:center; }
.sub { color:var(--muted); max-width:42em; margin:0 0 32px; font-size:18px; }
.centered .sub { margin-left:auto; margin-right:auto; }
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; }
.card h3 { margin:0 0 6px; font-size:19px; }
.card p { margin:0; color:var(--muted); }
.card .ico { width:44px; height:44px; border-radius:10px; background:var(--black); color:var(--yellow); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:12px; }
.steps { counter-reset:step; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.step { position:relative; padding:22px 22px 22px 22px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.step::before { counter-increment:step; content:counter(step); display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--yellow); color:var(--black); font-weight:800; margin-bottom:10px; }
.step h3 { margin:0 0 6px; font-size:18px; }
.step p { margin:0; color:var(--muted); }
.checks { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.checks li { padding-left:30px; position:relative; }
.checks li::before { content:"\2713"; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; background:var(--yellow); color:var(--black); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; margin-top:3px; }
.two { display:grid; gap:36px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; }
.band { background:var(--black); color:#fff; text-align:center; padding:56px 0; }
.band h2 { color:#fff; }
.band h2::after { margin-left:auto; margin-right:auto; }
.band p { color:#d5d9de; max-width:36em; margin:0 auto 24px; font-size:18px; }

/* Product page feature groups */
.feat { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.feat .card h3 { font-size:20px; margin-bottom:10px; }
.feat ul { margin:0; padding-left:20px; color:var(--muted); }
.feat li { margin:4px 0; }

/* Badges used in the product page, matching the app's status colours */
.badges { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.badge { display:inline-block; padding:3px 12px; border-radius:20px; font-size:13px; font-weight:700; color:#fff; }
.b-reorder { background:#FFD21F; color:#3d2b00; } .b-order { background:#2f6fb5; } .b-soon { background:#E5484D; } .b-exp { background:#8f1f2b; }

/* People */
.people { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.person { display:flex; gap:18px; align-items:flex-start; border:1px solid var(--line); border-radius:14px; padding:22px; background:#fff; }
.avatar { flex:none; width:84px; height:84px; border-radius:50%; background:var(--black); color:var(--yellow); display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; border:4px solid var(--yellow); }
.person h3 { margin:0; font-size:22px; }
.role { color:var(--muted); font-weight:600; margin:2px 0 10px; }
.person p { margin:0 0 8px; }
.todo { background:#fff6cc; border:1px dashed #d1b100; border-radius:8px; padding:8px 10px; font-size:14px; color:#5c4b00; }

/* Contact */
.contact-box { border:1px solid var(--line); border-radius:14px; padding:26px; background:#fff; max-width:560px; }
.contact-box p { margin:0 0 10px; }

/* Footer */
.site-footer { background:var(--black); color:#c9ced4; border-top:5px solid var(--yellow); padding:28px 0; font-size:14px; }
.site-footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; }
.site-footer a { color:var(--yellow); }

@media (max-width:560px) {
  .hero { padding:44px 0 52px; }
  section { padding:42px 0; }
  .person { flex-direction:column; }
  .nav a { padding:7px 9px; font-size:14px; }
}

/* Video */
.video-section { background:var(--soft); padding-top:48px; }
.video-frame { margin:0 auto; max-width:920px; }
.video-frame video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.22); border:3px solid var(--black); }
.video-frame figcaption { text-align:center; color:var(--muted); font-size:14px; margin-top:12px; }
.video-cta { text-align:center; margin:28px 0 0; }