/* ===== Northlane — the demo stand =====
   A fictional product site we control, used to record real Handoff material:
   walkthroughs captured by the CLI and pins filed by the agent. It is NOT our
   product and must never look like it — own palette, own type, system fonts.

   Deliberate defects live in here (see DEFECTS.md next to this file). They are
   the things the demo pins point at, so every pin on the stand is true:
   the Pro plan's button really does have poor contrast, the signup form really
   has no inline error, and the header link really wraps at 768px. Fixing one
   without re-recording makes the pin lie — the stand and its recordings are
   re-shot together. */

:root{
  --nl-ink:#12202B;
  --nl-body:#4A5B68;
  --nl-line:#E1E7EC;
  --nl-bg:#F7F9FB;
  --nl-accent:#0E7C7B;
  --nl-accent-dark:#0A5F5E;
  --nl-warn:#B3541E;
  --nl-radius:10px;
  --nl-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nl-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--nl-font);color:var(--nl-ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.nl-wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* header */
.nl-head{border-bottom:1px solid var(--nl-line);background:#fff}
.nl-head .nl-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px}
.nl-logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-.01em}
.nl-logo i{width:20px;height:20px;border-radius:6px;background:var(--nl-accent);display:block;font-style:normal}
.nl-nav{display:flex;align-items:center;gap:22px;font-size:14.5px;color:var(--nl-body)}
.nl-nav a:hover{color:var(--nl-ink)}
/* DEFECT 3: at 768px "Shipment history" wraps onto a second line and pushes the
   sign-in button out of the row. Kept on purpose — a demo pin points at it. */
@media(max-width:820px){
  .nl-head .nl-wrap{flex-wrap:wrap}
  .nl-nav{gap:14px;font-size:14px}
}

/* buttons */
.nl-btn{display:inline-block;font-weight:600;font-size:15px;padding:11px 22px;border-radius:8px;border:0;cursor:pointer;font-family:inherit}
.nl-btn-primary{background:var(--nl-accent);color:#fff}
.nl-btn-primary:hover{background:var(--nl-accent-dark)}
.nl-btn-line{border:1px solid var(--nl-line);background:#fff;color:var(--nl-ink)}
.nl-btn-sm{font-size:14px;padding:8px 16px}

/* hero + sections */
.nl-hero{padding:72px 0 56px;background:var(--nl-bg);border-bottom:1px solid var(--nl-line)}
.nl-hero h1{font-size:clamp(30px,4.4vw,44px);line-height:1.12;letter-spacing:-.02em;max-width:16ch}
.nl-hero p{margin-top:16px;font-size:18px;color:var(--nl-body);max-width:52ch}
.nl-hero .nl-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.nl-section{padding:56px 0}
.nl-section h2{font-size:24px;letter-spacing:-.01em;margin-bottom:8px}
.nl-section .nl-sub{color:var(--nl-body);margin-bottom:28px}

/* pricing */
.nl-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nl-plan{border:1px solid var(--nl-line);border-radius:var(--nl-radius);padding:24px 22px;background:#fff}
.nl-plan h3{font-size:16px;margin-bottom:6px}
.nl-plan .nl-price{font-size:30px;font-weight:700;letter-spacing:-.02em}
.nl-plan .nl-price span{font-size:14px;font-weight:400;color:var(--nl-body)}
.nl-plan ul{list-style:none;margin:18px 0 22px;font-size:14.5px;color:var(--nl-body)}
.nl-plan li{padding:5px 0 5px 20px;position:relative}
.nl-plan li::before{content:"·";position:absolute;left:6px;color:var(--nl-accent);font-weight:700}
.nl-plan.is-featured{border-color:var(--nl-accent)}
/* DEFECT 1: the Pro plan's CTA renders pale grey on a pale mint fill — about
   1.9:1, well under WCAG AA. This is the pin used in the bug-report demo. */
.nl-btn-pro{background:#D8EEEE;color:#9FBDBD;font-weight:600;font-size:15px;padding:11px 22px;border-radius:8px;border:0;cursor:pointer;font-family:inherit;width:100%}

/* forms */
.nl-form{max-width:420px}
.nl-field{margin-bottom:18px}
.nl-field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.nl-field input{width:100%;font-family:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--nl-line);border-radius:8px;background:#fff;color:var(--nl-ink)}
.nl-field input:focus{outline:2px solid var(--nl-accent);outline-offset:1px}
.nl-field .nl-hint{margin-top:6px;font-size:13px;color:var(--nl-body)}
.nl-formnote{margin-top:14px;font-size:13.5px;color:var(--nl-body)}

/* dashboard */
.nl-app{display:grid;grid-template-columns:200px 1fr;gap:28px;padding:32px 0 72px;align-items:start}
.nl-side{display:flex;flex-direction:column;gap:2px;font-size:14.5px;color:var(--nl-body)}
.nl-side a{padding:8px 10px;border-radius:7px}
.nl-side a.is-on{background:var(--nl-bg);color:var(--nl-ink);font-weight:600}
.nl-table{width:100%;border-collapse:collapse;font-size:14.5px}
.nl-table th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--nl-body);padding:0 14px 10px 0;border-bottom:1px solid var(--nl-line)}
.nl-table td{padding:13px 14px 13px 0;border-bottom:1px solid var(--nl-line)}
.nl-table td:first-child{font-family:var(--nl-mono);font-size:13px}
.nl-tag{display:inline-block;font-size:12.5px;font-weight:600;border-radius:6px;padding:3px 9px}
.nl-tag.is-transit{background:#E8F2F2;color:var(--nl-accent-dark)}
.nl-tag.is-held{background:#FBEEE6;color:var(--nl-warn)}
.nl-tag.is-done{background:#EDF1F4;color:var(--nl-body)}
/* DEFECT 4: an empty list says "no data" — the copy the design pin objects to */
.nl-empty{border:1px dashed var(--nl-line);border-radius:var(--nl-radius);padding:34px 22px;text-align:center;color:var(--nl-body);font-size:14.5px}

/* checkout */
.nl-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
.nl-panel{border:1px solid var(--nl-line);border-radius:var(--nl-radius);padding:22px}
.nl-panel h3{font-size:15px;margin-bottom:14px}
.nl-summary{background:var(--nl-bg)}
.nl-sumrow{display:flex;justify-content:space-between;font-size:14.5px;padding:7px 0;color:var(--nl-body)}
.nl-sumrow.is-total{border-top:1px solid var(--nl-line);margin-top:8px;padding-top:12px;color:var(--nl-ink);font-weight:700}

/* footer */
.nl-foot{border-top:1px solid var(--nl-line);padding:26px 0;font-size:13.5px;color:var(--nl-body);margin-top:40px}
.nl-foot .nl-wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

@media(max-width:860px){
  .nl-plans{grid-template-columns:1fr}
  .nl-app{grid-template-columns:1fr}
  .nl-cols{grid-template-columns:1fr}
}