/* Sp20067 - Catalook HTML module stylesheet
   All rules are scoped under .sp20067-sales so nothing leaks into the host DNN page.
   Only the components the module markup actually uses are included.
   Deploy: keep this file at \Portals\0\sp20067\ and link it right above
   the <div class="sp20067-sales"> markup pasted into the module.
   The module pane should be full-width; .container keeps the content at 1140px. */

/* wrapper: design tokens + base type, scoped so the host page is untouched */
.sp20067-sales {

  --ink: #1c2430;
  --body-c: #5b6572;
  --muted: #8a93a0;
  --accent: #e14b32;
  --accent-dark: #c43d26;
  --accent-soft: #fdeeea;
  --dark: #151b25;
  --darker: #10151d;
  --line: #e6e9ee;
  --white: #ffffff;
  --radius: 10px;
  --family2: 'Alata', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  --bg-light: #f2f4f8;

  font-family: var(--font-body);
  color: var(--body-c);
  font-size: 16px;
  line-height: 1.7;
  background: var(--white);
  -webkit-font-smoothing: antialiased;

  --font-display: 'Alata', 'Segoe UI', Arial, sans-serif;
}
.sp20067-sales * {margin: 0;padding: 0;box-sizing: border-box}
.sp20067-sales *, .sp20067-sales *::before, .sp20067-sales *::after {box-sizing: border-box}
.sp20067-sales :focus-visible {outline: 2px solid var(--accent);outline-offset: 3px;border-radius: 2px}
@media (prefers-reduced-motion: reduce) {
.sp20067-sales * {animation: none !important;transition: none !important}
}
.sp20067-sales a {color: var(--accent)}
.sp20067-sales h2, .sp20067-sales h3 {font-family: var(--family2);color: var(--ink);line-height: 1.25}
.sp20067-sales .container {max-width: 1140px;margin: 0 auto;padding: 0 24px}
.sp20067-sales .eyebrow {font-size: 12px;font-weight: 700;letter-spacing: .16em;text-transform: uppercase;color: var(--accent);margin-bottom: 14px}
.sp20067-sales .h2 {font-size: clamp(26px, 3.4vw, 36px);margin-bottom: 18px}
.sp20067-sales .lead {max-width: 640px}
.sp20067-sales .btn {display: inline-block;font-family: var(--font-body);font-weight: 700;font-size: 15px;padding: 14px 28px;border-radius: 6px;text-decoration: none;cursor: pointer;border: 2px solid transparent;transition: background .2s ease, color .2s ease, border-color .2s ease}
.sp20067-sales .btn--primary {background: var(--accent);color: #fff}
.sp20067-sales .btn--primary:hover {background: var(--accent-dark)}
.sp20067-sales .btn--ghost {border-color: #fff;color: #fff;background: transparent}
.sp20067-sales .btn--ghost:hover {background: #fff;color: var(--ink)}
.sp20067-sales .section {padding: 96px 0}
.sp20067-sales #builder {padding-top: 48px}
.sp20067-sales .section--light {background: var(--bg-light)}
.sp20067-sales .m-subnav {position:sticky;top:116px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.sp20067-sales .m-subnav ul {list-style:none;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0;padding:8px 0}
.sp20067-sales .m-subnav ul::-webkit-scrollbar {display:none}
.sp20067-sales .m-subnav a {display:flex;align-items:center;white-space:nowrap;font-size:16px;font-weight:700;color:var(--body-c);text-decoration:none;padding:18px 22px;line-height:1;border-radius:8px}
.sp20067-sales .m-subnav a:hover {color:var(--accent);background:rgba(225,75,50,.07)}
.sp20067-sales .dm-top {display: flex;align-items: flex-end;justify-content: space-between;gap: 24px;flex-wrap: wrap}
.sp20067-sales .dm-links {display: flex;flex-wrap: wrap;gap: 8px 22px;padding-bottom: 6px}
.sp20067-sales .dm-links a {font-weight: 700;font-size: 14px;color: var(--ink);text-decoration: none;border-bottom: 2px solid var(--accent);padding-bottom: 2px;white-space: nowrap}
.sp20067-sales .dm-links a:hover {color: var(--accent)}
.sp20067-sales .hi-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;margin-top: 52px}
.sp20067-sales .hi-card {background: #fff;border: 1px solid var(--line);border-radius: var(--radius);padding: 28px 26px;box-shadow: 0 18px 36px -18px rgba(22, 29, 40, .1)}
.sp20067-sales .hi-ico {display: inline-flex;width: 42px;height: 42px;align-items: center;justify-content: center;border-radius: 10px;background: var(--accent-soft);color: var(--accent);margin-bottom: 16px}
.sp20067-sales .hi-ico svg {width: 21px;height: 21px}
.sp20067-sales .hi-card h3 {font-size: 19px;margin-bottom: 10px}
.sp20067-sales .hi-card p {font-size: 14.5px}
.sp20067-sales .dm-group {margin-top: 48px}
.sp20067-sales .dm-group h3 {font-size: 14px;font-weight: 700;letter-spacing: .1em;text-transform: uppercase;color: var(--muted);margin-bottom: 18px}
.sp20067-sales .dm-tiles {display: grid;grid-template-columns: repeat(4, 1fr);gap: 12px}
.sp20067-sales .dm-tile {display: flex;align-items: center;justify-content: space-between;gap: 10px;padding: 14px 16px;border: 1px solid var(--line);border-radius: var(--radius);background: #fff;text-decoration: none;color: var(--ink);font-weight: 700;font-size: 14px;transition: border-color .2s ease, transform .2s ease}
.sp20067-sales .dm-tile:hover {border-color: var(--accent);color: var(--accent);transform: translateY(-2px)}
.sp20067-sales .dm-tile span {color: var(--accent);font-size: 13px;flex-shrink: 0}
.sp20067-sales .dm-tile em {font-style: normal;font-weight: 500;font-size: 12.5px;color: var(--muted)}
.sp20067-sales .dm-cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px}
.sp20067-sales .dm-card {display: flex;flex-direction: column;background: #fff;border: 1px solid var(--line);border-radius: var(--radius);overflow: hidden;text-decoration: none;transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.sp20067-sales .dm-card:hover {border-color: var(--ink);transform: translateY(-3px);box-shadow: 0 14px 28px -14px rgba(22, 29, 40, .14)}
.sp20067-sales .dm-card__shot {display: block;aspect-ratio: 16 / 10;background: var(--bg-light);border-bottom: 1px solid var(--line)}
.sp20067-sales .dm-card__shot img {display: block;width: 100%;height: 100%;object-fit: cover}
.sp20067-sales .dm-card__cap {display: flex;align-items: center;justify-content: space-between;gap: 8px;padding: 10px 14px;background: #fff}
.sp20067-sales .dm-card__cap b {font-size: 13.5px;font-weight: 700;color: var(--ink)}
.sp20067-sales .dm-card__cap > span {color: var(--accent);font-size: 13px}
.sp20067-sales .chips {display: flex;flex-wrap: wrap;gap: 9px}
.sp20067-sales .chip {display: inline-block;padding: 9px 16px;border: 1px solid var(--line);border-radius: 999px;background: #fff;text-decoration: none;color: var(--ink);font-size: 13.5px;font-weight: 600;transition: border-color .2s ease, color .2s ease}
.sp20067-sales .chip:hover {border-color: var(--accent);color: var(--accent)}
.sp20067-sales .pk-lead {font-size: 14px;color: var(--muted);margin: -6px 0 20px;max-width: 720px}
.sp20067-sales .pk-note {margin-top: 26px;border-left: 3px solid var(--accent);background: #fff;border-radius: 0 var(--radius) var(--radius) 0;padding: 18px 22px;font-size: 14.5px}
.sp20067-sales .check-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 13px 36px;list-style: none;margin-top: 44px}
.sp20067-sales .check-grid li {position: relative;padding-left: 24px;font-size: 14.5px}
.sp20067-sales .check-grid li::before {content: "";position: absolute;left: 0;top: .5em;width: 9px;height: 9px;background: var(--accent);border-radius: 2px}
.sp20067-sales .feat-list {margin-top: 60px;padding-top: 38px;border-top: 1px solid var(--line)}
.sp20067-sales .feat-list h3 {font-size: 14px;font-weight: 700;letter-spacing: .1em;text-transform: uppercase;color: var(--muted);margin-bottom: 22px}
.sp20067-sales .feat-list .check-grid {margin-top: 0}
.sp20067-sales .faq {max-width: 760px;margin-top: 48px}
.sp20067-sales .faq details {border: 1px solid var(--line);border-radius: var(--radius);background: #fff;margin-bottom: 12px;overflow: hidden}
.sp20067-sales .faq summary {cursor: pointer;list-style: none;display: flex;align-items: center;justify-content: space-between;gap: 16px;padding: 18px 22px;font-family: var(--family2);font-size: 16px;color: var(--ink)}
.sp20067-sales .faq summary::-webkit-details-marker {display: none}
.sp20067-sales .faq summary::after {content: "+";font-size: 22px;color: var(--accent);transition: transform .2s ease;flex-shrink: 0}
.sp20067-sales .faq details[open] summary::after {transform: rotate(45deg)}
.sp20067-sales .faq details p {padding: 0 22px 20px;font-size: 14.5px;line-height: 1.7}
.sp20067-sales .ver__top {display: flex;align-items: flex-end;justify-content: space-between;gap: 24px;flex-wrap: wrap}
.sp20067-sales .ver__all {font-weight: 700;font-size: 14px;color: var(--ink);text-decoration: none;border-bottom: 2px solid var(--accent);padding-bottom: 2px;white-space: nowrap}
.sp20067-sales .ver__all:hover {color: var(--accent)}
.sp20067-sales .ver__list {list-style: none;margin-top: 40px}
.sp20067-sales .ver__list>li {display: flex;align-items: baseline;gap: 22px;padding: 14px 0;border-top: 1px solid var(--line);flex-wrap: wrap}
.sp20067-sales .ver__list>li:first-child {border-top: 0}
.sp20067-sales .ver__num {font-family: var(--family2);font-size: 16px;color: var(--ink);min-width: 96px}
.sp20067-sales .ver__date {font-size: 13px;color: var(--muted);min-width: 96px}
.sp20067-sales .ver__items {list-style: none;margin: 0;padding: 0;flex: 1;min-width: 280px;display: flex;flex-direction: column;gap: 6px}
.sp20067-sales .ver__items li {position: relative;padding-left: 14px;font-size: 14px;color: var(--body-c);line-height: 1.55}
.sp20067-sales .ver__items li::before {content: "";position: absolute;left: 0;top: 8px;width: 5px;height: 5px;border-radius: 50%;background: var(--accent)}
.sp20067-sales .ai-fig {margin-top: 24px;border: 1px solid var(--line);border-radius: var(--radius);background: #fff;padding: 18px}
.sp20067-sales .ai-fig img {width: 100%;height: auto;display: block}
.sp20067-sales .bd-chips {list-style: none;margin: 26px 0 0;padding: 0;display: grid;grid-template-columns: repeat(4, 1fr);gap: 14px}
.sp20067-sales .bd-chips li {display: flex;align-items: center;gap: 12px;border: 1px solid var(--line);border-radius: 12px;background: #fff;padding: 14px 16px;font-size: 13.5px;font-weight: 700;color: var(--ink)}
.sp20067-sales .bd-ico {display: inline-flex;width: 34px;height: 34px;align-items: center;justify-content: center;border-radius: 9px;background: rgba(225, 75, 50, .1);color: var(--accent);flex-shrink: 0}
.sp20067-sales .bd-ico svg {width: 17px;height: 17px}
@media (max-width: 1020px) {
.sp20067-sales .bd-chips {grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 620px) {
.sp20067-sales .bd-chips {grid-template-columns: 1fr}
}
.sp20067-sales .pt {margin-top: 48px;border: 1px solid var(--line);border-radius: var(--radius);overflow: hidden;background: #fff;display: grid;grid-template-columns: minmax(0,1fr) minmax(0,2.4fr) minmax(0,.55fr)}
.sp20067-sales .pt__row {display: contents}
.sp20067-sales .pt__row > div {padding: 15px 18px;border-bottom: 1px solid var(--line);border-right: 1px solid var(--line);display: flex;align-items: center;font-size: 14.5px;color: var(--body-c);line-height: 1.5}
.sp20067-sales .pt__row:not(.pt__row--tier) > div:last-child {border-right: 0;justify-content: flex-end}
.sp20067-sales .pt__row--head > div {background: var(--ink);color: #fff;font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, Menlo, monospace;font-size: 12px;font-weight: 700;letter-spacing: .1em;text-transform: uppercase;border-bottom-color: var(--ink);border-right-color: rgba(255,255,255,.12);padding: 12px 18px}
.sp20067-sales .pt__row--tier > div {grid-column: 1 / -1;background: var(--bg-light);border-right: 0;font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, Menlo, monospace;font-size: 16px;font-weight: 800;letter-spacing: .1em;text-transform: uppercase;color: var(--ink);padding: 13px 18px;position: relative}
.sp20067-sales .pt__row--tier > div::before {content: "";position: absolute;left: 0;top: 0;bottom: 0;width: 4px;background: var(--accent)}
.sp20067-sales .pt__row--tier > div span {font-family: 'Open Sans', 'Segoe UI', Roboto, sans-serif;text-transform: none;letter-spacing: 0;font-size: 14.5px;font-weight: 600;color: var(--body-c);margin-left: 14px}
.sp20067-sales .pt__row--mods > div:last-child {color: var(--accent)}
.sp20067-sales .pt .c-ed b {font-size: 15px;font-weight: 700;color: var(--ink)}
.sp20067-sales .pt__row:not(.pt__row--head) .c-pr {font-size: 19px;font-weight: 800;color: var(--ink);letter-spacing: -.02em;white-space: nowrap}
.sp20067-sales .tiers-note {margin-top: 22px;text-align: center;color: var(--muted);font-size: 15px}
.sp20067-sales .tiers-note b {color: var(--ink)}
@media (max-width: 860px) {
.sp20067-sales .pt {grid-template-columns: 1fr auto}
.sp20067-sales .pt__row--head {display: none}
.sp20067-sales .pt__row > div {border-right: 0}
.sp20067-sales .pt .c-mod {grid-column: 1 / -1;padding-top: 2px}
.sp20067-sales .pt .c-ed {padding-bottom: 6px}
}
.sp20067-sales .modtable {border: 1px solid var(--line);border-radius: var(--radius);overflow: hidden;background: #fff;display: grid;grid-template-columns: minmax(0,1.3fr) minmax(0,2.3fr) minmax(0,.9fr)}
.sp20067-sales .modtable__row {display: contents}
.sp20067-sales .modtable__row > div {padding: 15px 18px;border-bottom: 1px solid var(--line);border-right: 1px solid var(--line);display: flex;align-items: center;font-size: 14.5px;color: var(--body-c);line-height: 1.55}
.sp20067-sales .modtable__row > div:last-child {border-right: 0;justify-content: flex-end;gap: 14px}
.sp20067-sales .modtable__row:last-child > div {border-bottom: 0}
.sp20067-sales .modtable__row--head > div {background: var(--ink);color: #fff;font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, Menlo, monospace;font-size: 12px;font-weight: 700;letter-spacing: .1em;text-transform: uppercase;border-bottom-color: var(--ink);border-right-color: rgba(255,255,255,.12);padding: 12px 18px}
.sp20067-sales .modtable .c-mod .ic {flex: none;width: 34px;height: 34px;border-radius: 9px;background: var(--accent-soft);color: var(--accent);display: grid;place-items: center;margin-right: 12px}
.sp20067-sales .modtable .c-mod .ic svg {width: 18px;height: 18px}
.sp20067-sales .modtable .c-mod b {font-size: 15px;font-weight: 700;color: var(--ink)}
.sp20067-sales .modtable .c-links a {font-size: 14px;font-weight: 700;color: var(--accent);text-decoration: none;white-space: nowrap}
.sp20067-sales .modtable .c-links a:hover {text-decoration: underline}
@media (max-width: 860px) {
.sp20067-sales .modtable {grid-template-columns: 1fr}
.sp20067-sales .modtable__row--head {display: none}
.sp20067-sales .modtable__row > div {border-right: 0}
}
.sp20067-sales .legal h3 {font-size: 20px;color: var(--ink);margin-bottom: 6px}
.sp20067-sales .legal-rule {height: 1px;background: var(--line);margin: 16px 0 24px;max-width: 860px}
.sp20067-sales .legal-list {list-style: none;margin: 0;padding: 0;display: grid;gap: 12px;max-width: 860px}
.sp20067-sales .legal-list li {position: relative;padding-left: 20px;font-size: 14.5px;color: var(--body-c);line-height: 1.7}
.sp20067-sales .legal-list li::before {content: "";position: absolute;left: 0;top: .55em;width: 8px;height: 8px;background: var(--accent);border-radius: 2px}
.sp20067-sales .legal-list strong {color: var(--ink)}
.sp20067-sales .legal-block p {font-size: 14.5px;color: var(--body-c);line-height: 1.7;max-width: 860px}
.sp20067-sales .legal-sites {list-style: none;margin: 14px 0 0;padding: 0;display: flex;flex-wrap: wrap;gap: 8px;max-width: 860px}
.sp20067-sales .legal-sites li {font-size: 12.5px;font-weight: 600;color: var(--muted);border: 1px solid var(--line);border-radius: 999px;padding: 4px 12px;background: #fff}
.sp20067-sales .legal-note {margin-top: 18px;max-width: 860px;border: 1px solid var(--line);border-left: 3px solid var(--accent);border-radius: 0 var(--radius) var(--radius) 0;background: #f8f9fb;padding: 14px 18px;font-size: 13.5px;color: var(--body-c);line-height: 1.7}
.sp20067-sales .legal-note b {color: var(--ink)}
.sp20067-sales .legal-block + .legal-block {margin-top: 52px}
.sp20067-sales .play {background: var(--dark);padding: 76px 0}
.sp20067-sales .play__inner {display: flex;align-items: center;justify-content: space-between;gap: 36px;flex-wrap: wrap}
.sp20067-sales .play h2 {color: #fff;font-size: clamp(24px, 3vw, 32px);margin-bottom: 10px}
.sp20067-sales .play p {color: rgba(255, 255, 255, .72);max-width: 560px}
@media (max-width: 920px) {
.sp20067-sales .hi-grid {grid-template-columns: 1fr}
.sp20067-sales .check-grid {grid-template-columns: 1fr 1fr}
.sp20067-sales .dm-tiles {grid-template-columns: 1fr 1fr}
.sp20067-sales .dm-cards {grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 640px) {
.sp20067-sales .check-grid, .sp20067-sales .dm-tiles, .sp20067-sales .dm-cards {grid-template-columns: 1fr}
}

/* ---------- module-context tweaks ---------- */
/* the subnav parks 64px down, clearing the host page's sticky header;
   adjust if that header has a different height */
.sp20067-sales .m-subnav { top: 64px; }

/* ---------- sp20067: rules added on top of the shared template ---------- */
.sp20067-sales .m-subnav__row {display:flex;align-items:center;justify-content:space-between;gap:8px 24px}
.sp20067-sales .m-subnav__row>ul {flex:1;min-width:0}
.sp20067-sales .m-subnav__links {display:flex;gap:6px 18px;flex-shrink:0}
.sp20067-sales .m-subnav__links a {font-size:13.5px;color:var(--ink);padding:2px 0 4px;border-bottom:2px solid var(--accent);border-radius:0}
.sp20067-sales .m-subnav__links a:hover {color:var(--accent);background:none}

/* ---------- sp20067: rules added on top of the shared template (responsive) ---------- */
@media (max-width:1140px) { .sp20067-sales .m-subnav__links .ln-doc {display:none} }
@media (max-width:960px) { .sp20067-sales .m-subnav {display:none} }

/* ---------- sp20067: components used by this theme page ---------- */
.sp20067-sales .legal-more {margin-top: 44px;}
.sp20067-sales .legal-more a {font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px;}
.sp20067-sales .legal-more a:hover {color: var(--accent);}