/*
 * 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.62;font-size:15px;
       -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=5") 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}
  /* Left and full width by default. The 24ch/auto pair below belongs to the centred hero only;
     inherited site-wide it silently centred every ordinary page heading inside its column while
     the text under it stayed left, and wrapped it at 24 characters. */
  h1{font-size:32px;line-height:1.16;letter-spacing:-.022em;font-weight:650;color:var(--ink);
     max-width:none;margin:0 0 6px;text-align:left}
  .hero h1{max-width:24ch;margin:0 auto;text-align:center}
  .lead{font-size:15.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:23px;line-height:1.24;letter-spacing:-.018em;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:25px;max-width:none}
    h2{font-size:20px}
    .lead{font-size:16px}
    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)}

  /* --- app identity next to the page title -------------------------------------------------
     alt is empty on purpose: the h1 beside it already names the app, so a screen reader
     announcing it twice is noise. Sizes are fixed in the markup too, so the heading does not
     jump while the image loads. */
  .apphead{display:flex;align-items:center;gap:14px;margin:0 0 6px}
  .apphead h1{margin:0}
  .appicon{width:52px;height:52px;flex:none}
  @media(max-width:680px){
    .apphead{gap:11px}
    .appicon{width:40px;height:40px}
  }
  /* Homepage: the app card icon replaces the old placeholder dot, and the two quality products
     get one above their section eyebrow. */
  .appcard-icon{display:block;width:40px;height:40px}
  .sect-icon{display:block;width:38px;height:38px;flex:none}
  @media(max-width:680px){.sect-icon{width:32px;height:32px}.appcard-icon{width:34px;height:34px}}
  /* Icon sits beside the title, not stacked above it. */
  .apptop{display:flex;align-items:center;gap:11px;margin:0 0 7px}
  .app .apptop h3{margin:0}
  .secthead{display:flex;align-items:center;gap:11px;margin:0 0 10px}
  .secthead .eyebrow{margin:0}
  .herohead{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 6px}
  .herohead h1{margin:0;text-align:left;max-width:20ch}
  @media(max-width:680px){.herohead{gap:12px}.herohead .appicon{width:48px;height:48px}}