/* ClerkMinutes design tokens (from the ClerkMinutes design system) */
:root {
  --cm-pink: #FF3EA5;
  --cm-pink-link: #E94FA5;
  --cm-ink: #0A0A0F;
  --cm-slate: #55555F;
  --cm-white: #FFFFFF;
  --cm-border: #E8E8EC;
  --cm-hairline: #F0F0F3;
  --cm-border-input: #D5D5DC;
  --cm-muted: #9A9AA4;
  --text-body: var(--cm-slate);
  --text-muted: var(--cm-muted);
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-card: 12px;
  --shadow-screenshot: 0 12px 32px rgba(10, 10, 15, 0.12);

  /* Holiday palette */
  --xmas-green: #0F4A30;
  --xmas-red: #B5121B;
  --xmas-gold: #C9A04A;
  --xmas-cream: #FEF7EB;
  --xmas-cream-border: #F2EADB;

  /* Horizontal page gutter: 20px under 640px, 8.33% of width above it */
  --gutter-wide: clamp(20px, (100cqw - 640px) * 99, max(20px, 8.33cqw));
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--cm-white);
  font-family: var(--font-sans);
  color: #000000;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--cm-pink-link); text-decoration: none; }
a:hover { color: var(--cm-pink); }

h1, h2, h3, p { margin: 0; }

.page {
  container-type: inline-size;
  width: 100%;
  overflow-x: hidden;
}

.wrap-1200 { max-width: 1200px; margin: 0 auto; }

/* ---------- Holiday button ---------- */
.hbtn-wrap { position: relative; display: inline-block; }

.hbtn {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  background: #0A0A0F;
  transform: scale(1);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background .15s ease;
}
.hbtn:hover, .hbtn:focus-visible {
  color: #FFFFFF;
  background: linear-gradient(135deg, #B5121B 0%, #0F4A30 100%);
  transform: scale(1.04);
}

.hbtn-ribbons { position: absolute; inset: 0; pointer-events: none; }
.hbtn-ribbons img {
  position: absolute;
  height: auto;
  opacity: 0;
  transform: translate(0px, 0px) scale(0);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) var(--d), opacity .15s ease var(--d);
}
.hbtn-wrap:has(.hbtn:hover) .hbtn-ribbons img,
.hbtn-wrap:has(.hbtn:focus-visible) .hbtn-ribbons img {
  opacity: 1;
  transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot));
}
.rb-1 { top: -18px; left: -14px; width: 30px; --tx: -16px; --ty: -12px; --rot: -22deg; --d: 0ms; }
.rb-2 { top: -22px; left: 42%; width: 20px; --tx: 0px; --ty: -12px; --rot: 12deg; --d: 60ms; }
.rb-3 { top: -16px; left: calc(100% - 18px); width: 32px; --tx: 18px; --ty: -12px; --rot: 24deg; --d: 30ms; }
.rb-4 { top: calc(100% - 10px); left: 4px; width: 22px; --tx: -14px; --ty: 12px; --rot: -16deg; --d: 90ms; }
.rb-5 { top: calc(100% - 8px); left: calc(100% - 46px); width: 20px; --tx: 12px; --ty: 12px; --rot: 18deg; --d: 50ms; }

@media (prefers-reduced-motion: reduce) {
  .hbtn, .hbtn-ribbons img { transition: none; }
}

/* ---------- Top bar + nav ---------- */
.topbar { height: 7px; background: var(--xmas-green); border-bottom: 3px solid var(--xmas-gold); }

.nav {
  background: var(--xmas-cream);
  border-bottom: 1px solid #BDB6AA;
  padding: clamp(12px, 1.7cqw, 24px) var(--gutter-wide);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-logo { height: clamp(20px, 2.2cqw, 32px); width: auto; display: block; }
/* Hides the nav CTA below 640px; the extra padding leaves room for the hover ribbons */
.nav-cta {
  max-width: clamp(0px, (100cqw - 640px) * 99, 400px);
  padding: clamp(0px, (100cqw - 640px) * 99, 34px);
  margin: clamp(-34px, (100cqw - 640px) * -99, 0px);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* ---------- Hero ---------- */
.hero {
  background: var(--xmas-cream);
  /* +50px top and bottom; bottom stays 0 under 640px so the image stays flush on phones */
  padding: calc(clamp(40px, 4.2cqw, 60px) + 50px) var(--gutter-wide) clamp(0px, (100cqw - 640px) * 99, 110px);
}
.hero-inner { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 2.8cqw, 40px); }
.hero-copy {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.4cqw, 20px);
}
.hero h1 { font-size: clamp(36px, 4.45cqw, 64px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.hero h1 span { color: var(--xmas-red); }
.hero-lead { font-size: clamp(15px, 1.25cqw, 18px); line-height: 1.3; color: #55555F; max-width: 400px; }
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 6px; }
.hero-note { font-size: 11px; line-height: 1.4; color: #55555F; }
.hero-art {
  flex: 1.4 1 480px;
  min-width: 0;
  margin-inline: clamp(-20px, (100cqw - 640px) * 99, 0px);
  margin-top: clamp(20px, 2cqw, 30px);
}
.hero-scene { position: relative; width: 100%; aspect-ratio: 669 / 374; }
.hero-scene img { position: absolute; display: block; }
.hero-desk { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-santa { bottom: 0; left: 18%; width: 64%; height: auto; }
.hero-hoho { top: -7.5%; left: 4%; width: 41%; height: auto; }

/* ---------- Shared section type ---------- */
.body-copy { font-size: clamp(15px, 1.25cqw, 18px); line-height: 1.3; }
.h2 { font-size: clamp(28px, 3.33cqw, 48px); font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Familiar ---------- */
.familiar { padding: calc(clamp(56px, 4.4cqw, 64px) + 50px) clamp(20px, 3.5cqw, 48px) calc(clamp(56px, 4.2cqw, 60px) + 50px); }
.familiar-inner { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(12px, 1.2cqw, 8px); }
.familiar .h2 { line-height: 1.2; margin: 0 0 clamp(8px, 1.7cqw, 24px); }

/* ---------- Green band ---------- */
.band {
  background: var(--xmas-green) url(assets/green-bg.jpg) center / cover no-repeat;
  padding: clamp(24px, 6.5cqw, 94px) 20px;
}
.band h2 {
  font-size: clamp(26px, 3.6cqw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 auto;
  max-width: 11em;
  text-align: center;
  color: var(--cm-white);
}

/* ---------- Video ---------- */
.video { padding: clamp(8px, 0.6cqw, 8px) clamp(18px, 3.5cqw, 48px) clamp(56px, 4.9cqw, 70px); }
.video-frame {
  max-width: 805px;
  margin: 0 auto;
  aspect-ratio: 805 / 456;
  border-radius: 10px;
  overflow: hidden;
  background: #262626;
  border: 3px solid #A87B3A;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Built for busy clerks ---------- */
.built { padding: 0 clamp(20px, 3.5cqw, 48px) clamp(56px, 4.2cqw, 60px); }
.built-inner { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; }
.built .h2 { line-height: 1.2; margin: 0 0 clamp(12px, 1.4cqw, 20px); }
.built-intro { font-size: clamp(14px, 1.25cqw, 18px); line-height: 1.35; margin: 0 0 clamp(28px, 2.6cqw, 36px); }
.built-list { display: flex; flex-direction: column; gap: clamp(14px, 1.2cqw, 16px); }
.built-item {
  display: grid;
  grid-template-columns: clamp(24px, 3.4cqw, 48px) 1fr;
  column-gap: clamp(12px, 0.8cqw, 12px);
  align-items: start;
}
.built-item > img { width: 100%; height: auto; display: block; margin-top: 2px; }
.built-item > div { display: flex; flex-direction: column; gap: 8px; }
.h3 { font-size: clamp(17px, 2.1cqw, 30px); font-weight: 500; letter-spacing: -0.01em; }
.built-item .h3 { line-height: 1.15; }
.small-copy { font-size: clamp(13px, 1.25cqw, 18px); line-height: 1.35; }
.built-shot { margin-top: clamp(32px, 2.5cqw, 36px); width: 100%; }

/* Browser frame (design system BrowserFrame) */
.browser {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-screenshot);
  border: 1px solid var(--cm-border);
  background: var(--cm-white);
}
.browser-bar { background: var(--cm-hairline); padding: 10px 14px; display: flex; gap: 6px; }
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--cm-border-input); display: block; }
.browser > img { width: 100%; object-fit: cover; object-position: top; display: block; }

/* ---------- Unwraps (feature cards) ---------- */
.unwraps { background: var(--xmas-cream); padding: clamp(56px, 4.4cqw, 64px) var(--gutter-wide); }
.unwraps-inner { display: flex; flex-direction: column; gap: clamp(32px, 2.5cqw, 36px); }
.unwraps .h2 { line-height: 1.15; margin: 0 auto; max-width: 16.5em; text-align: center; text-wrap: balance; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(24px, 1.8cqw, 26px);
}
.card {
  background: var(--cm-white);
  border: 1px solid var(--xmas-cream-border);
  border-radius: 8px;
  padding: clamp(28px, 3.5cqw, 50px) clamp(16px, 2.2cqw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4cqw, 20px);
}
.card--full { grid-column: 1 / -1; }
.card-head { display: flex; align-items: center; gap: 12px; }
.card-head img { width: clamp(38px, 3.6cqw, 52px); height: auto; display: block; flex-shrink: 0; }
.card .h3 { line-height: 1.12; }

/* ---------- Social proof ---------- */
.proof { padding: clamp(36px, 0.8cqw, 12px) clamp(24px, 3.5cqw, 48px) clamp(40px, 3.8cqw, 54px); }
.proof-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.proof-badge { display: block; width: 100%; max-width: 575px; height: auto; }
.proof h2 {
  font-size: clamp(18px, 3.6cqw, 52px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: clamp(20px, 2.8cqw, 40px) 0 clamp(16px, 2.5cqw, 36px);
  max-width: 15em;
  text-wrap: balance;
}
.proof-quote-mark {
  font-size: clamp(52px, 7cqw, 100px);
  font-weight: 800;
  line-height: 0.6;
  height: clamp(34px, 5.4cqw, 78px);
  color: #4C8DF6;
  font-family: Georgia, serif;
}
.proof blockquote {
  font-size: clamp(13px, 1.25cqw, 18px);
  font-style: italic;
  line-height: 1.2;
  color: #3F3F46;
  margin: clamp(10px, 1.4cqw, 20px) 0 clamp(12px, 1.4cqw, 16px);
  max-width: 590px;
}
.proof-person { display: flex; align-items: center; gap: 8px; text-align: left; }
.proof-person img {
  width: clamp(42px, 3.7cqw, 54px);
  height: clamp(42px, 3.7cqw, 54px);
  object-fit: cover;
  border-radius: 999px;
  display: block;
  flex-shrink: 0;
}
.proof-person div { display: flex; flex-direction: column; gap: 4px; }
.proof-person p { font-size: clamp(14px, 1.25cqw, 18px); line-height: 1.2; }
.proof-name { font-weight: 600; }

/* ---------- Final CTA ---------- */
.final {
  background: linear-gradient(135deg, #00C4FF 0%, #8E8CE8 52%, #FF3EA5 100%);
  padding: clamp(56px, 4.4cqw, 64px) 24px clamp(52px, 4.2cqw, 60px);
}
.final-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.final h2 {
  font-size: clamp(26px, 3.6cqw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--cm-white);
  max-width: 12.5em;
  text-wrap: balance;
}
.final-lead {
  font-size: clamp(14px, 1.25cqw, 18px);
  line-height: 1.3;
  color: var(--cm-white);
  margin: clamp(18px, 1.7cqw, 24px) 0 clamp(20px, 1.7cqw, 24px);
}
.final-note { font-size: clamp(10px, 1cqw, 14px); line-height: 1.4; color: var(--cm-white); margin: clamp(16px, 1.4cqw, 20px) 0 0; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--cm-border); padding: 56px var(--gutter-wide) 32px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 40px; }
.footer-brand { display: flex; flex-direction: column; }
.footer-logo { height: 24px; width: auto; align-self: flex-start; display: block; margin-bottom: 20px; }
.footer-company { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.footer-address { font-size: 13px; line-height: 1.7; color: var(--text-body); }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col-title { font-size: 13px; font-weight: 700; margin: 0 0 5px; }
.footer-col a, .footer-address a { font-size: 13px; color: var(--text-body); }
.footer-col a:hover, .footer-address a:hover { color: var(--cm-pink); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--cm-border);
  font-size: 12px;
  color: var(--text-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-legal a { color: var(--text-muted); }
.footer-legal a:hover { color: var(--cm-pink); }