/* crewduo marketing site (Sept 2026 rehaul).
   One small design system on top of the Sneat/Bootstrap base the legal and status pages still use. Every new class is
   cd- prefixed so nothing collides with the vendor CSS. System fonts only - no web-font request. */

:root {
  --cd-green: #1d9e75;
  --cd-green-600: #17865f;
  --cd-green-700: #11694a;
  --cd-green-50: #e8f6f1;
  --cd-ink: #1f2a33;
  --cd-ink-2: #3b4a56;
  --cd-muted: #5f6f7b;
  --cd-line: #e3e8ec;
  --cd-bg: #ffffff;
  --cd-bg-soft: #f5f7f6;
  --cd-bg-dark: #14201c;
  --cd-red: #d52b1e;
  --cd-red-50: #fdeceb;
  --cd-amber: #b7791f;
  --cd-radius: 14px;
  --cd-radius-lg: 22px;
  --cd-shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 8px 24px rgba(16, 24, 32, .06);
  --cd-shadow-lg: 0 24px 60px rgba(16, 24, 32, .14);
  --cd-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-body-font-family: var(--cd-font);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body.cd-body {
  margin: 0;
  font-family: var(--cd-font);
  color: var(--cd-ink-2);
  background: var(--cd-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.cd-body h1, .cd-body h2, .cd-body h3, .cd-body h4 {
  font-family: var(--cd-font);
  color: var(--cd-ink);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.cd-body a { color: var(--cd-green-600); }
.cd-body a:hover { color: var(--cd-green-700); }

.cd-skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--cd-ink);
  color: #fff !important;
  padding: .5rem 1rem;
  z-index: 100;
}
.cd-skip:focus { left: 1rem; }

.cd-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Legal and status pages keep their Sneat markup; the sticky header replaces the old fixed navbar's offset. */
.cd-body .first-section-pt { padding-top: 3rem !important; }

/* ---------- Announcement bar ---------- */
.cd-announce {
  background: var(--cd-bg-dark);
  color: #e9f1ee;
  font-size: .875rem;
}
.cd-announce a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .5rem 0;
  color: #e9f1ee !important;
  text-decoration: none;
}
.cd-announce a:hover span { text-decoration: underline; }
/* A website announcement (AdminPanel > Announcements) in place of the Canada line. */
.cd-announce.is-promo { background: var(--cd-green-700); }
.cd-announce-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1rem; padding: .5rem 0; text-align: center; }
.cd-announce-promo a { display: inline-flex; padding: 0; font-weight: 600; }
.cd-promo-code { display: inline-flex; align-items: center; gap: .35rem; border: 1px dashed rgba(255, 255, 255, .7); background: transparent; color: inherit; border-radius: 6px; padding: .1rem .55rem; font: inherit; cursor: pointer; }
.cd-promo-code strong { letter-spacing: .06em; }
.cd-promo-code.is-copied::after { content: "Copied"; font-size: .75rem; opacity: .85; }
.cd-promo-code.is-lg { border-color: var(--cd-green); color: var(--cd-green-700); font-size: 1.05rem; padding: .45rem .9rem; margin: .25rem 0 1rem; }
.cd-splash { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(20, 32, 28, .55); }
.cd-splash[hidden] { display: none; }
.cd-splash-card { position: relative; max-width: 460px; width: 100%; background: var(--cd-bg); border-radius: var(--cd-radius-lg); padding: 2rem 1.75rem 1.5rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.cd-splash-card h2 { font-size: 1.4rem; margin: 0 2rem .75rem 0; }
.cd-splash-close { position: absolute; top: .75rem; right: .75rem; border: 0; background: transparent; font-size: 1.5rem; color: var(--cd-muted); cursor: pointer; }
.cd-splash-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

.cd-flag { display: inline-block; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.cd-flag.is-xs { width: 20px; height: 10px; }
.cd-flag.is-sm { width: 28px; height: 14px; }
.cd-flag.is-md { width: 56px; height: 28px; }
.cd-flag.is-lg { width: 120px; height: 60px; border-radius: 4px; }

/* ---------- Header ---------- */
.cd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.cd-header.is-scrolled { border-color: var(--cd-line); box-shadow: 0 4px 20px rgba(16, 24, 32, .05); }
.cd-header-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.cd-brand { display: inline-flex; align-items: center; }
.cd-brand .cd-wordmark { width: 132px !important; height: 25px !important; }

.cd-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.cd-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .55rem .85rem;
  border: 0;
  background: none;
  border-radius: 10px;
  color: var(--cd-ink) !important;
  font: 500 .95rem var(--cd-font);
  text-decoration: none;
  cursor: pointer;
}
.cd-nav-link:hover, .cd-nav-link.is-active { background: var(--cd-bg-soft); }
.cd-nav-cta { margin-left: .5rem; }
.cd-nav-item { position: relative; }

.cd-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-35%) translateY(6px);
  width: min(760px, 92vw);
  background: #fff;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius-lg);
  box-shadow: var(--cd-shadow-lg);
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s, transform .15s, visibility .15s;
}
.cd-nav-item.is-open .cd-menu { opacity: 1; visibility: visible; transform: translateX(-35%) translateY(0); }
.cd-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem; }
/* Never taller than the window: the Product menu has 13 entries, and on a laptop screen its last rows
   (AI receptionist, AI that does the admin, the footer links) used to sit below the bottom edge with no
   way to scroll to them. It scrolls inside itself instead, without scrolling the page behind it. */
@media (min-width: 992px) {
  .cd-menu { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
  /* The footer links (All features, By trade, Compare) stay pinned to the menu's bottom edge while its
     entries scroll, so a short laptop screen (a MacBook Air) never has to scroll to reach them. bottom:-1rem
     cancels the menu's own 1rem bottom padding so nothing shows through underneath. */
  .cd-menu-foot { position: sticky; bottom: -1rem; background: #fff; padding-bottom: .9rem; margin-bottom: -1rem; }
}
/* Short windows (laptop screens, under ~860px tall): tighter rows and descriptions cut to two lines, so the
   whole menu usually fits without scrolling at all. Full text is on each feature page. */
@media (min-width: 992px) and (max-height: 860px) {
  .cd-menu-link { padding: .5rem .75rem; }
  .cd-menu-link small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Wide screens: three columns, centred on the window rather than on the Product button, so the menu is
   about a third shorter and its edges can never leave the screen. */
@media (min-width: 1200px) {
  .cd-menu { position: fixed; top: 78px; left: 50%; width: min(1100px, calc(100vw - 48px)); transform: translateX(-50%) translateY(6px); }
  .cd-nav-item.is-open .cd-menu { transform: translateX(-50%) translateY(0); }
  .cd-menu-grid { grid-template-columns: repeat(3, 1fr); }
}
.cd-menu-link {
  display: flex;
  gap: .8rem;
  padding: .75rem;
  border-radius: 12px;
  color: var(--cd-ink-2) !important;
  text-decoration: none;
}
.cd-menu-link:hover { background: var(--cd-bg-soft); }
.cd-menu-link strong { display: block; color: var(--cd-ink); font-size: .95rem; }
.cd-menu-link small { display: block; color: var(--cd-muted); font-size: .8rem; line-height: 1.35; }
.cd-menu-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--cd-green-50);
  color: var(--cd-green-600);
  font-size: 1.25rem;
}
.cd-menu-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  padding: .75rem .75rem 0;
  border-top: 1px solid var(--cd-line);
  font-size: .875rem;
}
.cd-menu-foot a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; }

.cd-menu-toggle {
  display: none;
  margin-left: auto;
  border: 1px solid var(--cd-line);
  background: #fff;
  border-radius: 10px;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  color: var(--cd-ink);
}

/* ---------- Buttons ---------- */
.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .65rem 1.15rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font: 600 .95rem var(--cd-font);
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  white-space: nowrap;
}
.cd-btn:hover { transform: translateY(-1px); }
.cd-btn.is-lg { padding: .9rem 1.45rem; font-size: 1.02rem; }
.cd-btn.is-primary { background: var(--cd-green); color: #fff !important; }
.cd-btn.is-primary:hover { background: var(--cd-green-600); }
.cd-btn.is-ghost { background: #fff; border-color: var(--cd-line); color: var(--cd-ink) !important; }
.cd-btn.is-ghost:hover { border-color: #c9d3da; }
.cd-btn.is-light { background: #fff; color: var(--cd-green-700) !important; }
.cd-btn.is-outline-light { border-color: rgba(255, 255, 255, .55); color: #fff !important; }
.cd-btn.is-outline-light:hover { border-color: #fff; }
.cd-btn:focus-visible, .cd-nav-link:focus-visible { outline: 3px solid rgba(29, 158, 117, .45); outline-offset: 2px; }

/* ---------- Sections and type ---------- */
.cd-section { padding: 5.5rem 0; }
.cd-section.is-tight { padding: 3.5rem 0; }
.cd-section.is-soft { background: var(--cd-bg-soft); }
.cd-section.is-dark { background: var(--cd-bg-dark); color: #c9d8d2; }
.cd-section.is-dark h2, .cd-section.is-dark h3 { color: #fff; }

.cd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--cd-green-50);
  color: var(--cd-green-700);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cd-section.is-dark .cd-eyebrow { background: rgba(255, 255, 255, .08); color: #bfe6d8; }

.cd-display { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 800; margin: 0 0 1.25rem; }
.cd-h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; margin: 0 0 1rem; }
.cd-h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .5rem; }
.cd-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--cd-muted); margin: 0 0 2rem; max-width: 40rem; }
.cd-section-head { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.cd-section-head .cd-lead { margin-left: auto; margin-right: auto; }
.cd-highlight { color: var(--cd-green); }

/* ---------- Hero ---------- */
.cd-hero { padding: 4.5rem 0 5rem; background: radial-gradient(1200px 500px at 85% -10%, #e5f5ef 0%, rgba(229, 245, 239, 0) 60%), #fff; }
.cd-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; }
.cd-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.cd-hero-note { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9rem; color: var(--cd-muted); }
.cd-hero-note span { display: inline-flex; align-items: center; gap: .35rem; }
.cd-hero-note i { color: var(--cd-green); font-size: 1.1rem; }
.cd-hero-media { position: relative; }
.cd-hero-badge {
  position: absolute;
  left: -1.25rem;
  bottom: -1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--cd-shadow-lg);
  font-size: .9rem;
  color: var(--cd-ink);
}
.cd-hero-badge strong { display: block; }
.cd-hero-badge small { color: var(--cd-muted); }

/* ---------- Media slots ---------- */
.cd-media {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--cd-radius-lg);
  background: var(--cd-bg-soft);
  box-shadow: var(--cd-shadow);
}
.cd-media video, .cd-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-media.is-portrait { max-width: 340px; margin: 0 auto; border-radius: 34px; border: 10px solid var(--cd-ink); }
/* A real picture is shown whole, at its own proportions (its width and height attributes reserve the space). The phone bezel is for an empty
   portrait slot only: the pictures already contain their own phone. */
.cd-media.has-image img { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
.cd-media.is-portrait.has-image { border: 0; border-radius: 22px; background: transparent; box-shadow: none; }
.cd-media.is-empty {
  background:
    repeating-linear-gradient(135deg, rgba(29, 158, 117, .06) 0 12px, rgba(29, 158, 117, 0) 12px 24px),
    linear-gradient(160deg, #eef7f3, #f7f9f8);
  border: 1px dashed #b9d9cc;
}
.cd-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--cd-green-700);
}
.cd-media-placeholder > i { font-size: 2.6rem; opacity: .75; }
.cd-media-kind { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cd-media-kind code { text-transform: none; color: var(--cd-green-700); background: rgba(255, 255, 255, .7); padding: .1rem .35rem; border-radius: 6px; }
.cd-media-brief { max-width: 30rem; font-size: .85rem; color: var(--cd-ink-2); }

/* ---------- Trades strip ---------- */
.cd-trades { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.cd-trade {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid var(--cd-line);
  border-radius: 999px;
  background: #fff;
  color: var(--cd-ink-2);
  font-weight: 500;
  font-size: .92rem;
}
.cd-trade i { color: var(--cd-green); font-size: 1.1rem; }

/* ---------- Steps ---------- */
.cd-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: step; margin-bottom: 3rem; }
.cd-step { position: relative; padding: 1.25rem; border-radius: var(--cd-radius); background: #fff; border: 1px solid var(--cd-line); }
.cd-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-weight: 800;
  color: #d6e2dd;
  font-size: 1.4rem;
}
.cd-step i { font-size: 1.6rem; color: var(--cd-green); }
.cd-step h3 { font-size: 1.05rem; margin: .6rem 0 .3rem; }
.cd-step p { margin: 0; font-size: .9rem; color: var(--cd-muted); }

/* ---------- Cards and grids ---------- */
.cd-grid { display: grid; gap: 1.25rem; }
.cd-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
.cd-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.cd-grid.is-4 { grid-template-columns: repeat(4, 1fr); }

.cd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  color: var(--cd-ink-2);
  text-decoration: none !important;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.cd-card:hover { border-color: #bfd9ce; box-shadow: var(--cd-shadow); transform: translateY(-2px); }
.cd-card p { margin: 0; color: var(--cd-muted); font-size: .95rem; }
.cd-card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--cd-green-50);
  color: var(--cd-green-600);
  font-size: 1.5rem;
}
.cd-card-more { margin-top: auto; padding-top: 1rem; font-weight: 600; color: var(--cd-green-600); display: inline-flex; align-items: center; gap: .3rem; }

.cd-feature { padding: 1.25rem; }
.cd-feature-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .5rem; }
.cd-feature-head i { font-size: 1.35rem; color: var(--cd-green-600); margin-top: .1rem; }
.cd-feature-head h3 { font-size: 1rem; margin: 0; }
.cd-feature-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .85rem; }

.cd-tier {
  display: inline-flex;
  align-items: center;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.cd-tier.is-free { background: var(--cd-green-50); color: var(--cd-green-700); }
.cd-tier.is-van { background: #eaf0fb; color: #2a4f97; }
.cd-tier.is-crew { background: #e9eefb; color: #31409a; }
.cd-tier.is-fleet { background: #eceaf7; color: #4a3d9c; }
.cd-tier.is-addon { background: #f4ecfb; color: #6b3e98; }
.cd-tier.is-soon { background: #fdf3e2; color: var(--cd-amber); }
.cd-tier.is-phone { background: var(--cd-bg-soft); color: var(--cd-ink-2); }

/* ---------- Split spotlight ---------- */
.cd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.cd-split + .cd-split { margin-top: 5.5rem; }
.cd-split.is-reversed .cd-split-media { order: -1; }
.cd-checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .65rem; }
.cd-checks li { display: flex; gap: .6rem; color: var(--cd-ink-2); }
.cd-checks li::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--cd-green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2317865f' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 11-11-1.4-1.4z'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* ---------- Canada band ---------- */
.cd-canada {
  position: relative;
  overflow: hidden;
  border-radius: var(--cd-radius-lg);
  background: linear-gradient(135deg, #fff 0%, #fff 55%, var(--cd-red-50) 100%);
  border: 1px solid #f1d6d3;
  padding: 3rem;
}
.cd-canada::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 240px;
  height: 240px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2400 0 4800 4800'%3E%3Cpath fill='%23d52b1e' opacity='.08' d='m4890 4430-45-863a95 95 0 0 1 111-98l859 151-116-320a65 65 0 0 1 20-73l941-762-212-99a65 65 0 0 1-34-79l186-572-542 115a65 65 0 0 1-73-38l-105-247-423 454a65 65 0 0 1-111-57l204-1052-327 189a65 65 0 0 1-91-27l-332-652-332 652a65 65 0 0 1-91 27l-327-189 204 1052a65 65 0 0 1-111 57l-423-454-105 247a65 65 0 0 1-73 38l-542-115 186 572a65 65 0 0 1-34 79l-212 99 941 762a65 65 0 0 1 20 73l-116 320 859-151a95 95 0 0 1 111 98l-45 863z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.cd-canada-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.cd-canada .cd-eyebrow { background: var(--cd-red-50); color: #a8231a; }
.cd-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cd-fact { padding: 1.1rem; background: #fff; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); }
.cd-fact strong { display: block; color: var(--cd-ink); font-size: 1rem; }
.cd-fact span { color: var(--cd-muted); font-size: .88rem; }
.cd-fact i { color: var(--cd-red); font-size: 1.3rem; margin-bottom: .35rem; display: block; }

/* ---------- Pricing ---------- */
.cd-pricing-toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: 2.5rem; }
.cd-segment { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--cd-bg-soft); border: 1px solid var(--cd-line); }
.cd-segment a, .cd-segment button {
  padding: .45rem .95rem;
  border: 0;
  background: none;
  border-radius: 9px;
  color: var(--cd-ink-2) !important;
  font: 600 .9rem var(--cd-font);
  text-decoration: none;
  cursor: pointer;
}
.cd-segment .is-active { background: #fff; color: var(--cd-ink) !important; box-shadow: 0 1px 3px rgba(16, 24, 32, .1); }
.cd-segment small { color: var(--cd-green-600); font-weight: 700; margin-left: .3rem; }

.cd-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 980px; margin: 0 auto; }
.cd-plan { padding: 2rem; border-radius: var(--cd-radius-lg); border: 1px solid var(--cd-line); background: #fff; display: flex; flex-direction: column; }
.cd-plan.is-featured { border: 2px solid var(--cd-green); box-shadow: var(--cd-shadow-lg); }
.cd-plan-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cd-plan-name { font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--cd-ink); }
.cd-plan-badge { padding: .25rem .65rem; border-radius: 999px; background: var(--cd-green); color: #fff; font-size: .75rem; font-weight: 700; }
.cd-plan-tag { color: var(--cd-muted); margin: .25rem 0 1.25rem; }
.cd-price { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .25rem; }
.cd-price-amount { font-size: 3rem; font-weight: 800; color: var(--cd-ink); letter-spacing: -.03em; }
.cd-price-unit { color: var(--cd-muted); }
.cd-price-note { font-size: .9rem; color: var(--cd-muted); min-height: 1.5rem; }
.cd-plan-cta { margin: 1.5rem 0; }
.cd-plan-cta .cd-btn { width: 100%; }
.cd-plan ul { margin-top: 0; }

.cd-seats { margin: 1.25rem 0 .25rem; padding: 1rem; border-radius: var(--cd-radius); background: var(--cd-bg-soft); }
.cd-seats-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; font-weight: 600; color: var(--cd-ink); }
.cd-seats-row output { font-size: 1.1rem; }
.cd-seats input[type=range] { width: 100%; accent-color: var(--cd-green); }
.cd-bundles { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.cd-bundle { padding: .2rem .55rem; border-radius: 8px; background: #fff; border: 1px solid var(--cd-line); font-size: .8rem; color: var(--cd-ink-2); }

.cd-table-wrap { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: #fff; }
.cd-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .95rem; }
/* Three short columns (the side-by-side plan tables on the compare pages): no 560px floor, which made each one
   14px wider than its half-page column and showed a scrollbar for nothing. Long prices wrap instead. */
.cd-table.is-compact { min-width: 0; }
.cd-table th, .cd-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--cd-line); text-align: left; vertical-align: top; }
.cd-table thead th { position: sticky; top: 0; background: #fff; color: var(--cd-ink); font-weight: 700; }
.cd-table td.is-center, .cd-table th.is-center { text-align: center; width: 18%; }
.cd-table .cd-table-group td { background: var(--cd-bg-soft); color: var(--cd-ink); font-weight: 700; }
.cd-table .bx-check { color: var(--cd-green); font-size: 1.35rem; }
.cd-table .cd-dash { color: #b3bec6; }
.cd-table tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.cd-faq { max-width: 820px; margin: 0 auto; display: grid; gap: .75rem; }
.cd-faq details { border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: #fff; padding: 0 1.25rem; }
.cd-faq summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 600; color: var(--cd-ink); display: flex; justify-content: space-between; gap: 1rem; }
.cd-faq summary::-webkit-details-marker { display: none; }
.cd-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--cd-green); }
.cd-faq details[open] summary::after { content: "-"; }
.cd-faq details p { margin: 0 0 1.1rem; color: var(--cd-muted); }

/* ---------- CTA ---------- */
.cd-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 3rem;
  border-radius: var(--cd-radius-lg);
  background: linear-gradient(135deg, var(--cd-green-700), var(--cd-green));
  color: #e9f7f1;
}
.cd-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .5rem; }
.cd-cta p { margin: 0; }
.cd-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; flex-shrink: 0; }

/* ---------- Page hero (features, canada) ---------- */
.cd-page-hero { padding: 4rem 0 3.5rem; background: linear-gradient(180deg, var(--cd-bg-soft), #fff); }
.cd-breadcrumb { font-size: .875rem; color: var(--cd-muted); margin-bottom: 1rem; }
.cd-breadcrumb a { text-decoration: none; }
.cd-pill-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.cd-pill-nav a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--cd-line);
  border-radius: 999px;
  background: #fff;
  color: var(--cd-ink-2) !important;
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
}
.cd-pill-nav a.is-active { border-color: var(--cd-green); color: var(--cd-green-700) !important; background: var(--cd-green-50); }

.cd-legend { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: .88rem; color: var(--cd-muted); margin-bottom: 1.5rem; }

.cd-residency { display: grid; gap: .75rem; }
.cd-residency-row { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: #fff; align-items: center; }
.cd-residency-row strong { color: var(--cd-ink); }
.cd-residency-row span { color: var(--cd-muted); font-size: .9rem; }
.cd-residency-where { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--cd-ink) !important; }

.cd-slot-list { display: grid; gap: .75rem; }
.cd-slot-row { display: grid; grid-template-columns: 180px 1fr; gap: 1.25rem; align-items: center; padding: 1rem; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: #fff; }
.cd-slot-row .cd-media { border-radius: 10px; box-shadow: none; }
.cd-slot-row .cd-media.is-portrait { border-width: 4px; border-radius: 14px; max-width: 90px; }
.cd-slot-row .cd-media-brief, .cd-slot-row .cd-media-kind { display: none; }

/* ---------- Free website promotion ---------- */
.cd-nav-free {
  margin-left: .35rem;
  padding: .08rem .42rem;
  border-radius: 999px;
  background: var(--cd-green);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.cd-website {
  padding: 3rem;
  border-radius: var(--cd-radius-lg);
  background: linear-gradient(135deg, var(--cd-green-50) 0%, #fff 60%);
  border: 1px solid #cfe8de;
}
.cd-website-price { display: flex; align-items: center; gap: 1rem; margin: -0.5rem 0 .5rem; }
.cd-website-price span:last-child { color: var(--cd-ink); font-weight: 600; line-height: 1.3; }
.cd-website-price small { color: var(--cd-muted); font-weight: 400; }
@media (max-width: 640px) {
  .cd-website { padding: 1.5rem; }
}

/* ---------- Footer ---------- */
.cd-footer { background: var(--cd-bg-dark); color: #b7c6c0; padding: 4rem 0 1.5rem; font-size: .92rem; }
.cd-footer a { color: #d5e2dd !important; text-decoration: none; }
.cd-footer a:hover { color: #fff !important; text-decoration: underline; }
.cd-footer-top { display: grid; grid-template-columns: 1.5fr repeat(6, minmax(0, 1fr)); gap: 1.75rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cd-footer-brand p { margin: 1rem 0; max-width: 22rem; }
.cd-footer-brand .cd-wordmark .cd-name { fill: #fff; }
.cd-footer-title { color: #fff !important; font-size: .8rem !important; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 1rem; }
.cd-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.cd-footer-canada { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.cd-footer-social { display: flex; gap: .75rem; margin-top: 1rem; font-size: 1.4rem; }
.cd-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-size: .85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cd-steps { grid-template-columns: repeat(3, 1fr); }
  .cd-grid.is-4 { grid-template-columns: repeat(2, 1fr); }
  .cd-footer-top { grid-template-columns: repeat(3, 1fr); }
  .cd-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
  .cd-menu-toggle { display: grid; place-items: center; }
  .cd-nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: 1rem 1.25rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--cd-line);
    box-shadow: var(--cd-shadow-lg);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    display: none;
  }
  .cd-nav.is-open { display: flex; }
  .cd-nav-link { justify-content: space-between; padding: .8rem; }
  .cd-nav-cta { margin: .5rem 0 0; }
  .cd-menu {
    position: static;
    transform: none !important;
    width: 100%;
    box-shadow: none;
    border: 0;
    padding: 0 0 .5rem;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .cd-nav-item.is-open .cd-menu { display: block; }
  .cd-menu-grid { grid-template-columns: 1fr; }
  .cd-menu-link small { display: none; }
  .cd-hero-grid, .cd-split, .cd-canada-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cd-split.is-reversed .cd-split-media { order: 0; }
  .cd-grid.is-3 { grid-template-columns: repeat(2, 1fr); }
  .cd-plans { grid-template-columns: 1fr; }
  .cd-cta { flex-direction: column; align-items: flex-start; }
  .cd-hero-badge { left: .75rem; bottom: .75rem; }
}

@media (max-width: 640px) {
  .cd-section { padding: 4rem 0; }
  .cd-steps, .cd-grid.is-2, .cd-grid.is-3, .cd-grid.is-4, .cd-facts { grid-template-columns: 1fr; }
  .cd-canada, .cd-cta, .cd-plan { padding: 1.5rem; }
  .cd-residency-row { grid-template-columns: 1fr; gap: .35rem; }
  /* On a phone the "Stored in Canada" card laid over the picture hid most of it: it goes under the picture instead. */
  .cd-hero-badge { position: static; margin-top: .75rem; box-shadow: var(--cd-shadow, 0 4px 14px rgba(0, 0, 0, .08)); }
  .cd-slot-row { grid-template-columns: 1fr; }
  .cd-footer-top { grid-template-columns: repeat(2, 1fr); }
  .cd-announce a span { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cd-btn, .cd-card, .cd-menu { transition: none; }
}

/* ---------- Pricing v2: four plans, the builder, add-on groups ---------- */
.cd-plans.is-4up { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 1rem; }
.cd-plans.is-4up .cd-plan { padding: 1.5rem 1.35rem; }
.cd-plans.is-4up .cd-price-amount { font-size: 2.4rem; }
.cd-plan-limits { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; font-size: .9rem; color: var(--cd-ink-2); }
.cd-plan-limits i { color: var(--cd-green-600); margin-right: .35rem; }
.cd-plan-inherits { margin: 0 0 .65rem; font-size: .85rem; font-weight: 700; color: var(--cd-ink); }
.cd-checks.is-tight { gap: .45rem; margin-top: 0; font-size: .9rem; }
.cd-checks.is-tight li::before { width: 1.05rem; height: 1.05rem; font-size: .7rem; }
.cd-plan .cd-card-more { padding-top: 1rem; font-size: .88rem; text-decoration: none; }

.cd-builder { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.5rem; align-items: start; }
.cd-builder-controls { display: grid; gap: 1.1rem; padding: 1.75rem; background: #fff; border: 1px solid var(--cd-line); border-radius: var(--cd-radius-lg); }
.cd-builder-row { display: grid; gap: .5rem; }
.cd-builder-row + .cd-builder-row { padding-top: 1.1rem; border-top: 1px solid var(--cd-line); }
.cd-builder-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cd-builder-label label { font-weight: 700; color: var(--cd-ink); }
.cd-builder-label output { font-weight: 700; color: var(--cd-green-700); }
.cd-builder input[type=range] { width: 100%; accent-color: var(--cd-green); }
.cd-builder-note { margin: 0; font-size: .85rem; color: var(--cd-muted); min-height: 1.2rem; }
.cd-ticks { display: flex; justify-content: space-between; font-size: .75rem; color: var(--cd-muted); font-weight: 600; }

.cd-choice { display: flex; flex-wrap: wrap; gap: .5rem; }
.cd-choice label { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid var(--cd-line); border-radius: 999px; cursor: pointer; font-size: .9rem; }
.cd-choice label:has(input:checked) { border-color: var(--cd-green); background: var(--cd-green-50); color: var(--cd-green-700); font-weight: 600; }
.cd-choice input { accent-color: var(--cd-green); }
.cd-choice small, .cd-switch small { color: var(--cd-muted); font-weight: 400; }

.cd-builder-row.is-switches { display: flex; flex-wrap: wrap; gap: .75rem; }
.cd-switch { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); cursor: pointer; font-size: .9rem; }
.cd-switch:has(input:checked) { border-color: var(--cd-green); background: var(--cd-green-50); }
.cd-switch input { accent-color: var(--cd-green); width: 1.05rem; height: 1.05rem; }
.cd-switch:has(input:disabled) { opacity: .55; cursor: not-allowed; }

.cd-bill { position: sticky; top: 90px; padding: 1.75rem; background: var(--cd-bg-dark); color: #c9d8d2; border-radius: var(--cd-radius-lg); display: grid; gap: .9rem; }
.cd-bill h3 { color: #fff; margin: 0; }
.cd-bill-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.cd-bill-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .92rem; }
.cd-bill-lines strong { display: block; color: #fff; font-weight: 600; }
.cd-bill-lines small { display: block; color: #8fa8a0; font-size: .78rem; line-height: 1.35; }
.cd-bill-lines b { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-bill-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .14); color: #fff; font-weight: 700; }
.cd-bill-total strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.cd-bill-total[hidden] { display: none; }
.cd-bill-note { margin: -.4rem 0 0; font-size: .82rem; color: #8fa8a0; }
.cd-bill-allowance:empty { display: none; }
.cd-bill-allowance h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; margin: .25rem 0 .5rem; }
.cd-bill-allowance dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; font-size: .85rem; }
.cd-bill-allowance dt { color: #8fa8a0; }
.cd-bill-allowance dd { margin: 0; color: #fff; text-align: right; }
.cd-bill-allowance dd small { display: block; color: #8fa8a0; font-size: .75rem; }
.cd-bill .cd-btn { width: 100%; justify-content: center; background: var(--cd-green); color: #fff !important; }
.cd-bill-foot { margin: 0; font-size: .78rem; color: #8fa8a0; }

.cd-addon-groups { display: grid; gap: 1.25rem; }
.cd-addon-group { padding: 1.75rem; border: 1px solid var(--cd-line); border-radius: var(--cd-radius-lg); background: #fff; }
.cd-addon-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.cd-addon-head h3 { margin-bottom: .25rem; }
.cd-addon-head p { margin: 0; color: var(--cd-muted); max-width: 46rem; font-size: .95rem; }
.cd-addon-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.cd-addon-option { padding: 1.15rem; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: var(--cd-bg-soft); display: flex; flex-direction: column; gap: .6rem; }
.cd-addon-option-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.cd-addon-option-head h4 { margin: 0; font-size: 1.02rem; color: var(--cd-ink); }
.cd-addon-option-head strong { color: var(--cd-ink); font-size: 1.15rem; }
.cd-addon-option-head span { display: block; font-size: .75rem; color: var(--cd-muted); text-align: right; }
.cd-addon-option p { margin: 0; font-size: .9rem; color: var(--cd-muted); }
.cd-allowances { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; padding-top: .6rem; border-top: 1px solid var(--cd-line); font-size: .85rem; }
.cd-allowances dt { color: var(--cd-muted); }
.cd-allowances dd { margin: 0; color: var(--cd-ink); text-align: right; font-weight: 600; }
.cd-overage { display: block; font-weight: 400; font-size: .78rem; color: var(--cd-muted); }
.cd-addon-foot { margin: auto 0 0; font-size: .8rem; color: var(--cd-muted); }

.cd-compare { display: grid; gap: .75rem; }
.cd-compare-group { border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: #fff; overflow: hidden; }
.cd-compare-group summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; font-weight: 700; color: var(--cd-ink); }
.cd-compare-group summary::-webkit-details-marker { display: none; }
.cd-compare-group summary i { color: var(--cd-green); margin-right: .4rem; }
.cd-compare-group summary small { color: var(--cd-muted); font-weight: 500; }
.cd-compare-group summary::after { content: "+"; color: var(--cd-green); font-size: 1.3rem; line-height: 1; }
.cd-compare-group[open] summary::after { content: "-"; }
.cd-compare-group .cd-table-wrap { border: 0; border-top: 1px solid var(--cd-line); border-radius: 0; }
.cd-compare-group .cd-table thead th { background: var(--cd-bg-soft); }

@media (max-width: 1100px) {
  .cd-plans.is-4up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-builder { grid-template-columns: 1fr; }
  .cd-bill { position: static; }
}

@media (max-width: 640px) {
  .cd-plans.is-4up { grid-template-columns: 1fr; }
  .cd-builder-controls, .cd-addon-group, .cd-bill { padding: 1.25rem; }
  .cd-addon-options { grid-template-columns: 1fr; }
}
.cd-addon-options:has(> :only-child) { grid-template-columns: minmax(230px, 420px); }

/* ---------- Content pages: trades, cities, comparisons (Oct 2026) ---------- */
.cd-muted { color: var(--cd-muted); }
.cd-split.is-top { align-items: start; }
.cd-side-card { align-self: center; }
.cd-side-card .cd-h3 { display: flex; align-items: center; gap: .5rem; }
.cd-side-card .cd-h3 i { color: var(--cd-green); font-size: 1.4rem; }
.cd-side-card .cd-checks { margin-top: .5rem; }
.cd-side-foot { margin-top: 1.25rem !important; padding-top: 1rem; border-top: 1px solid var(--cd-line); font-size: .9rem !important; }
.cd-card.is-accent { border-color: #bfe0d3; background: linear-gradient(180deg, var(--cd-green-50), #fff 60%); }
.cd-card .cd-checks { margin-top: 1rem; }
.cd-plan-line { font-weight: 700; color: var(--cd-ink) !important; margin: -.35rem 0 .6rem !important; }
.cd-link-card .cd-h3 { margin-top: .25rem; }
.cd-checks.is-neutral li::before {
  background: #eef1f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235f6f7b'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.cd-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.cd-chips-label { margin: 1.5rem 0 0; font-weight: 700; color: var(--cd-ink); }
.cd-chip {
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  border: 1px solid var(--cd-line);
  border-radius: 999px;
  background: #fff;
  font-size: .9rem;
  color: var(--cd-ink-2);
}
a.cd-chip.is-link { color: var(--cd-green-600); font-weight: 600; text-decoration: none; }
a.cd-chip.is-link:hover { border-color: #bfd9ce; background: var(--cd-green-50); }

.cd-related { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 2rem; justify-content: center; font-size: .95rem; }
.cd-related > span { color: var(--cd-muted); font-weight: 600; }
.cd-related a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; }
.cd-related + .cd-related { margin-top: .75rem; }

/* The short answer: the two or three sentences a skimmer - or an AI assistant - should leave with. */
.cd-answer {
  max-width: 52rem;
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.35rem;
  border-left: 4px solid var(--cd-green);
  border-radius: 0 var(--cd-radius) var(--cd-radius) 0;
  background: var(--cd-green-50);
}
.cd-answer strong { display: block; color: var(--cd-green-700); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .35rem; }
.cd-answer p { margin: 0; color: var(--cd-ink); font-size: 1.02rem; }

.cd-vs-table th[scope="row"] { color: var(--cd-ink); font-weight: 700; width: 24%; background: #fbfcfc; }
.cd-vs-table td { width: 38%; }
.cd-vs-table.is-wide td { width: auto; font-size: .9rem; }
.cd-vs-table.is-wide th[scope="row"] { width: 16%; }
.cd-vs-table td.is-edge { background: #f3faf7; }
.cd-vs-table td.is-edge .bxs-check-circle { color: var(--cd-green); font-size: 1.05rem; vertical-align: -2px; margin-right: .2rem; }
.cd-vs-table sup a { text-decoration: none; font-size: .72rem; margin-left: .15rem; }
.cd-vs-table.is-wide { min-width: 860px; }

.cd-numbered { padding-left: 1.25rem; margin: 1rem 0 0; display: grid; gap: .7rem; }
.cd-numbered li { padding-left: .25rem; }
.cd-numbered strong { color: var(--cd-ink); }

.cd-sources { max-width: 52rem; margin: 0 auto; padding: 1.5rem; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: #fbfcfc; font-size: .88rem; }
.cd-sources ol { margin: .75rem 0 1rem; padding-left: 1.25rem; display: grid; gap: .35rem; }
.cd-sources ol li:target { background: #fff6dd; }
.cd-sources p { margin: 0; color: var(--cd-muted); }

@media (max-width: 1100px) {
  .cd-footer-top { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .cd-vs-table th[scope="row"] { width: auto; }
  .cd-answer { padding: 1rem; }
  .cd-footer-top { grid-template-columns: repeat(2, 1fr); }
}
a.cd-trade { text-decoration: none; transition: border-color .15s, background .15s; }
a.cd-trade:hover { border-color: #bfd9ce; background: var(--cd-green-50); color: var(--cd-ink); }
/* A wide table inside a split or grid column scrolls in its own .cd-table-wrap instead of widening the page. */
.cd-split > *, .cd-grid > * { min-width: 0; }
.cd-checks li { overflow-wrap: anywhere; }

/* ---------- Walkthrough booking (/walkthrough, /walkthrough/manage) ---------- */
.cd-book-card { max-width: 860px; margin: 0 auto; padding: 2rem; }
.cd-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; flex-wrap: wrap; }
.cd-steps li { flex: 1 1 0; min-width: 110px; padding: .55rem .75rem; border-radius: 10px; background: var(--cd-bg-soft); color: var(--cd-muted); font-weight: 600; font-size: .92rem; }
.cd-steps li a { color: inherit !important; text-decoration: none; display: block; }
.cd-steps li.is-current { background: var(--cd-green); color: #fff; }
.cd-steps li.is-done { background: var(--cd-green-50); color: var(--cd-green-700); }
.cd-zone { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; font-size: .92rem; color: var(--cd-muted); }
.cd-zone select { border: 1px solid var(--cd-line); border-radius: 8px; padding: .35rem .6rem; font: inherit; color: var(--cd-ink); background: #fff; }
.cd-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.cd-day-name { text-align: center; font-size: .8rem; font-weight: 600; color: var(--cd-muted); padding-bottom: .15rem; }
.cd-day { min-height: 64px; border-radius: 10px; border: 1px solid var(--cd-line); padding: .45rem; display: flex; flex-direction: column; justify-content: space-between; color: #b3bec6; font-size: .85rem; }
.cd-day.is-past { border-style: dashed; opacity: .4; }
.cd-day.is-open { border-color: var(--cd-green); background: var(--cd-green-50); color: var(--cd-green-700) !important; text-decoration: none; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease; }
.cd-day.is-open:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(29, 158, 117, .18); }
.cd-day-count { font-size: .75rem; font-weight: 500; }
.cd-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin-top: .75rem; }
.cd-time { display: block; text-align: center; padding: .7rem .5rem; border: 1px solid var(--cd-green); border-radius: 10px; color: var(--cd-green-700) !important; font-weight: 600; text-decoration: none; }
.cd-time:hover { background: var(--cd-green); color: #fff !important; }
.cd-book-when { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .75rem 1rem; border-radius: 10px; background: var(--cd-green-50); color: var(--cd-ink); }
.cd-book-form { margin-top: 1rem; }
.cd-book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-bottom: 1rem; }
.cd-book-grid label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .92rem; color: var(--cd-ink); }
.cd-book-grid label small { font-weight: 400; color: var(--cd-muted); }
.cd-book-grid label.is-wide { grid-column: 1 / -1; }
.cd-book-grid input, .cd-book-grid textarea { border: 1px solid var(--cd-line); border-radius: 8px; padding: .6rem .7rem; font: inherit; font-weight: 400; color: var(--cd-ink); }
.cd-book-grid input:focus, .cd-book-grid textarea:focus { outline: 3px solid rgba(29, 158, 117, .25); border-color: var(--cd-green); }
.cd-book-fax { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cd-check { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: 1.1rem; font-size: .92rem; }
.cd-check input { margin-top: .25rem; }
.cd-book-problem { padding: .75rem 1rem; border-radius: 10px; background: #fdecec; color: #8a1f1f; margin-bottom: 1rem; }
.cd-small { font-size: .85rem; margin-top: .6rem; }
@media (max-width: 640px) {
  .cd-book-card { padding: 1.25rem; }
  .cd-days { gap: .3rem; }
  .cd-day { min-height: 52px; padding: .3rem; font-size: .75rem; }
  .cd-day-count { display: none; }
  .cd-book-grid { grid-template-columns: 1fr; }
}

/* Cookie consent bar (Google Analytics / Ads, only when the tag is on). Below the splash (z 200), which is dismissed first. */
.cd-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 190; max-width: 640px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem 1.25rem; background: var(--cd-bg); color: var(--cd-ink); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow-lg); }
.cd-consent[hidden] { display: none; }
.cd-consent p { flex: 1 1 280px; margin: 0; font-size: .9rem; color: var(--cd-ink-2); }
.cd-consent-actions { display: flex; gap: .5rem; margin-left: auto; }
.cd-consent-actions .cd-btn { padding-top: .5rem; padding-bottom: .5rem; }

/* Blog (/blog, /blog/{slug}): the list's cards and a readable article column. The article body is the API's rendered
   Markdown (h2-h6, lists, tables, pictures with their own width/height), so it is styled by element inside .cd-article-body. */
.cd-pill-nav a.is-active { background: var(--cd-green-50); border-color: var(--cd-green); color: var(--cd-green-700) !important; }
.cd-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem; }
.cd-blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); overflow: hidden; text-decoration: none; color: var(--cd-ink); transition: box-shadow .15s, transform .15s; }
.cd-blog-card:hover { box-shadow: var(--cd-shadow); transform: translateY(-2px); color: var(--cd-ink); }
.cd-blog-card img, .cd-blog-card-blank { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.cd-blog-card-blank { display: flex; align-items: center; justify-content: center; background: var(--cd-green-50); color: var(--cd-green); font-size: 2.5rem; }
.cd-blog-card-body { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.cd-blog-card-body h3 { font-size: 1.15rem; font-weight: 700; margin: 0; line-height: 1.35; }
.cd-blog-card-body p { margin: 0; color: var(--cd-muted); font-size: .95rem; }
.cd-blog-card-tag { align-self: flex-start; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cd-green-700); }
.cd-blog-card-meta { margin-top: auto; padding-top: .5rem; font-size: .85rem; color: var(--cd-muted); }
.cd-blog-more { background: var(--cd-bg-soft); padding: 3.5rem 0; }
.cd-blog-preview-bar { background: #fff8e6; border-bottom: 1px solid #f1d58a; color: #6b4e00; font-size: .9rem; padding: .6rem 0; }

.cd-article-container { max-width: 760px; }
.cd-article-head { padding: 3.5rem 0 1.5rem; background: linear-gradient(180deg, var(--cd-bg-soft), #fff); }
.cd-article-title { font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 800; line-height: 1.15; margin: 0 0 1rem; }
.cd-article-head .cd-lead { margin-bottom: 1.25rem; }
.cd-article-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.cd-article-tags a { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cd-green-700); background: var(--cd-green-50); padding: .2rem .55rem; border-radius: 999px; text-decoration: none; }
.cd-article-meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .9rem; color: var(--cd-muted); }
.cd-article-cover { width: 100%; height: auto; border-radius: var(--cd-radius); margin: .5rem 0 1.5rem; }
.cd-article-body { font-size: 1.075rem; line-height: 1.75; color: var(--cd-ink-2); padding-bottom: 1rem; }
.cd-article-body > * + * { margin-top: 1.1em; }
.cd-article-body p, .cd-article-body ul, .cd-article-body ol, .cd-article-body blockquote, .cd-article-body pre, .cd-article-body table { margin-bottom: 0; }
.cd-article-body h2 { font-size: 1.6rem; font-weight: 800; color: var(--cd-ink); margin-top: 2.2em; line-height: 1.25; scroll-margin-top: 90px; }
.cd-article-body h3 { font-size: 1.25rem; font-weight: 700; color: var(--cd-ink); margin-top: 1.8em; scroll-margin-top: 90px; }
.cd-article-body h4 { font-size: 1.05rem; font-weight: 700; color: var(--cd-ink); margin-top: 1.5em; }
.cd-article-body a { color: var(--cd-green-700); text-underline-offset: 2px; }
.cd-article-body img { max-width: 100%; height: auto; border-radius: var(--cd-radius); display: block; margin: 1.5em auto; }
.cd-article-body li + li { margin-top: .35em; }
.cd-article-body blockquote { border-left: 4px solid var(--cd-green); background: var(--cd-bg-soft); padding: .9rem 1.2rem; border-radius: 0 var(--cd-radius) var(--cd-radius) 0; color: var(--cd-ink); }
.cd-article-body code { background: var(--cd-bg-soft); padding: .1em .35em; border-radius: 6px; font-size: .92em; }
.cd-article-body pre { background: var(--cd-bg-dark); color: #e6f2ed; padding: 1rem 1.2rem; border-radius: var(--cd-radius); overflow-x: auto; font-size: .9rem; }
.cd-article-body pre code { background: none; padding: 0; color: inherit; }
.cd-article-body table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.cd-article-body th, .cd-article-body td { border: 1px solid var(--cd-line); padding: .55rem .75rem; text-align: left; vertical-align: top; }
.cd-article-body th { background: var(--cd-bg-soft); color: var(--cd-ink); font-weight: 700; }
.cd-article-body hr { border: 0; border-top: 1px solid var(--cd-line); margin: 2.5em 0; }
@media (max-width: 640px) {
  .cd-article-head { padding-top: 2.25rem; }
  .cd-article-body { font-size: 1.02rem; }
}

/* Store badges for the field app (Pages/_Partials/_AppBadges.cshtml): black, rounded, the store mark and two lines of
   text, per Google's and Apple's badge guidelines. Kept one height so Play and App Store sit level side by side. */
.cd-store-badges { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.cd-store-badges.is-center { justify-content: center; }
.cd-store-badge { display: inline-flex; align-items: center; gap: .6rem; height: 48px; padding: 0 1rem 0 .8rem; background: #000; color: #fff !important; border: 1px solid #a6a6a6; border-radius: 9px; text-decoration: none !important; line-height: 1.1; transition: transform .15s, box-shadow .15s; }
.cd-store-badge:hover { color: #fff !important; transform: translateY(-1px); box-shadow: var(--cd-shadow); }
.cd-store-badge-mark { width: 24px; height: 24px; flex: none; font-size: 26px; line-height: 24px; }
.cd-store-badge-text { display: flex; flex-direction: column; }
.cd-store-badge-text small { font-size: .62rem; letter-spacing: .04em; }
.cd-store-badge-text strong { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
.cd-footer-app { margin-top: 1.25rem; }
.cd-footer-app .cd-footer-title { margin-bottom: .75rem; }
.cd-app-qr { display: inline-flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.25rem; background: #fff; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow); }
.cd-app-qr img { width: 180px; height: 180px; display: block; }
.cd-app-qr span { font-size: .9rem; color: var(--cd-muted); }
/* The footer's own link colour (.cd-footer a) would otherwise grey the badge text. */
.cd-footer a.cd-store-badge, .cd-footer a.cd-store-badge:hover { color: #fff !important; }
.cd-footer .cd-footer-title a { color: #fff !important; }
.cd-hero-grid .cd-store-badges { margin-top: 1.75rem; }
/* The QR code is for a desktop visitor to hand the page to their phone; on a phone it is noise. */
@media (max-width: 767.98px) {
  .cd-app-qr-wrap { display: none; }
}
.cd-store-badges + .cd-hero-note { margin-top: 1.25rem; }
/* The brand stays lowercase inside an uppercase heading. */
.cd-keep-case { text-transform: none; }