/*
 * Dropfeed design system — every page links this file.
 *
 * It used to live in a <style> block copied into each of 51 pages, which is why the site drifted:
 * one card said "MANUFACTURING · QUALITY" and the next said "MANUFACTURING & QUALITY", buttons were
 * three different heights, and a change meant 51 edits. One file, one edit.
 *
 * Page-specific rules stay in that page's own <style> block, AFTER this link, so they override.
 */

  /*
    Type and spacing follow a 4px scale with a tight display face, in the manner of Linear and
    Stripe: one focal point per screen, generous white space, and colour used only to point at the
    single thing worth clicking. The previous homepage gave three products equal visual weight and
    led with feature bullets, which left a reader with nowhere to look first.
  */
  :root{
    --ink:#0d1420; --body:#414c5e; --muted:#727e91; --line:#e6e9f0; --line-soft:#eff2f7;
    --bg:#ffffff; --soft:#f7f9fc; --accent:#066bfd; --accent-dark:#0450bd; --ok:#0f8a52;
    --font:'Inter','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
    --radius:12px;
    /* used by a couple of the Shopify guide pages for their caution callouts */
    --warn:#b5710a;
    --shadow-sm:0 1px 2px rgba(13,20,32,.06);
    --shadow-md:0 4px 16px rgba(13,20,32,.07);
    --shadow-lg:0 24px 60px rgba(13,20,32,.13);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:var(--font);color:var(--body);background:var(--bg);line-height:1.6;font-size:16px;
       -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}

  /* ---- nav ---------------------------------------------------------------- */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
         backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line-soft)}
  nav{display:flex;align-items:center;justify-content:space-between;height:62px}
  .brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);
         font-size:19px;letter-spacing:-.2px}
  .logo{width:119px;height:38px;flex:none;background:url("/img/dropfeed-logo.png?v=4") center/contain no-repeat}
  .logo::after{content:none}
  .navlinks{display:flex;gap:28px;align-items:center}
  .navlinks a{font-size:14px;font-weight:550;color:var(--body);transition:color .15s}
  .navlinks a:hover{color:var(--ink)}
  .nav-cta{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:7px;
           background:var(--accent);color:#fff !important;font-size:12px;font-weight:650;
           box-shadow:var(--shadow-sm);transition:background .15s}
  .nav-cta:hover{background:var(--accent-dark)}

  /* ---- hero --------------------------------------------------------------- */
  .hero{padding:64px 0 0;text-align:center;position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;top:-260px;left:50%;transform:translateX(-50%);
    width:1100px;height:620px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(47,91,234,.10),rgba(47,91,234,0));z-index:-1}
  .kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.09em;
          text-transform:uppercase;color:var(--accent);margin-bottom:18px}
  h1{font-size:40px;line-height:1.14;letter-spacing:-.024em;font-weight:650;color:var(--ink);
     max-width:24ch;margin:0 auto}
  .lead{font-size:16.5px;line-height:1.62;color:var(--muted);max-width:58ch;margin:20px auto 0}
  .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
  .btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 14px;
       border-radius:7px;font-size:13px;font-weight:650;letter-spacing:.005em;white-space:nowrap;
       border:1px solid transparent;box-sizing:border-box;transition:.15s}
  .btn.primary{background:var(--accent);color:#fff;
       box-shadow:0 1px 2px rgba(13,20,32,.10),0 4px 14px rgba(47,91,234,.18)}
  .btn.primary:hover{background:var(--accent-dark)}
  .btn.ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
  .btn.ghost:hover{border-color:#c2cfe8;background:var(--soft)}
  .micro{margin-top:15px;font-size:13px;color:var(--muted)}

  /* ---- product shot ------------------------------------------------------- */
  .shotwrap{margin:48px auto 0;max-width:1000px}
  .shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);
        background:#fff}
  .shot-bar{height:34px;background:var(--soft);border-bottom:1px solid var(--line-soft);
            display:flex;align-items:center;gap:6px;padding:0 13px}
  .shot-dot{width:9px;height:9px;border-radius:50%;background:#dfe4ee}
  /*
    Two background layers. The real screenshot is listed first; when the file is absent nothing is
    painted for that layer and the inline SVG behind it shows through, so a missing image degrades to
    a labelled placeholder instead of a broken-image icon.
  */
  /*
    The frame takes the image's own shape. App screenshots are tall — a fixed 5:3 crop cut the cause
    card, ratings and RPN off the bottom, which is the half of the picture that proves anything. The
    background placeholder shows only while the file is missing; the <img> hides itself on error.
  */
  .shot-img{min-height:220px;background-repeat:no-repeat;background-position:center;
            background-size:cover}
  .shot-img img{width:100%;height:auto;display:block}

  /* ---- audience doors ----------------------------------------------------- */
  .doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:34px auto 0;max-width:100%;
         text-align:left}
  .door{border:1px solid var(--line);border-radius:16px;padding:30px 30px 26px;background:#fff;
        box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:.16s}
  .door:hover{border-color:#c2cfe8;box-shadow:var(--shadow-md);transform:translateY(-2px)}
  .door-eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
                color:var(--accent)}
  .door h3{font-size:22px;font-weight:700;letter-spacing:-.022em;color:var(--ink);margin:12px 0 10px}
  .door p{font-size:15px;color:var(--muted);line-height:1.6;flex:1}
  .door-list{font-size:13px;color:var(--ink);font-weight:600;margin-top:18px;
             padding-top:16px;border-top:1px solid var(--line-soft)}
  .door-go{font-size:14.5px;font-weight:650;color:var(--accent);margin-top:12px}

  /* ---- trust strip -------------------------------------------------------- */
  .trust{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:44px;
         padding-top:30px;border-top:1px solid var(--line-soft)}
  .trust span{font-size:13.5px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
  .trust svg{flex:none}

  /* ---- sections ----------------------------------------------------------- */
  section.band{padding:104px 0}
  section.band + section.band{border-top:1px solid var(--line-soft)}
  .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
           color:var(--accent);display:flex;align-items:center;gap:10px}
  .pill-live{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:none;
             background:#e8f6ef;color:var(--ok);border-radius:999px;padding:2px 9px}
  h2{font-size:34px;line-height:1.16;letter-spacing:-.026em;font-weight:680;color:var(--ink);
     margin-top:14px;max-width:20ch}
  .sub{font-size:17px;color:var(--muted);margin-top:16px;max-width:52ch;line-height:1.65}
  .split{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
  .split.rev .col-text{order:2}
  ul.checks{list-style:none;margin:26px 0 0;display:flex;flex-direction:column;gap:13px}
  ul.checks li{position:relative;padding-left:22px;font-size:15px;color:var(--body);line-height:1.55}
  /*
    A bare tick, no disc behind it. The disc was doing nothing the tick did not already do, and at
    this size it read as a checkbox — an interactive control — on a list of static claims.
    Positioned against the first LINE of the item so a two-line bullet does not sit low.
  */
  ul.checks li::after{content:"";position:absolute;left:2px;top:5px;width:5px;height:9.5px;
    border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
  .links{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;align-items:center}
  .clink{color:var(--accent);font-weight:650;font-size:14.5px}
  .clink:hover{color:var(--accent-dark)}

  /* ---- guides ------------------------------------------------------------- */
  .export-band{background:var(--soft)}
  .guides{background:var(--soft);border-top:1px solid var(--line-soft);
          border-bottom:1px solid var(--line-soft)}
  .guidegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
  .guide{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;
         font-size:14.5px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;
         align-items:center;gap:12px;transition:.15s}
  .guide:hover{border-color:#c9d3e6;box-shadow:var(--shadow-md);transform:translateY(-1px)}
  .guide span{color:var(--accent);font-weight:700}

  /* ---- shopify apps ------------------------------------------------------- */
  .appgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
  .app{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff;
       display:flex;flex-direction:column;transition:.15s}
  .app:hover{border-color:#c9d3e6;box-shadow:var(--shadow-md);transform:translateY(-2px)}
  .app .dot{width:9px;height:9px;border-radius:3px;display:inline-block}
  .app h3{font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin:12px 0 7px}
  .app p{font-size:14px;color:var(--muted);line-height:1.55;flex:1}
  .app a.store{margin-top:16px;font-size:13.5px;font-weight:650;color:var(--accent)}

  /* ---- why ---------------------------------------------------------------- */
  .whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:40px}
  .whygrid h4{font-size:16.5px;color:var(--ink);font-weight:700;margin-bottom:8px;letter-spacing:-.015em}
  .whygrid p{font-size:14.5px;color:var(--muted);line-height:1.6}

  /* ---- closing cta -------------------------------------------------------- */
  .close-cta{background:var(--ink);color:#fff;border-radius:18px;padding:64px 48px;text-align:center;
             margin:0 0 96px}
  .close-cta h2{color:#fff;margin:0 auto;max-width:22ch}
  .close-cta p{color:#a9b4c6;font-size:17px;margin:16px auto 0;max-width:52ch}
  .close-cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}
  .close-cta .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}

  /* ---- footer ------------------------------------------------------------- */
  footer{border-top:1px solid var(--line);padding:56px 0 40px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
  .ftag{font-size:14px;color:var(--muted);margin:12px 0 14px;max-width:30ch}
  .fmail{font-size:14px;color:var(--accent);font-weight:600}
  .ghead{display:block;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
         color:var(--ink);margin-bottom:14px}
  .gcol a{display:block;font-size:14px;color:var(--muted);margin-bottom:9px;transition:color .15s}
  .gcol a:hover{color:var(--accent)}
  .fbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
        margin-top:44px;padding-top:22px;border-top:1px solid var(--line-soft);
        font-size:13.5px;color:var(--muted)}
  .fbar-links{display:flex;gap:20px}
  .fbar-links a:hover{color:var(--accent)}

  /* ---- responsive --------------------------------------------------------- */
  @media(max-width:960px){
    .split{grid-template-columns:1fr;gap:40px}
    .split.rev .col-text{order:0}
    .appgrid{grid-template-columns:repeat(2,1fr)}
    .guidegrid{grid-template-columns:repeat(2,1fr)}
    .doors{grid-template-columns:1fr;gap:16px}
    .whygrid{grid-template-columns:1fr;gap:28px}
    .fgrid{grid-template-columns:1fr 1fr;gap:32px}
  }
  @media(max-width:680px){
    .navlinks{display:none}
    .hero{padding-top:56px}
    h1{font-size:29px;max-width:none}
    h2{font-size:29px}
    .lead{font-size:17px}
    section.band{padding:68px 0}
    .appgrid,.guidegrid{grid-template-columns:1fr}
    .fgrid{grid-template-columns:1fr}
    .close-cta{padding:44px 24px}
    .trust{gap:18px 24px}
  }


/* ---------------------------------------------------------------------------------------------
   SITE-WIDE BUTTONS

   The site grew five different button classes — .btn, .cta-btn, .navcta, .nav-cta and .genbtn —
   at three different sizes, because each page carried its own copy of the CSS. They are all the
   same control and are sized here once. Page files may still name them differently; that is a
   tidy-up for another day and costs nothing while this rule exists.
   --------------------------------------------------------------------------------------------- */
.btn, .cta-btn, .genbtn, a.cta-btn, button.genbtn{
  display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 14px;
  border-radius:7px;font-size:13px;font-weight:650;letter-spacing:.005em;white-space:nowrap;
  border:1px solid transparent;box-sizing:border-box;font-family:inherit;cursor:pointer;
  text-decoration:none;transition:.15s}
.cta-btn, .genbtn, .btn.primary{background:var(--accent);color:#fff !important;
  box-shadow:0 1px 2px rgba(13,20,32,.10),0 4px 14px rgba(47,91,234,.18)}
.cta-btn:hover, .genbtn:hover, .btn.primary:hover{background:var(--accent-dark)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{border-color:#c2cfe8;background:var(--soft)}
.navcta, .nav-cta{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:7px;
  background:var(--accent);color:#fff !important;font-size:12px;font-weight:650;
  box-shadow:var(--shadow-sm);text-decoration:none;transition:background .15s}
.navcta:hover, .nav-cta:hover{background:var(--accent-dark)}