/* ============================================================
   Dailey Digital — RingEX landing pages
   Tokens mirror site/assets/styles.css so these drop into dailey.us.
   Dailey Digital leads the look; RingCentral marks stay secondary
   (see Partner Co-Branding Guidelines).
   ============================================================ */

:root {
  --navy-900: #06202F;
  --navy-800: #0A2C42;
  --navy-700: #0F3A57;
  --navy-600: #15496e;
  --charcoal: #1c2831;
  --slate: #4a5563;
  --mist: #6b7686;
  --line: #e4e8ee;
  --cloud: #eef3f8;
  --white: #ffffff;
  --brand: #1470AF;
  --brand-dark: #105a8c;
  --accent: #1B9CDD;
  --cta: #1B9CDD;
  --cta-dark: #1588c4;
  --cta-ink: #06283b;
  --phone: #4FC3F7;
  --ok: #1b9e57;
  --warn: #F5A623;

  --f-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-heavy: "Archivo Black", var(--f-sans);

  --wrap: 1160px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(9,25,45,.06), 0 2px 8px rgba(9,25,45,.06);
  --shadow-md: 0 8px 24px rgba(9,25,45,.10);
  --shadow-lg: 0 20px 50px rgba(9,25,45,.18);
  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0; font-family: var(--f-sans); color: var(--charcoal); background: var(--white);
  line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-family: var(--f-sans); color: var(--navy-800); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
h1 { font-family: var(--f-heavy); font-weight: 400; letter-spacing: -.01em; line-height: 1.05; font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
sup { font-size: .6em; line-height: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(3.25rem, 7vw, 5.5rem) 0; }
.section.tint { background: var(--cloud); }
.section.dark { background: radial-gradient(120% 140% at 80% 0%, var(--navy-700), var(--navy-900) 70%); color: #d5e3ee; }
.section.dark h2, .section.dark h3 { color: #fff; }
.eyebrow {
  display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .9rem;
}
.dark .eyebrow, .hero-dark .eyebrow { color: var(--phone); }
.section-head { max-width: 680px; margin-bottom: 2.5rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.lead { font-size: 1.12rem; color: var(--slate); }
.dark .lead { color: #b9cddb; }
.fine { font-size: .82rem; color: var(--mist); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-sans); font-weight: 700; font-size: 1rem; line-height: 1;
  padding: .9rem 1.5rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-call { background: var(--cta); color: var(--cta-ink); box-shadow: 0 6px 18px rgba(27,156,221,.45); }
.btn-call:hover { background: var(--cta-dark); }
.btn-solid { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(20,112,175,.35); }
.btn-solid:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-outline { background: #fff; color: var(--navy-800); border-color: var(--line); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-lg { font-size: 1.08rem; padding: 1.1rem 1.9rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- header (no nav: landing pages keep one exit — the CTA) ---------- */
.lp-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.lp-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; }
.lp-logo img { height: 36px; width: auto; }
.lp-header .right { display: flex; align-items: center; gap: 1rem; }
.lp-header .hours { font-size: .86rem; color: var(--mist); text-align: right; line-height: 1.3; }
.lp-header .hours b { display: block; color: var(--navy-800); }

/* ---------- co-brand strip: RingCentral mark is always smaller than Dailey's ---------- */
.cobrand { background: #fff; border-bottom: 1px solid var(--line); }
.cobrand .row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem 1.4rem; padding: .95rem 0; font-size: .93rem; color: var(--slate); text-align: center; }
.cobrand img { height: 17px; width: auto; }
.cobrand .sep { width: 1px; height: 20px; background: var(--line); }
.cobrand b { color: var(--navy-800); }

/* ---------- hero: dark (variant A) ---------- */
.hero-dark { position: relative; color: #d5e3ee; background: var(--navy-900); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero-dark::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6,32,47,.94) 0%, rgba(6,32,47,.80) 45%, rgba(6,32,47,.50) 100%);
}
.hero-dark .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4rem); align-items: center; padding: clamp(2.75rem,6vw,4.75rem) 0; }
.hero-dark h1 { color: #fff; }
.hero-dark h1 em { font-style: normal; color: var(--phone); }
.hero-dark .lead { color: #c3d5e2; max-width: 34rem; }

/* ---------- hero: light split (variant B) ---------- */
.hero-light { background: linear-gradient(180deg, #f6fafd 0%, #fff 100%); }
.hero-light .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; padding: clamp(2.5rem,6vw,4.5rem) 0; }
.hero-light h1 em { font-style: normal; color: var(--brand); }
.hero-photo { position: relative; }
.hero-photo > img { border-radius: 22px; box-shadow: var(--shadow-lg); aspect-ratio: 5/4; object-fit: cover; width: 100%; }
.float-chip {
  position: absolute; background: #fff; border-radius: 14px; box-shadow: var(--shadow-md);
  padding: .75rem 1rem; font-size: .9rem; font-weight: 600; color: var(--navy-800);
  display: flex; align-items: center; gap: .6rem; line-height: 1.25;
}
.float-chip small { display: block; font-weight: 500; color: var(--mist); font-size: .78rem; }
.float-chip .dot { width: 34px; height: 34px; border-radius: 50%; background: var(--cloud); color: var(--brand); display: grid; place-items: center; flex: none; }
.float-chip .dot svg { width: 18px; height: 18px; }
.float-chip.tl { top: 8%; left: -5%; }
.float-chip.br { bottom: 8%; right: -4%; }

/* ---------- hero: centered quiz (variant C) ---------- */
.hero-quiz { background: radial-gradient(110% 120% at 50% 0%, #e3f1fb 0%, #f6fafd 45%, #fff 100%); text-align: center; }
.hero-quiz .wrap { padding: clamp(2.5rem,6vw,4.25rem) 0 clamp(2.5rem,5vw,3.5rem); }
.hero-quiz h1 { max-width: 15em; margin-inline: auto; }
.hero-quiz h1 em { font-style: normal; color: var(--brand); }
.hero-quiz .lead { max-width: 40rem; margin: 0 auto 2rem; }
.hero-quiz .form-card { max-width: 620px; margin-inline: auto; text-align: left; }

/* ---------- checks ---------- */
.check-list { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: .7rem; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; }
.check-list svg { width: 22px; height: 22px; flex: none; color: var(--ok); margin-top: .15rem; }
.hero-dark .check-list li { color: #e7f0f6; }
.hero-dark .check-list svg { color: var(--phone); }
.rating { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--slate); flex-wrap: wrap; }
.rating .stars { color: var(--warn); letter-spacing: 2px; font-size: 1rem; }
.hero-dark .rating { color: #b9cddb; }
.hero-dark .rating a, .dark a { color: var(--phone); }

/* ---------- form card ---------- */
.form-card { background: #fff; color: var(--charcoal); border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.4rem,3.2vw,2rem); box-shadow: var(--shadow-lg); }
.form-card h2, .form-card h3 { font-size: 1.4rem; margin-bottom: .3rem; color: var(--navy-800); }
.form-card .sub { color: var(--slate); font-size: .95rem; margin-bottom: 1.2rem; }
.field { margin-bottom: .9rem; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; color: var(--navy-800); }
.field label span { color: var(--mist); font-weight: 400; }
.field input, .field select {
  width: 100%; font: inherit; font-size: 1rem; padding: .78rem .9rem; border: 1.5px solid #cfd8e3;
  border-radius: var(--radius-sm); background: #fff; color: var(--charcoal);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27,156,221,.18); }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-note { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem; color: var(--mist); margin: .9rem 0 0; }
.form-note svg { width: 15px; height: 15px; flex: none; margin-top: .2rem; color: var(--ok); }
.or-call { text-align: center; font-size: .92rem; color: var(--slate); margin: .9rem 0 0; }
.or-call a { font-weight: 700; }

/* quiz steps (variant C) */
.steps-bar { display: flex; gap: .4rem; margin-bottom: 1.1rem; }
.steps-bar i { height: 5px; flex: 1; border-radius: 99px; background: var(--line); }
.steps-bar i.on { background: var(--cta); }
.q-label { font-weight: 700; color: var(--navy-800); margin: 0 0 .6rem; font-size: 1.02rem; }
.choice-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .55rem; margin-bottom: 1.2rem; }
.choice-grid.two { grid-template-columns: repeat(2,1fr); }
.choice-grid label { position: relative; cursor: pointer; }
.choice-grid input { position: absolute; opacity: 0; inset: 0; }
.choice-grid span {
  display: block; text-align: center; padding: .8rem .5rem; border: 1.5px solid #cfd8e3; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .95rem; color: var(--navy-800); background: #fff; transition: all .15s var(--ease);
}
.choice-grid span small { display: block; font-weight: 500; color: var(--mist); font-size: .76rem; }
.choice-grid input:checked + span { border-color: var(--brand); background: #eaf5fc; box-shadow: 0 0 0 3px rgba(27,156,221,.18); }
.choice-grid input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.step[hidden] { display: none; }
.back-link { background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; color: var(--brand); cursor: pointer; margin-bottom: .8rem; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm); }
.stat .n { font-family: var(--f-heavy); font-size: clamp(2.4rem,5vw,3.4rem); line-height: 1; color: var(--brand); margin-bottom: .5rem; }
.stat p { margin: 0; color: var(--slate); font-size: 1rem; }
.dark .stat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
.dark .stat .n { color: var(--phone); }
.dark .stat p { color: #c3d5e2; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.cards.four { grid-template-columns: repeat(4,1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.card .ic { width: 46px; height: 46px; border-radius: 12px; background: #eaf5fc; color: var(--brand); display: grid; place-items: center; margin-bottom: 1rem; }
.card .ic svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: .35rem; }
.card p { margin: 0; color: var(--slate); font-size: .97rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split.flip > :first-child { order: 2; }
.media { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); background: #fbeee4; }
.media img { width: 100%; }
.media.photo img { aspect-ratio: 4/3; object-fit: cover; }
.caption { font-size: .78rem; color: var(--mist); margin-top: .6rem; }
.dark .caption { color: #8fa9bb; }

/* ---------- AI blip ---------- */
.ai-band { background: linear-gradient(135deg, var(--navy-800), var(--navy-900)); color: #d5e3ee; border-radius: 24px; padding: clamp(1.6rem,4vw,2.75rem); display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.ai-band h2 { color: #fff; font-size: clamp(1.5rem,3vw,2.1rem); }
.ai-band .tag { display: inline-flex; align-items: center; gap: .4rem; background: rgba(79,195,247,.16); color: var(--phone); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 99px; margin-bottom: 1rem; }
.ai-band .tag svg { width: 14px; height: 14px; }
.ai-band ul { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.2rem; font-size: .97rem; }
.ai-band li { display: flex; gap: .55rem; }
.ai-band li svg { width: 18px; height: 18px; flex: none; color: var(--phone); margin-top: .25rem; }
.ai-band .media { box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.ai-band blockquote { margin: 1.4rem 0 0; padding: 0 0 0 1rem; border-left: 3px solid var(--phone); font-size: .95rem; color: #e7f0f6; }
.ai-band cite { display: block; font-style: normal; font-size: .8rem; color: #8fa9bb; margin-top: .4rem; }
.ai-mini { display: flex; gap: 1.1rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--cta); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); }
.ai-mini img { width: 120px; border-radius: 12px; flex: none; }
.ai-mini h3 { margin-bottom: .3rem; }
.ai-mini p { margin: 0; color: var(--slate); font-size: .97rem; }

/* ---------- how it works ---------- */
.how { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; counter-reset: how; }
.how > div { position: relative; padding: 1.6rem 1.5rem 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.how > div::before { counter-increment: how; content: counter(how); font-family: var(--f-heavy); font-size: 1.1rem; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-800); color: #fff; display: grid; place-items: center; margin-bottom: 1rem; }
.how p { margin: 0; color: var(--slate); font-size: .97rem; }

/* ---------- compare (variant B) ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.compare th, .compare td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .97rem; vertical-align: top; }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); background: #f8fafc; }
.compare thead th.us { background: var(--navy-800); color: #fff; }
.compare td.us { background: #f1f8fd; font-weight: 600; color: var(--navy-800); }
.compare td:first-child { font-weight: 600; color: var(--navy-800); width: 26%; }
.compare .yes, .compare .no { display: inline-flex; gap: .5rem; align-items: flex-start; }
.compare svg { width: 18px; height: 18px; flex: none; margin-top: .2rem; }
.compare .yes svg { color: var(--ok); }
.compare .no svg { color: #b6c0cc; }

/* ---------- pills / areas ---------- */
.pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.pills span { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: .5rem 1rem; font-weight: 600; font-size: .93rem; color: var(--navy-800); }
.dark .pills span { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }

/* ---------- reviews ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.quote .stars { color: var(--warn); letter-spacing: 2px; margin-bottom: .7rem; }
.quote p { font-size: .98rem; color: var(--charcoal); margin: 0; }
.quote .who { margin-top: auto; padding-top: 1rem; font-size: .88rem; color: var(--mist); }
.quote .who b { color: var(--navy-800); display: block; }

/* ---------- faq ---------- */
.faq { max-width: 800px; margin-inline: auto; display: grid; gap: .7rem; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 1.2rem; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--navy-800); padding: 1.05rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--brand); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--slate); margin: 0 0 1.1rem; font-size: .98rem; }

/* ---------- final cta ---------- */
.cta-band { background: radial-gradient(120% 160% at 85% 0%, var(--navy-600), var(--navy-900) 65%); color: #d5e3ee; border-radius: 24px; padding: clamp(2rem,5vw,3.5rem); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 36rem; margin: 0 auto 1.6rem; color: #c3d5e2; }
.cta-band .btn-row { justify-content: center; }
.cta-phone { display: block; font-family: var(--f-heavy); font-size: clamp(1.9rem,5vw,3rem); color: #fff; margin-bottom: 1.4rem; }

/* ---------- footer ---------- */
.lp-footer { background: var(--navy-900); color: #9fb6c6; font-size: .86rem; padding: 2.5rem 0 2.5rem; }
.lp-footer .top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 1.4rem; }
.lp-footer .top img { height: 84px; width: auto; }
.lp-footer a { color: #d5e3ee; }
.lp-footer ol { margin: 0 0 1rem; padding-left: 1.2rem; }
.lp-footer p { margin: 0 0 .7rem; }
.lp-footer .credit { color: #b9cddb; }

/* ---------- sticky mobile CTA ---------- */
.mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); padding: .6rem .8rem; gap: .6rem; box-shadow: 0 -6px 20px rgba(9,25,45,.12); }
.mobile-cta .btn { flex: 1; padding: .9rem .6rem; font-size: .97rem; }
html.shot .mobile-cta { position: static; }
html.shot .lp-header { position: static; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-dark .wrap, .hero-light .wrap, .split, .ai-band { grid-template-columns: 1fr; }
  .hero-dark::before { background: linear-gradient(180deg, rgba(6,32,47,.90), rgba(6,32,47,.82)); }
  .split.flip > :first-child { order: 0; }
  .cards, .cards.four, .how, .quote-grid { grid-template-columns: 1fr 1fr; }
  .float-chip.tl { left: 3%; } .float-chip.br { right: 3%; }
  .lp-header .hours { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .stats, .cards, .cards.four, .how, .quote-grid, .ai-band ul { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: repeat(2,1fr); }
  .field-2 { grid-template-columns: 1fr; gap: 0; }
  .lp-header .bar { height: 62px; }
  .lp-logo img { height: 30px; }
  .lp-header .btn { padding: .7rem 1rem; font-size: .9rem; }
  .mobile-cta { display: flex; }
  .lp-footer { padding-bottom: 6rem; }
  html.shot .lp-footer { padding-bottom: 2.5rem; }
  .cobrand .sep { display: none; }
  .ai-mini { flex-direction: column; }
  .float-chip { display: none; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
  .compare td:first-child { width: 100%; background: #f8fafc; border-bottom: 0; padding-bottom: .4rem; }
  .compare td[data-h]::before { content: attr(data-h); display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); font-weight: 700; margin-bottom: .2rem; }
}