:root{
    --blue:#2563eb; --blue-600:#1d4ed8; --blue-050:#eff4ff;
    --ink:#0c1a33; --ink-2:#3a4a63; --muted:#5b6b83;
    --bg:#ffffff; --bg-2:#f5f8fd; --card:#ffffff; --line:#e6ecf5;
    --navy:#0b1b34; --good:#16a34a; --amber:#f59e0b;
    --shadow:0 10px 30px rgba(16,39,84,.08);
    --shadow-lg:0 24px 60px rgba(16,39,84,.14);
    --radius:16px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:"Plus Jakarta Sans",Inter,sans-serif;color:var(--ink);line-height:1.14;letter-spacing:-.02em;margin:0}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
  .grad{background:linear-gradient(90deg,var(--blue),#22a7f0);-webkit-background-clip:text;background-clip:text;color:transparent}
  .eyebrow{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
  .btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:16px;border-radius:12px;padding:10px 18px;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
  .btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.28)}
  .btn-primary:hover{background:var(--blue-600);transform:translateY(-1px)}

  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
  header.scrolled{border-color:var(--line);box-shadow:0 4px 20px rgba(16,39,84,.05)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .nav .logo img{height:45px;display:block}
  .nav-links{display:flex;gap:28px;align-items:center}
  .nav-links a{color:var(--ink-2);font-weight:600;font-size:15px}
  .nav-links a:hover{color:var(--ink)}
  .nav-right{display:flex;gap:14px;align-items:center}
  .nav-signin{color:var(--ink-2);font-weight:600;font-size:15px}
  .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:0;border-radius:10px}
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease}
  body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .nav-toggle span:nth-child(2){opacity:0}
  body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{display:none;position:fixed;top:74px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 34px rgba(16,39,84,.12);padding:12px 24px 24px;z-index:45;max-height:calc(100vh - 74px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mobile-menu a{display:block;padding:14px 4px;color:var(--ink);font-weight:600;font-size:17px;border-bottom:1px solid var(--line)}
  .mobile-menu a.btn{border:0;margin-top:18px;text-align:center;color:#fff}
  .mm-group{border-bottom:1px solid var(--line)}
  .mm-group summary{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;color:var(--ink);font-weight:600;font-size:17px;cursor:pointer;list-style:none}
  .mm-group summary::-webkit-details-marker{display:none}
  .mm-group summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s;margin-right:4px;flex:0 0 auto}
  .mm-group[open] summary::after{transform:rotate(-135deg)}
  .mm-group a{border-bottom:0;padding:11px 4px 11px 16px;font-weight:500;font-size:16px;color:var(--ink-2)}
  body.menu-open .mobile-menu{display:block}
  body.menu-open{overflow:hidden}

  .hero{background:radial-gradient(1200px 520px at 80% -12%,var(--blue-050),transparent 60%),var(--bg);padding:36px 0 34px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
  .badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);color:var(--ink-2);font-weight:600;font-size:13px;padding:7px 13px;border-radius:999px;box-shadow:var(--shadow)}
  .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px rgba(22,163,74,.15)}
  h1{font-size:clamp(33px,4.8vw,54px);margin:20px 0 0}
  .hero .sub{color:var(--muted);font-size:19px;max-width:560px;margin:20px 0 26px}
  .form{display:flex;gap:10px;max-width:480px;flex-wrap:wrap}
  .form input[type=email]{flex:1;min-width:220px;height:52px;border:1px solid var(--line);border-radius:12px;padding:0 16px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
  .form input[type=email]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-050)}
  .form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .form button{height:52px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-weight:700;font-size:16px;padding:0 24px;cursor:pointer;box-shadow:0 8px 20px rgba(37,99,235,.28);transition:background .12s,transform .12s}
  .form button:hover{background:var(--blue-600);transform:translateY(-1px)}
  .fineprint{color:var(--muted);font-size:14px;margin:12px 0 0}
  .fineprint.is-success{color:var(--good);font-weight:600}
  .fineprint.is-error{color:#dc2626;font-weight:600}
  .ticks{display:flex;gap:14px 22px;flex-wrap:wrap;margin-top:22px;list-style:none;padding:0}
  .ticks span,.ticks li{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);font-weight:600;font-size:14px}
  .ticks svg{width:18px;height:18px;color:var(--good)}

  .mock{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden}
  .mock-top{display:flex;align-items:center;gap:7px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
  .mock-top i{width:11px;height:11px;border-radius:50%;background:#e2688a}
  .mock-top i:nth-child(2){background:#f4c04e}.mock-top i:nth-child(3){background:#57c07d}
  .mock-top b{margin-left:8px;font-size:13px;color:var(--muted);font-weight:600}
  .mock-body{padding:14px}
  .mock-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .mock-bar b{font-size:14px}
  .mock-pill{font-size:12px;font-weight:700;color:#fff;background:var(--blue);padding:7px 12px;border-radius:9px}
  .row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:9px;background:#fff}
  .row .st{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
  .row .st .d{width:8px;height:8px;border-radius:50%;background:var(--amber)}
  .row.done .st .d{background:var(--good)}
  .row small{color:var(--muted);font-weight:500}
  .row .cust{font-size:14px;color:var(--ink-2)}
  .chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);padding:6px 10px;border-radius:8px;white-space:nowrap}
  .chip .cd{width:8px;height:8px;border-radius:50%}
  .mock-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);font-weight:600}
  .mock-foot b{color:var(--ink);font-size:15px;font-family:"Plus Jakarta Sans",Inter,sans-serif}
  /* Hero mockup: one order flowing through the pipeline. Same traffic lights as the app:
     green = done, amber = happening now, hollow = still to come. */
  .flow{list-style:none;margin:0;padding:2px 0 0;position:relative}
  .flow:before{content:"";position:absolute;left:11px;top:20px;bottom:20px;width:2px;background:var(--line)}
  .fl{position:relative;display:grid;grid-template-columns:24px 1fr auto;gap:11px;align-items:center;padding:7px 0}
  .fd{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
  .fl.done .fd{background:var(--good);border-color:var(--good)}
  .fl.done .fd svg{width:12px;height:12px;color:#fff}
  .fl.now .fd{background:var(--amber);border-color:var(--amber)}
  .fl.now .fd:after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
  .ft{font-size:14px;font-weight:600;line-height:1.3;min-width:0}
  .ft small{display:block;color:var(--muted);font-weight:500;font-size:12.5px;margin-top:1px}
  .fl.next .ft{color:var(--muted)}

  section.block{padding:74px 0}
  .bg-soft{background:var(--bg-2)}
  .center{text-align:center;max-width:760px;margin:0 auto 46px}
  .center h2{font-size:clamp(28px,3.4vw,40px);margin:12px 0}
  .center p{color:var(--muted);font-size:19px;margin:0}

  /* logo wall */
  .logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
  .logo-tile{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 4px 14px rgba(16,39,84,.04);transition:transform .12s,box-shadow .12s}
  .logo-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .mono{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:"Plus Jakarta Sans";font-weight:800;font-size:15px;flex-shrink:0;letter-spacing:-.02em}
  .logo-tile b{font-weight:700;font-size:14px;line-height:1.2;color:var(--ink);min-width:0;overflow-wrap:anywhere}
  /* real carrier logo: centre it and let the wordmark speak for itself (no duplicate name) */
  .logo-tile.has-logo{justify-content:center;min-height:64px;padding:16px}
  .clogo{height:30px;width:auto;max-width:120px;object-fit:contain;display:block}
  .logo-note{text-align:center;color:var(--muted);font-size:15px;margin:22px 0 0}

  /* modules */
  /* Trial callout, above the module cards. Blue rather than the green used for the "what you do
     not pay extra for" strips: this is an invitation, not a money claim, and the two should not
     read as the same kind of statement. */
  .trial{display:flex;align-items:center;gap:14px;margin:0 0 24px;padding:16px 20px;
    border-radius:14px;background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.2);
    color:var(--ink-2);font-size:15px;line-height:1.6}
  .trialpill{flex-shrink:0;align-self:flex-start;padding:6px 12px;border-radius:999px;
    background:var(--blue);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
  @media (max-width:700px){.trial{flex-direction:column;align-items:flex-start;gap:10px}}
  .modules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
  @media (max-width:900px){
    .modules{grid-template-columns:1fr}
    .mcard .mhead{min-height:0}
  }
  .mcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px 24px;
    box-shadow:var(--shadow);display:flex;flex-direction:column;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .mcard:hover{transform:translateY(-2px);box-shadow:0 18px 44px -18px rgba(15,23,42,.28);border-color:rgba(37,99,235,.28)}
  /* Badge ABOVE the title, not inline and right-aligned. Inline, it stole width from the
     heading: "Production Management" wrapped to two lines while the others did not, which
     dropped that card's price and seats strip out of line with its neighbours. */
  .mcard .mtag{align-self:flex-start;margin-bottom:12px}
  /* Reserves two lines of heading so the PRICE ROW lines up across all three cards whatever the
     module is called. Without it, alignment depends on how long a name happens to be. */
  .mcard .mhead{min-height:74px}
  .mcard h3{font-size:21px;line-height:1.25;margin:0}
  .mcard .mmeter{margin:6px 0 0}
  /* FROM-PRICE per module. "from", because each module is banded by its own meter (shipments,
     SKUs, orders) and a single headline figure would be wrong for two of the three. The full
     ladder lives on the plan page inside the app. */
  .mcard .mprice{display:flex;align-items:baseline;gap:6px;margin:16px 0 0}
  .mcard .mfrom{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  .mcard .mamt{font-size:32px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
  .mcard .mper{font-size:13px;color:var(--muted);font-weight:500}
  /* Seats are not metered. The comparable tools band team users and charge to add people, so
     this is a difference worth stating rather than a feature bullet lost in the list. */
  .mcard .mseats{display:flex;align-items:center;gap:7px;margin:14px 0 18px;
    padding:9px 11px;border-radius:10px;font-size:13px;background:rgba(37,99,235,.06);color:#1e40af}
  .mcard .mseats svg{width:16px;height:16px;flex-shrink:0}
  /* Same strip, green: it is a MONEY claim rather than a capacity one, and the two read better
     apart. Deliberately says "on your own carrier account" - we DO charge per label when a
     merchant ships on the Pick Pack Track account (PlatformLabelCharge / the rate card), so a
     bald "no fee per label" would be false for exactly those merchants. */
  .mcard .mfree{background:rgba(21,128,61,.07);color:#15803d;margin-top:8px}
  /* Section level promise, sitting under the three module cards. Wider and quieter than the
     per card strips so it reads as a statement about the pricing model rather than a fourth
     feature bullet. */
  .nofees{display:flex;align-items:flex-start;gap:11px;margin:22px 0 0;padding:16px 20px;
    border-radius:14px;background:rgba(21,128,61,.06);border:1px solid rgba(21,128,61,.18);
    color:#166534;font-size:15px;line-height:1.6}
  .nofees svg{width:20px;height:20px;flex-shrink:0;margin-top:2px}
  .nofees strong{color:#14532d}
  .mtag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
  .mtag.core{background:var(--blue-050);color:var(--blue)}
  .mtag.opt{background:#eef2f7;color:var(--muted)}
  .mmeter{color:var(--muted);font-size:14px;margin:0 0 16px}
  .flist{list-style:none;padding:0;margin:0;display:grid;gap:11px}
  .flist li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-weight:500;font-size:15px}
  .flist svg{width:20px;height:20px;color:var(--blue);flex-shrink:0}
  .onboard{display:flex;gap:18px;align-items:center;background:var(--navy);color:#fff;border-radius:18px;padding:26px 30px;margin-top:24px}
  .onboard svg{width:34px;height:34px;color:#7db9ff;flex-shrink:0}
  .onboard h3{color:#fff;font-size:19px;margin-bottom:4px}
  .onboard p{color:#c3cede;margin:0;font-size:15.5px}

  /* problem grid */
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .pcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;gap:14px}
  .pcard .mk{width:30px;height:30px;border-radius:9px;background:var(--blue-050);color:var(--blue);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:"Plus Jakarta Sans"}
  .pcard h3{font-size:16.5px;margin-bottom:6px}
  .pcard p{color:var(--muted);font-size:14.5px;margin:0}

  /* automation */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .pillar{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
  .pillar .tag{display:inline-block;font-size:12px;font-weight:700;color:var(--blue);background:var(--blue-050);padding:6px 12px;border-radius:999px;margin-bottom:14px}
  .pillar h3{font-size:22px;margin-bottom:12px}
  .pillar p{color:var(--muted);font-size:15.5px;margin:0 0 16px}
  .achips{display:flex;flex-wrap:wrap;gap:8px}
  .achips span{font-size:13px;font-weight:600;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);padding:6px 11px;border-radius:8px}

  /* metrics dashboard */
  .dash{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:22px}
  .dash-top{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
  .stat{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px}
  .stat .label{color:var(--muted);font-size:13px}
  .stat .value{font-family:"Plus Jakarta Sans";font-weight:800;font-size:26px;margin:4px 0}
  .stat .delta{font-size:12px;font-weight:700;color:var(--good);display:inline-flex;align-items:center;gap:4px}
  .dash-charts{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
  .chart-box{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:16px}
  .chart-title{font-weight:700;font-size:14px}
  .chart-sub{color:var(--muted);font-size:12px;margin-bottom:10px}

  /* compare */
  .cmp-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
  table.cmp{width:100%;border-collapse:collapse;min-width:640px}
  table.cmp th,table.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px}
  table.cmp th{font-family:"Plus Jakarta Sans";font-size:14px;color:var(--ink)}
  table.cmp th.us,table.cmp td.yes{background:var(--blue-050)}
  table.cmp th.us{color:var(--blue)}
  table.cmp .feat{font-weight:600;color:var(--ink)}
  table.cmp .yes{color:var(--blue);font-weight:700}
  table.cmp .mid{color:var(--muted)}
  table.cmp .no{color:#b4409c;font-weight:600}
  table.cmp tbody tr:last-child td{border-bottom:0}
  .vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
  .vcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
  .vcard .ico{width:44px;height:44px;border-radius:12px;background:var(--blue-050);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-weight:800;font-size:20px}
  .vcard .ico svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:2}
  .vcard h3{font-size:18px;margin-bottom:8px}
  .vcard p{color:var(--muted);font-size:14.5px;margin:0}

  /* who */
  .who{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .who .c{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
  .who h3{font-size:17px;margin-bottom:8px}
  .who p{color:var(--muted);font-size:14.5px;margin:0}

  /* stats band */
  .stats{background:var(--navy);color:#fff;border-radius:24px;padding:50px;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
  .stats .n{font-family:"Plus Jakarta Sans";font-size:44px;font-weight:800;color:#7db9ff}
  .stats .l{color:#b9c6dc;font-size:15px;margin-top:6px}

  /* faq */
  .faq{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:12px}
  .faq summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--blue);font-size:22px;font-weight:700;flex-shrink:0}
  .faq[open] summary::after{content:"\2013"}
  .faq p{color:var(--muted);margin:0 0 16px;font-size:15.5px}

  .cta{background:linear-gradient(120deg,var(--blue),#1b8fe0);border-radius:24px;padding:58px;text-align:center;color:#fff;box-shadow:var(--shadow-lg)}
  .cta h2{color:#fff;font-size:clamp(28px,3.4vw,40px)}
  .cta p{color:rgba(255,255,255,.92);font-size:19px;max-width:580px;margin:14px auto 26px}
  .cta .form{margin:0 auto;justify-content:center}
  .cta .form button{background:var(--navy)}.cta .form button:hover{background:#08111f}
  .cta .fineprint{color:rgba(255,255,255,.85)}.cta .fineprint.is-success{color:#c9ffd8}.cta .fineprint.is-error{color:#ffd7d7}

  footer{background:var(--navy);color:#c3cede;padding:56px 0 30px;margin-top:0}
  .foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
  .foot .brand img{height:28px;margin-bottom:14px}
  .foot .brand p{color:#8aa0be;font-size:14px;max-width:280px}
  .foot h4{color:#fff;font-size:14px;margin:0 0 14px;font-weight:700}
  .foot a{display:block;color:#9fb2ce;font-size:14px;padding:5px 0}
  .foot a:hover{color:#fff}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:22px;color:#8aa0be;font-size:13px}

  @media(max-width:900px){
    .hero-grid,.split,.dash-charts{grid-template-columns:1fr}
    .modules,.grid3,.vcards,.who,.dash-top{grid-template-columns:repeat(2,1fr)}
    .stats{grid-template-columns:repeat(2,1fr);padding:36px}
    .foot{grid-template-columns:1fr 1fr}
    .nav-links{display:none}
    .nav-toggle{display:flex}
    .nav-right .btn-primary{display:none}
    .cta,.stats,.onboard{padding:32px}
  }
  @media(max-width:560px){.modules,.grid3,.vcards,.who,.dash-top,.stats,.foot{grid-template-columns:1fr}}
  /* Comparison table -> stacked cards on mobile (no horizontal scroll) */
  @media(max-width:720px){
    #compare .cmp-wrap{overflow:visible;background:transparent;border:0;box-shadow:none;border-radius:0}
    table.cmp{min-width:0;display:block}
    table.cmp thead{display:none}
    table.cmp tbody{display:block}
    table.cmp tr{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:4px 2px 8px;margin-bottom:14px}
    table.cmp td{display:flex;justify-content:space-between;align-items:center;gap:18px;border:0;border-top:1px solid var(--line);padding:10px 16px;font-size:15px;text-align:right}
    table.cmp td.feat{display:block;border-top:0;font-size:16.5px;font-weight:700;text-align:left;padding:12px 16px 6px}
    table.cmp td.yes{background:transparent}
    table.cmp td:nth-child(2)::before{content:"Pick Pack Track"}
    table.cmp td:nth-child(3)::before{content:"Shipping tools"}
    table.cmp td:nth-child(4)::before{content:"Enterprise"}
    table.cmp td:nth-child(n+2)::before{color:var(--muted);font-weight:600;font-size:13px;text-align:left;margin-right:auto}
  }

  /* ============================================================
     Multi-page site kit (added for component/about pages).
     Reuses the tokens above; brand colours unchanged.
     ============================================================ */
  /* Features dropdown in the main nav (CSS-only; focus-within for touch/keyboard) */
  .has-drop{position:relative}
  .has-drop>a{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
  .has-drop>a svg{width:14px;height:14px;transition:transform .18s}
  .drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:520px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;display:grid;grid-template-columns:1fr 1fr;gap:2px;z-index:60}
  .has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)}
  .has-drop:hover>a svg{transform:rotate(180deg)}
  .drop a{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:11px;color:var(--ink)}
  .drop a:hover{background:var(--bg-2)}
  .drop .di{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--blue-050);color:var(--blue)}
  .drop .di svg{width:18px;height:18px}
  .drop b{display:block;font-size:14.5px;font-weight:700;font-family:"Plus Jakarta Sans",Inter,sans-serif}
  .drop small{display:block;color:var(--muted);font-size:12.5px;font-weight:500;margin-top:1px;line-height:1.35}
  .mm-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:16px 4px 4px}

  /* Sub-page hero + breadcrumb */
  .page-hero{background:radial-gradient(1100px 480px at 80% -14%,var(--blue-050),transparent 60%),var(--bg);padding:52px 0 40px}
  .crumb{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);font-weight:600;margin-bottom:18px}
  .crumb a{color:var(--muted)}.crumb a:hover{color:var(--blue)}
  .crumb span{color:#c2ccdb}
  .crumb span:last-child{color:var(--ink-2)}
  .page-hero h1{font-size:clamp(30px,4.4vw,48px);margin:14px 0 0;max-width:14ch}
  .page-hero .lead{color:var(--muted);font-size:19px;max-width:60ch;margin:18px 0 26px}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}

  /* Alternating feature rows */
  .feat{padding:34px 0}
  .feat-row{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:26px 0}
  .feat-row.flip .feat-visual{order:-1}
  .feat-row h2{font-size:clamp(24px,2.6vw,32px);margin:10px 0 0}
  .feat-row p{color:var(--muted);font-size:17px;margin:14px 0 0}
  .feat-visual{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:20px;min-height:180px}
  .chk{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
  .chk li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-weight:500}
  .chk svg{flex:0 0 auto;width:20px;height:20px;color:var(--good);margin-top:1px}

  /* Three-up mini feature cards */
  .mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
  .mini{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
  .mini .ic{width:40px;height:40px;border-radius:11px;background:var(--blue-050);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
  .mini .ic svg{width:21px;height:21px}
  .mini h3{font-size:17px;margin:0 0 6px}
  .mini p{color:var(--muted);font-size:14.5px;margin:0}

  /* Stat / trust band */
  .stat-band{background:linear-gradient(155deg,#0c1f3c,#0a1730);border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:32px 6px;display:grid;grid-template-columns:repeat(4,1fr);color:#fff;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
  .stat-band:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.6),transparent)}
  .stat-band .st{padding:4px 28px}
  .stat-band .st + .st{border-left:1px solid rgba(255,255,255,.09)}
  .stat-band .st:before{content:"";display:block;width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),#22a7f0);margin-bottom:13px}
  .stat-band .st b{display:block;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.01em;line-height:1.16}
  .stat-band .st span{display:block;color:#93a9cc;font-size:13px;font-weight:600;margin-top:8px;line-height:1.4}

  /* Closing CTA band */
  .cta-band{background:linear-gradient(120deg,var(--blue),#1e40af);border-radius:24px;padding:48px 34px;text-align:center;color:#fff;box-shadow:var(--shadow-lg)}
  .cta-band h2{color:#fff;font-size:clamp(26px,3vw,36px)}
  .cta-band p{color:#dbe7ff;font-size:18px;max-width:56ch;margin:14px auto 24px}
  .cta-band .btn-primary{background:#fff;color:var(--blue)}
  .cta-band .btn-primary:hover{background:#eaf0ff}

  .section-head{max-width:60ch;margin:0 0 26px}
  .section-head h2{font-size:clamp(24px,2.8vw,34px)}
  .section-head p{color:var(--muted);font-size:18px;margin:12px 0 0}
  .pad{padding:56px 0}

  @media(max-width:900px){
    .drop{position:static;transform:none;min-width:0;grid-template-columns:1fr;box-shadow:none;border:0;padding:0;opacity:1;visibility:visible}
    .feat-row{grid-template-columns:1fr;gap:26px}
    .feat-row.flip .feat-visual{order:0}
    .mini-cards{grid-template-columns:1fr}
    .stat-band{grid-template-columns:repeat(2,1fr);padding:20px 4px}
    .stat-band .st{padding:14px 20px}
    .stat-band .st + .st{border-left:0}
    .stat-band .st:nth-child(even){border-left:1px solid rgba(255,255,255,.09)}
    .stat-band .st:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
  }

  /* ---- Mascot hero media + showcase (added with brand mascot imagery) ---- */
  .ph-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center}
  .ph-media{display:flex;justify-content:center;align-items:center}
  .ph-media img{width:100%;max-width:470px;height:auto;filter:drop-shadow(0 26px 44px rgba(16,39,84,.16))}
  .ph-media.ph-framed img{filter:none;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
  .showcase{background:var(--bg-2);border:1px solid var(--line);border-radius:22px;padding:8px 8px 0;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:center}
  .showcase .sc-copy{padding:34px 34px 42px}
  .showcase .sc-copy h2{font-size:clamp(23px,2.6vw,30px)}
  .showcase .sc-copy p{color:var(--muted);font-size:17px;margin:12px 0 0}
  .showcase .sc-media{align-self:end}
  .showcase .sc-media img{display:block;width:100%;height:auto}
  @media(max-width:900px){
    .ph-grid{grid-template-columns:1fr;gap:22px}
    .ph-media{max-width:340px;margin:6px auto 0}
    .showcase{grid-template-columns:1fr}
    .showcase .sc-copy{padding:26px 22px 20px}
  }

  /* Carrier logo inside a .mini card (carriers page) */
  .carr-logo{height:30px;width:auto;max-width:132px;display:block;margin:2px 0 15px;object-fit:contain}

  /* ---- Homepage hero: flow card + mascot character (both white cards, no seam) ---- */
  .hero-stage{position:relative;min-height:500px}
  .hero-stage .mock{position:relative;z-index:2;width:72%;max-width:360px}
  .hero-char{position:absolute;right:-30px;bottom:-6px;width:61%;max-width:326px;z-index:1;background:none;border:0;box-shadow:none;padding:0}
  .hero-char img{display:block;width:100%;height:auto;border-radius:0}
  .hero-mob-char{display:none}
  /* ---- Full-width poster bands (mascot posters with baked headlines) ---- */
  .poster-card{border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;max-width:1000px;margin:0 auto}
  .poster-card img{display:block;width:100%;height:auto}
  @media(max-width:900px){
    /* Mobile: the penguin floats to the RIGHT of the hero text and the headline/copy
       wrap around him (see .hero-mob-char in the copy). The beside-card penguin is
       hidden here, and the detailed flow card sits full width below. */
    .hero-stage{min-height:0}
    .hero-stage .mock{width:100%;max-width:none}
    .hero-char{display:none}
    /* Penguin sits in his own column beside the headline (flex row). The headline wraps
       cleanly within its column and never overlaps him; the sub, form and ticks stay
       full width below. Adaptive on every phone width. */
    .hero-head{display:flex;align-items:center;gap:12px}
    .hero-head-text{flex:1 1 auto;min-width:0}
    .hero-head .hero-mob-char{display:block;flex:0 0 40%;max-width:180px;width:40%;height:auto;align-self:center}
  }

  /* On small phones, ease the hero headline down so its long words wrap around
     the floated penguin instead of dropping below him. */
  @media(max-width:600px){
    .hero h1{font-size:clamp(27px,7.2vw,34px)}
  }

  /* Many-card grids (channels, carriers): 3 cols desktop, 2 on phones, 1 on tiny screens.
     Fixes the inline repeat(3,1fr) that used to override the stack and overflow the viewport. */
  @media(max-width:900px){ .mini-cards.mc-tight{grid-template-columns:1fr 1fr;gap:12px} }
  @media(max-width:460px){ .mini-cards.mc-tight{grid-template-columns:1fr} }

  /* MOBILE mock rows: the 3-column row (title | value | chip) is too tight on a phone,
     so stack it - title/detail on line 1, then value (left) and chip (right) on line 2. */
  @media(max-width:600px){
    .row{grid-template-columns:1fr auto;row-gap:9px}
    .row .st{grid-column:1 / -1}
    .row .cust{text-align:left !important}
  }

/* A feat-row whose image comes SECOND in the DOM, so the photo bands alternate down the page.
   On mobile the row collapses to one column and DOM order would then put the text first here and
   the image first everywhere else - so below 900px the image is pulled back to the top and every
   band reads the same way. Half of our traffic is phones; alternation is a desktop nicety, not
   something worth an inconsistency there. */
.feat-row.media-last .poster-card{order:0}
@media(max-width:900px){.feat-row.media-last .poster-card{order:-1}}

/* A PAIR of photo bands read as one section of the page, so they do not need the full 74px
   section rhythm between them - stacked, that left a ~148px trench that looked like something
   had failed to load. Tightened here rather than globally: every other .block still wants the
   full spacing to separate genuinely different ideas. */
.block.band{padding:44px 0}
.block.band .feat-row{padding:14px 0}
/* The last band before the next section keeps a little more, so the pair still ends cleanly. */
.block.band + .block:not(.band){padding-top:56px}

/* SECONDARY CTA. There was no `.ghost` rule at all, so `class="btn ghost"` fell through to a
   bare `.btn` - which has no background of its own - and rendered as plain text that happened to
   sit on its own line. It looked like a heading, not a link.
   Deliberately NOT btn-primary: this sits inside a content band, and a solid blue button here
   would compete with the waitlist CTA that the whole page is driving towards. A bordered
   secondary reads as a button without shouting over the one that matters. */
.btn.ghost{background:#fff;color:var(--blue);border:1px solid rgba(37,99,235,.35);box-shadow:0 1px 2px rgba(16,39,84,.06)}
.btn.ghost:hover{background:#f5f8ff;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 16px rgba(37,99,235,.16)}
.btn.ghost svg{width:16px;height:16px}