/* dibsline.com: the one stylesheet (docs/SPEC.md, "Website").
   1. The fonts, served from this site (Fontsource 5.3.0, latin subset; each family's licence is beside its files).
   2. The design system's tokens.css and components/bundle.css, as exported with the approved design.
   3. Base rules from the pages' own styles in the design, plus focus, hidden and reduced motion.
   4. One utility class per inline style declaration of the design, so no page needs an inline style (the CSP allows none).
   5. What the site adds: touch targets of at least 44px and the connector addresses' Copy buttons. */

/* 1. Fonts */
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-semi-condensed/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-semi-condensed/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/barlow-semi-condensed/barlow-semi-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/public-sans/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/public-sans/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/public-sans/public-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Overpass Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/overpass-mono/overpass-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Overpass Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/overpass-mono/overpass-mono-latin-600-normal.woff2") format("woff2"); }

/* 2a. Design system: tokens.css */
/* Dibsline: generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #ffffff;
  --surface-sunk: #f3f2ee;
  --surface-raised: #ffffff;
  --line: #d9d7d0;
  --ink: #15171a;
  --ink-muted: #545a63;
  --marker: #ffd23f;
  --on-marker: #15171a;
  --mark-line: #f2f1ec;
  --marker-soft: #fff2bf;
  --focus: #15171a;
  --new: #1c7a45;
  --new-soft: #e3f4e9;
  --alert: #b42318;
  --alert-soft: #fde8e6;
  --link: var(--ink);
  --shadow-plate: 0 3px 0 0 #15171a;
}
[data-theme="dark"] {
  --surface: #121316;
  --surface-sunk: #1a1b1f;
  --surface-raised: #22242a;
  --line: #34363d;
  --ink: #f2f1ec;
  --ink-muted: #a8adb5;
  --marker: #ffd23f;
  --on-marker: #15171a;
  --mark-line: #f2f1ec;
  --marker-soft: #3b3311;
  --focus: #ffd23f;
  --new: #63d392;
  --new-soft: #133322;
  --alert: #ff8b7e;
  --alert-soft: #3a1714;
  --link: var(--ink);
  --shadow-plate: 0 3px 0 0 #000000;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 64px; font-weight: 800; letter-spacing: -0.01em; }
.display-l { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 800; }
.heading { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 700; }
.subheading { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 600; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; }
.record { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; }
.record-strong { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 600; }

/* 2b. Design system: components/bundle.css */
/* Dibsline components. Every value comes from tokens.css. */
.dl-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dl-focus:focus-visible, .dl-btn:focus-visible, .dl-source a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Wordmark: the mark, then "dibs" under a marker stroke, then "line". */
.dl-wordmark { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.dl-wordmark-text { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.dl-wordmark-sm .dl-wordmark-text { font-size: 22px; }
.dl-wordmark-md .dl-wordmark-text { font-size: 28px; }
.dl-wordmark-lg .dl-wordmark-text { font-size: 44px; }
.dl-wordmark-dibs { background: linear-gradient(transparent 52%, var(--marker) 52%, var(--marker) 92%, transparent 92%); padding: 0 1px; }
.dl-mark { display: block; flex: none; }
.dl-mark-tile { fill: var(--on-marker); }
.dl-mark-line { fill: var(--mark-line); }
.dl-mark-hit { fill: var(--marker); }

/* Buttons: primary is a marker plate with an ink border and a hard shadow. */
.dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: 700; text-decoration: none; cursor: pointer; border-radius: var(--radius-md); border: 2px solid var(--ink); min-height: 44px; padding: 0 var(--space-5); font-size: 16px; line-height: 1; white-space: nowrap; }
.dl-btn-lg { min-height: 52px; padding: 0 var(--space-6); font-size: 18px; }
.dl-btn-primary { background: var(--marker); color: var(--on-marker); border-color: var(--on-marker); box-shadow: var(--shadow-plate); }
.dl-btn-primary:hover { transform: translateY(1px); box-shadow: 0 2px 0 0 var(--on-marker); }
.dl-btn-secondary { background: transparent; color: var(--ink); }
.dl-btn-secondary:hover { background: var(--surface-sunk); }
.dl-btn-quiet { border-color: transparent; background: transparent; color: var(--link); padding: 0 var(--space-1); text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: 4px; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .dl-btn-primary:hover { transform: none; } }

/* Tags: always words; colour only repeats what the word says. */
.dl-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; line-height: 20px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.dl-tag-trade { text-transform: none; letter-spacing: 0; font-size: 13px; }
.dl-tag-new { background: var(--new-soft); color: var(--new); border-color: transparent; }
.dl-tag-alert { background: var(--alert-soft); color: var(--alert); border-color: transparent; }
.dl-tag-soon { background: transparent; color: var(--ink-muted); border-style: dashed; }
.dl-tag-marker { background: var(--marker); color: var(--on-marker); border-color: var(--on-marker); }
.dl-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Source line: where a record came from and when. */
.dl-source { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.dl-source a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.dl-source a:hover { color: var(--ink); text-decoration-color: var(--marker); }

/* Record card: one permit or one carrier, as Dibsline returns it. */
.dl-record { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); font-family: var(--font-sans); min-width: 0; }
.dl-record-claimed { background: var(--marker-soft); border: 2px solid var(--ink); }
.dl-record-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.dl-record-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-record-kind { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.dl-record-number { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.dl-record-title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 700; }
.dl-record-place { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.dl-record-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dl-record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.dl-record-claimed .dl-record-fields { border-top-color: var(--ink); }
.dl-record-field { min-width: 0; }
.dl-record-field dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.dl-record-field dd { margin: 2px 0 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }

/* Plan card: one plan on the pricing page. */
.dl-plan { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-5); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); font-family: var(--font-sans); min-width: 0; }
.dl-plan-featured { border: 2px solid var(--ink); box-shadow: var(--shadow-plate); }
.dl-plan-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.dl-plan-name { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 700; }
.dl-plan-for { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.dl-plan-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.dl-plan-amount { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dl-plan-unit { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.dl-plan-yearly { margin: -8px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.dl-plan-features { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; line-height: 22px; }
.dl-plan-features li { padding-left: 22px; position: relative; }
.dl-plan-features li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 6px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.dl-plan-cta { align-self: stretch; margin-top: auto; }
.dl-plan-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* The page. */
body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); }

/* 3. Base */
/* Links: ink text with a marker underline, from the design's page styles. :where() keeps these rules below every class,
   as they were below the design's inline styles (so a class colour holds on hover too). */
:where(a) { color: var(--ink); text-decoration-color: var(--marker); text-decoration-thickness: 3px; text-underline-offset: 3px; }
:where(a:hover) { color: var(--ink); }
/* The design system's focus ring on everything that takes focus. */
:where(a, button, [tabindex="0"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 4. Utilities: one per inline style declaration in the design files (the band on the home page, which the
   Worker writes, uses them too). Shorthands come first, so a longhand on the same element wins as it did inline. */
.bg-ink { background: var(--ink); }
.bg-marker { background: var(--marker); }
.bg-marker-soft { background: var(--marker-soft); }
.bg-on-marker { background: var(--on-marker); }
.bg-raised { background: var(--surface-raised); }
.bg-sunk { background: var(--surface-sunk); }
.bg-surface { background: var(--surface); }
.border-1-line { border: 1px solid var(--line); }
.border-2-ink { border: 2px solid var(--ink); }
.border-2-on-marker { border: 2px solid var(--on-marker); }
.flex-main { flex: 999 1 560px; }
.flex-side { flex: 1 1 220px; }
.m-0 { margin: 0; }
.m-0-0-4 { margin: 0 0 4px; }
.marker-stroke { background: linear-gradient(transparent 56%, var(--marker) 56%, var(--marker) 94%, transparent 94%); }
.mx-auto { margin: 0 auto; }
.p-0 { padding: 0; }
.p-0-2 { padding: 0 2px; }
.p-0-24 { padding: 0 24px; }
.p-0-32 { padding: 0 32px; }
.p-10-0 { padding: 10px 0; }
.p-12-16 { padding: 12px 16px; }
.p-14-0 { padding: 14px 0; }
.p-14-16 { padding: 14px 16px; }
.p-18-24 { padding: 18px 24px; }
.p-20-24 { padding: 20px 24px; }
.p-24 { padding: 24px; }
.p-24-28 { padding: 24px 28px; }
.p-28-24 { padding: 28px 24px; }
.p-32-28 { padding: 32px 28px; }
.p-48-24 { padding: 48px 24px; }
.p-48-40 { padding: 48px 40px; }
.p-56-24-40 { padding: 56px 24px 40px; }
.p-72-24-40 { padding: 72px 24px 40px; }
.p-72-24-88 { padding: 72px 24px 88px; }
.p-72-24-96 { padding: 72px 24px 96px; }
.p-88-24-0 { padding: 88px 24px 0; }
.p-88-24-96 { padding: 88px 24px 96px; }
.p-96-24 { padding: 96px 24px; }
.p-96-24-0 { padding: 96px 24px 0; }
.balance { text-wrap: balance; }
.bb-1-line { border-bottom: 1px solid var(--line); }
.bt-1-line { border-top: 1px solid var(--line); }
.bt-2-ink { border-top: 2px solid var(--ink); }
.bt-3-marker { border-top: 3px solid var(--marker); }
.c-ink { color: var(--ink); }
.c-marker { color: var(--marker); }
.c-muted { color: var(--ink-muted); }
.c-on-marker { color: var(--on-marker); }
.c-surface { color: var(--surface); }
.col { flex-direction: column; }
.col-reverse { flex-direction: column-reverse; }
.collapse { border-collapse: collapse; }
.cols-200-fixed { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cols-240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cols-250 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.cols-260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cols-300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cols-420 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cols-440 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.flex { display: flex; }
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.gap-4-16 { gap: 4px 16px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-8-28 { gap: 8px 28px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-12-16 { gap: 12px 16px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-16-32 { gap: 16px 32px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-24-56 { gap: 24px 56px; }
.gap-28 { gap: 28px; }
.gap-28-32 { gap: 28px 32px; }
.gap-32 { gap: 32px; }
.gap-32-56 { gap: 32px 56px; }
.gap-36 { gap: 36px; }
.gap-40 { gap: 40px; }
.gap-40-56 { gap: 40px 56px; }
.gap-40-64 { gap: 40px 64px; }
.gap-48 { gap: 48px; }
.gap-56 { gap: 56px; }
.grid { display: grid; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-end { align-items: end; }
.items-flex-start { align-items: flex-start; }
.items-start { align-items: start; }
.items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.lh-1 { line-height: 1; }
.lh-1-02 { line-height: 1.02; }
.lh-1-2 { line-height: 1.2; }
.lh-16 { line-height: 16px; }
.lh-18 { line-height: 18px; }
.lh-20 { line-height: 20px; }
.lh-22 { line-height: 22px; }
.lh-24 { line-height: 24px; }
.lh-26 { line-height: 26px; }
.lh-28 { line-height: 28px; }
.lh-30 { line-height: 30px; }
.lh-32 { line-height: 32px; }
.lh-34 { line-height: 34px; }
.lh-38 { line-height: 38px; }
.lh-40 { line-height: 40px; }
.lh-44 { line-height: 44px; }
.lh-48 { line-height: 48px; }
.lh-52 { line-height: 52px; }
.list-none { list-style: none; }
.maxw-30ch { max-width: 30ch; }
.maxw-30em { max-width: 30em; }
.maxw-32em { max-width: 32em; }
.maxw-34em { max-width: 34em; }
.maxw-36em { max-width: 36em; }
.maxw-40em { max-width: 40em; }
.maxw-46em { max-width: 46em; }
.maxw-60em { max-width: 60em; }
.maxw-760 { max-width: 760px; }
.maxw-1200 { max-width: 1200px; }
.minh-52 { min-height: 52px; }
.minw-0 { min-width: 0; }
.minw-760 { min-width: 760px; }
.mt-40 { margin-top: 40px; }
.no-underline { text-decoration: none; }
.opacity-80 { opacity: 0.8; }
.overflow-x-auto { overflow-x: auto; }
.pl-20 { padding-left: 20px; }
.pl-22 { padding-left: 22px; }
.pt-14 { padding-top: 14px; }
.pt-16 { padding-top: 16px; }
.pt-24 { padding-top: 24px; }
.pt-28 { padding-top: 28px; }
.rounded-lg { border-radius: 14px; }
.rounded-md { border-radius: 8px; }
.select-all { user-select: all; }
.self-flex-start { align-self: flex-start; }
.shadow-plate { box-shadow: var(--shadow-plate); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-15 { font-size: 15px; }
.text-16 { font-size: 16px; }
.text-17 { font-size: 17px; }
.text-18 { font-size: 18px; }
.text-20 { font-size: 20px; }
.text-22 { font-size: 22px; }
.text-24 { font-size: 24px; }
.text-26 { font-size: 26px; }
.text-28 { font-size: 28px; }
.text-30 { font-size: 30px; }
.text-34 { font-size: 34px; }
.text-36 { font-size: 36px; }
.text-44 { font-size: 44px; }
.text-52 { font-size: 52px; }
.text-contact { font-size: clamp(22px, 2.6vw, 32px); }
.text-hero { font-size: clamp(42px, 5vw, 68px); }
.text-left { text-align: left; }
.text-title { font-size: clamp(40px, 4.5vw, 60px); }
.tracking-label { letter-spacing: 0.06em; }
.tracking-tight { letter-spacing: -0.01em; }
.uppercase { text-transform: uppercase; }
.w-full { width: 100%; }
.wrap { flex-wrap: wrap; }
.wrap-anywhere { overflow-wrap: anywhere; }

/* 5. Site additions */
/* Touch targets of at least 44px. Standalone links get a 44px box; links inside a sentence keep the line height. */
.tap { display: inline-flex; align-items: center; min-height: 44px; }
.tap-end { display: inline-flex; align-items: flex-end; min-height: 44px; }
/* The wordmark link: a 44px box that takes no more room than the 28px wordmark. */
.tap-wordmark { padding-block: 8px; margin-block: -8px; }
/* The connector addresses' Copy buttons: small to see, with a 44px touch area. Hidden until copy.js shows them. */
.copy { position: relative; margin-left: 6px; padding: 1px 8px; vertical-align: 1px; font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--ink); border-radius: var(--radius-sm); cursor: pointer; }
.copy::before { content: ""; position: absolute; inset: -12px -6px; }
.copy:hover { background: var(--marker-soft); }