/* Solution: data and business intelligence - page-specific design.

   Zoho red (Analytics) is the base. The four definitions of one metric each get their own point
   on a timeline, and the number travels between them - the page's claim is that all four are
   correct, so none of them is coloured as an error. That is why nothing here uses a red/green
   right-wrong pairing: there is no wrong answer on this page, only an unagreed one.

   All classes scoped to .da-page, prefixed da-. */

.da-page {
  --da: #e42528;
  --da-d: #a5191b;
  --da-l: #fdecec;
  --da-ink: #25100f;
}

/* ---------------------------------------------------------------------- hero -- */
.da-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
  background: linear-gradient(200deg, var(--white) 30%, var(--da-l) 100%);
  border-block-end: 1px solid color-mix(in srgb, var(--da) 14%, var(--line));
}
.da-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.da-hero h1 { font-size: clamp(1.85rem, 4.2vw, 3rem); line-height: 1.15; margin: 0 0 14px; color: var(--da-ink); }
.da-hero .lede { max-width: 64ch; margin-block-end: 26px; }
.da-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* two report cards showing different figures */
.da-hero-vis { display: grid; place-items: center; min-height: 210px; }
.da-two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 280px; }
.da-card {
  display: grid; gap: 10px; align-content: start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px;
  box-shadow: 0 16px 36px -26px rgba(45, 14, 14, .5);
}
.da-card i { display: block; height: 8px; width: 62%; border-radius: 4px; background: #e5e2e2; }
.da-card b { display: block; height: 30px; border-radius: 6px; }
.da-card-a b { width: 78%; background: var(--da-d); }
.da-card-b b { width: 44%; background: color-mix(in srgb, var(--da) 40%, var(--white)); }

@media (prefers-reduced-motion: no-preference) {
  .da-card-a b, .da-card-b b { animation: da-flip 5s ease-in-out infinite; }
  .da-card-b b { animation-delay: 2.5s; }
}
@keyframes da-flip { 0%, 100% { transform: scaleX(1) } 50% { transform: scaleX(.62) } }
.da-card b { transform-origin: inline-start; }

/* ----------------------------------------------------------------- definitions -- */
.da-gap { padding: clamp(48px, 7vw, 84px) 0; }
.da-gap h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 12px; }
.da-gap .lede { max-width: 80ch; }

.da-defs {
  margin-block-start: 28px;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 20px 50px -40px rgba(45, 14, 14, .5);
}
.da-def-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 24px; }
.da-def-pick button {
  font: inherit; font-weight: 700; font-size: .94rem; cursor: pointer;
  padding: 11px 18px; border-radius: 10px;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s;
}
.da-def-pick button[aria-pressed="true"] { background: var(--da-d); color: var(--white); border-color: var(--da-d); }

.da-figure {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 40px); align-items: center;
  padding-block-end: 24px; margin-block-end: 22px;
  border-block-end: 1px solid var(--line);
}
.da-num { display: grid; justify-items: start; }
.da-num-v {
  font-size: clamp(3rem, 9vw, 5rem); line-height: 1; font-weight: 800;
  color: var(--da-d); font-variant-numeric: tabular-nums;
}
.da-num-l { color: var(--muted); font-size: .95rem; margin-block-start: 6px; }
.da-who-t { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.da-who-b { margin: 0; color: var(--muted); max-width: 62ch; }

.da-tl { position: relative; display: flex; justify-content: space-between; padding-block-start: 22px; }
.da-tl-line {
  position: absolute; inset-block-start: 8px; inset-inline: 6%;
  height: 3px; border-radius: 2px; background: #eceaea;
}
.da-tl-p {
  position: relative; font-size: .84rem; font-weight: 700; color: #b0abab;
  padding-block-start: 4px; transition: color .3s;
}
.da-tl-p::before {
  content: ''; position: absolute; inset-block-start: -22px; inset-inline-start: 50%;
  transform: translateX(50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--white); border: 3px solid #dcd8d8;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.da-tl-p.is-on { color: var(--da-d); }
.da-tl-p.is-on::before {
  background: var(--da-d); border-color: var(--da-d);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--da) 18%, transparent);
}
.da-punch {
  margin-block-start: 22px; font-size: 1.05rem; font-weight: 600;
  color: var(--da-ink); max-width: 86ch;
}
.da-note { margin-block-start: 12px; color: var(--muted); font-size: .93rem; max-width: 84ch; }

/* ---------------------------------------------------------------- dictionary -- */
.da-dict {
  padding: clamp(48px, 7vw, 84px) 0;
  background: var(--da-l);
  border-block: 1px solid color-mix(in srgb, var(--da) 13%, var(--line));
}
.da-dict h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.da-dict .lede { max-width: 80ch; }
.da-dict-tbl {
  margin-block-start: 26px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
.da-dr {
  display: grid; grid-template-columns: 190px minmax(0, 1.4fr) 160px minmax(0, 1.2fr);
  gap: 16px; padding: 16px clamp(14px, 3vw, 22px);
  border-block-end: 1px solid var(--line);
  font-size: .95rem; color: var(--muted);
}
.da-dr:last-child { border-block-end: 0; }
.da-dr-head {
  background: #faf8f8; font-weight: 800; color: var(--da-d); font-size: .85rem;
}
.da-dk { font-weight: 700; color: var(--ink); }
.da-dict-note { margin-block-start: 18px; color: var(--muted); max-width: 84ch; }

/* --------------------------------------------------------------------- signs -- */
.da-ready { padding: clamp(48px, 7vw, 84px) 0; }
.da-ready h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.da-ready .lede { max-width: 80ch; }
.da-signs {
  margin-block-start: 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
.da-sign {
  position: relative;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 15px; padding: 26px 20px 20px;
}
.da-sign-n {
  position: absolute; inset-block-start: -14px; inset-inline-start: 20px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: .9rem; color: var(--white);
  background: var(--da-d); box-shadow: 0 0 0 4px var(--white);
}
.da-signs .da-sign:nth-child(3) .da-sign-n { background: #8a5c05; }
.da-sign h3 { margin: 4px 0 8px; font-size: 1.06rem; }
.da-sign p { margin: 0; color: var(--muted); font-size: .96rem; }

/* --------------------------------------------------------------------- stack -- */
.da-stack {
  padding: clamp(48px, 7vw, 84px) 0;
  background: var(--da-l);
  border-block: 1px solid color-mix(in srgb, var(--da) 13%, var(--line));
}
.da-stack h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.da-stack .lede { max-width: 80ch; }
.da-parts {
  margin-block-start: 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}
.da-part {
  display: grid; gap: 6px; align-content: start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.da-part:hover { border-color: var(--da); transform: translateY(-2px); }
.da-part img { display: block; margin-block-end: 4px; }
.da-p-n { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.da-p-r { color: var(--muted); font-size: .93rem; }
.da-p-go { margin-block-start: 8px; font-size: .84rem; font-weight: 700; color: var(--da-d); }
.da-part-core { border-color: var(--da); box-shadow: 0 0 0 1px color-mix(in srgb, var(--da) 22%, transparent); }

/* ----------------------------------------------------------------------- how -- */
.da-how {
  padding: clamp(48px, 7vw, 84px) 0;
  background: #1a1010;
}
.da-how h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 24px; }
.da-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: das;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 13px;
}
.da-steps li {
  counter-increment: das;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg); padding: 18px; display: grid; gap: 5px;
}
.da-steps b {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 1.02rem; color: color-mix(in srgb, var(--da) 52%, var(--white));
}
.da-steps b::before {
  content: counter(das, decimal-leading-zero);
  font-size: .8rem; font-weight: 800;
  color: color-mix(in srgb, var(--white) 52%, transparent);
  font-variant-numeric: tabular-nums;
}
.da-steps span { color: color-mix(in srgb, var(--white) 74%, transparent); font-size: .95rem; }
.da-how-cta {
  margin-block-start: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px; padding: 20px 22px;
}
.da-how-cta p { margin: 0; color: color-mix(in srgb, var(--white) 84%, transparent); max-width: 66ch; }

/* ------------------------------------------------------------------------ faq -- */
.da-faq { padding: clamp(48px, 7vw, 84px) 0 clamp(24px, 4vw, 40px); }
.da-faq h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 20px; }

/* ------------------------------------------------------------- nearby solutions -- */
.da-near { padding: 0 0 clamp(40px, 6vw, 64px); }
.da-near h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 16px; }
.da-near-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.da-near-c {
  display: grid; gap: 5px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 17px; text-decoration: none;
  transition: border-color .2s;
}
.da-near-c:hover { border-color: var(--da); }
.da-near-c b { color: var(--da-d); font-size: 1rem; }
.da-near-c span { color: var(--muted); font-size: .93rem; }

/* ---------------------------------------------------------------------- close -- */
.da-close { padding: 0 0 clamp(48px, 7vw, 84px); }
.da-close-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; border-radius: 20px;
  padding: clamp(26px, 4vw, 42px);
  background: linear-gradient(135deg, var(--da-d), #5a0f10);
}
.da-close-box h2 { color: var(--white); margin: 0 0 8px; font-size: clamp(1.25rem, 2.7vw, 1.85rem); }
.da-close-box .lede { color: color-mix(in srgb, var(--white) 86%, transparent); margin: 0; max-width: 60ch; }

/* --------------------------------------------------------------------- narrow -- */
@media (max-width: 950px) {
  .da-hero-in { grid-template-columns: 1fr; }
  .da-dr { grid-template-columns: 1fr; gap: 4px; }
  .da-dr-head { display: none; }
  .da-dk { font-size: 1rem; margin-block-end: 4px; }
}
@media (max-width: 640px) {
  .da-figure { grid-template-columns: 1fr; }
  .da-def-pick button { flex: 1 1 calc(50% - 4px); }
  .da-tl-p { font-size: .74rem; }
}