/* =====================================================================
   DOT PREMIUM DESIGN SYSTEM — 2026
   Loaded last on every public page. It aligns the entire Dot website to
   one visual language without changing page logic, forms or JavaScript.
   ===================================================================== */

:root {
  --dot-canvas: #f3f7f5;
  --dot-paper: #ffffff;
  --dot-ink: #102f2a;
  --dot-copy: #526c66;
  --dot-deep: #063b35;
  --dot-deeper: #032b27;
  --dot-teal: #0c665b;
  --dot-teal-bright: #1a8b7d;
  --dot-lime: #d7f75b;
  --dot-lime-soft: #efffc0;
  --dot-line: rgba(11, 92, 81, 0.16);
  --dot-line-dark: rgba(117, 215, 198, 0.22);
  --dot-amber: #f1a33a;
  --dot-radius-sm: 14px;
  --dot-radius: 22px;
  --dot-radius-lg: 32px;
  --dot-shadow-sm: 0 12px 32px rgba(3, 48, 42, 0.08);
  --dot-shadow: 0 26px 70px rgba(3, 48, 42, 0.13);
  --dot-shadow-dark: 0 32px 90px rgba(0, 20, 18, 0.32);
  --dot-grid:
    linear-gradient(rgba(123, 220, 202, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 220, 202, 0.045) 1px, transparent 1px);
  --dot-premium-hero:
    radial-gradient(circle at 78% 5%, rgba(215, 247, 91, 0.22), transparent 24rem),
    radial-gradient(circle at 16% 92%, rgba(24, 142, 125, 0.32), transparent 30rem),
    var(--dot-grid),
    linear-gradient(145deg, #032e2a 0%, #063f38 52%, #074a41 100%);
}

.premium-dot-site {
  --dot-bg: var(--dot-canvas);
  --dot-surface: var(--dot-paper);
  --dot-surface-strong: #e8f0ed;
  --dot-text: var(--dot-ink);
  --dot-muted: var(--dot-copy);
  --dot-primary: var(--dot-teal);
  --dot-primary-dark: var(--dot-deep);
  --dot-primary-soft: #dff2eb;
  --dot-emerald: var(--dot-teal-bright);
  --dot-mint: #dff8ef;
  --dot-highlight: var(--dot-lime);
  --dot-border: var(--dot-line);
  --dot-gradient-hero: var(--dot-premium-hero);
  --dot-gradient-panel: linear-gradient(145deg, var(--dot-deeper), var(--dot-deep));
  --navy: var(--dot-deep);
  --lime: var(--dot-lime);
  --lime-2: var(--dot-teal);
  --white: #fff;
  --grey: #e9f0ed;
  --text: var(--dot-ink);
  --muted: var(--dot-copy);
  --border: var(--dot-line);
  --shadow: var(--dot-shadow);
  background: var(--dot-canvas);
  color: var(--dot-ink);
  font-family: system-ui, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;  /* 23 Sep 2026: no web fonts on this site */
  letter-spacing: -0.006em;
}

.premium-dot-site *,
.premium-dot-site *::before,
.premium-dot-site *::after {
  box-sizing: border-box;
}

.premium-dot-site ::selection {
  background: var(--dot-lime);
  color: var(--dot-deeper);
}

.premium-dot-site a,
.premium-dot-site button,
.premium-dot-site input,
.premium-dot-site select,
.premium-dot-site textarea,
.premium-dot-site summary {
  -webkit-tap-highlight-color: transparent;
}

.premium-dot-site img {
  height: auto;
}

/* ---------- Header and navigation ---------- */

.premium-dot-site .site-header {
  background: rgba(3, 43, 39, 0.91);
  border-bottom: 1px solid rgba(146, 229, 212, 0.16);
  box-shadow: 0 10px 38px rgba(0, 24, 21, 0.18);
  backdrop-filter: blur(20px) saturate(145%);
}

.premium-dot-site .nav {
  min-height: 80px;
}

.premium-dot-site .brand {
  color: #fff;
}

.premium-dot-site .dot-brand-lockup {
  width: 54px;
  min-width: 54px;
  display: grid;
  justify-items: center;
  gap: 3px;
}

.premium-dot-site .dot-arrow {
  width: 30px;
  height: 21px;
  display: grid;
  grid-template-columns: repeat(3, 6px);
  grid-template-rows: repeat(3, 6px);
  gap: 1.5px;
  filter: drop-shadow(0 0 7px rgba(215, 247, 91, 0.34));
}

.premium-dot-site .dot-arrow i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
  background: linear-gradient(145deg, #ecff8a, var(--dot-lime));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.58),
    0 0 7px rgba(215, 247, 91, 0.3);
}

/* Approved seven-dot clarity arrow: 3 on top / 2 middle / 2 bottom. */
.premium-dot-site .dot-arrow i:nth-child(1) { grid-column: 1; grid-row: 1; }
.premium-dot-site .dot-arrow i:nth-child(2) { grid-column: 2; grid-row: 1; }
.premium-dot-site .dot-arrow i:nth-child(3) { grid-column: 3; grid-row: 1; }
.premium-dot-site .dot-arrow i:nth-child(4) { grid-column: 2; grid-row: 2; }
.premium-dot-site .dot-arrow i:nth-child(5) { grid-column: 3; grid-row: 2; }
.premium-dot-site .dot-arrow i:nth-child(6) { grid-column: 1; grid-row: 3; }
.premium-dot-site .dot-arrow i:nth-child(7) { grid-column: 3; grid-row: 3; }

.premium-dot-site .dot-wordmark {
  color: var(--dot-lime);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-shadow: 0 0 12px rgba(215, 247, 91, 0.24);
}

.premium-dot-site .brand-mark {
  min-width: 58px;
  height: 44px;
  border: 1px solid rgba(215, 247, 91, 0.48);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 40%),
    linear-gradient(135deg, var(--dot-lime), #aee849);
  color: var(--dot-deeper);
  box-shadow:
    0 10px 26px rgba(174, 232, 73, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.45);
}

.premium-dot-site .brand-tag,
.premium-dot-site .brand span:last-child {
  color: rgba(225, 245, 239, 0.7);
}

.premium-dot-site .brand-tag {
  display: none;
}

.premium-dot-site .nav-actions {
  gap: 2px;
}

.premium-dot-site .nav-actions a {
  color: rgba(238, 250, 247, 0.84);
  padding: 10px 13px;
  font-size: 0.88rem;
}

.premium-dot-site .nav-actions a:hover,
.premium-dot-site .nav-actions a:focus-visible {
  background: rgba(215, 247, 91, 0.12);
  color: var(--dot-lime);
  box-shadow: inset 0 0 0 1px rgba(215, 247, 91, 0.22);
}

.premium-dot-site .nav-actions .nav-cta {
  margin-left: 8px;
  background: linear-gradient(135deg, var(--dot-lime), #b9ec50);
  color: var(--dot-deeper);
  box-shadow: 0 10px 28px rgba(215, 247, 91, 0.16);
}

.premium-dot-site .nav-actions .nav-cta:hover,
.premium-dot-site .nav-actions .nav-cta:focus-visible {
  background: #fff;
  color: var(--dot-deeper);
  box-shadow: 0 12px 34px rgba(255, 255, 255, 0.16);
}

.premium-dot-site .nav-toggle {
  border: 1px solid rgba(215, 247, 91, 0.3);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

/* ---------- Typography and primary controls ---------- */

.premium-dot-site h1,
.premium-dot-site h2,
.premium-dot-site h3 {
  color: var(--dot-deep);
  font-weight: 850;
  text-wrap: balance;
}

.premium-dot-site h1 {
  font-size: clamp(2.55rem, 5.4vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.premium-dot-site h2 {
  font-size: clamp(2rem, 3.7vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.048em;
}

.premium-dot-site h3 {
  letter-spacing: -0.025em;
}

.premium-dot-site .lead {
  color: var(--dot-copy);
  line-height: 1.75;
}

.premium-dot-site .eyebrow {
  width: fit-content;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--dot-teal);
  font-size: 0.71rem;
  letter-spacing: 0.16em;
}

.premium-dot-site .eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 7px 0 0 -0.25px currentColor;
}

.premium-dot-site .hero .eyebrow,
.premium-dot-site .audit-section .eyebrow,
.premium-dot-site .contact-section .eyebrow,
.premium-dot-site .assessment-hero .eyebrow {
  color: var(--dot-lime);
}

.premium-dot-site .button {
  min-height: 52px;
  padding: 13px 22px;
  border-radius: 13px;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

.premium-dot-site .button:hover {
  transform: translateY(-2px);
}

.premium-dot-site .button-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--dot-lime), #b7eb4e);
  color: var(--dot-deeper);
  box-shadow: 0 14px 34px rgba(134, 190, 53, 0.21);
}

.premium-dot-site .button-primary:hover {
  background: #fff;
  color: var(--dot-deeper);
  box-shadow: 0 18px 42px rgba(3, 48, 42, 0.18);
}

.premium-dot-site .button-secondary,
.premium-dot-site .button-text {
  border-color: rgba(212, 245, 237, 0.28);
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  backdrop-filter: blur(8px);
}

.premium-dot-site .button-secondary:hover,
.premium-dot-site .button-text:hover {
  border-color: var(--dot-lime);
  background: rgba(215, 247, 91, 0.08);
  color: var(--dot-lime);
}

.premium-dot-site .button-secondary-dark,
.premium-dot-site .button-outline {
  border-color: rgba(10, 102, 91, 0.26);
  background: #fff;
  color: var(--dot-deep);
  box-shadow: 0 8px 24px rgba(3, 48, 42, 0.06);
}

.premium-dot-site .button-secondary-dark:hover,
.premium-dot-site .button-outline:hover {
  border-color: var(--dot-teal);
  background: #eaf5f1;
}

/* ---------- Hero system ---------- */

.premium-dot-site .hero,
.premium-dot-site .assessment-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--dot-deep);
  background-image: var(--dot-premium-hero);
  background-size: auto, auto, 44px 44px, auto;
}

.premium-dot-site .hero::before,
.premium-dot-site .assessment-hero::before,
.premium-dot-site .contact-section::before,
.premium-dot-site .audit-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 64%, rgba(215, 247, 91, 0.05) 64.2% 64.35%, transparent 64.6%),
    linear-gradient(18deg, transparent 0 78%, rgba(126, 226, 206, 0.06) 78.2% 78.35%, transparent 78.6%);
}

.premium-dot-site .hero::after,
.premium-dot-site .assessment-hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -210px;
  bottom: -260px;
  z-index: -1;
  border: 1px solid rgba(215, 247, 91, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 58px rgba(215, 247, 91, 0.025),
    0 0 0 116px rgba(215, 247, 91, 0.02);
}

.premium-dot-site .hero-grid {
  position: relative;
  z-index: 1;
  gap: clamp(36px, 5vw, 72px);
  min-height: min(760px, calc(100vh - 80px));
  padding-top: 88px;
  padding-bottom: 88px;
}

.premium-dot-site .hero-grid > * {
  position: relative;
  z-index: 2;
}

/* Quiet data-wave detail at the foot of every hero. */
.premium-dot-site .hero-grid::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -12vw;
  right: -12vw;
  bottom: 0;
  height: 150px;
  pointer-events: none;
  opacity: 0.34;
  background:
    repeating-radial-gradient(
      ellipse at 50% 132%,
      transparent 0 17px,
      rgba(96, 223, 196, 0.19) 18px 19px,
      transparent 20px 35px
    );
  mask-image: linear-gradient(to top, #000, transparent 86%);
}

.premium-dot-site .hero h1,
.premium-dot-site .assessment-hero h1 {
  color: #fff;
  text-shadow: 0 12px 34px rgba(0, 24, 21, 0.2);
}

.premium-dot-site .hero h1::first-line {
  color: #fff;
}

.premium-dot-site .hero-copy,
.premium-dot-site .hero-sub,
.premium-dot-site .subheadline {
  color: rgba(230, 247, 242, 0.78);
  line-height: 1.75;
}

.premium-dot-site .brand-line {
  color: rgba(215, 247, 91, 0.78);
}

.premium-dot-site .trust-strip li,
.premium-dot-site .positioning-list li,
.premium-dot-site .hero-price,
.premium-dot-site .hero-trust {
  border-color: rgba(181, 231, 221, 0.2);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(239, 250, 247, 0.86);
  backdrop-filter: blur(8px);
}

.premium-dot-site .hero-card {
  position: relative;
  padding: 1px;
  border: 0;
  border-radius: 27px;
  background:
    linear-gradient(var(--dot-deep), var(--dot-deep)) padding-box,
    linear-gradient(145deg, rgba(215, 247, 91, 0.58), rgba(111, 212, 192, 0.16), rgba(255, 255, 255, 0.1)) border-box;
  box-shadow: var(--dot-shadow-dark);
}

.premium-dot-site .hero-card::before {
  content: "";
  position: absolute;
  inset: -36px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(215, 247, 91, 0.08);
  filter: blur(38px);
}

.premium-dot-site .hero-card::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 54px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(215, 247, 91, 0.62);
  background: linear-gradient(145deg, rgba(215, 247, 91, 0.26), rgba(4, 64, 57, 0.72));
  box-shadow:
    -11px 11px 0 rgba(24, 139, 123, 0.2),
    0 0 22px rgba(215, 247, 91, 0.16);
  transform: rotate(30deg) skew(-7deg, -7deg);
}

.premium-dot-site .mini-dashboard {
  border: 1px solid rgba(131, 218, 201, 0.2);
  border-radius: 26px;
  background:
    var(--dot-grid),
    linear-gradient(145deg, rgba(4, 52, 47, 0.98), rgba(4, 64, 57, 0.98));
  background-size: 26px 26px, auto;
  color: #fff;
}

.premium-dot-site .mini-dashboard strong {
  color: #fff;
  font-size: 1.12rem;
}

.premium-dot-site .mini-dashboard p {
  color: rgba(216, 240, 234, 0.64);
}

.premium-dot-site .status-dot {
  background: var(--dot-lime);
  box-shadow: 0 0 0 6px rgba(215, 247, 91, 0.1);
}

.premium-dot-site .signal-list span {
  border: 1px solid rgba(131, 218, 201, 0.13);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(246, 252, 250, 0.92);
}

.premium-dot-site .signal-list .ic,
.premium-dot-site .cs-signals em,
.premium-dot-site .sprint-signals em {
  color: var(--dot-lime);
}

/* ---------- Section rhythm and card language ---------- */

.premium-dot-site .section {
  position: relative;
  padding-top: clamp(76px, 8vw, 112px);
  padding-bottom: clamp(76px, 8vw, 112px);
}

.premium-dot-site .section-grey {
  background:
    radial-gradient(circle at 92% 8%, rgba(28, 139, 123, 0.08), transparent 24rem),
    #e9f0ed;
}

.premium-dot-site .section-heading {
  max-width: 850px;
  margin-bottom: 52px;
}

.premium-dot-site .module-card,
.premium-dot-site .step-card,
.premium-dot-site .package-card,
.premium-dot-site .fit-card,
.premium-dot-site .pain-card,
.premium-dot-site .ba-panel,
.premium-dot-site .specialist-card,
.premium-dot-site .local-note,
.premium-dot-site .cs-note,
.premium-dot-site .cash-note,
.premium-dot-site .stocklag-define,
.premium-dot-site .availability-note {
  border: 1px solid var(--dot-line);
  border-radius: var(--dot-radius);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--dot-shadow-sm);
}

.premium-dot-site .module-card,
.premium-dot-site .step-card,
.premium-dot-site .package-card,
.premium-dot-site .fit-card,
.premium-dot-site .pain-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.premium-dot-site .module-card::after,
.premium-dot-site .step-card::after,
.premium-dot-site .package-card::after,
.premium-dot-site .fit-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -48px;
  bottom: -48px;
  border: 1px solid rgba(20, 126, 112, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(20, 126, 112, 0.025);
}

.premium-dot-site .module-card:hover,
.premium-dot-site .step-card:hover,
.premium-dot-site .package-card:hover,
.premium-dot-site .fit-card:hover,
.premium-dot-site .pain-card:hover {
  transform: translateY(-5px);
  border-color: rgba(12, 102, 91, 0.34);
  box-shadow: 0 24px 56px rgba(3, 48, 42, 0.13);
}

.premium-dot-site .module-icon,
.premium-dot-site .step-number {
  border: 1px solid rgba(20, 126, 112, 0.2);
  background: var(--dot-lime-soft);
  color: var(--dot-deep);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7);
}

.premium-dot-site .module-card:nth-child(3n + 1) .module-icon,
.premium-dot-site .step-card:nth-child(3n + 1) .step-number {
  box-shadow:
    5px 6px 0 rgba(12, 102, 91, 0.13),
    inset 0 1px rgba(255, 255, 255, 0.7);
}

.premium-dot-site .module-card:nth-child(3n + 2) .module-icon,
.premium-dot-site .step-card:nth-child(3n + 2) .step-number {
  border-color: rgba(16, 183, 158, 0.32);
  background: #d9fff6;
  color: #077466;
  box-shadow:
    5px 6px 0 rgba(16, 183, 158, 0.12),
    0 0 18px rgba(16, 183, 158, 0.08);
}

.premium-dot-site .module-card:nth-child(3n) .module-icon,
.premium-dot-site .step-card:nth-child(3n) .step-number {
  border-color: rgba(241, 163, 58, 0.32);
  background: #fff0d7;
  color: #a65d00;
  box-shadow:
    5px 6px 0 rgba(241, 163, 58, 0.12),
    0 0 18px rgba(241, 163, 58, 0.08);
}

.premium-dot-site .ba-before {
  border-left: 4px solid var(--dot-amber);
}

.premium-dot-site .pain-list li,
.premium-dot-site .capability-list li,
.premium-dot-site .audit-list li,
.premium-dot-site .cs-module-grid li,
.premium-dot-site .deliverables li,
.premium-dot-site .reasons-list li {
  border-color: var(--dot-line);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 24px rgba(3, 48, 42, 0.045);
}

.premium-dot-site .pain-list li::before,
.premium-dot-site .capability-list li::before,
.premium-dot-site .cs-module-grid li::before,
.premium-dot-site .deliverables li::before,
.premium-dot-site .reasons-list li::before {
  background: var(--dot-lime);
  box-shadow: 0 0 0 5px rgba(215, 247, 91, 0.14);
}

.premium-dot-site .sector-tags li {
  border-color: var(--dot-line);
  background: rgba(255, 255, 255, 0.78);
  color: var(--dot-deep);
  box-shadow: 0 7px 22px rgba(3, 48, 42, 0.04);
}

.premium-dot-site .sector-tags li:hover {
  border-color: var(--dot-teal);
  background: var(--dot-deep);
  color: var(--dot-lime);
}

/* ---------- Homepage-specific premium composition ---------- */

.premium-dot-site .beforeafter {
  gap: 18px;
  align-items: stretch;
}

.premium-dot-site .ba-card {
  border-radius: var(--dot-radius);
  box-shadow: var(--dot-shadow-sm);
}

.premium-dot-site .ba-after,
.premium-dot-site .casestudy-aside,
.premium-dot-site .founder-visual,
.premium-dot-site .package-featured {
  border: 1px solid var(--dot-line-dark);
  background:
    radial-gradient(circle at 90% 0%, rgba(215, 247, 91, 0.17), transparent 12rem),
    var(--dot-grid),
    linear-gradient(145deg, var(--dot-deeper), var(--dot-deep));
  background-size: auto, 28px 28px, auto;
  color: #fff;
  box-shadow: var(--dot-shadow-dark);
}

.premium-dot-site .offer-section,
.premium-dot-site .why-section {
  background:
    radial-gradient(circle at 8% 20%, rgba(215, 247, 91, 0.07), transparent 20rem),
    #fff;
}

.premium-dot-site .offer-list {
  border: 1px solid rgba(12, 102, 91, 0.18);
  background:
    linear-gradient(145deg, rgba(223, 242, 235, 0.92), rgba(244, 249, 247, 0.96));
  box-shadow: var(--dot-shadow-sm);
}

.premium-dot-site .flow-inline span {
  border-color: var(--dot-line);
  box-shadow: 0 8px 22px rgba(3, 48, 42, 0.05);
}

.premium-dot-site .contact-section,
.premium-dot-site .audit-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--dot-deep);
  background-image: var(--dot-premium-hero);
  background-size: auto, auto, 44px 44px, auto;
}

.premium-dot-site .contact-section h2,
.premium-dot-site .audit-section h2 {
  color: var(--white);
  text-shadow: 0 10px 34px rgba(0, 22, 19, 0.28);
}

.premium-dot-site .wa-helper,
.premium-dot-site .local-first,
.premium-dot-site .audit-details,
.premium-dot-site .price-card {
  border-color: rgba(143, 225, 209, 0.22);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: var(--dot-shadow-dark);
  backdrop-filter: blur(12px);
}

/* ---------- Dot Stock Truth visual showcase ---------- */

.premium-dot-site .premium-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 2%, rgba(215, 247, 91, 0.18), transparent 28rem),
    radial-gradient(circle at 4% 96%, rgba(28, 139, 123, 0.34), transparent 30rem),
    var(--dot-grid),
    linear-gradient(145deg, var(--dot-deeper), var(--dot-deep));
  background-size: auto, auto, 42px 42px, auto;
}

.premium-dot-site .premium-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -8%;
  bottom: -18px;
  height: 170px;
  opacity: 0.4;
  background:
    repeating-radial-gradient(
      ellipse at 50% 142%,
      transparent 0 18px,
      rgba(80, 215, 187, 0.22) 19px 20px,
      transparent 21px 38px
    );
  mask-image: linear-gradient(to top, #000, transparent 92%);
}

.premium-dot-site .premium-showcase-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(500px, 1.28fr);
  align-items: center;
  gap: clamp(36px, 6vw, 78px);
}

.premium-dot-site .premium-showcase h2 {
  color: #fff;
}

.premium-dot-site .premium-showcase .lead {
  color: rgba(226, 245, 239, 0.74);
}

.premium-dot-site .premium-proof-list {
  margin: 28px 0 32px;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.premium-dot-site .premium-proof-list li {
  position: relative;
  padding: 14px 16px 14px 48px;
  border: 1px solid rgba(135, 222, 205, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
}

.premium-dot-site .premium-proof-list li::before {
  content: "✓";
  position: absolute;
  left: 15px;
  top: 16px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--dot-lime);
  color: var(--dot-deeper);
  font-size: 0.72rem;
  font-weight: 900;
}

.premium-dot-site .premium-proof-list strong,
.premium-dot-site .premium-proof-list span {
  display: block;
}

.premium-dot-site .premium-proof-list strong {
  margin-bottom: 3px;
  color: #fff;
  font-size: 0.94rem;
}

.premium-dot-site .premium-proof-list span {
  color: rgba(222, 242, 237, 0.66);
  font-size: 0.82rem;
}

.premium-dot-site .premium-product-frame {
  position: relative;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(144, 226, 210, 0.24);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 38px 110px rgba(0, 18, 16, 0.5);
  backdrop-filter: blur(10px);
}

.premium-dot-site .premium-product-frame::before,
.premium-dot-site .premium-product-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid;
  transform: rotate(30deg) skew(-7deg, -7deg);
}

.premium-dot-site .premium-product-frame::before {
  width: 42px;
  height: 42px;
  right: -21px;
  bottom: 72px;
  border-color: rgba(16, 219, 184, 0.54);
  background: linear-gradient(145deg, rgba(16, 219, 184, 0.28), rgba(3, 43, 39, 0.84));
  box-shadow: -14px 14px 0 rgba(16, 219, 184, 0.1);
}

.premium-dot-site .premium-product-frame::after {
  width: 25px;
  height: 25px;
  left: -13px;
  top: 92px;
  border-color: rgba(241, 163, 58, 0.66);
  background: linear-gradient(145deg, rgba(241, 163, 58, 0.38), rgba(75, 45, 6, 0.72));
  box-shadow: 0 0 24px rgba(241, 163, 58, 0.16);
}

.premium-dot-site .premium-frame-bar {
  min-height: 42px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: rgba(225, 244, 239, 0.58);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.premium-dot-site .premium-frame-dots {
  display: flex;
  gap: 6px;
}

.premium-dot-site .premium-frame-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(215, 247, 91, 0.78);
}

.premium-dot-site .premium-frame-dots i:nth-child(2) { opacity: 0.55; }
.premium-dot-site .premium-frame-dots i:nth-child(3) { opacity: 0.28; }

.premium-dot-site .premium-frame-status {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(215, 247, 91, 0.1);
  color: var(--dot-lime);
}

.premium-dot-site .premium-product-frame img {
  display: block;
  width: 100%;
  border: 1px solid rgba(144, 226, 210, 0.18);
  border-radius: 16px;
  background: var(--dot-deeper);
}

.premium-dot-site .premium-product-frame figcaption {
  padding: 12px 9px 3px;
  color: rgba(219, 239, 234, 0.58);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* ---------- Custom Systems and Sprint ---------- */

.premium-dot-site .cs-module-grid,
.premium-dot-site .deliverables {
  gap: 14px;
}

.premium-dot-site .cs-price-card,
.premium-dot-site .price-card {
  border: 1px solid var(--dot-line-dark);
  border-radius: var(--dot-radius-lg);
  background:
    radial-gradient(circle at 88% 0%, rgba(215, 247, 91, 0.17), transparent 14rem),
    var(--dot-grid),
    linear-gradient(145deg, var(--dot-deeper), var(--dot-deep));
  background-size: auto, 28px 28px, auto;
  box-shadow: var(--dot-shadow-dark);
}

.premium-dot-site .cs-credibility,
.premium-dot-site .confidence-quote,
.premium-dot-site .benefit-line,
.premium-dot-site .secondary-cta-line {
  border-color: var(--dot-line);
  border-radius: var(--dot-radius);
  box-shadow: var(--dot-shadow-sm);
}

.premium-dot-site .dot-trail::before {
  background: linear-gradient(90deg, var(--dot-lime), var(--dot-teal-bright));
}

.premium-dot-site .dot-trail i {
  border-color: var(--dot-lime);
  background: var(--dot-deep);
  box-shadow: 0 0 0 7px rgba(215, 247, 91, 0.12);
}

.premium-dot-site .sprint-step::before {
  background: linear-gradient(var(--dot-lime), rgba(12, 102, 91, 0.16));
}

.premium-dot-site .ba-after {
  border-color: rgba(215, 247, 91, 0.2);
}

.premium-dot-site details {
  border-color: var(--dot-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 24px rgba(3, 48, 42, 0.04);
}

.premium-dot-site summary {
  color: var(--dot-deep);
}

/* ---------- Forms ---------- */

.premium-dot-site .cs-form,
.premium-dot-site .sprint-form,
.premium-dot-site .scorecard-form,
.premium-dot-site .intro-panel,
.premium-dot-site .results-report {
  border: 1px solid var(--dot-line);
  border-radius: var(--dot-radius-lg);
  background:
    radial-gradient(circle at 94% 0%, rgba(215, 247, 91, 0.08), transparent 18rem),
    rgba(255, 255, 255, 0.96);
  box-shadow: var(--dot-shadow);
}

.premium-dot-site input[type="text"],
.premium-dot-site input[type="tel"],
.premium-dot-site input[type="email"],
.premium-dot-site input[type="number"],
.premium-dot-site select,
.premium-dot-site textarea {
  min-height: 50px;
  border: 1px solid rgba(10, 102, 91, 0.22);
  border-radius: 12px;
  background: #f8fbfa;
  color: var(--dot-deep);
  box-shadow: inset 0 1px 2px rgba(3, 48, 42, 0.025);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease;
}

.premium-dot-site textarea {
  min-height: 120px;
}

.premium-dot-site input:focus,
.premium-dot-site select:focus,
.premium-dot-site textarea:focus {
  border-color: var(--dot-teal);
  background: #fff;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(12, 102, 91, 0.1);
}

.premium-dot-site .consent input,
.premium-dot-site input[type="checkbox"],
.premium-dot-site input[type="radio"] {
  accent-color: var(--dot-teal);
}

/* ---------- Assessment ---------- */

.premium-dot-site.assessment-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 90% 20%, rgba(16, 126, 111, 0.08), transparent 26rem),
    var(--dot-canvas);
}

.premium-dot-site .assessment-hero {
  padding: 70px 0 76px;
  color: #fff;
}

.premium-dot-site .assessment-hero .hero-copy {
  max-width: 820px;
}

.premium-dot-site .assessment-hero .tagline {
  color: var(--dot-lime);
}

.premium-dot-site .main-layout {
  padding-top: 38px;
  padding-bottom: 72px;
}

.premium-dot-site .progress-track {
  overflow: hidden;
  background: #dfeae6;
}

.premium-dot-site .progress-bar {
  background: linear-gradient(90deg, var(--dot-teal), var(--dot-lime));
  box-shadow: 0 0 20px rgba(215, 247, 91, 0.22);
}

.premium-dot-site .form-section,
.premium-dot-site .question-section,
.premium-dot-site .result-card,
.premium-dot-site .section-score-card,
.premium-dot-site .report-block {
  border-color: var(--dot-line);
  border-radius: var(--dot-radius);
  background: rgba(248, 251, 250, 0.92);
}

.premium-dot-site .question-section-header {
  border-radius: 16px;
  background:
    linear-gradient(110deg, rgba(12, 102, 91, 0.08), rgba(215, 247, 91, 0.12));
}

.premium-dot-site .answer-option span {
  border-color: rgba(10, 102, 91, 0.16);
  border-radius: 13px;
  background: #fff;
}

.premium-dot-site .answer-option input:checked + span {
  border-color: var(--dot-teal);
  background: var(--dot-lime-soft);
  color: var(--dot-deep);
  box-shadow: 0 8px 24px rgba(3, 48, 42, 0.08);
}

.premium-dot-site .score-badge {
  border: 1px solid rgba(215, 247, 91, 0.24);
  background:
    radial-gradient(circle at 70% 0%, rgba(215, 247, 91, 0.2), transparent 8rem),
    var(--dot-deep);
  color: #fff;
  box-shadow: var(--dot-shadow-dark);
}

.premium-dot-site .score-badge strong {
  color: var(--dot-lime);
}

.premium-dot-site .audit-note,
.premium-dot-site .weakest-explanation {
  border-color: rgba(241, 163, 58, 0.3);
  background: #fff7e8;
}

/* ---------- Footer ---------- */

.premium-dot-site .site-footer {
  position: relative;
  border-top: 1px solid rgba(143, 225, 209, 0.16);
  background:
    var(--dot-grid),
    linear-gradient(145deg, #021f1c, var(--dot-deeper));
  background-size: 40px 40px, auto;
  color: rgba(230, 245, 241, 0.72);
}

.premium-dot-site .site-footer strong,
.premium-dot-site .footer-brand strong {
  color: var(--dot-lime);
}

.premium-dot-site .site-footer a {
  color: rgba(230, 245, 241, 0.8);
}

.premium-dot-site .site-footer a:hover {
  color: var(--dot-lime);
}

.premium-dot-site .dot-brand-lockup-footer {
  width: 62px;
  min-width: 62px;
  margin-bottom: 14px;
}

.premium-dot-site .dot-brand-lockup-footer .dot-arrow {
  width: 36px;
  height: 25px;
  grid-template-columns: repeat(3, 7px);
  grid-template-rows: repeat(3, 7px);
  gap: 2px;
}

.premium-dot-site .dot-brand-lockup-footer .dot-arrow i {
  width: 7px;
  height: 7px;
}

.premium-dot-site .dot-brand-lockup-footer .dot-wordmark {
  font-size: 0.9rem;
}

.premium-dot-site .footer-brand,
.premium-dot-site .footer-content > div:first-child {
  align-items: flex-start;
}

.premium-dot-site .assessment-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 16px;
  color: rgba(230, 245, 241, 0.86);
  font-size: 0.9rem;
  font-weight: 750;
}

.premium-dot-site .assessment-footer-brand .dot-brand-lockup-footer {
  margin-bottom: 6px;
}

/* ---------- Responsive integrity ---------- */

@media (max-width: 1100px) {
  .premium-dot-site .nav {
    padding: 10px 0;
  }

  .premium-dot-site .nav-actions {
    padding: 10px;
    border-color: rgba(143, 225, 209, 0.16);
    background:
      radial-gradient(circle at 90% 0%, rgba(215, 247, 91, 0.08), transparent 12rem),
      rgba(3, 43, 39, 0.98);
    box-shadow: var(--dot-shadow-dark);
  }

  .premium-dot-site .nav-actions a {
    color: rgba(240, 250, 248, 0.86);
  }

  .premium-dot-site .nav-actions .nav-cta {
    margin-left: 0;
  }

  .premium-dot-site .premium-showcase-grid {
    grid-template-columns: 1fr;
  }

  .premium-dot-site .premium-showcase-copy {
    max-width: 760px;
  }
}

@media (max-width: 840px) {
  .premium-dot-site h1 {
    font-size: clamp(2.45rem, 12vw, 4rem);
  }

  .premium-dot-site .hero-grid {
    min-height: 0;
    padding-top: 64px;
    padding-bottom: 70px;
  }

  .premium-dot-site .premium-frame-bar {
    grid-template-columns: 1fr 1fr;
  }

  .premium-dot-site .premium-frame-bar > span:nth-child(2) {
    display: none;
  }
}

@media (max-width: 640px) {
  .premium-dot-site .nav {
    min-height: 68px;
  }

  .premium-dot-site .brand-mark {
    min-width: 50px;
    height: 39px;
    border-radius: 12px;
  }

  .premium-dot-site .section {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .premium-dot-site .button {
    width: 100%;
  }

  .premium-dot-site .premium-product-frame {
    padding: 7px;
    border-radius: 17px;
  }

  .premium-dot-site .premium-product-frame img {
    border-radius: 11px;
  }

  .premium-dot-site .premium-frame-status {
    display: none;
  }

  .premium-dot-site .premium-frame-bar {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .premium-dot-site *,
  .premium-dot-site *::before,
  .premium-dot-site *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================================
   QUESTIONS & ANSWERS
   Native <details>/<summary> so it is keyboard-accessible and screen-reader
   correct with no JavaScript, and still works if a script fails to load.
   ========================================================================= */
.premium-dot-site .section-lede{
  max-width:62ch;margin:14px auto 0;color:var(--dot-copy);
  font-size:1.02rem;line-height:1.65;
}
.premium-dot-site .faq-group{
  font-size:.79rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dot-deep);font-weight:800;
  margin:54px 0 18px;padding:0 0 11px;
  border-bottom:2px solid rgba(12,102,91,.14);
  display:flex;align-items:center;gap:11px;
}
/* A small lime tick before each group name: the same mark the rest of the site
   uses for "this is a Dot thing", so the section reads as designed, not dumped. */
.premium-dot-site .faq-group::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--dot-lime);border:1.5px solid var(--dot-teal);flex:0 0 auto;
}
.premium-dot-site .faq-group:first-of-type{margin-top:38px}
.premium-dot-site .faq-list{display:flex;flex-direction:column;gap:10px}

/* Each question is a card that sits ON the canvas rather than blending into it.
   The canvas is a pale mint, so a white card alone is almost invisible — the
   card needs a real border, a soft lift and a teal spine down its left edge
   before the eye reads it as a thing you can press. */
.premium-dot-site .faq-item{
  background:var(--dot-paper);
  border:1px solid rgba(12,102,91,.20);
  border-left:4px solid rgba(12,102,91,.34);
  border-radius:13px;overflow:hidden;
  box-shadow:0 2px 8px rgba(3,48,42,.05);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.premium-dot-site .faq-item:hover{
  border-color:rgba(12,102,91,.34);
  border-left-color:var(--dot-teal);
  box-shadow:0 6px 18px rgba(3,48,42,.09);
}
.premium-dot-site .faq-item[open]{
  border-color:rgba(12,102,91,.26);
  border-left-color:var(--dot-amber);
  box-shadow:0 10px 30px rgba(6,59,53,.11);
}
.premium-dot-site .faq-item summary{
  /* display:block is what actually removes the native disclosure triangle in
     every browser — list-style:none alone is not enough outside Chrome, and a
     stray marker is exactly what makes a styled FAQ look unstyled. */
  display:block;cursor:pointer;list-style:none;
  padding:18px 60px 18px 20px;position:relative;
  font-weight:700;font-size:1.02rem;line-height:1.45;
  color:var(--dot-ink);
  min-height:44px;                       /* WCAG 2.5.8 touch target */
}
.premium-dot-site .faq-item summary::-webkit-details-marker{display:none}
.premium-dot-site .faq-item summary::marker{content:""}
.premium-dot-site .faq-item summary:hover{background:var(--dot-mint)}
.premium-dot-site .faq-item summary:focus-visible{
  outline:3px solid var(--dot-amber);outline-offset:-3px;
}
/* The +/− affordance, drawn rather than an image so it never fails to load,
   and sat in a tinted chip so it reads as a control instead of a stray mark. */
.premium-dot-site .faq-item summary::before{
  content:"";position:absolute;right:16px;top:50%;
  width:28px;height:28px;margin-top:-14px;border-radius:50%;
  background:var(--dot-mint);border:1px solid rgba(12,102,91,.20);
  transition:background .16s ease,border-color .16s ease;
}
.premium-dot-site .faq-item summary::after{
  content:"";position:absolute;right:23px;top:50%;
  width:14px;height:14px;margin-top:-7px;
  background:
    linear-gradient(var(--dot-teal),var(--dot-teal)) center/14px 2.5px no-repeat,
    linear-gradient(var(--dot-teal),var(--dot-teal)) center/2.5px 14px no-repeat;
  transition:transform .18s ease;
}
.premium-dot-site .faq-item[open] summary::before{
  background:rgba(241,163,58,.16);border-color:rgba(241,163,58,.45);
}
.premium-dot-site .faq-item[open] summary::after{
  transform:rotate(135deg);
  background:linear-gradient(var(--dot-amber),var(--dot-amber)) center/14px 2.5px no-repeat,
             linear-gradient(var(--dot-amber),var(--dot-amber)) center/2.5px 14px no-repeat;
}
.premium-dot-site .faq-answer{
  padding:16px 22px 20px;color:var(--dot-copy);
  font-size:.99rem;line-height:1.72;
  border-top:1px solid rgba(12,102,91,.12);
  background:linear-gradient(180deg,rgba(223,248,239,.34),rgba(255,255,255,0) 60px);
}
.premium-dot-site .faq-answer p{margin:0 0 12px}
.premium-dot-site .faq-answer p:last-child{margin-bottom:0}
.premium-dot-site .faq-answer strong{color:var(--dot-ink);font-weight:700}
.premium-dot-site .faq-answer em{color:var(--dot-teal);font-style:normal;font-weight:600}
.premium-dot-site .faq-answer ul{margin:0;padding-left:20px}
.premium-dot-site .faq-answer li{margin-bottom:9px}
.premium-dot-site .faq-answer li:last-child{margin-bottom:0}
.premium-dot-site .faq-answer li::marker{color:var(--dot-teal)}
@media (prefers-reduced-motion:reduce){
  .premium-dot-site .faq-item,
  .premium-dot-site .faq-item summary::after,
  .premium-dot-site .faq-item summary::before{transition:none}
}
@media (max-width:640px){
  .premium-dot-site .faq-item summary{padding:16px 54px 16px 16px;font-size:.97rem}
  .premium-dot-site .faq-answer{padding:15px 16px 18px}
  .premium-dot-site .faq-group{margin-top:40px}
}
/* =========================================================================
   Dot mark — the badge. Added 7 Aug 2026.
   The seven-dot arrow is correct, but the real Dot mark sits inside a rounded
   badge with a DOUBLE lime border. That is what is on the app, the Google
   profile, the Facebook page and the print. This makes the website match.
   Appended last so it wins without editing the rules above.
   ========================================================================= */
.premium-dot-site .dot-arrow {
  width: auto;
  height: auto;
  box-sizing: content-box;
  padding: 7px;
  background: #08211e;
  border: 1.5px solid var(--dot-lime);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2.5px #08211e,          /* the gap between the two lines */
    inset 0 0 0 4px var(--dot-lime),    /* the inner line */
    0 0 10px rgba(215, 247, 91, 0.22);  /* the same soft glow as the app */
  filter: none;                          /* the glow now lives on the badge */
}

.premium-dot-site .dot-brand-lockup { width: 46px; min-width: 46px; }

.premium-dot-site .dot-brand-lockup-footer { width: 52px; min-width: 52px; }
.premium-dot-site .dot-brand-lockup-footer .dot-arrow {
  width: auto;
  height: auto;
  padding: 8px;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 3px #08211e,
    inset 0 0 0 4.5px var(--dot-lime),
    0 0 12px rgba(215, 247, 91, 0.22);
}

/* Small screens: keep the badge from crowding the wordmark. */
@media (max-width: 560px) {
  .premium-dot-site .dot-arrow { padding: 6px; border-radius: 9px; }
}

/* =============================================================================
   FOOTER CHILDREN — added 11 August 2026.

   `.footer-links` and `.footer-fine` were used on the Guides page, the Dot Book
   page and (now) Pricing, Buy and Clubs — and had no rules anywhere on the site.
   They inherited whatever `.site-footer` happened to give them, which meant the
   footer looked slightly different depending on which page you were on.

   Defining them here rather than inline on each page is the point: one rule set,
   every page aligned, and the next page anyone builds gets it for free.
   ============================================================================= */
.premium-dot-site .site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 18px 0 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(143, 225, 209, 0.14);
  border-bottom: 1px solid rgba(143, 225, 209, 0.14);
}

.premium-dot-site .site-footer .footer-links a {
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  /* WCAG 2.5.8: a footer link is still a tap target on a phone. */
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.premium-dot-site .site-footer .footer-links a:hover,
.premium-dot-site .site-footer .footer-links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.premium-dot-site .site-footer .footer-fine {
  margin-top: 14px;
  font-size: 0.83rem;
  line-height: 1.6;
  opacity: 0.72;
  max-width: 78ch;
}

@media (max-width: 600px) {
  .premium-dot-site .site-footer .footer-links { gap: 8px 16px; }
}