/* ==========================================================================
   LabelsPrime — site stylesheet
   --------------------------------------------------------------------------
   New to CSS? Here's the map:
   1. Fonts + Design tokens (colors, spacing) — change these, change the site
   2. Reset & base element styles
   3. Reusable pieces (buttons, containers, section headers)
   4. One block per page section, in the order they appear in the HTML
   5. Responsive tweaks at the bottom (mobile/tablet)
   Search for "== " to jump between blocks.
   ========================================================================== */

/* -- 1. Fonts -------------------------------------------------------------
   Instrument Serif + Plus Jakarta Sans are already linked in the HTML head.
   JetBrains Mono is pulled in here because it's only used for tracking
   numbers, barcodes and price tags — no need to block the whole page load. */
   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

   /* -- 1. Design tokens -------------------------------------------------------
      Everything below reads from these custom properties. If you want to
      retheme the site, this is the only block you should need to touch. */
   :root {
     /* Postal palette — kraft paper, cancellation-stamp red, postal gold */
     --ink: #0A2540;         /* deep navy — header text, dark panels */
     --ink-2: #123456;       /* secondary navy — gradients, hovers on dark */
     --paper: #FBF8F2;       /* cream page background, like mailer paper */
     --kraft: #EFE6D5;       /* kraft-tan alternate section background */
     --kraft-line: #DDCCA9;  /* borders/rules on kraft sections */
     --stamp: #C1432E;       /* postage-ink red — used sparingly, for emphasis */
     --gold: #C0932E;        /* postal gold — API / premium accents */
     --charcoal: #1C2530;    /* primary text */
     --slate: #5B6672;       /* secondary / muted text */
     --line: #E6DCC6;        /* hairline borders on paper background */
     --white: #FFFFFF;
   
     --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
     --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
   
     --container: 1180px;
     --radius-sm: 6px;
     --radius-md: 10px;
     --radius-lg: 18px;
     --shadow-card: 0 1px 2px rgba(10, 37, 64, 0.06), 0 12px 28px -14px rgba(10, 37, 64, 0.18);
     --shadow-lift: 0 24px 48px -20px rgba(10, 37, 64, 0.35);
   }
   
   /* -- 2. Reset & base -------------------------------------------------------- */
   *, *::before, *::after { box-sizing: border-box; }
   
   html {
     scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%;
   }
   
   @media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto; }
     *, *::before, *::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
     }
   }
   
   body {
     margin: 0;
     background: var(--paper);
     color: var(--charcoal);
     font-family: var(--font-body);
     font-size: 16px;
     line-height: 1.55;
     -webkit-font-smoothing: antialiased;
   }
   
   img { max-width: 100%; display: block; }
   
   a {
     color: inherit;
     text-decoration: none;
   }
   
   ul, ol { list-style: none; margin: 0; padding: 0; }
   h1, h2, h3, h4, p, dl, dd { margin: 0; }
   
   code, pre { font-family: var(--font-mono); }
   
   /* Visible keyboard focus everywhere — don't remove without replacing it */
   a:focus-visible,
   button:focus-visible,
   [tabindex]:focus-visible {
     outline: 2px solid var(--stamp);
     outline-offset: 3px;
     border-radius: 4px;
   }
   
   .skip-link {
     position: absolute;
     left: -999px;
     top: auto;
     background: var(--ink);
     color: var(--white);
     padding: 12px 18px;
     border-radius: var(--radius-sm);
     z-index: 1000;
   }
   .skip-link:focus {
     left: 16px;
     top: 16px;
   }
   
   .container {
     width: 100%;
     max-width: var(--container);
     margin: 0 auto;
     padding: 0 24px;
   }
   
   /* -- 3. Buttons -------------------------------------------------------------
      Base .btn sets shape/spacing; modifier classes (.btn-primary etc) set
      color. Combine them in the HTML: class="btn btn-primary btn-lg" */
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 11px 22px;
     border-radius: 999px;
     font-family: var(--font-body);
     font-weight: 600;
     font-size: 0.94rem;
     letter-spacing: 0.01em;
     border: 1px solid transparent;
     cursor: pointer;
     transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
     white-space: nowrap;
   }
   .btn:hover { transform: translateY(-1px); }
   .btn:active { transform: translateY(0); }
   
   .btn-lg { padding: 14px 28px; font-size: 1rem; }
   
   .btn-primary {
     background: var(--stamp);
     color: var(--white);
     box-shadow: 0 10px 22px -10px rgba(193, 67, 46, 0.55);
   }
   .btn-primary:hover { background: #A93726; }
   
   .btn-outline {
     background: transparent;
     color: var(--ink);
     border-color: var(--ink);
   }
   .btn-outline:hover { background: var(--ink); color: var(--white); }
   
   .btn-ghost {
     background: transparent;
     color: var(--ink);
     border-color: transparent;
     padding-left: 14px;
     padding-right: 14px;
   }
   .btn-ghost:hover { background: rgba(10, 37, 64, 0.06); }
   
   .btn-gold {
     background: var(--gold);
     color: var(--ink);
     box-shadow: 0 10px 22px -10px rgba(192, 147, 46, 0.55);
   }
   .btn-gold:hover { background: #AD8226; }
   
   .btn-outline-light {
     background: transparent;
     color: var(--white);
     border-color: rgba(255, 255, 255, 0.45);
   }
   .btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }
   
   .btn-ghost-light {
     background: transparent;
     color: var(--white);
     text-decoration: underline;
     text-underline-offset: 4px;
     padding-left: 6px;
     padding-right: 6px;
   }
   .btn-ghost-light:hover { opacity: 0.8; }
   
   /* -- Shared section header pieces (kicker / title / lead) ------------------
      Used across almost every section, so it's defined once here. */
   .section-kicker {
     font-family: var(--font-mono);
     font-size: 0.78rem;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--stamp);
     margin: 0 0 12px;
   }
   .section-kicker.light { color: var(--gold); }
   
   .section-title {
     font-family: var(--font-display);
     font-weight: 400;
     font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.7rem);
     line-height: 1.12;
     letter-spacing: -0.01em;
     color: var(--ink);
     margin: 0 0 18px;
   }
   .section-title.light { color: var(--white); }
   
   .section-lead {
     max-width: 640px;
     margin: 0 auto 44px;
     color: var(--slate);
     font-size: 1.06rem;
     text-align: center;
   }
   .section-lead.left { margin-left: 0; margin-right: 0; text-align: left; }
   .section-lead.light { color: rgba(255, 255, 255, 0.72); }
   
   .section { padding: 96px 0; }
   .section-alt { background: var(--kraft); }
   
   /* == HEADER ================================================================ */
   .site-header {
     position: sticky;
     top: 0;
     z-index: 100;
     background: rgba(251, 248, 242, 0.92);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--line);
   }
   
   .header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     height: 76px;
   }
   
   .brand { display: flex; align-items: center; }
   .brand-logo { height: 42px; width: auto; }
   
   .nav {
     display: flex;
     align-items: center;
     gap: 32px;
     font-size: 0.94rem;
     font-weight: 500;
   }
   .nav a { color: var(--charcoal); position: relative; padding: 4px 0; }
   .nav a:hover { color: var(--stamp); }
   .nav a::after {
     content: "";
     position: absolute;
     left: 0; right: 0; bottom: -2px;
     height: 2px;
     background: var(--stamp);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.2s ease;
   }
   .nav a:hover::after { transform: scaleX(1); }
   
   .header-actions {
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   /* Hamburger icon — hidden on desktop, shown under the mobile breakpoint */
   .nav-toggle {
     display: none;
     flex-direction: column;
     justify-content: center;
     gap: 5px;
     width: 40px;
     height: 40px;
     border: 1px solid var(--line);
     border-radius: var(--radius-sm);
     background: var(--white);
     cursor: pointer;
     padding: 0;
   }
   .nav-toggle span {
     display: block;
     width: 18px;
     height: 2px;
     margin: 0 auto;
     background: var(--ink);
     transition: transform 0.2s ease, opacity 0.2s ease;
   }
   .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
   .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
   
   /* == HERO =================================================================== */
   .hero {
     position: relative;
     padding: 76px 0 96px;
     overflow: hidden;
   }
   
   /* Faint dot-grid texture, like packing paper — decorative, so aria-hidden in HTML */
   .hero-bg {
     position: absolute;
     inset: 0;
     background-image: radial-gradient(var(--kraft-line) 1px, transparent 1px);
     background-size: 22px 22px;
     -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 20%, #000 0%, transparent 75%);
     mask-image: radial-gradient(ellipse 70% 60% at 70% 20%, #000 0%, transparent 75%);
     opacity: 0.55;
     pointer-events: none;
   }
   
   .hero-grid {
     position: relative;
     display: grid;
     grid-template-columns: 1.05fr 0.95fr;
     gap: 56px;
     align-items: center;
   }
   
   .hero-brand {
     font-family: var(--font-mono);
     font-size: 0.78rem;
     font-weight: 600;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--ink);
     margin: 0 0 6px;
   }
   .hero-eyebrow {
     font-size: 0.92rem;
     font-weight: 600;
     color: var(--stamp);
     margin: 0 0 14px;
   }
   
   .hero-copy h1 {
     font-family: var(--font-display);
     font-weight: 400;
     font-size: clamp(2.4rem, 1.7rem + 3vw, 3.8rem);
     line-height: 1.05;
     letter-spacing: -0.01em;
     color: var(--ink);
     margin: 0 0 22px;
   }
   
   .hero-lead {
     font-size: 1.12rem;
     color: var(--slate);
     max-width: 46ch;
     margin: 0 0 32px;
   }
   
   .hero-cta {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     margin-bottom: 44px;
   }
   .hero-cta.center { justify-content: center; }
   
   .hero-points {
     display: grid;
     gap: 18px;
     padding-top: 28px;
     border-top: 1px solid var(--line);
   }
   .hero-points li {
     display: grid;
     grid-template-columns: 20px 1fr;
     gap: 12px;
     align-items: baseline;
   }
   .hero-points li::before {
     content: "";
     width: 8px;
     height: 8px;
     margin-top: 6px;
     border-radius: 50%;
     background: var(--stamp);
   }
   .hero-points strong {
     display: block;
     font-size: 0.98rem;
     color: var(--ink);
   }
   .hero-points span {
     display: block;
     font-size: 0.9rem;
     color: var(--slate);
   }
   
   /* -- Hero visual: the shipping-label mockup card --------------------------
      Signature element of the page. Styled like a real label peeled off a
      roll: perforated left edge, postage block, barcode strip. */
   .hero-visual { position: relative; }
   
   .label-card {
     background: var(--ink);
     border-radius: var(--radius-lg);
     padding: 18px;
     box-shadow: var(--shadow-lift);
     transform: rotate(1.5deg);
   }
   
   .label-card-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 4px 8px 16px;
     color: rgba(255, 255, 255, 0.85);
   }
   .label-pill {
     font-family: var(--font-mono);
     font-size: 0.72rem;
     font-weight: 600;
     letter-spacing: 0.04em;
     background: rgba(255, 255, 255, 0.12);
     padding: 5px 10px;
     border-radius: 999px;
   }
   .label-order {
     font-family: var(--font-mono);
     font-size: 0.72rem;
     color: rgba(255, 255, 255, 0.55);
   }
   
   .label-sheet {
     position: relative;
     background: var(--white);
     border-radius: var(--radius-md);
     padding: 22px 22px 22px 30px;
     color: var(--charcoal);
     /* Perforated edge: a column of little punched holes down the left side */
     background-image: radial-gradient(circle, var(--paper) 3px, transparent 3.2px);
     background-size: 16px 16px;
     background-position: 4px 6px;
     background-repeat: repeat-y;
   }
   .label-sheet::before {
     content: "";
     position: absolute;
     left: 16px; top: 0; bottom: 0;
     width: 1px;
     background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
   }
   
   .label-postage {
     display: flex;
     align-items: center;
     gap: 12px;
     padding-bottom: 16px;
     margin-bottom: 16px;
     border-bottom: 1px dashed var(--line);
   }
   .label-mark {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     flex-shrink: 0;
     border: 2px solid var(--stamp);
     border-radius: 50%;
     color: var(--stamp);
     font-family: var(--font-display);
     font-size: 1.4rem;
     transform: rotate(-8deg);
   }
   .label-postage strong {
     display: block;
     font-size: 0.72rem;
     letter-spacing: 0.03em;
   }
   .label-postage em {
     display: block;
     font-style: normal;
     font-family: var(--font-display);
     font-size: 1rem;
     color: var(--stamp);
   }
   .label-postage small {
     display: block;
     font-size: 0.72rem;
     color: var(--slate);
     margin-top: 2px;
   }
   
   .label-from, .label-to {
     padding-bottom: 14px;
     margin-bottom: 14px;
     border-bottom: 1px solid var(--line);
   }
   .label-from span, .label-to span {
     display: block;
     font-family: var(--font-mono);
     font-size: 0.66rem;
     letter-spacing: 0.1em;
     color: var(--slate);
     margin-bottom: 4px;
   }
   .label-from strong, .label-to strong {
     display: block;
     font-size: 0.94rem;
     margin-bottom: 2px;
   }
   .label-to strong { font-size: 1.05rem; }
   .label-from p, .label-to p {
     font-size: 0.86rem;
     color: var(--slate);
     line-height: 1.4;
   }
   
   .label-track span {
     display: block;
     font-family: var(--font-mono);
     font-size: 0.66rem;
     letter-spacing: 0.1em;
     color: var(--slate);
     margin-bottom: 6px;
   }
   .label-track code {
     display: block;
     font-size: 0.92rem;
     font-weight: 600;
     letter-spacing: 0.03em;
     margin-bottom: 10px;
   }
   .barcode {
     height: 34px;
     background-image: repeating-linear-gradient(
       to right,
       var(--charcoal) 0px, var(--charcoal) 2px,
       transparent 2px, transparent 3px,
       var(--charcoal) 3px, var(--charcoal) 4px,
       transparent 4px, transparent 7px,
       var(--charcoal) 7px, var(--charcoal) 9px,
       transparent 9px, transparent 10px
     );
     background-size: 22px 100%;
     background-repeat: repeat-x;
   }
   
   .label-card-foot {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 14px 10px 4px;
     font-family: var(--font-mono);
     font-size: 0.76rem;
     color: rgba(255, 255, 255, 0.7);
   }
   .ok-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #4ADE80;
     box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
   }
   
   /* == CARRIERS ================================================================ */
   .carrier-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px;
   }
   
   .carrier {
     background: var(--white);
     border: 1px solid var(--line);
     border-radius: var(--radius-lg);
     padding: 28px;
     box-shadow: var(--shadow-card);
   }
   
   .carrier-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border-radius: var(--radius-sm);
     font-family: var(--font-mono);
     font-weight: 700;
     font-size: 0.8rem;
     color: var(--white);
     margin-bottom: 16px;
   }
   .carrier-badge.usps { background: #0B3C74; }
   .carrier-badge.ups { background: #6B4A2E; }
   .carrier-badge.fdx { background: #4B3F72; }
   
   .carrier h3 {
     font-family: var(--font-display);
     font-size: 1.5rem;
     font-weight: 400;
     color: var(--ink);
     margin-bottom: 14px;
   }
   
   .carrier ul { margin-bottom: 20px; }
   .carrier ul li {
     padding: 7px 0;
     border-bottom: 1px solid var(--line);
     font-size: 0.92rem;
     color: var(--charcoal);
   }
   .carrier ul li:last-child { border-bottom: none; }
   
   .carrier dl { display: grid; gap: 8px; }
   .carrier dl div {
     display: flex;
     justify-content: space-between;
     font-size: 0.82rem;
   }
   .carrier dt { color: var(--slate); }
   .carrier dd { font-family: var(--font-mono); color: var(--ink); font-weight: 600; }
   
   /* == BULK UPLOAD ============================================================= */
   .bulk-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center;
   }
   
   .steps {
     display: grid;
     gap: 20px;
     margin: 32px 0;
   }
   .steps li {
     display: grid;
     grid-template-columns: 40px 1fr;
     gap: 16px;
     align-items: start;
   }
   .step-num {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: var(--ink);
     color: var(--white);
     font-family: var(--font-mono);
     font-weight: 600;
     font-size: 0.88rem;
   }
   .steps strong { display: block; color: var(--ink); margin-bottom: 2px; }
   .steps span { display: block; font-size: 0.9rem; color: var(--slate); }
   
   .bulk-panel {
     background: var(--white);
     border: 1px solid var(--line);
     border-radius: var(--radius-lg);
     padding: 26px;
     box-shadow: var(--shadow-card);
   }
   
   .bulk-head {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 22px;
   }
   .bulk-head strong { display: block; font-size: 1rem; color: var(--ink); }
   .bulk-head span { display: block; font-family: var(--font-mono); font-size: 0.8rem; color: var(--slate); margin-top: 2px; }
   
   .status-pill {
     font-family: var(--font-mono);
     font-size: 0.72rem;
     font-weight: 600;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: #1D8A4E;
     background: #E4F5EA;
     padding: 5px 12px;
     border-radius: 999px;
   }
   
   .bulk-stats {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
     margin-bottom: 20px;
   }
   .bulk-stats div {
     background: var(--paper);
     border-radius: var(--radius-md);
     padding: 14px 16px;
   }
   .bulk-stats strong {
     display: block;
     font-family: var(--font-mono);
     font-size: 1.4rem;
     color: var(--ink);
   }
   .bulk-stats span { display: block; font-size: 0.8rem; color: var(--slate); margin-top: 2px; }
   
   .progress {
     height: 8px;
     background: var(--line);
     border-radius: 999px;
     overflow: hidden;
     margin-bottom: 8px;
   }
   .progress-bar {
     height: 100%;
     background: var(--stamp);
     border-radius: 999px;
   }
   .progress-meta {
     font-family: var(--font-mono);
     font-size: 0.78rem;
     color: var(--slate);
     margin-bottom: 18px;
   }
   
   .bulk-errors { display: grid; gap: 8px; }
   .bulk-errors li {
     font-family: var(--font-mono);
     font-size: 0.8rem;
     color: var(--stamp);
     background: #FBEDE9;
     border-radius: var(--radius-sm);
     padding: 8px 12px;
   }
   
   /* == TRACKING ================================================================ */
   .track-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center;
   }
   
   .track-panel {
     background: var(--white);
     border: 1px solid var(--line);
     border-radius: var(--radius-lg);
     padding: 26px;
     box-shadow: var(--shadow-card);
   }
   
   .track-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-bottom: 18px;
     margin-bottom: 18px;
     border-bottom: 1px solid var(--line);
   }
   .track-head code {
     font-size: 0.86rem;
     font-weight: 600;
     color: var(--ink);
   }
   .carrier-mini {
     font-family: var(--font-mono);
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.04em;
     background: var(--ink);
     color: var(--white);
     padding: 4px 9px;
     border-radius: 999px;
   }
   
   .timeline {
     position: relative;
     display: grid;
     gap: 22px;
     padding-left: 26px;
   }
   .timeline::before {
     content: "";
     position: absolute;
     left: 5px; top: 4px; bottom: 4px;
     width: 1px;
     background: var(--line);
   }
   .timeline li { position: relative; }
   .timeline li::before {
     content: "";
     position: absolute;
     left: -26px; top: 3px;
     width: 11px; height: 11px;
     border-radius: 50%;
     background: var(--white);
     border: 2px solid var(--line);
   }
   .timeline li.done::before { border-color: var(--ink); background: var(--ink); }
   .timeline li.current::before {
     border-color: var(--stamp);
     background: var(--stamp);
     box-shadow: 0 0 0 4px rgba(193, 67, 46, 0.16);
   }
   .timeline strong { display: block; font-size: 0.94rem; color: var(--ink); }
   .timeline li.current strong { color: var(--stamp); }
   .timeline span {
     display: block;
     font-family: var(--font-mono);
     font-size: 0.78rem;
     color: var(--slate);
     margin-top: 2px;
   }
   
   /* == HOW IT WORKS ============================================================= */
   .how-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 28px;
   }
   .how-grid article {
     padding-top: 20px;
     border-top: 2px solid var(--ink);
   }
   .how-num {
     display: block;
     font-family: var(--font-mono);
     font-size: 0.85rem;
     font-weight: 700;
     color: var(--stamp);
     margin-bottom: 14px;
   }
   .how-grid h3 {
     font-family: var(--font-display);
     font-size: 1.3rem;
     font-weight: 400;
     color: var(--ink);
     margin-bottom: 8px;
   }
   .how-grid p { font-size: 0.92rem; color: var(--slate); }
   
   /* == PRICING ================================================================== */
   .pricing-grid {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 24px;
     align-items: stretch;
   }
   
   .price-card {
     background: var(--white);
     border: 1px solid var(--line);
     border-radius: var(--radius-lg);
     padding: 34px;
     box-shadow: var(--shadow-card);
   }
   .price-card h3 {
     font-family: var(--font-display);
     font-size: 1.5rem;
     font-weight: 400;
     color: var(--ink);
     margin-bottom: 6px;
   }
   .price-tag {
     font-family: var(--font-mono);
     font-size: 0.82rem;
     color: var(--slate);
     margin-bottom: 22px;
   }
   
   .price-list { display: grid; gap: 10px; margin-bottom: 20px; }
   .price-list li {
     position: relative;
     padding-left: 20px;
     font-size: 0.94rem;
     color: var(--charcoal);
   }
   .price-list li::before {
     content: "";
     position: absolute;
     left: 0; top: 8px;
     width: 7px; height: 7px;
     border-radius: 50%;
     background: var(--stamp);
   }
   
   .price-note {
     font-size: 0.86rem;
     color: var(--slate);
     padding-top: 16px;
     border-top: 1px dashed var(--line);
   }
   
   .price-card-accent {
     background: var(--ink);
     border-color: var(--ink);
     color: var(--white);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   .price-card-accent h3 { color: var(--white); }
   .price-card-accent .price-tag { color: var(--gold); }
   .price-card-accent p { color: rgba(255, 255, 255, 0.78); font-size: 0.94rem; margin-bottom: 24px; }
   
   .price-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
   
   /* == API ======================================================================= */
   .section-api {
     background: linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 100%);
     padding: 100px 0;
   }
   
   .api-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 56px;
     align-items: center;
   }
   
   .code-panel {
     background: rgba(0, 0, 0, 0.28);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: var(--radius-lg);
     padding: 26px;
     overflow-x: auto;
     box-shadow: var(--shadow-lift);
   }
   .code-panel code {
     display: block;
     font-size: 0.86rem;
     line-height: 1.7;
     color: #E8F0FA;
     white-space: pre;
   }
   .c-muted { color: rgba(232, 240, 250, 0.45); }

   /* == HERO PANEL ============================================================ */
   .hero-actions,
   .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
   .hero-stats { display: grid; gap: 14px; max-width: 42rem; }
   .hero-stats li {
     display: flex;
     gap: 12px;
     align-items: baseline;
     font-size: 0.96rem;
     color: var(--slate);
   }
   .hero-stats strong { color: var(--ink); font-weight: 700; }

   .hero-panel {
     padding: 28px;
     border-radius: var(--radius-lg);
     background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9));
     border: 1px solid rgba(10, 37, 64, 0.08);
     box-shadow: var(--shadow-card);
   }
   .panel-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     border-radius: 999px;
     color: var(--ink);
     background: rgba(10, 37, 64, 0.05);
     font-family: var(--font-mono);
     font-size: 0.78rem;
     margin-bottom: 22px;
   }
   .hero-card {
     display: grid;
     gap: 18px;
     padding: 22px;
     border-radius: var(--radius-md);
     background: var(--white);
     border: 1px solid var(--line);
   }
   .hero-card-compact {
     padding: 18px 20px;
   }
   .hero-card-head {
     display: flex;
     justify-content: space-between;
     gap: 14px;
     align-items: flex-start;
     color: var(--ink);
   }
   .hero-card-head span { color: var(--slate); font-size: 0.88rem; }
   .hero-card-head strong { font-size: 1rem; }
   .hero-card-copy p {
     margin: 0;
     font-size: 0.95rem;
     color: var(--slate);
   }
   .hero-card-copy strong { display: block; margin-bottom: 4px; color: var(--ink); }
   .hero-code {
     padding: 14px 16px;
     border-radius: var(--radius-sm);
     background: var(--paper);
     font-family: var(--font-mono);
     font-size: 0.85rem;
     color: var(--ink);
     overflow-x: auto;
   }

   .label-animation {
     position: relative;
     display: grid;
     gap: 16px;
     padding: 18px 0 12px;
   }
   .label-box {
     position: relative;
     padding: 18px 20px;
     border-radius: var(--radius-lg);
     background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,247,251,0.95));
     border: 1px solid rgba(10, 37, 64, 0.08);
     box-shadow: var(--shadow-card);
     overflow: hidden;
     animation: floatLabel 6s ease-in-out infinite;
   }
   .label-box::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at top left, rgba(12, 112, 240, 0.12), transparent 35%);
     pointer-events: none;
   }
   .label-box span.label-type {
     display: inline-flex;
     font-family: var(--font-mono);
     font-size: 0.82rem;
     color: var(--stamp);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     margin-bottom: 10px;
   }
   .label-box strong {
     display: block;
     font-size: 1.05rem;
     margin-bottom: 6px;
     color: var(--ink);
   }
   .label-box p {
     margin: 0;
     color: var(--slate);
     font-size: 0.95rem;
   }
   .label-box-1 { animation-delay: 0s; }
   .label-box-2 { animation-delay: 1.5s; }
   .label-box-3 { animation-delay: 3s; }
   @keyframes floatLabel {
     0%, 100% { transform: translateY(0); opacity: 1; }
     50% { transform: translateY(-8px); opacity: 0.96; }
   }

   .section-light { background: #f7fbff; }
   .visual-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
     gap: 46px;
     align-items: center;
   }
   .logo-visual {
     display: flex;
     flex-direction: column;
     gap: 28px;
     max-width: 460px;
   }
   .logo-frame {
     position: relative;
     width: 180px;
     height: 180px;
     margin-bottom: 0;
   }
   .logo-big {
     position: relative;
     z-index: 2;
     display: block;
     width: 120px;
     height: auto;
     margin: 0 auto;
   }
   .logo-ring {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     border: 4px solid rgba(10, 37, 64, 0.12);
     animation: spinRing 10s linear infinite;
   }
   .logo-glow {
     position: absolute;
     inset: 18px;
     border-radius: 50%;
     background: rgba(12, 112, 240, 0.18);
     filter: blur(18px);
     animation: pulseGlow 4s ease-in-out infinite;
   }
   .visual-copy .section-kicker {
     margin-bottom: 10px;
   }
   .label-showcase {
     display: grid;
     gap: 20px;
   }
   .label-card {
     position: relative;
     display: grid;
     gap: 18px;
     padding: 24px;
     border-radius: var(--radius-lg);
     background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(242,247,255,0.98));
     border: 1px solid rgba(10, 37, 64, 0.1);
     box-shadow: var(--shadow-card);
     animation: floatShowcase 7s ease-in-out infinite;
   }
   .label-card-1 { animation-delay: 0s; }
   .label-card-2 { animation-delay: 1.2s; animation-duration: 7.8s; }
   .label-card-3 { animation-delay: 2.5s; animation-duration: 8.6s; }
   .label-head {
     display: flex;
     justify-content: space-between;
     gap: 12px;
     align-items: flex-start;
   }
   .label-head span {
     font-family: var(--font-mono);
     font-size: 0.82rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--stamp);
   }
   .label-head strong {
     color: var(--ink);
     font-size: 1rem;
   }
   .label-body {
     display: grid;
     gap: 10px;
   }
   .label-line {
     width: 100%;
     height: 10px;
     border-radius: 999px;
     background: rgba(10, 37, 64, 0.08);
   }
   .label-line.short { width: 54%; }
   .label-barcode {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
     gap: 8px;
   }
   .label-barcode span {
     display: block;
     height: 36px;
     border-radius: 6px;
     background: rgba(10, 37, 64, 0.22);
   }
   @keyframes spinRing {
     to { transform: rotate(360deg); }
   }
   @keyframes pulseGlow {
     0%, 100% { opacity: 0.6; transform: scale(0.96); }
     50% { opacity: 1; transform: scale(1.05); }
   }
   @keyframes floatShowcase {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-10px); }
   }

   .feature-grid,
   .steps-grid,
   .why-grid,
   .testimonial-grid,
   .pricing-grid { display: grid; gap: 24px; }

   .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .feature-card,
   .step,
   .why-card,
   .testimonial,
   .pricing-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); }

   .feature-card h3,
   .step h3,
   .why-card h3,
   .pricing-card h3 {
     font-family: var(--font-display);
     font-size: 1.25rem;
     font-weight: 400;
     margin-bottom: 12px;
     color: var(--ink);
   }
   .feature-card p,
   .step p,
   .why-card p,
   .pricing-card p,
   .testimonial p { color: var(--slate); line-height: 1.65; }

   .steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .step-number {
     width: 38px;
     height: 38px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: var(--stamp);
     color: var(--white);
     font-family: var(--font-mono);
     font-weight: 700;
   }

   .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

   .testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .testimonial { display: flex; flex-direction: column; gap: 20px; }
   .testimonial p { font-size: 0.96rem; }
   .testimonial footer {
     margin-top: auto;
     font-family: var(--font-mono);
     font-size: 0.86rem;
     color: var(--ink);
   }

   .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
   .pricing-card {
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   .pricing-card strong { font-size: 1.7rem; color: var(--ink); }
   .pricing-card-highlight {
     background: var(--ink);
     border-color: var(--ink);
     color: var(--white);
   }
   .pricing-card-highlight h3,
   .pricing-card-highlight strong { color: var(--white); }
   .pricing-detail { color: rgba(255, 255, 255, 0.84); }
   .pricing-footnote { margin-top: 16px; color: var(--slate); font-size: 0.92rem; }

   .section-cta {
     background: var(--ink);
     padding: 90px 0;
     text-align: center;
   }
   .cta-box { max-width: 640px; margin: 0 auto; }
   .cta-box h2 {
     color: var(--white);
     margin-bottom: 12px;
   }
   .cta-box p { color: rgba(255, 255, 255, 0.78); margin-bottom: 28px; }

   .site-footer { background: #071729; color: rgba(255, 255, 255, 0.85); padding: 64px 0 28px; }
   .footer-inner {
     display: grid;
     grid-template-columns: 1.4fr 1fr 1fr;
     gap: 40px;
     align-items: start;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding-bottom: 36px;
     margin-bottom: 20px;
   }
   .footer-brand p { max-width: 32ch; color: rgba(255, 255, 255, 0.75); }
   .footer-links,
   .footer-contact { display: flex; flex-direction: column; gap: 10px; }
   .footer-links a,
   .footer-contact a { color: rgba(255, 255, 255, 0.8); }
   .footer-links a:hover,
   .footer-contact a:hover { color: var(--gold); }
   .footer-contact p { color: rgba(255, 255, 255, 0.65); }

   /* == RESPONSIVE updates ====================================================== */
   @media (max-width: 1000px) {
     .feature-grid,
     .steps-grid,
     .why-grid,
     .testimonial-grid,
     .pricing-grid { grid-template-columns: 1fr 1fr; }
     .hero-grid,
     .bulk-grid,
     .track-grid,
     .api-grid {
       grid-template-columns: 1fr;
     }
     .hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
     .carrier-grid { grid-template-columns: repeat(2, 1fr); }
     .how-grid { grid-template-columns: repeat(2, 1fr); }
     .pricing-grid { grid-template-columns: 1fr; }
     .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
   }
   @media (max-width: 780px) {
     .feature-grid,
     .steps-grid,
     .why-grid,
     .testimonial-grid,
     .pricing-grid { grid-template-columns: 1fr; }
     .footer-inner { grid-template-columns: 1fr; }
   }
   @media (max-width: 680px) {
     .section { padding: 64px 0; }
     .container { padding: 0 20px; }
     .nav-toggle { display: flex; }
     .nav {
       position: absolute;
       top: 76px;
       left: 0;
       right: 0;
       flex-direction: column;
       align-items: flex-start;
       gap: 0;
       background: var(--paper);
       border-bottom: 1px solid var(--line);
       padding: 8px 24px 16px;
       display: none;
     }
     .nav.is-open { display: flex; }
     .nav a { width: 100%; padding: 12px 0; }
     .header-actions .btn-ghost { display: none; }
     .carrier-grid { grid-template-columns: 1fr; }
     .how-grid { grid-template-columns: 1fr; }