/*
 * copywriterslibres.com — design system
 * Void (#1E1E2E) + Electric Lime (#C8F554) + Milk (#F4F3EE)
 * Sora (display) + Nunito (body)
 * Nav: TWO-LEVEL STICKY HORIZONTAL | Hero: CENTERED DARK FULL-SCREEN
 * Layout: Editorial numbered lists, accordion process, newspaper columns
 */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Nunito:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ───────────────────────────────────────── */
:root {
  --cl-void:   #1E1E2E;
  --cl-ash:    #2D2D42;
  --cl-dust:   #3E3E58;
  --cl-lime:   #C8F554;
  --cl-lime-d: #A8D93A;
  --cl-lime-l: rgba(200,245,84,.12);
  --cl-milk:   #F4F3EE;
  --cl-sand:   #E8E7E0;
  --cl-fog:    #9898B0;
  --cl-ink:    #1E1E2E;
  --cl-border-d: rgba(248,243,238,.08);
  --cl-border-l: rgba(30,30,46,.10);

  --cl-fh: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --cl-fb: 'Nunito', 'Helvetica Neue', Arial, sans-serif;

  --cl-navh: 72px;
  --cl-r4:   4px;
  --cl-r8:   8px;
  --cl-r12:  12px;
  --cl-r16:  16px;
  --cl-r24:  24px;

  --cl-sh1: 0 1px 4px rgba(30,30,46,.08), 0 4px 12px rgba(30,30,46,.06);
  --cl-sh2: 0 4px 20px rgba(30,30,46,.12), 0 8px 32px rgba(30,30,46,.08);
  --cl-sh3: 0 8px 40px rgba(30,30,46,.18);
}

/* ── RESET ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--cl-fb);
  font-size: .9375rem;
  line-height: 1.7;
  color: #4A4A62;
  background: var(--cl-milk);
  overflow-x: hidden;
  padding-top: var(--cl-navh);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font-family: var(--cl-fb); }
ul { list-style: none; }

/* ── TYPOGRAPHY ───────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--cl-fh);
  font-weight: 700;
  line-height: 1.12;
  color: var(--cl-void);
}
h1 { font-size: clamp(2.75rem, 6vw, 5.5rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.875rem, 3.5vw, 3rem);  letter-spacing: -.015em; }
h3 { font-size: clamp(1.25rem,  2vw,  1.75rem); letter-spacing: -.01em; }
h4 { font-size: 1.125rem; font-weight: 600; }
p  { line-height: 1.8; }

/* ── LAYOUT CANVAS ────────────────────────────────── */
.cl-canvas { max-width: 1120px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.cl-canvas-wide { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

/* ── REVEAL ───────────────────────────────────────── */
.cl-reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.cl-reveal.cl-vis { opacity: 1; transform: none; }

/* ── EYEBROW LABELS ───────────────────────────────── */
.cl-tag {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--cl-fh); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--cl-fog); margin-bottom: .75rem;
}
.cl-tag-lime {
  background: var(--cl-lime); color: var(--cl-void);
  padding: .275rem .875rem; border-radius: 100px;
}

/* ── BUTTONS ──────────────────────────────────────── */
.cl-btn-lime {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--cl-lime); color: var(--cl-void);
  font-family: var(--cl-fh); font-size: .9375rem; font-weight: 700;
  padding: .75rem 1.75rem; border-radius: var(--cl-r4);
  border: none; transition: background .18s, transform .15s;
  white-space: nowrap;
}
.cl-btn-lime:hover { background: var(--cl-lime-d); transform: translateY(-1px); }

.cl-btn-ghost-dk {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--cl-milk);
  font-family: var(--cl-fh); font-size: .9375rem; font-weight: 700;
  padding: .75rem 1.75rem; border-radius: var(--cl-r4);
  border: 1.5px solid rgba(244,243,238,.2); transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.cl-btn-ghost-dk:hover { background: rgba(244,243,238,.08); border-color: rgba(244,243,238,.4); }

.cl-btn-void {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--cl-void); color: var(--cl-milk);
  font-family: var(--cl-fh); font-size: .9375rem; font-weight: 700;
  padding: .75rem 1.75rem; border-radius: var(--cl-r4);
  border: none; transition: background .18s;
  white-space: nowrap;
}
.cl-btn-void:hover { background: var(--cl-ash); }

.cl-btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--cl-void);
  font-family: var(--cl-fh); font-size: .9375rem; font-weight: 700;
  padding: .75rem 1.75rem; border-radius: var(--cl-r4);
  border: 1.5px solid var(--cl-border-l); transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.cl-btn-outline:hover { border-color: var(--cl-void); background: var(--cl-sand); }

.cl-btn-sm { padding: .5rem 1.125rem; font-size: .875rem; }

.cl-text-link {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--cl-fh); font-size: .9375rem; font-weight: 700;
  color: var(--cl-void); border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.cl-text-link:hover { border-color: var(--cl-lime); }

/* ── HEADER / NAV ─────────────────────────────────── */
.cl-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(30,30,46,.96); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cl-border-d);
  height: var(--cl-navh);
  transition: box-shadow .25s;
}
.cl-topbar.cl-bar-scrolled {
  box-shadow: 0 2px 24px rgba(30,30,46,.4);
}
.cl-topbar-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  height: 100%; display: flex; align-items: center; gap: 1.5rem;
}
.cl-logo {
  font-family: var(--cl-fh); font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  color: var(--cl-milk); letter-spacing: -.025em;
  white-space: nowrap; flex-shrink: 0;
}
.cl-logo span { color: var(--cl-lime); }
.cl-primary-nav { flex: 1; }
.cl-nav-items {
  display: flex; align-items: center; gap: .25rem;
}
.cl-nav-a {
  font-family: var(--cl-fh); font-size: 1.0625rem; font-weight: 600;
  color: rgba(244,243,238,.65); padding: .5rem .875rem;
  border-radius: var(--cl-r4); background: none; border: none;
  transition: color .18s, background .18s; white-space: nowrap;
  display: flex; align-items: center; gap: .25rem;
}
.cl-nav-a:hover, .cl-nav-a.cl-nav-on { color: var(--cl-milk); background: rgba(244,243,238,.07); }
.cl-topbar-acts { display: flex; align-items: center; gap: .875rem; margin-left: auto; }

/* Two-level dropdown */
.cl-drop-parent { position: relative; }
.cl-dropdown {
  position: absolute; top: calc(100% + 12px); left: 0;
  background: var(--cl-ash); border: 1px solid var(--cl-border-d);
  border-radius: var(--cl-r12); box-shadow: var(--cl-sh3);
  min-width: 240px; padding: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  pointer-events: none;
}
.cl-drop-parent:hover .cl-dropdown,
.cl-dropdown:hover {
  opacity: 1; visibility: visible; transform: none; pointer-events: all;
}
.cl-dd-item {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
  border-radius: var(--cl-r8); transition: background .18s;
  color: rgba(244,243,238,.65); font-size: .875rem; font-weight: 600;
  font-family: var(--cl-fh);
}
.cl-dd-item:hover { background: rgba(244,243,238,.08); color: var(--cl-milk); }
.cl-dd-item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cl-lime); flex-shrink: 0; }

/* Hamburger + drawer */
.cl-burger { display: none; background: none; border: none; color: var(--cl-milk); padding: .5rem; }
.cl-veil { position: fixed; inset: 0; background: rgba(30,30,46,.7); z-index: 850; display: none; }
.cl-veil.on { display: block; }
.cl-offcanvas {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 860;
  width: 300px; background: var(--cl-ash);
  transform: translateX(100%); transition: transform .3s ease;
  overflow-y: auto; padding: 1.5rem;
}
.cl-offcanvas.on { transform: none; }
.cl-oc-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--cl-border-d);
}
.cl-oc-brand {
  font-family: var(--cl-fh); font-size: 1.25rem; font-weight: 800;
  color: var(--cl-milk);
}
.cl-oc-brand span { color: var(--cl-lime); }
.cl-oc-cls { background: none; border: none; color: rgba(244,243,238,.6); padding: .25rem; }
.cl-offcanvas nav { display: flex; flex-direction: column; gap: .25rem; }
.cl-oc-link {
  display: block; padding: .75rem 1rem; border-radius: var(--cl-r8);
  font-family: var(--cl-fh); font-size: 1.0625rem; font-weight: 600;
  color: rgba(244,243,238,.7); transition: background .18s, color .18s;
}
.cl-oc-link:hover { background: rgba(244,243,238,.07); color: var(--cl-milk); }
.cl-oc-cta { margin-top: 1.5rem; }

/* ── HERO (CENTERED DARK FULL-SCREEN) ─────────────── */
#cl-spearhead {
  background: var(--cl-void); min-height: calc(100vh - var(--cl-navh));
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; position: relative; overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 2.5rem);
}
/* Animated gradient background */
#cl-spearhead::before {
  content: ''; position: absolute; inset: -50%;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(200,245,84,.06) 0%, transparent 70%),
              radial-gradient(ellipse 60% 80% at 20% 80%, rgba(200,245,84,.04) 0%, transparent 60%);
  animation: cl-pulse 12s ease-in-out infinite;
}
@keyframes cl-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%       { transform: scale(1.1) rotate(2deg); opacity: .7; }
}
/* Grid overlay */
#cl-spearhead::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(200,245,84,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(200,245,84,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.cl-hero-inner { position: relative; z-index: 1; max-width: 860px; }
.cl-hero-pre {
  display: inline-flex; align-items: center; gap: .625rem;
  background: rgba(200,245,84,.1); border: 1px solid rgba(200,245,84,.2);
  color: var(--cl-lime); font-family: var(--cl-fh); font-size: .8125rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: .4375rem 1rem; border-radius: 100px; margin-bottom: 1.75rem;
}
.cl-hero-pre-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cl-lime); animation: cl-blink 2s infinite; }
@keyframes cl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.cl-hero-h1 {
  color: var(--cl-milk); margin-bottom: 1.5rem;
  font-size: clamp(3rem, 7vw, 6rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.0;
}
.cl-hero-h1 em { color: var(--cl-lime); font-style: normal; }

.cl-hero-sub {
  color: rgba(244,243,238,.5); max-width: 56ch; margin: 0 auto 2.5rem;
  font-size: clamp(1rem, 1.8vw, 1.125rem); line-height: 1.75;
}

.cl-hero-acts { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4rem; }

.cl-hero-stats {
  display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); justify-content: center;
  flex-wrap: wrap; padding-top: 2.5rem;
  border-top: 1px solid var(--cl-border-d);
}
.cl-hero-stat-n {
  font-family: var(--cl-fh); font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800; color: var(--cl-lime); line-height: 1;
}
.cl-hero-stat-l {
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(244,243,238,.3); margin-top: .3rem;
}

/* Hero image floating behind text */
.cl-hero-bg-img {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 45%; opacity: .06; overflow: hidden;
}
.cl-hero-bg-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── TICKER ───────────────────────────────────────── */
.cl-tickstrip {
  background: var(--cl-lime); overflow: hidden; padding: .75rem 0;
}
.cl-tick-rail {
  display: flex; gap: 2rem; width: max-content;
  animation: cl-march 28s linear infinite;
}
.cl-tick-rail:hover { animation-play-state: paused; }
@keyframes cl-march { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cl-tick-item {
  display: flex; align-items: center; gap: .625rem; white-space: nowrap;
  font-family: var(--cl-fh); font-size: .8125rem; font-weight: 700;
  color: var(--cl-void); text-transform: uppercase; letter-spacing: .07em;
}
.cl-tick-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(30,30,46,.3); }

/* ── SLAB (SECTION) ───────────────────────────────── */
.cl-slab { padding: clamp(4rem, 8vw, 7rem) 0; }
.cl-slab-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.cl-slab-void { background: var(--cl-void); }
.cl-slab-ash  { background: var(--cl-ash); }
.cl-slab-sand { background: var(--cl-sand); }
.cl-slab-milk { background: var(--cl-milk); }

/* ── NUMBERED SERVICE ROSTER (EDITORIAL LIST) ─────── */
.cl-roster { border-top: 1.5px solid var(--cl-border-l); }
.cl-roster-row {
  display: grid; grid-template-columns: 64px 1fr auto auto;
  align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; border-bottom: 1.5px solid var(--cl-border-l);
  transition: background .18s;
}
.cl-roster-row:hover { background: var(--cl-sand); margin: 0 -1rem; padding: 1.5rem 1rem; border-radius: var(--cl-r8); border-color: transparent; }
.cl-roster-n {
  font-family: var(--cl-fh); font-size: .9375rem; font-weight: 800;
  color: rgba(30,30,46,.2); letter-spacing: -.01em;
}
.cl-roster-nm {
  font-family: var(--cl-fh); font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700; color: var(--cl-void);
}
.cl-roster-sh {
  font-size: .875rem; color: var(--cl-fog); margin-top: .25rem;
  line-height: 1.5; max-width: 48ch;
}
.cl-roster-pr {
  font-family: var(--cl-fh); font-size: 1.125rem; font-weight: 800;
  color: var(--cl-void); white-space: nowrap;
}
.cl-roster-arr {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cl-void); color: var(--cl-lime);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, transform .2s; flex-shrink: 0;
}
.cl-roster-row:hover .cl-roster-arr { background: var(--cl-lime); color: var(--cl-void); transform: rotate(45deg); }

/* ── PROCESS ACCORDION ────────────────────────────── */
.cl-workflow { display: flex; flex-direction: column; gap: 0; }
.cl-wf-item { border-bottom: 1.5px solid var(--cl-border-d); }
.cl-wf-btn {
  width: 100%; display: grid; grid-template-columns: 56px 1fr 40px;
  align-items: center; gap: 1.5rem; padding: 1.375rem 0;
  background: none; border: none; text-align: left; cursor: pointer;
}
.cl-wf-num {
  font-family: var(--cl-fh); font-size: 1rem; font-weight: 800;
  color: var(--cl-lime);
}
.cl-wf-head {
  font-family: var(--cl-fh); font-size: 1.0625rem; font-weight: 700;
  color: var(--cl-milk);
}
.cl-wf-ico { color: var(--cl-fog); transition: transform .25s; }
.cl-wf-item.cl-wf-open .cl-wf-ico { transform: rotate(180deg); }
.cl-wf-body { display: none; padding: 0 0 1.375rem 3.5rem; }
.cl-wf-item.cl-wf-open .cl-wf-body { display: block; }
.cl-wf-body p { color: rgba(244,243,238,.5); font-size: .9375rem; line-height: 1.8; }

/* ── CASE STUDIES ─────────────────────────────────── */
.cl-case-tabs { display: flex; gap: .375rem; margin-bottom: 2.5rem; }
.cl-case-tab {
  padding: .625rem 1.25rem; border-radius: 100px;
  font-family: var(--cl-fh); font-size: .875rem; font-weight: 700;
  background: rgba(244,243,238,.06); color: rgba(244,243,238,.4);
  border: 1px solid var(--cl-border-d); cursor: pointer; transition: all .2s;
}
.cl-case-tab.cl-tab-active { background: var(--cl-lime); color: var(--cl-void); border-color: var(--cl-lime); }
.cl-case-panel { display: none; }
.cl-case-panel.cl-panel-active { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.cl-case-lbl {
  font-family: var(--cl-fh); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--cl-lime);
  margin-bottom: .5rem;
}
.cl-case-panel h2 { color: var(--cl-milk); font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: .625rem; }
.cl-case-panel p { color: rgba(244,243,238,.45); font-size: .9375rem; line-height: 1.82; margin-bottom: .875rem; }
.cl-case-statbox {
  background: rgba(200,245,84,.08); border: 1px solid rgba(200,245,84,.2);
  border-radius: var(--cl-r12); padding: 1.5rem; margin-bottom: 1.5rem;
}
.cl-case-stat-n { font-family: var(--cl-fh); font-size: 3rem; font-weight: 800; color: var(--cl-lime); line-height: 1; }
.cl-case-stat-l { font-size: .75rem; color: rgba(244,243,238,.35); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-top: .375rem; }
.cl-case-img-frame { border-radius: var(--cl-r16); overflow: hidden; aspect-ratio: 4/3; background: var(--cl-dust); }
.cl-case-img-frame img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }

/* ── TESTIMONIALS (NEWSPAPER COLUMNS) ────────────── */
.cl-press-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.cl-press-card {
  background: var(--cl-ash); border-radius: var(--cl-r12); padding: 2rem;
  border: 1px solid var(--cl-border-d);
}
.cl-press-stars { display: flex; gap: .25rem; color: var(--cl-lime); margin-bottom: 1rem; }
.cl-press-q {
  font-family: var(--cl-fh); font-size: 1.0625rem; font-weight: 500; font-style: italic;
  color: rgba(244,243,238,.8); line-height: 1.6; margin-bottom: 1.25rem;
}
.cl-press-who { font-family: var(--cl-fh); font-size: .875rem; font-weight: 700; color: var(--cl-milk); }
.cl-press-role { font-size: .8125rem; color: var(--cl-fog); }

/* ── PRICING (HORIZONTAL STRIPS) ─────────────────── */
.cl-tier-list { display: flex; flex-direction: column; gap: 1px; background: var(--cl-border-l); border-radius: var(--cl-r16); overflow: hidden; }
.cl-tier-row {
  background: #fff; display: grid; grid-template-columns: 260px 1fr auto;
  align-items: center; gap: 2rem; padding: 2rem 2.5rem;
  transition: background .18s;
}
.cl-tier-row:hover { background: var(--cl-milk); }
.cl-tier-row.cl-tier-hot { background: var(--cl-void); }
.cl-tier-row.cl-tier-hot:hover { background: var(--cl-ash); }
.cl-tier-tag {
  display: inline-flex; align-items: center; gap: .375rem;
  background: var(--cl-lime); color: var(--cl-void);
  font-family: var(--cl-fh); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .25rem .75rem; border-radius: 100px; margin-top: .5rem;
}
.cl-tier-nm {
  font-family: var(--cl-fh); font-size: 1.5rem; font-weight: 800; color: var(--cl-void);
}
.cl-tier-row.cl-tier-hot .cl-tier-nm { color: var(--cl-milk); }
.cl-tier-tg { font-size: .875rem; color: var(--cl-fog); margin-top: .25rem; }
.cl-tier-row.cl-tier-hot .cl-tier-tg { color: rgba(244,243,238,.4); }
.cl-tier-pr {
  font-family: var(--cl-fh); font-size: 2.25rem; font-weight: 800;
  color: var(--cl-void); white-space: nowrap;
}
.cl-tier-row.cl-tier-hot .cl-tier-pr { color: var(--cl-lime); }
.cl-tier-feats { display: flex; flex-wrap: wrap; gap: .5rem .875rem; }
.cl-tier-feat {
  display: flex; align-items: center; gap: .4rem;
  font-size: .875rem; color: #4A4A62;
}
.cl-tier-row.cl-tier-hot .cl-tier-feat { color: rgba(244,243,238,.55); }
.cl-tier-feat-ico { color: var(--cl-lime); flex-shrink: 0; }

/* ── PACKAGE BUILDER ──────────────────────────────── */
.cl-builder-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }
.cl-bld-card { background: #fff; border: 1.5px solid var(--cl-border-l); border-radius: var(--cl-r16); padding: 1.75rem; margin-bottom: 1.25rem; }
.cl-bld-ttl {
  font-family: var(--cl-fh); font-size: .75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; color: var(--cl-fog);
  margin-bottom: 1rem; padding-bottom: .625rem;
  border-bottom: 1.5px solid var(--cl-border-l);
}
.cl-pkg-row {
  border: 1.5px solid var(--cl-border-l); border-radius: var(--cl-r8);
  padding: 1rem 1.25rem; cursor: pointer; margin-bottom: .625rem;
  display: flex; align-items: center; gap: 1rem;
  transition: border-color .2s, background .2s;
}
.cl-pkg-row:hover { border-color: var(--cl-lime); background: rgba(200,245,84,.04); }
.cl-pkg-row.cl-pkg-active { border-color: var(--cl-void); background: rgba(30,30,46,.04); }
.cl-pkg-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--cl-border-l); flex-shrink: 0;
  transition: border-color .2s, background .2s;
}
.cl-pkg-row.cl-pkg-active .cl-pkg-radio {
  border-color: var(--cl-void); background: var(--cl-void);
  box-shadow: inset 0 0 0 4px #fff;
}
.cl-pkg-nm { font-family: var(--cl-fh); font-size: .9375rem; font-weight: 700; color: var(--cl-void); }
.cl-pkg-tg { font-size: .8125rem; color: var(--cl-fog); margin-top: .125rem; }
.cl-pkg-price { margin-left: auto; font-family: var(--cl-fh); font-size: 1.125rem; font-weight: 800; color: var(--cl-void); }

.cl-add-rows { display: flex; flex-direction: column; gap: .5rem; }
.cl-add-row {
  display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem;
  border: 1.5px solid var(--cl-border-l); border-radius: var(--cl-r8);
  cursor: pointer; transition: border-color .2s, background .2s;
}
.cl-add-row:hover { border-color: var(--cl-lime); background: rgba(200,245,84,.04); }
.cl-add-row.cl-add-on { border-color: var(--cl-void); background: rgba(30,30,46,.04); }
.cl-add-chk {
  width: 20px; height: 20px; border: 1.5px solid var(--cl-border-l);
  border-radius: 4px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; background: transparent;
  transition: background .18s, border-color .18s;
}
.cl-add-row.cl-add-on .cl-add-chk { background: var(--cl-void); border-color: var(--cl-void); }
.cl-add-label { font-size: .9375rem; font-weight: 600; color: var(--cl-void); flex: 1; }
.cl-add-price { font-family: var(--cl-fh); font-size: .9375rem; font-weight: 800; color: var(--cl-fog); }

.cl-hrs-row { display: flex; align-items: center; gap: 1rem; }
.cl-hrs-range { flex: 1; accent-color: var(--cl-void); }
.cl-hrs-display { font-family: var(--cl-fh); font-size: 1.25rem; font-weight: 800; color: var(--cl-void); min-width: 5rem; }

/* Summary panel */
.cl-summary-panel {
  background: var(--cl-void); border-radius: var(--cl-r16); padding: 1.75rem;
  position: sticky; top: calc(var(--cl-navh) + 1.5rem);
}
.cl-sum-hd { font-family: var(--cl-fh); font-size: 1.125rem; font-weight: 800; color: var(--cl-milk); margin-bottom: 1.25rem; }
.cl-sum-lines { min-height: 60px; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.cl-sum-line { display: flex; justify-content: space-between; gap: 1rem; }
.cl-sum-lname { font-size: .875rem; color: rgba(244,243,238,.55); }
.cl-sum-lprice { font-size: .875rem; font-weight: 700; color: var(--cl-milk); white-space: nowrap; }
.cl-sum-nil { font-size: .875rem; font-style: italic; color: rgba(244,243,238,.2); }
.cl-sum-div { border-top: 1px solid var(--cl-border-d); margin: 1rem 0; }
.cl-sum-total { display: flex; justify-content: space-between; align-items: center; }
.cl-sum-total-lbl { font-family: var(--cl-fh); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(244,243,238,.35); }
.cl-sum-total-val { font-family: var(--cl-fh); font-size: 2rem; font-weight: 800; color: var(--cl-lime); }
.cl-sum-cta { margin-top: 1.25rem; width: 100%; justify-content: center; font-size: 1rem; padding: .875rem; }
.cl-sum-micro { font-size: .75rem; color: rgba(244,243,238,.2); text-align: center; margin-top: .75rem; line-height: 1.55; }

/* ── CHECKOUT ─────────────────────────────────────── */
.cl-checkout-grid { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.cl-chk-form { background: #fff; border: 1.5px solid var(--cl-border-l); border-radius: var(--cl-r16); padding: 2.5rem; }
.cl-order-panel { background: var(--cl-void); border-radius: var(--cl-r16); padding: 1.75rem; position: sticky; top: calc(var(--cl-navh) + 1.5rem); }
.cl-ord-hd { font-family: var(--cl-fh); font-size: 1.0625rem; font-weight: 800; color: var(--cl-milk); margin-bottom: 1.25rem; }
.cl-ord-row { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; font-size: .875rem; }
.cl-ord-k { color: rgba(244,243,238,.5); }
.cl-ord-v { color: var(--cl-milk); font-weight: 700; text-align: right; }
.cl-ord-div { border-top: 1px solid var(--cl-border-d); margin: 1rem 0; }
.cl-ord-total { display: flex; justify-content: space-between; align-items: center; }
.cl-ord-tl { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(244,243,238,.3); }
.cl-ord-tv { font-family: var(--cl-fh); font-size: 2rem; font-weight: 800; color: var(--cl-lime); }
.cl-ord-next { font-size: .8125rem; color: rgba(244,243,238,.3); margin-top: 1rem; line-height: 1.6; }
.cl-field { margin-bottom: 1.25rem; }
.cl-field label { display: block; font-size: .875rem; font-weight: 700; font-family: var(--cl-fh); color: var(--cl-void); margin-bottom: .375rem; }
.cl-field input, .cl-field select, .cl-field textarea {
  width: 100%; padding: .75rem 1rem;
  border: 1.5px solid var(--cl-border-l); border-radius: var(--cl-r8);
  font-family: var(--cl-fb); font-size: .9375rem; color: var(--cl-void);
  background: #fff; transition: border-color .2s; -webkit-appearance: none;
}
.cl-field input:focus, .cl-field select:focus, .cl-field textarea:focus {
  outline: none; border-color: var(--cl-lime);
  box-shadow: 0 0 0 3px rgba(200,245,84,.15);
}
.cl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cl-tos-row { display: flex; align-items: flex-start; gap: .75rem; margin: 1.5rem 0; }
.cl-tos-row input[type=checkbox] { flex-shrink: 0; margin-top: 3px; accent-color: var(--cl-void); }
.cl-tos-row label { font-size: .875rem; color: var(--cl-fog); line-height: 1.6; }
.cl-tos-row a { color: var(--cl-void); text-decoration: underline; }

/* ── PAGE BANNERS ─────────────────────────────────── */
.cl-pghead {
  background: var(--cl-void); padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
}
.cl-pghead h1 { color: var(--cl-milk); }
.cl-pghead .cl-tag { color: rgba(244,243,238,.35); display: inline-flex; margin-bottom: .875rem; }
.cl-pghead-sub { color: rgba(244,243,238,.45); max-width: 54ch; margin: .875rem auto 0; font-size: clamp(.9375rem, 1.8vw, 1.0625rem); }

/* Service page banner (with curve) */
.cl-svc-pghead {
  background: var(--cl-void); padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3rem, 5vw, 4.5rem);
  text-align: center; position: relative; overflow: hidden;
}
.cl-svc-pghead::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 60px; background: var(--cl-milk);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.cl-svc-pghead h1 { color: var(--cl-milk); position: relative; z-index: 1; }
.cl-svc-pghead .cl-tag { color: var(--cl-lime); justify-content: center; display: inline-flex; margin-bottom: .875rem; }
.cl-svc-pghead-sub { color: rgba(244,243,238,.45); max-width: 58ch; margin: .875rem auto 0; position: relative; z-index: 1; }

/* Service page layout */
.cl-svc-layout { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; align-items: start; padding: clamp(3rem, 6vw, 5rem) 0; }
.cl-svc-img-frame { border-radius: var(--cl-r12); overflow: hidden; aspect-ratio: 16/9; background: var(--cl-sand); margin-bottom: 2rem; }
.cl-svc-img-frame img { width: 100%; height: 100%; object-fit: cover; }
.cl-svc-body p { color: #5A5A72; margin-bottom: 1.25rem; font-size: .9375rem; line-height: 1.85; }
.cl-inc-box { background: var(--cl-sand); border-radius: var(--cl-r12); padding: 1.5rem; margin-top: 2rem; }
.cl-inc-hd { font-family: var(--cl-fh); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--cl-fog); margin-bottom: 1rem; }
.cl-inc-items { display: flex; flex-direction: column; gap: .5rem; }
.cl-inc-item { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; color: #4A4A62; }
.cl-inc-ico { color: var(--cl-void); flex-shrink: 0; margin-top: 1px; }
.cl-svc-sidebar { background: var(--cl-void); border-radius: var(--cl-r16); padding: 1.75rem; position: sticky; top: calc(var(--cl-navh) + 1.5rem); }
.cl-ss-nm { font-family: var(--cl-fh); font-size: 1.125rem; font-weight: 800; color: var(--cl-milk); margin-bottom: .25rem; }
.cl-ss-pr { font-family: var(--cl-fh); font-size: 2rem; font-weight: 800; color: var(--cl-lime); line-height: 1; margin-bottom: .375rem; }
.cl-ss-note { font-size: .8125rem; color: rgba(244,243,238,.3); margin-bottom: 1.25rem; }
.cl-ss-meta { background: rgba(244,243,238,.05); border-radius: var(--cl-r8); padding: 1rem; margin-bottom: 1.25rem; }
.cl-ss-ml { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(244,243,238,.25); margin-bottom: .25rem; font-family: var(--cl-fh); }
.cl-ss-mv { font-size: .875rem; color: rgba(244,243,238,.6); line-height: 1.6; }
.cl-ss-ctas { display: flex; flex-direction: column; gap: .75rem; }
.cl-ss-ctas a { justify-content: center; }
.cl-related { margin-top: 1.5rem; }
.cl-related-hd { font-family: var(--cl-fh); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--cl-fog); margin-bottom: 1rem; }
.cl-related-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .625rem .875rem; border-radius: var(--cl-r8);
  background: var(--cl-sand); border: 1.5px solid transparent;
  font-size: .875rem; font-weight: 600; color: var(--cl-void);
  margin-bottom: .375rem; transition: border-color .18s;
}
.cl-related-link:hover { border-color: var(--cl-void); }
.cl-related-arr { color: var(--cl-fog); flex-shrink: 0; }

/* ── FAQ (TWO-COLUMN) ─────────────────────────────── */
.cl-faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; }
.cl-faq-entry { border-bottom: 1.5px solid var(--cl-border-l); }
.cl-faq-q-btn {
  width: 100%; display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  padding: 1.125rem 0; background: none; border: none; text-align: left; cursor: pointer;
}
.cl-faq-q-txt { font-family: var(--cl-fh); font-size: 1rem; font-weight: 700; color: var(--cl-void); flex: 1; }
.cl-faq-q-ico { color: var(--cl-fog); flex-shrink: 0; transition: transform .25s; }
.cl-faq-entry.cl-faq-open .cl-faq-q-ico { transform: rotate(180deg); }
.cl-faq-a { display: none; padding-bottom: 1.125rem; }
.cl-faq-entry.cl-faq-open .cl-faq-a { display: block; }
.cl-faq-a p { font-size: .9375rem; color: var(--cl-fog); line-height: 1.8; }

/* ── ABOUT LAYOUT ─────────────────────────────────── */
.cl-about-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.cl-about-img { border-radius: var(--cl-r16); overflow: hidden; aspect-ratio: 3/4; background: var(--cl-sand); }
.cl-about-img img { width: 100%; height: 100%; object-fit: cover; }
.cl-about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.cl-about-stat { padding: 1.25rem; background: var(--cl-void); border-radius: var(--cl-r8); }
.cl-about-stat-n { font-family: var(--cl-fh); font-size: 1.75rem; font-weight: 800; color: var(--cl-lime); line-height: 1; }
.cl-about-stat-l { font-size: .75rem; color: rgba(244,243,238,.35); margin-top: .25rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }

/* ── CONTACT LAYOUT ───────────────────────────────── */
.cl-ct-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.cl-ct-info-dl { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.cl-ct-dl-row { display: flex; align-items: flex-start; gap: 1rem; }
.cl-ct-dl-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--cl-sand); color: var(--cl-void); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cl-ct-dl-lbl { font-family: var(--cl-fh); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--cl-fog); }
.cl-ct-dl-val { font-size: .9375rem; color: var(--cl-void); font-weight: 600; margin-top: .125rem; }
.cl-ct-form { background: #fff; border: 1.5px solid var(--cl-border-l); border-radius: var(--cl-r16); padding: 2rem; }

/* ── PAYMENT PAGES ────────────────────────────────── */
.cl-confirm-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.cl-confirm-box { max-width: 520px; text-align: center; padding: clamp(2rem, 5vw, 4rem); }
.cl-confirm-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(200,245,84,.12); color: var(--cl-void); margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; }
.cl-confirm-steps { text-align: left; margin: 2rem 0; display: flex; flex-direction: column; gap: .875rem; }
.cl-confirm-step { display: flex; align-items: flex-start; gap: 1rem; }
.cl-confirm-step-n { width: 32px; height: 32px; border-radius: 50%; background: var(--cl-void); color: var(--cl-lime); display: flex; align-items: center; justify-content: center; font-family: var(--cl-fh); font-size: .875rem; font-weight: 800; flex-shrink: 0; }
.cl-confirm-step p { font-size: .9rem; color: var(--cl-fog); line-height: 1.65; }
.cl-confirm-btns { display: flex; gap: .875rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }

/* ── LEGAL ────────────────────────────────────────── */
.cl-legal-wrap { max-width: 840px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 3vw, 2rem); }
.cl-legal-wrap h1 { text-align: center; margin-bottom: .5rem; }
.cl-legal-date { text-align: center; font-size: .875rem; color: var(--cl-fog); margin-bottom: 3rem; }
.cl-legal-wrap h2 { font-size: 1.25rem; margin: 2.5rem 0 .75rem; color: var(--cl-void); }
.cl-legal-wrap h3 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; color: var(--cl-ash); }
.cl-legal-wrap p  { color: #5A5A72; margin-bottom: 1rem; line-height: 1.85; }
.cl-legal-wrap ul, .cl-legal-wrap ol { margin: .875rem 0 1rem 1.5rem; }
.cl-legal-wrap li { color: #5A5A72; margin-bottom: .5rem; line-height: 1.75; }
.cl-legal-wrap ul li { list-style: disc; }
.cl-legal-wrap ol li { list-style: decimal; }
.cl-legal-wrap code { font-family: monospace; font-size: .875rem; background: var(--cl-sand); padding: .125rem .375rem; border-radius: 3px; }

/* ── COOKIE BANNER ────────────────────────────────── */
.cl-cookie-bar {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 9999; background: var(--cl-void);
  border: 1px solid var(--cl-border-d); border-radius: var(--cl-r12);
  padding: 1.125rem 1.5rem; display: flex; align-items: center;
  gap: 1.5rem; flex-wrap: wrap; box-shadow: var(--cl-sh3);
  max-width: min(640px, calc(100vw - 3rem));
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.cl-cookie-bar.cl-ck-visible { opacity: 1; visibility: visible; }
.cl-ck-txt { font-size: .875rem; color: rgba(244,243,238,.6); flex: 1; min-width: 180px; }
.cl-ck-txt a { color: var(--cl-lime); text-decoration: underline; }
.cl-ck-btns { display: flex; gap: .625rem; flex-shrink: 0; }
.cl-ck-ok {
  background: var(--cl-lime); color: var(--cl-void); border: none;
  font-family: var(--cl-fh); font-size: .875rem; font-weight: 700;
  padding: .5rem 1.125rem; border-radius: var(--cl-r4); cursor: pointer;
}
.cl-ck-no {
  background: transparent; color: rgba(244,243,238,.4);
  border: 1px solid rgba(244,243,238,.15);
  font-family: var(--cl-fh); font-size: .875rem; font-weight: 700;
  padding: .5rem 1.125rem; border-radius: var(--cl-r4); cursor: pointer;
}

/* ── CHAT WIDGET ──────────────────────────────────── */
.cl-chat-bubble {
  position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 8888;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--cl-lime); color: var(--cl-void);
  border: none; cursor: pointer; box-shadow: var(--cl-sh2);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s;
}
.cl-chat-bubble:hover { transform: scale(1.1); }
.cl-chat-window {
  position: fixed; bottom: 5.5rem; right: 1.75rem; z-index: 8888;
  width: 320px; background: #fff;
  border-radius: var(--cl-r16); box-shadow: var(--cl-sh3);
  border: 1.5px solid var(--cl-border-l);
  display: none; flex-direction: column; overflow: hidden;
}
.cl-chat-window.cl-chat-open { display: flex; }
.cl-chat-top { background: var(--cl-void); padding: 1rem 1.25rem; display: flex; align-items: center; gap: .75rem; }
.cl-chat-av { width: 36px; height: 36px; border-radius: 50%; background: var(--cl-lime); display: flex; align-items: center; justify-content: center; font-family: var(--cl-fh); font-size: .8125rem; font-weight: 800; color: var(--cl-void); }
.cl-chat-name { color: #fff; font-weight: 700; font-size: .9375rem; font-family: var(--cl-fh); }
.cl-chat-status { color: rgba(244,243,238,.45); font-size: .75rem; }
.cl-chat-messages { padding: 1rem; flex: 1; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: .625rem; }
.cl-chat-msg { max-width: 80%; padding: .625rem .875rem; border-radius: var(--cl-r8); font-size: .875rem; line-height: 1.5; }
.cl-chat-msg.cl-bot { background: var(--cl-sand); color: var(--cl-void); align-self: flex-start; border-bottom-left-radius: 3px; }
.cl-chat-msg.cl-usr { background: var(--cl-void); color: var(--cl-milk); align-self: flex-end; border-bottom-right-radius: 3px; }
.cl-chat-input-row { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1.5px solid var(--cl-border-l); }
.cl-chat-inp { flex: 1; border: 1.5px solid var(--cl-border-l); border-radius: var(--cl-r8); padding: .5rem .75rem; font-family: var(--cl-fb); font-size: .875rem; background: var(--cl-milk); }
.cl-chat-snd { background: var(--cl-void); color: var(--cl-lime); border: none; border-radius: var(--cl-r8); padding: .5rem .75rem; cursor: pointer; }

/* ── FOOTER ───────────────────────────────────────── */
.cl-footer {
  background: var(--cl-void); padding: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  color: rgba(244,243,238,.5);
}
.cl-ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cl-ft-logo {
  font-family: var(--cl-fh); font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  color: var(--cl-milk); letter-spacing: -.025em; margin-bottom: .875rem;
}
.cl-ft-logo span { color: var(--cl-lime); }
.cl-ft-tagline { font-size: .875rem; line-height: 1.7; max-width: 36ch; margin-bottom: 1.25rem; }
.cl-ft-socials { display: flex; gap: .625rem; }
.cl-ft-soc {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--cl-border-d); color: rgba(244,243,238,.4);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.cl-ft-soc:hover { border-color: var(--cl-lime); color: var(--cl-lime); }
.cl-ft-col-hd {
  font-family: var(--cl-fh); font-size: .75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(244,243,238,.25); margin-bottom: 1rem;
}
.cl-ft-col a { display: block; font-size: .875rem; margin-bottom: .5rem; transition: color .18s; }
.cl-ft-col a:hover { color: var(--cl-milk); }
.cl-ft-bar {
  border-top: 1px solid var(--cl-border-d); padding: 1.5rem 0;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; font-size: .8125rem; color: rgba(244,243,238,.2);
}
.cl-ft-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.cl-ft-legal a { color: rgba(244,243,238,.25); transition: color .18s; }
.cl-ft-legal a:hover { color: var(--cl-milk); }

/* ── UTILS ────────────────────────────────────────── */
.cl-ctr    { text-align: center; }
.cl-mt-sm  { margin-top: .875rem; }
.cl-mt-md  { margin-top: 1.75rem; }
.cl-mt-lg  { margin-top: 3rem; }
.cl-flex-c { display: flex; justify-content: center; align-items: center; gap: .875rem; flex-wrap: wrap; }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1040px) {
  .cl-tier-row { grid-template-columns: 200px 1fr auto; }
  .cl-ft-grid { grid-template-columns: 1fr 1fr; }
  .cl-press-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .cl-primary-nav, .cl-topbar-acts { display: none; }
  .cl-burger { display: flex; margin-left: auto; }
  .cl-roster-row { grid-template-columns: 44px 1fr auto; }
  .cl-roster-pr { display: none; }
  .cl-about-hero { grid-template-columns: 1fr; }
  .cl-ct-layout { grid-template-columns: 1fr; }
  .cl-builder-layout { grid-template-columns: 1fr; }
  .cl-summary-panel { position: static; }
  .cl-checkout-grid { grid-template-columns: 1fr; }
  .cl-order-panel { position: static; }
  .cl-case-panel.cl-panel-active { grid-template-columns: 1fr; }
  .cl-svc-layout { grid-template-columns: 1fr; }
  .cl-svc-sidebar { position: static; }
  .cl-faq-cols { grid-template-columns: 1fr; }
  .cl-tier-row { grid-template-columns: 1fr; gap: 1rem; }
  .cl-tier-pr { font-size: 1.75rem; }
}

@media (max-width: 640px) {
  .cl-hero-stats { gap: 1.5rem; }
  .cl-field-row { grid-template-columns: 1fr; }
  .cl-ft-grid { grid-template-columns: 1fr; }
  .cl-ft-bar { flex-direction: column; text-align: center; }
  .cl-about-stats { grid-template-columns: 1fr; }
  .cl-chat-window { width: calc(100vw - 3.5rem); right: 1rem; }
}

@media (max-width: 480px) {
  .cl-roster-row { grid-template-columns: 36px 1fr 32px; gap: .75rem; }
}