/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/page-views/AnkastraPage.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
.ank-section { padding: 5rem 0; }
.ank-container { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.ank-container-sm { max-width: 48rem; }
.ank-bg-main { background-color: var(--color-bg); }
.ank-bg-alt { background-color: var(--color-bg-alt); }

.ank-section-header { text-align: center; margin-bottom: 3rem; }
.ank-label { display: block; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; color: var(--color-primary-text); margin-bottom: 1rem; }
.ank-title { font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; line-height: 1.2; }
.ank-subtitle { font-size: 1rem; color: var(--color-text-secondary); max-width: 42rem; margin: 0 auto; }
.ank-gradient-text { background: var(--gradient-text, var(--gradient-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.ank-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; cursor: pointer; border: none; }
.ank-btn-primary { background: var(--gradient-primary); color: white; }
.ank-btn-primary:hover { opacity: 0.9; }
.ank-btn-secondary { background-color: var(--color-bg-card); color: var(--color-text); border: 1px solid var(--color-border); }
.ank-btn-secondary:hover { border-color: var(--color-primary); }
.ank-btn-cta { background: var(--gradient-cta); color: white; padding: 1rem 2rem; font-size: 1rem; }
.ank-btn.full { width: 100%; }

.ank-icon-xs { width: 0.875rem; height: 0.875rem; }
.ank-icon-sm { width: 1.25rem; height: 1.25rem; }
.ank-check { width: 1.25rem; height: 1.25rem; color: var(--color-success); }
.ank-status-icon { width: 1.25rem; height: 1.25rem; margin: 0 auto; }
.ank-status-yes { color: var(--color-success); }
.ank-status-no { color: var(--color-error); }
.ank-status-partial { color: var(--color-warning); }

.ank-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--color-bg); }
.ank-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(6,182,212,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(99,102,241,0.06) 0%, transparent 50%); }
.ank-hero-content { position: relative; z-index: 1; text-align: center; padding: 6rem 1rem 4rem; }
.ank-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background-color: rgba(6,182,212,0.1); color: var(--color-primary-text); border: 1px solid rgba(6,182,212,0.2); margin-bottom: 2rem; }
.ank-hero h1 { font-size: clamp(2.125rem, 4.8vw, 3.5rem); font-weight: 700; color: var(--color-text); line-height: 1.12; letter-spacing: -0.02em; max-width: 20ch; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; }
.ank-hero-desc { font-size: 1.125rem; color: var(--color-text-secondary); max-width: 48rem; margin: 0 auto 2rem; }
.ank-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.ank-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.ank-hero-stats > div { text-align: center; }
.ank-hero-stats strong { display: block; font-size: 1.25rem; color: var(--color-text); }
.ank-hero-stats small { font-size: 0.75rem; color: var(--color-text-muted); }

.ank-trusted { padding: 2.5rem 0; background-color: var(--color-bg-alt); }
.ank-trusted-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; color: var(--color-text-muted); text-align: center; margin-bottom: 1.5rem; }
.ank-trusted-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; }
.ank-trusted-list span { font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }

.ank-cards-grid { display: grid; gap: 1.5rem; }
.ank-cards-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ank-cards-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ank-cards-6 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.ank-card { padding: 1.5rem; border-radius: 1rem; background-color: var(--color-bg-card); border: 1px solid var(--color-border); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.ank-card:hover { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0,0,0,0.08); }
.ank-card-center { text-align: center; }
.ank-card-sm { padding: 1.25rem; }
.ank-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; }
.ank-card h4 { font-size: 0.875rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; }
.ank-card p { font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.6; }
.ank-card small { font-size: 0.75rem; color: var(--color-text-muted); }
.ank-card-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; background: var(--gradient-primary); color: white; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.ank-card-center .ank-card-icon { margin: 0 auto 1rem; }
.ank-card-icon svg { width: 1.5rem; height: 1.5rem; }

.ank-hw-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; color: white; background: var(--gradient-primary); margin-bottom: 1rem; }
.ank-hw-models { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin: 0.75rem 0 0.5rem; }
.ank-hw-modes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ank-hw-modes span { font-size: 0.625rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background-color: rgba(6,182,212,0.1); color: var(--color-primary-text); }
.ank-hw-callout { margin-top: 3rem; padding: 2rem; border-radius: 1rem; background: var(--gradient-primary); text-align: center; }
.ank-hw-callout h3 { font-size: 1.5rem; font-weight: 700; color: white; margin-bottom: 0.75rem; }
.ank-hw-callout p { color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; max-width: 36rem; margin-left: auto; margin-right: auto; }
.ank-hw-stats { display: flex; justify-content: center; gap: 3rem; }
.ank-hw-stats > div { text-align: center; }
.ank-hw-stats strong { display: block; font-size: 2rem; font-weight: 700; color: white; }
.ank-hw-stats small { font-size: 0.75rem; color: rgba(255,255,255,0.6); }

.ank-comparison-table { overflow-x: auto; border-radius: 1rem; background-color: var(--color-bg-card); border: 1px solid var(--color-border); }
.ank-comparison-table table { width: 100%; min-width: 950px; border-collapse: collapse; font-size: 0.875rem; }
.ank-comparison-table th, .ank-comparison-table td { padding: 0.75rem 1rem; text-align: center; border-bottom: 1px solid var(--color-border); }
.ank-comparison-table th { font-weight: 600; color: var(--color-text); background-color: rgba(6,182,212,0.05); }
.ank-comparison-table th:first-child, .ank-comparison-table td:first-child { text-align: left; position: sticky; left: 0; background-color: var(--color-bg-card); }
.ank-comparison-table th.highlight { color: var(--color-primary-text); }
.ank-comparison-table td.highlight { background-color: rgba(6,182,212,0.03); }
.ank-comparison-table td small { display: block; font-size: 0.625rem; color: var(--color-success); margin-top: 0.25rem; }
.ank-comparison-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1rem; padding: 1rem 1.25rem; margin: 0; font-size: 0.8125rem; color: var(--color-text-secondary); border-top: 1px solid var(--color-border); }
.ank-comparison-legend .ank-status-icon { width: 1rem; height: 1rem; margin: 0 0.25rem -0.2rem 0; vertical-align: middle; }

.ank-billing-toggle { display: flex; width: -moz-fit-content; width: fit-content; justify-content: center; margin: 0 auto 2.5rem; background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 9999px; padding: 0.25rem; }
.ank-billing-btn { padding: 0.625rem 1.25rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; background: none; border: none; color: var(--color-text-secondary); cursor: pointer; transition: all 0.3s ease; }
.ank-billing-btn.active { background: var(--gradient-primary); color: white; }
.ank-discount { margin-left: 0.375rem; font-size: 0.75rem; font-weight: 700; color: var(--color-success); }
.ank-billing-btn.active .ank-discount { color: #fde047; }

.ank-slider-card { max-width: 48rem; margin: 0 auto 2.5rem; padding: 2rem; border-radius: 1rem; background-color: var(--color-bg-card); border: 1px solid var(--color-border); }
.ank-slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.ank-slider-header span { font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); }
.ank-slider-value { display: flex; align-items: baseline; gap: 0.5rem; }
.ank-slider-value .ank-gradient-text { font-size: 2rem; font-weight: 700; }
.ank-slider-track { position: relative; height: 0.75rem; border-radius: 9999px; background-color: var(--color-border); margin: 1rem 0; }
.ank-slider-fill { position: absolute; height: 100%; border-radius: 9999px; background: var(--gradient-primary); }
.ank-slider-track input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; margin: 0; }
/* The native thumb is invisible but it is what decides the value from a click.
   Its centre travels from thumbWidth/2 to trackWidth - thumbWidth/2, so pin
   that width to the visual thumb's 1.75rem and the two agree in every browser.
   Left at the browser default they disagreed by up to 8px at the ends, and the
   top of the range could not be reached by clicking at all. */
.ank-slider-track input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.75rem; height: 1.75rem; border: 0; background: transparent; }
.ank-slider-track input::-moz-range-thumb { width: 1.75rem; height: 1.75rem; border: 0; background: transparent; }
.ank-slider-thumb { position: absolute; top: 50%; transform: translateY(-50%); width: 1.75rem; height: 1.75rem; border-radius: 50%; background: white; border: 4px solid var(--color-secondary); box-shadow: 0 0 12px rgba(59,130,246,0.5); pointer-events: none; }
.ank-slider-stops { display: flex; justify-content: space-between; margin-top: 0.5rem; }
.ank-slider-stops button { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); background: none; border: none; cursor: pointer; transition: color 0.2s; }
.ank-slider-stops button:hover, .ank-slider-stops button.active { color: var(--color-primary-text); }

.ank-enterprise-banner { max-width: 48rem; margin: 0 auto 2.5rem; padding: 1.5rem 2rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(99,102,241,0.15)); border: 1px solid var(--color-primary); text-align: center; }
.ank-enterprise-banner h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; }
.ank-enterprise-banner p { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 1rem; }

.ank-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 64rem; margin: 0 auto; }
.ank-plan-card { position: relative; padding: 2rem; border-radius: 1rem; background-color: var(--color-bg-card); border: 1px solid var(--color-border); transition: all 0.3s ease; }
.ank-plan-card.popular { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); transform: scale(1.02); }
.ank-popular-badge { position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; color: white; background: var(--gradient-primary); }
.ank-plan-card h3 { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; }
.ank-plan-subtitle { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.ank-plan-price { margin-bottom: 0.5rem; }
.ank-plan-price .ank-gradient-text { font-size: 2.5rem; font-weight: 700; }
.ank-savings { font-size: 0.875rem; font-weight: 500; color: var(--color-success); margin-bottom: 1rem; }
.ank-plan-note { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.ank-plan-card .ank-btn { width: 100%; }
.ank-pricing-note { text-align: center; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 1.5rem; }

.ank-feature-table { border-radius: 1rem; overflow: hidden; background-color: var(--color-bg-card); border: 1px solid var(--color-border); }
.ank-table-header { display: grid; grid-template-columns: 1fr repeat(3, 80px); gap: 0; padding: 1rem; font-size: 0.875rem; font-weight: 600; background-color: rgba(6,182,212,0.05); }
.ank-table-header > div { text-align: center; color: var(--color-text); }
.ank-table-header > div:first-child { text-align: left; }
.ank-table-header > div.highlight { color: var(--color-primary-text); }
.ank-category-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem; font-size: 0.875rem; font-weight: 700; color: var(--color-text); background-color: rgba(6,182,212,0.03); border: none; border-top: 1px solid var(--color-border); cursor: pointer; }
.ank-category-btn svg { transition: transform 0.3s ease; }
.ank-category-btn svg.rotated { transform: rotate(180deg); }
.ank-feature-row { display: grid; grid-template-columns: 1fr repeat(3, 80px); gap: 0; padding: 0.75rem 1rem; font-size: 0.875rem; border-top: 1px solid var(--color-border); }
.ank-feature-row > div { text-align: center; color: var(--color-text-secondary); }
.ank-feature-row > div:first-child { text-align: left; }

.ank-faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ank-faq-item { border-radius: 0.75rem; overflow: hidden; background-color: var(--color-bg-card); border: 1px solid var(--color-border); }
.ank-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; font-size: 1rem; font-weight: 600; color: var(--color-text); background: none; border: none; cursor: pointer; text-align: left; }
.ank-faq-q svg { flex-shrink: 0; color: var(--color-primary-text); transition: transform 0.3s ease; }
.ank-faq-q svg.rotated { transform: rotate(180deg); }
.ank-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; opacity: 0; }
.ank-faq-a.open { max-height: 500px; opacity: 1; }
.ank-faq-a p { padding: 0 1.25rem 1.25rem; font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.7; }

.ank-urgency-section { padding: 5rem 0; background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(99,102,241,0.1)); border-top: 1px solid var(--color-border); }
.ank-urgency-content { text-align: center; }
.ank-urgency-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--color-warning); margin-bottom: 1rem; }
.ank-urgency-content h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; }
.ank-urgency-content > p { font-size: 1rem; color: var(--color-text-secondary); margin-bottom: 2rem; max-width: 32rem; margin-left: auto; margin-right: auto; }
.ank-countdown { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 2.5rem; }
.ank-countdown-unit { padding: 1rem 1.5rem; border-radius: 0.75rem; background-color: rgba(15,23,42,0.9); border: 1px solid rgba(6,182,212,0.3); text-align: center; }
.ank-countdown-unit span { display: block; font-size: 2rem; font-weight: 700; color: white; font-family: 'SF Mono', monospace; }
.ank-countdown-unit small { font-size: 0.75rem; color: rgba(255,255,255,0.5); }

.ank-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; padding: 2rem; border-radius: 1rem; background-color: var(--color-bg-card); border: 1px solid var(--color-border); }
.ank-form-field { display: flex; flex-direction: column; }
.ank-form-field.full { grid-column: span 2; }
.ank-form-field label { font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 0.375rem; }
.ank-form-field input, .ank-form-field select, .ank-form-field textarea { padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; background-color: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.ank-form-field input:focus, .ank-form-field select:focus, .ank-form-field textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(6,182,212,0.1); }
.ank-form-field textarea { resize: none; }
.ank-error { grid-column: span 2; font-size: 0.875rem; color: var(--color-error); text-align: center; }
.ank-success-msg { text-align: center; padding: 3rem; border-radius: 1rem; background-color: var(--color-bg-card); border: 1px solid var(--color-border); }
.ank-success-icon { width: 4rem; height: 4rem; color: var(--color-success); margin: 0 auto 1rem; }
.ank-success-msg h3 { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; }
.ank-success-msg p { color: var(--color-text-secondary); }

.ank-industry-icon { width: 2rem; height: 2rem; color: var(--color-primary-text); margin: 0 auto 0.75rem; display: block; }
.ank-step-num { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--gradient-primary); color: white; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }

@media (max-width: 768px) {
  .ank-section { padding: 3rem 0; }
  .ank-hero-content { padding: 5rem 1rem 3rem; }
  .ank-form { grid-template-columns: 1fr; }
  .ank-form-field.full { grid-column: span 1; }
  .ank-countdown-unit { padding: 0.75rem 1rem; }
  .ank-countdown-unit span { font-size: 1.5rem; }
}


/* ---- Pricing Lead Gate ---- */
.ank-pricing-gate {
  max-width: 56rem;
  margin: 0 auto 2.5rem;
  padding: 2rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(6, 182, 212, 0.35);
  box-shadow: 0 12px 40px -16px rgba(6, 182, 212, 0.35);
}
.ank-pricing-gate-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.ank-pricing-gate-copy h3 {
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-text);
  margin: 0.5rem 0 0.75rem;
}
.ank-pricing-gate-copy p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  line-height: 1.6;
}
.ank-pricing-gate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ank-pricing-gate-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.ank-pricing-gate-list li svg {
  color: var(--color-primary-text);
  flex-shrink: 0;
  margin-top: 2px;
}
.ank-pricing-gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
}
.ank-pricing-gate-submit {
  margin-top: 0.25rem;
  justify-content: center;
}
.ank-pricing-gate-fineprint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0.25rem 0 0;
  text-align: center;
}
.ank-pricing-gate-fineprint a {
  color: var(--color-primary-text);
  text-decoration: underline;
}
.ank-form-error {
  font-size: 0.78rem;
  color: var(--color-error, #ef4444);
  margin-top: 0.35rem;
  font-weight: 500;
}

/* ---- Employee count number-input row ---- */
.ank-emp-input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  background-color: rgba(6, 182, 212, 0.06);
  border: 1px dashed rgba(6, 182, 212, 0.4);
}
.ank-emp-input-row label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ank-emp-input-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ank-emp-step {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ank-emp-step:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}
.ank-emp-input {
  width: 5.5rem;
  text-align: center;
  padding: 0.55rem 0.5rem;
  border-radius: 0.625rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.ank-emp-input::-webkit-outer-spin-button,
.ank-emp-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ank-emp-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

/* ---- Pro Lifetime Callout ---- */
.ank-lifetime-callout {
  max-width: 56rem;
  margin: 0 auto 2.5rem;
  padding: 2rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(6, 182, 212, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.4);
  position: relative;
  overflow: hidden;
}
.ank-lifetime-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(6, 182, 212, 0.15), transparent 60%);
  pointer-events: none;
}
.ank-lifetime-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: white;
  background: var(--gradient-primary);
  margin-bottom: 0.75rem;
  position: relative;
}
.ank-lifetime-callout h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0 0 0.6rem;
  position: relative;
}
.ank-lifetime-callout > p {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.25rem;
  line-height: 1.6;
  position: relative;
}
.ank-lifetime-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.65rem 1.5rem;
  position: relative;
}
.ank-lifetime-grid li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.ank-lifetime-grid li svg {
  color: var(--color-primary-text);
  flex-shrink: 0;
  margin-top: 3px;
}
.ank-lifetime-fineprint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0;
  position: relative;
  font-style: italic;
}
.ank-lifetime-pill {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
  color: white;
  background: var(--gradient-primary);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .ank-pricing-gate-inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .ank-pricing-gate { padding: 1.25rem; }
  .ank-emp-input-row { flex-direction: column; align-items: stretch; }
  .ank-emp-input-controls { justify-content: center; }
  .ank-lifetime-callout { padding: 1.25rem; }
  .ank-lifetime-callout h3 { font-size: 1.25rem; }
}

/* ==================================================================
   REFINEMENT LAYER
   Added for the capability explorer, the case study pages and a pass
   over elevation, type and motion on the existing components.
   Everything below is additive. Nothing above was edited, so the
   existing data-testid driven tests keep passing.
   ================================================================== */

:root {
  /* Layered elevation reads as depth. One flat shadow reads as a border. */
  --ank-e1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --ank-e2: 0 2px 4px rgba(15, 23, 42, 0.04), 0 6px 16px -4px rgba(15, 23, 42, 0.08);
  --ank-e3: 0 4px 8px rgba(15, 23, 42, 0.04), 0 16px 40px -12px rgba(15, 23, 42, 0.14);
  --ank-ring: 0 0 0 3px rgba(6, 182, 212, 0.28);
  --ank-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ank-tint: rgba(6, 182, 212, 0.06);
  --ank-tint-strong: rgba(6, 182, 212, 0.12);
  --ank-hairline: rgba(15, 23, 42, 0.08);
}

.dark {
  --ank-e1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --ank-e2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 24px -8px rgba(0, 0, 0, 0.6);
  --ank-e3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 24px 56px -16px rgba(0, 0, 0, 0.7);
  --ank-tint: rgba(34, 211, 238, 0.08);
  --ank-tint-strong: rgba(34, 211, 238, 0.16);
  --ank-hairline: rgba(255, 255, 255, 0.1);
}

/* A wider font fallback chain. Calibri stays first for brand continuity,
   but Linux and Android were previously falling through to a default
   sans with no tracking control. */
body,
.ank-section,
.ank-page-hero {
  font-family: 'Calibri', 'Segoe UI Variable Text', 'Segoe UI', Inter,
    system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Optical tightening at display sizes. Large type set at default tracking
   always reads loose. */
.ank-title,
.ank-hero h1,
.ank-page-hero h1 {
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.ank-subtitle,
.ank-hero-desc {
  text-wrap: pretty;
}

/* Gradient text needs a fallback colour, otherwise it renders invisible
   wherever background-clip:text is unsupported. */
.ank-gradient-text {
  color: var(--color-primary-text);
}

/* Eyebrow with a rule. Cheap, and it makes a section header look designed
   rather than typed. */
.ank-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
}
.ank-label-rule {
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary));
}

/* Elevation and easing pass over the existing card and button styles. */
.ank-card {
  box-shadow: var(--ank-e1);
  transition: transform 0.4s var(--ank-ease), box-shadow 0.4s var(--ank-ease),
    border-color 0.3s ease;
}
.ank-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ank-e3);
  border-color: var(--ank-tint-strong);
}
.ank-btn {
  transition: transform 0.25s var(--ank-ease), box-shadow 0.25s var(--ank-ease),
    opacity 0.25s ease, border-color 0.25s ease;
}
.ank-btn-primary {
  box-shadow: 0 6px 18px -8px rgba(6, 182, 212, 0.7);
}
.ank-btn-primary:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(6, 182, 212, 0.75);
}
.ank-btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--ank-e2);
}

/* Visible focus for everything interactive. A site without this fails
   keyboard use and reads as unfinished. */
.ank-btn:focus-visible,
.ank-cap-chip:focus-visible,
.ank-faq-q:focus-visible,
.ank-category-btn:focus-visible,
.ank-cs-link:focus-visible,
.ank-crumbs a:focus-visible,
.ank-cap-more-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--ank-ring);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .ank-card:hover,
  .ank-btn:hover {
    transform: none;
  }
}

/* ---------------- Capability explorer ---------------- */

.ank-cap-section {
  position: relative;
  overflow: hidden;
}
.ank-cap-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--ank-tint) 0%, transparent 55%);
  pointer-events: none;
}
.ank-cap-section > .ank-container {
  position: relative;
}

.ank-cap-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.ank-cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.25s var(--ank-ease);
}
.ank-cap-chip:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.ank-cap-chip.active {
  color: #fff;
  background: var(--gradient-primary);
  border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(6, 182, 212, 0.8);
}
.ank-cap-chip-icon {
  width: 0.9rem;
  height: 0.9rem;
}
.ank-cap-chip em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 9999px;
  background-color: var(--ank-tint-strong);
  color: var(--color-primary-text);
  font-variant-numeric: tabular-nums;
}
.ank-cap-chip.active em {
  background-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.ank-cap-blurb {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  max-width: 40rem;
  margin: 0 auto 1.75rem;
}

.ank-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
  align-items: start;
}
.ank-cap-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem;
  border-radius: 0.875rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--ank-e1);
  transition: transform 0.35s var(--ank-ease), box-shadow 0.35s var(--ank-ease),
    border-color 0.3s ease;
}
.ank-cap-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ank-e3);
  border-color: var(--ank-tint-strong);
}
.ank-cap-card-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.ank-cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background-color: var(--ank-tint-strong);
  color: var(--color-primary-text);
}
.ank-cap-icon svg {
  width: 0.9375rem;
  height: 0.9375rem;
}
.ank-cap-group {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ank-cap-card h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0;
}
.ank-cap-card p {
  font-size: 0.8438rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}
.ank-cap-plans {
  display: flex;
  gap: 0.3rem;
  padding-top: 0.5rem;
  margin-top: auto;
  border-top: 1px solid var(--ank-hairline);
}
.ank-cap-plan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0;
}
.ank-cap-plan.on {
  color: #fff;
  background: var(--gradient-primary);
}
.ank-cap-plan.off {
  color: var(--color-text-muted);
  background-color: var(--ank-hairline);
  opacity: 0.55;
}

.ank-cap-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.ank-cap-progress {
  width: min(100%, 22rem);
  height: 3px;
  border-radius: 9999px;
  background-color: var(--color-border);
  overflow: hidden;
}
.ank-cap-progress-fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--gradient-primary);
  transition: width 0.5s var(--ank-ease);
}
.ank-cap-count {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.ank-cap-more-btn {
  padding: 0.8rem 1.6rem;
  font-size: 0.9375rem;
}
.ank-cap-more-rest {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  background-color: var(--ank-tint-strong);
  color: var(--color-primary-text);
  font-variant-numeric: tabular-nums;
}
.ank-cap-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.ank-cap-done p {
  max-width: 30rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.ank-cap-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.ank-cap-legend-sep {
  width: 1px;
  height: 0.8rem;
  background-color: var(--color-border);
  margin: 0 0.35rem;
}

/* ---------------- Progressive reveal on existing lists ---------------- */

.ank-reveal-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.ank-reveal-more .ank-cap-count {
  margin: 0;
}

/* ---------------- Secondary page hero ---------------- */

.ank-page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.ank-page-hero-content {
  position: relative;
  z-index: 1;
  padding: 8rem 1rem 3.5rem;
  max-width: 52rem;
}
.ank-page-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--color-text);
  margin: 0.85rem 0 1rem;
}
.ank-page-hero .ank-hero-desc {
  margin: 0 0 1.75rem;
  max-width: 44rem;
}
.ank-page-hero .ank-hero-cta {
  justify-content: flex-start;
  margin-bottom: 0;
}

.ank-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}
.ank-crumbs a {
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ank-crumbs a:hover {
  color: var(--color-primary-text);
  border-bottom-color: var(--color-primary);
}

/* ---------------- Disclosure callout ---------------- */

.ank-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 1.15rem;
  border-radius: 0.875rem;
  background-color: var(--ank-tint);
  border: 1px solid var(--ank-tint-strong);
  border-left: 3px solid var(--color-primary);
}
.ank-disclosure svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-primary-text);
}
.ank-disclosure p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.ank-disclosure strong {
  color: var(--color-text);
}

/* ---------------- Case study listing ---------------- */

.ank-cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 1.5rem;
}
.ank-cs-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: 1.125rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--ank-e1);
  transition: transform 0.4s var(--ank-ease), box-shadow 0.4s var(--ank-ease),
    border-color 0.3s ease;
}
.ank-cs-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ank-e3);
  border-color: var(--ank-tint-strong);
}
.ank-cs-theme {
  display: inline-block;
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gradient-primary);
}
.ank-cs-blurb {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0.8rem 0 0.4rem;
}
.ank-cs-card h2 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
}
.ank-cs-card h2 a {
  color: var(--color-text);
  text-decoration: none;
}
.ank-cs-card h2 a:hover {
  color: var(--color-primary-text);
}
.ank-cs-dek {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 1.1rem;
}
.ank-cs-facts {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background-color: var(--ank-tint);
}
.ank-cs-facts > div {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
}
.ank-cs-facts dt {
  flex: 0 0 4.25rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ank-cs-facts dd {
  margin: 0;
  color: var(--color-text-secondary);
}
.ank-cs-headline {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ank-cs-headline li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ank-hairline);
}
.ank-cs-headline li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ank-cs-headline-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.ank-cs-headline-move {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.ank-cs-headline-move s {
  opacity: 0.6;
}
.ank-cs-headline-move strong {
  color: var(--color-primary-text);
  font-weight: 700;
}
.ank-cs-headline-move svg {
  color: var(--color-text-muted);
}
.ank-cs-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.ank-cs-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.ank-cs-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary-text);
  text-decoration: none;
}
.ank-cs-link:hover {
  gap: 0.6rem;
}
.ank-cs-related {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
}
.ank-cs-related h3 {
  margin: 0;
}

/* ---------------- Case study detail ---------------- */

.ank-cs-hero {
  max-width: 56rem;
}
.ank-cs-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
.ank-cs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 3rem;
  align-items: start;
}
.ank-cs-main {
  min-width: 0;
  max-width: 44rem;
}
.ank-cs-h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--color-text);
  margin: 2.75rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ank-hairline);
}
.ank-cs-h2-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--color-primary-text);
}
.ank-cs-p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin: 0 0 1.1rem;
}

.ank-cs-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin: 1.75rem 0 0;
}
.ank-cs-panel {
  padding: 1.25rem 1.35rem;
  border-radius: 1rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--ank-e1);
}
.ank-cs-panel-inputs {
  background-color: var(--ank-tint);
  border-color: var(--ank-tint-strong);
}
.ank-cs-panel h2 {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-text);
  margin: 0 0 0.75rem;
}
.ank-cs-panel-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: -0.4rem 0 0.75rem;
}
.ank-cs-deflist {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}
.ank-cs-deflist > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ank-hairline);
}
.ank-cs-deflist > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ank-cs-deflist dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.ank-cs-deflist dd {
  margin: 0;
  font-size: 0.8125rem;
  text-align: right;
  color: var(--color-text-secondary);
}
.ank-cs-deflist dd strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.ank-cs-breaking {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.ank-cs-breaking li {
  padding: 1rem 1.15rem;
  border-radius: 0.875rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
}
.ank-cs-breaking h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.3rem;
}
.ank-cs-breaking p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0;
}

.ank-cs-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.1rem;
  counter-reset: none;
}
.ank-cs-steps li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.ank-cs-steps .ank-cs-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #fff;
  background: var(--gradient-primary);
  font-variant-numeric: tabular-nums;
}
.ank-cs-steps h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0.15rem 0 0.3rem;
}
.ank-cs-steps p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0;
}

.ank-cs-results {
  overflow-x: auto;
  border-radius: 1rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--ank-e1);
}
.ank-cs-results table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.ank-cs-results caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.15rem 0.6rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.ank-cs-results th,
.ank-cs-results td {
  padding: 0.8rem 1.15rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ank-hairline);
}
.ank-cs-results thead th {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--ank-tint);
}
.ank-cs-results tbody th {
  font-weight: 700;
  color: var(--color-text);
}
.ank-cs-results tbody tr:last-child th,
.ank-cs-results tbody tr:last-child td {
  border-bottom: none;
}
.ank-cs-before {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}
.ank-cs-after {
  color: var(--color-primary-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ank-cs-how {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.ank-cs-money {
  display: grid;
  gap: 0;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--ank-e1);
}
.ank-cs-money-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ank-hairline);
}
.ank-cs-money-row:last-child {
  border-bottom: none;
  background-color: var(--ank-tint);
}
.ank-cs-money-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
}
.ank-cs-money-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-primary-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ank-cs-money-basis {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.ank-cs-caveat {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 1rem 0 0;
  padding: 1rem 1.15rem;
  border-radius: 0.875rem;
  background-color: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
}
.ank-cs-caveat strong {
  color: var(--color-text);
}

/* Sales enablement block */
.ank-cs-enable {
  margin: 2.75rem 0 0;
  padding: 1.75rem;
  border-radius: 1.25rem;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.1),
    rgba(99, 102, 241, 0.09)
  );
  border: 1px solid var(--ank-tint-strong);
}
.ank-cs-enable-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gradient-primary);
}
.ank-cs-enable h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0.9rem 0 0.75rem;
}
.ank-cs-enable h3 {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-text);
  margin: 1.5rem 0 0.6rem;
}
.ank-cs-enable-why {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0;
}
.ank-cs-enable-why strong,
.ank-cs-enable-next strong {
  color: var(--color-text);
}
.ank-cs-enable-line {
  display: flex;
  gap: 0.7rem;
  margin: 1.25rem 0 0;
  padding: 1.15rem 1.25rem;
  border-radius: 0.875rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--ank-e1);
}
.ank-cs-enable-line svg {
  flex-shrink: 0;
  color: var(--color-primary-text);
}
.ank-cs-enable-line p {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text);
}
.ank-cs-enable-seq {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
}
.ank-cs-enable-seq li {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.ank-cs-enable-seq li::marker {
  color: var(--color-primary-text);
  font-weight: 700;
}
.ank-cs-enable-personas {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}
.ank-cs-enable-personas > div {
  padding: 0.75rem 0.95rem;
  border-radius: 0.75rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
}
.ank-cs-enable-personas dt {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 0.2rem;
}
.ank-cs-enable-personas dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.ank-cs-enable-next {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: 0.875rem;
  background-color: var(--color-bg-card);
  border-left: 3px solid var(--color-success);
}
.ank-cs-enable-next svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-success);
}
.ank-cs-enable-next p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.ank-cs-faq {
  display: grid;
  gap: 1.25rem;
}
.ank-cs-faq h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.4rem;
}
.ank-cs-faq p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Sticky rail */
.ank-cs-rail {
  position: sticky;
  top: 5.5rem;
}
.ank-cs-rail-card {
  padding: 1.5rem;
  border-radius: 1.125rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--ank-e2);
}
.ank-cs-rail-card h2 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}
.ank-cs-rail-card > p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 1.1rem;
}
.ank-cs-rail-card .ank-btn {
  width: 100%;
  margin-bottom: 0.6rem;
}
.ank-cs-rail-list {
  list-style: none;
  padding: 0.9rem 0 0;
  margin: 0.4rem 0 0;
  border-top: 1px solid var(--ank-hairline);
  display: grid;
  gap: 0.5rem;
}
.ank-cs-rail-list li {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.ank-cs-rail-list svg {
  flex-shrink: 0;
  margin-top: 0.22rem;
  color: var(--color-success);
}

@media (max-width: 960px) {
  .ank-cs-layout {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .ank-cs-rail {
    position: static;
  }
  .ank-cs-main {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .ank-page-hero-content {
    padding: 6.5rem 1rem 2.5rem;
  }
  .ank-cap-grid {
    gap: 0.75rem;
  }
  .ank-cs-card,
  .ank-cs-enable {
    padding: 1.25rem;
  }
  .ank-cs-h2 {
    margin-top: 2.25rem;
  }
  .ank-cap-rail {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scrollbar-width: none;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .ank-cap-rail::-webkit-scrollbar {
    display: none;
  }
  .ank-cap-chip {
    flex-shrink: 0;
  }
}

/* ---- Case study detail, second pass ----
   Tailwind preflight strips list markers, so the proof sequence was rendering
   as an unnumbered list when the whole point is the order. And prose wants a
   readable measure while tables want the full column, so the cap moves from
   the container onto the text blocks. */

.ank-cs-enable-seq {
  list-style: decimal;
}
.ank-cs-enable-seq li {
  padding-left: 0.25rem;
}

.ank-cs-main {
  max-width: none;
}
.ank-cs-main > .ank-cs-h2,
.ank-cs-main > .ank-cs-p,
.ank-cs-main > .ank-cs-caveat,
.ank-cs-main > .ank-cs-breaking,
.ank-cs-main > .ank-cs-steps,
.ank-cs-main > .ank-cs-faq,
.ank-cs-main > .ank-disclosure {
  max-width: 44rem;
}
.ank-cs-main > .ank-cs-results,
.ank-cs-main > .ank-cs-money,
.ank-cs-main > .ank-cs-enable,
.ank-cs-main > .ank-cs-panels {
  max-width: 52rem;
}
.ank-cs-results table {
  min-width: 36rem;
}

/* ---- Mobile fixes found by measuring at 320/360/390/414 ---- */

/* The money row was grid 1fr/auto with a nowrap value. "8 working days per
   inspection" is 229px, so at 360px the row ran 14px past the viewport and
   got clipped. Stack it and let the value wrap. */
@media (max-width: 560px) {
  .ank-cs-money-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .ank-cs-money-value {
    text-align: left;
    white-space: normal;
  }
}

/* Touch targets. These links were 14 to 21px tall, well under the 44px
   both Apple and Android ask for. Padding rather than a pseudo-element so
   adjacent targets cannot overlap and steal each other's taps. */
.ank-crumbs a,
.ank-cs-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ank-crumbs {
  margin-bottom: 0.5rem;
}
.ank-cs-card-foot {
  padding-top: 0;
}

/* 10px body text is below the readable floor on a phone. */
.ank-hw-modes span,
.ank-comparison-table td small {
  font-size: 0.6875rem;
}

/* The navbar is fixed at 65px, and nothing set scroll-margin, so every
   in-page anchor landed with its heading underneath it. That includes
   "See Pricing" in the hero and the explorer's closing CTA, on desktop
   as well as mobile. */
section[id] {
  scroll-margin-top: 5.5rem;
}

/* The setting panel holds prose values ("1 main unit, 2 satellite workshops,
   registrations in 3 states"), and right-aligning those against a short
   left label reads as two ragged columns. Stack them. The inputs panel keeps
   its two-column form because those values are single numbers. */
.ank-cs-panel:not(.ank-cs-panel-inputs) .ank-cs-deflist > div {
  grid-template-columns: 1fr;
  gap: 0.15rem;
}
.ank-cs-panel:not(.ank-cs-panel-inputs) .ank-cs-deflist dd {
  text-align: left;
}

/* Prepaid-term disclosure. Annual bills 12 months upfront and the 3-year term
   bills a year at a time, so the monthly figure on a card is not what the
   customer pays on day one. That gap is six figures at Pro, which is not
   something to leave for the invoice. */
.ank-billing-terms {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: -1.75rem auto 2.25rem;
  max-width: 34rem;
}
.ank-plan-upfront {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  background-color: var(--ank-tint);
  border: 1px solid var(--ank-tint-strong);
}
.ank-plan-upfront strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* The billing toggle is width:fit-content and centred, so at 320px the three
   pills came to about 330px and the outer two were clipped by the body's
   overflow-x. Let it shrink instead of overflow. */
@media (max-width: 380px) {
  .ank-billing-toggle {
    width: auto;
    max-width: 100%;
  }
  .ank-billing-btn {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* ===========================================================
   Objection cards (inside the hardware section) and the
   ungated admin-hours check. Both reuse the existing card,
   radius, border and accent tokens rather than defining a
   second visual language.
   =========================================================== */

.ank-objections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.ank-objection {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
}
.ank-objection-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary-text);
  margin-bottom: 0.75rem;
}
.ank-objection h3 {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.ank-objection p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 0.875rem;
}
.ank-objection-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary-text);
  text-decoration: none;
}
.ank-objection-link:hover { text-decoration: underline; }

.ank-leak-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: var(--card-shadow);
}
.ank-leak-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.ank-leak-input-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ank-leak-slider { flex: 1; min-width: 0; accent-color: var(--accent); height: 1.5rem; }
.ank-leak-number {
  width: 6.5rem;
  flex: none;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  font-weight: 650;
  text-align: center;
  color: var(--text);
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
}

.ank-leak-result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.75rem 0 1.25rem;
}
.ank-leak-figure {
  padding: 1.125rem 1rem;
  border-radius: 0.875rem;
  border: 1px solid var(--border);
  background: var(--bg-main);
  text-align: center;
}
.ank-leak-figure small {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}
.ank-leak-figure strong {
  display: block;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}
.ank-leak-figure span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: 0.375rem;
}
.ank-leak-figure-after { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ank-leak-figure-saved {
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--border));
  background: color-mix(in srgb, var(--color-success) 7%, var(--bg-main));
}
.ank-leak-figure-saved strong { color: var(--color-success); }

.ank-leak-method {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.ank-leak-method a { color: var(--color-primary-text); }

.ank-leak-form-lead {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.75rem;
}
.ank-leak-fields {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.625rem;
}
.ank-leak-fields input {
  width: 100%;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
}
.ank-leak-fields input::-moz-placeholder { color: var(--text-muted); }
.ank-leak-fields input::placeholder { color: var(--text-muted); }
.ank-leak-fields .ank-btn { white-space: nowrap; }
.ank-leak-fine {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.75rem 0 0;
}
.ank-leak-fine a { color: var(--color-primary-text); }
.ank-leak-err { font-size: 0.875rem; color: var(--color-danger, #dc2626); margin: 0.75rem 0 0; }
.ank-leak-done {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-success);
  font-weight: 600;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.ank-leak-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.ank-leak-foot svg { color: var(--text-muted); }

@media (max-width: 860px) {
  .ank-objections { grid-template-columns: 1fr; }
  .ank-leak-result { grid-template-columns: 1fr; gap: 0.75rem; }
  .ank-leak-fields { grid-template-columns: 1fr; }
  .ank-leak-fields .ank-btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .ank-leak-card { padding: 1.25rem 1rem; }
  .ank-leak-input-row { flex-wrap: wrap; }
  .ank-leak-number { width: 100%; }
  .ank-leak-figure strong { font-size: 1.625rem; }
}

/* Consent notice under the three-field demo form. The submit click is the
   affirmative action, so the notice has to be visible before it. */
.ank-form-consent {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.ank-form-consent a {
  color: var(--color-primary-text);
  text-decoration: underline;
}

/* ===========================================================
   Commitment savings. The rupee figure is the reason anyone
   moves off monthly, so it gets the weight, not a footnote.
   =========================================================== */

.ank-plan-was {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  line-height: 1.2;
  margin-bottom: 0.125rem;
}

.ank-plan-saving {
  margin: 0.625rem 0 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-success) 40%, var(--border));
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
}
.ank-plan-saving strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-success);
  margin-bottom: 0.125rem;
}
.ank-plan-saving span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.ank-billing-btn { position: relative; }
.ank-billing-rec {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-success);
}
.ank-billing-btn.active .ank-billing-rec { color: inherit; opacity: 0.9; }

@media (max-width: 480px) {
  .ank-plan-was { font-size: 1rem; }
  .ank-plan-saving { padding: 0.625rem 0.75rem; }
  .ank-plan-saving strong { font-size: 1rem; }
  .ank-billing-rec { font-size: 0.5625rem; letter-spacing: 0.05em; }
}

.ank-plan-gst {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* How the number on the card was arrived at. Same principle as the case
   studies: show the arithmetic rather than asking anyone to trust it. */
.ank-plan-basis { margin: 0.25rem 0 1rem; }
.ank-plan-basis p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.ank-plan-working {
  margin-top: 0.25rem !important;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary) !important;
}