/* Eirin use-case pages. Shared by /use-cases/ and the five pages under it.
   Tokens mirror the main site's :root so both read as one product. */
:root {
  --ink: #1c1c1a;
  --body-moderate: #55554f;
  --body-subtle: #8d8d85;
  --accent: #0e8f62;
  --accent-deep: #0a6b4a;
  --accent-wash: #eaf4ef;
  --accent-line: #bfdfd2;
  --ground: #f7f7f5;
  --paper: #ffffff;
  --line: #e6e6e1;
  --line-strong: #d4d4cd;
  --warn: #c4564a;
  --warn-wash: #fbefed;
  --gutter: 120px;
  --maxw: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Fira Sans', sans-serif;
  color: var(--ink);
  background-color: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(14, 143, 98, 0.10) 0%, rgba(234, 244, 239, 0) 60%),
    radial-gradient(120% 90% at 50% 120%, #f0f1ee 0%, #f7f7f5 70%);
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.uc-wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons ---------- */
.uc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.24px;
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 28px -12px rgba(28, 28, 26, 0.35);
  transition: transform .15s ease, background .2s ease;
}
.uc-btn:hover { transform: translateY(-1px); }
.uc-btn:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.uc-btn svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.uc-btn:hover svg { transform: translateX(4px); }
.uc-btn.green { background: var(--accent); box-shadow: 0 14px 28px -12px rgba(14, 143, 98, 0.55); }
.uc-btn.sm { height: 34px; padding: 0 14px; font-size: 14px; border-radius: 8px; box-shadow: none; }

/* ---------- Nav ---------- */
.uc-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  background: rgba(247, 247, 245, 0.88);
  border-bottom: 1px solid var(--line);
}
.uc-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 62px; }
.uc-nav-left { display: flex; align-items: center; gap: 40px; }
.uc-logo { display: inline-flex; align-items: center; }
.uc-logo img { height: 24px; width: auto; display: block; }
.uc-nav-links { display: flex; align-items: center; gap: 24px; }
.uc-nav-links > a, .uc-dd > button {
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--body-moderate);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.uc-nav-links > a:hover, .uc-dd > button:hover, .uc-dd.open > button { color: var(--ink); }
.uc-nav-right { display: flex; align-items: center; gap: 14px; }

/* Use-cases dropdown (shared look with the main site's) */
.uc-dd { position: relative; }
.uc-dd > button { display: inline-flex; align-items: center; gap: 6px; }
.uc-dd > button svg { width: 12px; height: 12px; transition: transform .2s ease; }
.uc-dd.open > button svg { transform: rotate(180deg); }
.uc-dd-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  width: 400px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(28, 28, 26, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.uc-dd.open .uc-dd-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.uc-dd-panel a { display: block; padding: 10px 12px; border-radius: 9px; }
.uc-dd-panel a:hover, .uc-dd-panel a:focus-visible { background: var(--accent-wash); outline: none; }
.uc-dd-panel a b { display: block; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.uc-dd-panel a span { display: block; font-size: 13px; line-height: 18px; color: var(--body-moderate); margin-top: 2px; }
.uc-dd-panel a[aria-current="page"] b { color: var(--accent-deep); }
.uc-dd-panel .uc-dd-all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; border-radius: 0 0 9px 9px; }
.uc-dd-panel .uc-dd-all b { font-size: 13px; color: var(--accent-deep); }

/* ---------- Hero ---------- */
.uc-hero { padding: 72px 0 64px; }
.uc-hero .uc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: center; }
.uc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 50px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.uc-eyebrow img { width: 16px; height: 16px; }
.uc-hero h1 {
  margin-top: 24px;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 3.9vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.uc-hero h1 span { display: block; text-wrap: balance; }
.uc-hero h1 span + span { color: var(--accent); }
.uc-hero .uc-sub { margin-top: 22px; font-size: 18px; line-height: 28px; color: var(--body-moderate); max-width: 560px; }
.uc-hero .uc-cta-row { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.uc-hero .uc-cta-note { font-size: 14px; line-height: 20px; color: var(--body-moderate); }
.uc-checks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; }
.uc-checks li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--body-moderate); }
.uc-checks li::before {
  content: "";
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---------- Example cards (the "before / after" in the hero) ---------- */
.uc-demo { position: relative; display: flex; flex-direction: column; gap: 14px; }
.uc-demo-label {
  font-family: 'Fira Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--body-subtle);
}
.uc-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(28, 28, 26, .04), 0 22px 48px -28px rgba(28, 28, 26, .35);
}
.uc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.uc-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.uc-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #eceae4; color: var(--body-moderate);
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px;
}
.uc-avatar.eirin { background: var(--accent); color: #fff; }
.uc-avatar img { width: 18px; height: 18px; }
.uc-who b { display: block; font-size: 14px; font-weight: 600; }
.uc-who small { display: block; font-size: 12px; color: var(--body-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-stars { color: #e0a400; font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.uc-stars i { color: #d9d7d0; font-style: normal; }
.uc-card p.msg { font-size: 15px; line-height: 23px; color: var(--ink); }
.uc-card .meta { margin-top: 10px; font-size: 12px; color: var(--body-subtle); }
.uc-card.draft { border-color: var(--accent-line); background: linear-gradient(180deg, #fbfdfc 0%, #ffffff 100%); position: relative; }
.uc-card.draft::before {
  content: "";
  position: absolute; left: 22px; right: 22px; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.uc-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .3px;
  background: var(--accent-wash); color: var(--accent-deep);
  white-space: nowrap;
}
.uc-tag.grey { background: #f0efea; color: var(--body-moderate); }
.uc-cite {
  margin-top: 12px; padding: 9px 12px; border-radius: 10px;
  background: var(--ground); border: 1px dashed var(--line-strong);
  font-size: 12.5px; line-height: 18px; color: var(--body-moderate);
}
.uc-cite b { color: var(--ink); font-weight: 600; }
.uc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.uc-actions span {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: 7px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-strong); color: var(--body-moderate); background: var(--paper);
}
.uc-actions span.go { background: var(--accent); border-color: var(--accent); color: #fff; }
.uc-arrow { display: flex; justify-content: center; color: var(--accent); margin: -4px 0; }
.uc-arrow svg { width: 22px; height: 22px; }
.uc-email-head { font-size: 13px; line-height: 20px; color: var(--body-moderate); border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.uc-email-head b { color: var(--ink); font-weight: 600; }

/* Report preview */
.uc-report .uc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 16px; }
.uc-report .uc-kpi { background: var(--ground); border-radius: 10px; padding: 10px 12px; }
.uc-report .uc-kpi b { display: block; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 20px; }
.uc-report .uc-kpi small { font-size: 11.5px; color: var(--body-moderate); }
.uc-report .uc-kpi b.down { color: var(--warn); }
.uc-report h4 { font-family: 'Fira Mono', monospace; font-weight: 500; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-subtle); margin-bottom: 8px; }
.uc-rank { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.uc-rank li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.uc-rank .t { font-size: 14px; font-weight: 600; }
.uc-rank .n { font-family: 'Fira Mono', monospace; font-size: 12.5px; color: var(--body-moderate); }
.uc-rank .bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: #efeee9; overflow: hidden; }
.uc-rank .bar i { display: block; height: 100%; border-radius: 6px; background: var(--warn); opacity: .8; }
.uc-rank .q { grid-column: 1 / -1; font-size: 12.5px; line-height: 18px; color: var(--body-moderate); font-style: italic; }
.uc-flag { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--warn-wash); font-size: 13px; line-height: 19px; }
.uc-flag b { color: var(--warn); }

/* Job post vs Eirin (CM page) */
.uc-job li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.uc-job li:first-child { border-top: 0; }
.uc-job ul { list-style: none; }
.uc-job .ok, .uc-job .no { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.uc-job .ok { background: var(--accent); color: #fff; }
.uc-job .no { background: #efeee9; color: var(--body-subtle); }
.uc-job li em { font-style: normal; font-size: 12px; color: var(--body-subtle); white-space: nowrap; }

/* ---------- Proof strip ---------- */
.uc-proof { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uc-proof .uc-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.uc-proof-item { padding: 30px 24px; border-left: 1px solid var(--line); }
.uc-proof-item:first-child { border-left: 0; padding-left: 0; }
.uc-proof-item b { display: block; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; color: var(--accent-deep); }
.uc-proof-item span { display: block; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--body-moderate); }

/* ---------- Generic section ---------- */
.uc-sec { padding: 104px 0; background: var(--ground); }
.uc-sec.paper { background: var(--paper); }
.uc-sec-head { max-width: 760px; margin-bottom: 48px; }
.uc-sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.uc-kicker { font-family: 'Fira Mono', monospace; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.uc-sec h2 {
  margin-top: 12px;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.uc-sec-head p:not(.uc-kicker) { margin-top: 14px; font-size: 17px; line-height: 27px; color: var(--body-moderate); }

/* Pain: the searcher's own words */
.uc-pain { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.uc-quote {
  position: relative;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.015em;
  padding-left: 28px;
  border-left: 3px solid var(--accent);
}
.uc-quote small { display: block; margin-top: 14px; font-family: 'Fira Sans', sans-serif; font-weight: 400; font-size: 14px; color: var(--body-subtle); letter-spacing: 0; }
.uc-pains { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.uc-pains li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 16px; line-height: 25px; color: var(--body-moderate); }
.uc-pains li::before {
  content: "";
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--warn-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23c4564a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Feature cards */
.uc-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.uc-feat { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px 30px; }
.uc-sec.paper .uc-feat { background: var(--ground); }
.uc-feat .ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent-deep);
  border: 1px solid var(--accent-line);
}
.uc-feat .ico svg { width: 22px; height: 22px; }
.uc-feat h3 { margin-top: 18px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 20px; line-height: 27px; }
.uc-feat p { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--body-moderate); }

/* Steps */
.uc-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.uc-step { position: relative; padding: 28px 26px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.uc-sec.paper .uc-step { background: var(--ground); }
.uc-step::before {
  counter-increment: step;
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px;
}
.uc-step h3 { margin-top: 18px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 19px; line-height: 26px; }
.uc-step p { margin-top: 6px; font-size: 15px; line-height: 23px; color: var(--body-moderate); }
.uc-step .time { display: inline-block; margin-top: 12px; font-family: 'Fira Mono', monospace; font-size: 12px; color: var(--accent-deep); }

/* Channels */
.uc-chan-groups { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.uc-chan-group { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; }
.uc-sec.paper .uc-chan-group { background: var(--ground); }
.uc-chan-group h3 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 17px; }
.uc-chan-group > p { margin-top: 4px; font-size: 14px; color: var(--body-moderate); }
.uc-chans { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.uc-chans li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 10px; border-radius: 10px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 14px; font-weight: 500;
}
.uc-sec:not(.paper) .uc-chans li { background: var(--ground); }
.uc-chans li img { width: 20px; height: 20px; }
.uc-chans li.lead { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.uc-chan-note { margin-top: 14px; font-size: 13px; color: var(--body-subtle); }

/* CM comparison table */
.uc-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.uc-table th, .uc-table td { text-align: left; padding: 16px 22px; border-top: 1px solid var(--line); font-size: 15px; line-height: 22px; vertical-align: top; }
.uc-table thead th { border-top: 0; background: var(--ground); font-family: 'Fira Mono', monospace; font-weight: 500; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--body-subtle); }
.uc-table td:first-child { font-weight: 600; width: 38%; }
.uc-table td .yes, .uc-table td .notyet { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.uc-table td .yes { background: var(--accent-wash); color: var(--accent-deep); }
.uc-table td .notyet { background: #f0efea; color: var(--body-moderate); }
.uc-table td span.txt { color: var(--body-moderate); }

/* ---------- Booking ---------- */
.uc-book { padding: 104px 0; background: var(--ink); color: #f4f4f1; scroll-margin-top: 62px; position: relative; overflow: hidden; }
.uc-book::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 0% 0%, rgba(14, 143, 98, 0.35) 0%, rgba(14, 143, 98, 0) 70%);
}
.uc-book .uc-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.uc-book h2 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; letter-spacing: -0.025em; color: #fff; }
.uc-book .lead { margin-top: 16px; font-size: 17px; line-height: 27px; color: rgba(244, 244, 241, .78); }
.uc-offer { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.uc-offer li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 15.5px; line-height: 24px; color: rgba(244, 244, 241, .9); }
.uc-offer li::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(14, 143, 98, .25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2334c08a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.uc-offer li b { color: #fff; font-weight: 600; }
.uc-agenda { margin-top: 30px; padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.uc-agenda h3 { font-family: 'Fira Mono', monospace; font-weight: 500; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: #34c08a; }
.uc-agenda ol { margin-top: 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 22px; color: rgba(244, 244, 241, .85); }
.uc-cal {
  scroll-margin-top: 72px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  min-height: 700px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
  position: relative;
}
.uc-cal-mount { height: 700px; }
.uc-cal-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 32px; text-align: center; color: var(--body-moderate); font-size: 15px;
}
.uc-cal.ready .uc-cal-fallback { display: none; }
.uc-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: uc-spin .8s linear infinite; }
@keyframes uc-spin { to { transform: rotate(360deg); } }
.uc-booked { display: none; position: absolute; inset: 0; background: #fff; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; gap: 12px; color: var(--ink); }
.uc-cal.booked .uc-booked { display: flex; }
.uc-booked .check { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--accent-deep); font-size: 28px; }
.uc-booked h3 { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 26px; }
.uc-booked p { max-width: 380px; font-size: 15px; line-height: 23px; color: var(--body-moderate); }

/* ---------- FAQ ---------- */
.uc-faq { max-width: 820px; margin: 0 auto; }
.uc-faq details { border-top: 1px solid var(--line); }
.uc-faq details:last-child { border-bottom: 1px solid var(--line); }
.uc-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 18px; line-height: 26px;
}
.uc-faq summary::-webkit-details-marker { display: none; }
.uc-faq summary::after {
  content: "+"; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent-deep); font-size: 20px; font-weight: 500;
  transition: transform .2s ease;
}
.uc-faq details[open] summary::after { transform: rotate(45deg); }
.uc-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.uc-faq details p { padding: 0 50px 24px 0; font-size: 16px; line-height: 26px; color: var(--body-moderate); }

/* ---------- Final CTA ---------- */
.uc-final { text-align: center; padding: 96px 0; }
.uc-final h2 {
  margin: 0 auto; max-width: 760px;
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: clamp(30px, 3vw, 42px); line-height: 1.15; letter-spacing: -0.025em;
}
.uc-final p { margin: 16px auto 30px; max-width: 560px; font-size: 17px; line-height: 27px; color: var(--body-moderate); }

/* ---------- Other use cases ---------- */
.uc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.uc-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px; border-radius: 16px;
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.uc-tile:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(28, 28, 26, .4); }
.uc-tile small { font-family: 'Fira Mono', monospace; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.uc-tile b { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 20px; line-height: 26px; }
.uc-tile span { font-size: 14.5px; line-height: 22px; color: var(--body-moderate); }
.uc-tile em { margin-top: auto; padding-top: 8px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--accent-deep); }

/* ---------- Footer ---------- */
.uc-foot { border-top: 1px solid var(--line); background: var(--ground); }
.uc-foot .uc-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 26px; padding-bottom: 26px; }
.uc-foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--body-moderate); }
.uc-foot-links a:hover { color: var(--ink); }
.uc-foot-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; letter-spacing: .48px; text-transform: uppercase; color: var(--body-subtle); }

/* ---------- Sticky mobile CTA ---------- */
.uc-sticky {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  display: none;
  transform: translateY(140%);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.uc-sticky .uc-btn { width: 100%; height: 50px; }
.uc-sticky.show { transform: none; }

/* ---------- Ad focus mode ----------
   Set on <html> when the visit came from a paid click (gclid / UTM cpc).
   The page keeps one exit: the booking calendar. */
.uc-focus .uc-nav-links,
.uc-focus .uc-more,
.uc-focus .uc-foot-links { display: none !important; }
.uc-focus .uc-logo { pointer-events: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .uc-hero .uc-wrap { gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
  .uc-feats, .uc-steps { gap: 16px; }
}
@media (max-width: 960px) {
  .uc-hero .uc-wrap { grid-template-columns: minmax(0, 1fr); }
  .uc-demo { max-width: 560px; }
  .uc-pain { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .uc-feats, .uc-steps { grid-template-columns: minmax(0, 1fr); }
  .uc-chan-groups { grid-template-columns: minmax(0, 1fr); }
  .uc-proof .uc-wrap { grid-template-columns: repeat(2, 1fr); }
  .uc-proof-item { padding: 24px 20px; }
  .uc-proof-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .uc-proof-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .uc-book .uc-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 900px) {
  .uc-nav-links { display: none; }
  .uc-sticky { display: block; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .uc-nav-inner { height: 56px; }
  .uc-logo img { height: 21px; }
  .uc-hero { padding: 40px 0 48px; }
  .uc-hero h1 { font-size: 34px; }
  .uc-hero .uc-sub { font-size: 16px; line-height: 25px; }
  .uc-hero .uc-cta-row .uc-btn { width: 100%; }
  .uc-sec { padding: 72px 0; }
  .uc-sec-head { margin-bottom: 32px; }
  .uc-proof .uc-wrap { grid-template-columns: minmax(0, 1fr); }
  .uc-proof-item, .uc-proof-item:nth-child(3) { border-left: 0; padding: 20px 0; }
  .uc-proof-item + .uc-proof-item { border-top: 1px solid var(--line); }
  .uc-card { padding: 18px; }
  .uc-report .uc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .uc-report .uc-kpi { padding: 8px; }
  .uc-report .uc-kpi b { font-size: 17px; }
  .uc-quote { padding-left: 18px; }
  .uc-book { padding: 72px 0; }
  .uc-cal, .uc-cal-mount { min-height: 640px; height: 640px; }
  .uc-table th, .uc-table td { padding: 12px 14px; font-size: 14px; }
  .uc-table td:first-child { width: 44%; }
  .uc-faq summary { font-size: 16.5px; }
  .uc-faq details p { padding-right: 0; font-size: 15px; }
  .uc-final { padding: 72px 0 96px; }
  .uc-foot .uc-wrap { padding-bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .uc-btn, .uc-btn svg, .uc-sticky, .uc-dd-panel, .uc-tile { transition: none; }
  .uc-spinner { animation: none; }
}
.uc-grid.wide { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
@media (max-width: 600px) { .uc-grid.wide { grid-template-columns: minmax(0, 1fr); } }