/* ==========================================================================
   yourKEYtoIT — brand overrides and custom components on top of a Bootstrap 5
   base theme. The vendor stylesheet stays untouched; everything
   specific to yourKEYtoIT lives here and loads after main.css.
   ========================================================================== */

/* --- Brand palette -------------------------------------------------------- */
/* The template exposes a single --accent-color. Repoint it, the heading color,
   and Bootstrap's own primary variables so buttons, links, badges and every
   accent surface pick up the brand periwinkle. #5b3fd6 clears 6.6:1 on white,
   so accent text and white-on-accent both pass WCAG AA. */
:root {
  --accent-color: #5b3fd6;
  --heading-color: #221a4e;
  --bs-primary: #5b3fd6;
  --bs-primary-rgb: 91, 63, 214;
  --bs-link-color: #5b3fd6;
  --bs-link-hover-color: #452ea8;
}

.btn-primary {
  --bs-btn-bg: #5b3fd6;
  --bs-btn-border-color: #5b3fd6;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #4c33bd;
  --bs-btn-hover-border-color: #4c33bd;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #452ea8;
  --bs-btn-active-border-color: #452ea8;
  --bs-btn-disabled-bg: #5b3fd6;
  --bs-btn-disabled-border-color: #5b3fd6;
}

.btn-light {
  --bs-btn-color: #452ea8;
  --bs-btn-hover-color: #452ea8;
}

.btn-outline-primary {
  --bs-btn-color: #5b3fd6;
  --bs-btn-border-color: #5b3fd6;
  --bs-btn-hover-bg: #5b3fd6;
  --bs-btn-hover-border-color: #5b3fd6;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #5b3fd6;
  --bs-btn-active-border-color: #5b3fd6;
}

/* --- Logo ----------------------------------------------------------------- */
/* The template ships a text ".sitename" logo; ours is the Brigade pinwheel plus
   the yourKEYtoIT wordmark, with KEY and IT carrying the accent. */
.ykti-logo {
  gap: 9px;
  text-decoration: none;
}
.ykti-logo__mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
/* The template's generic ".header .logo span" / ".footer .logo span" rules add
   a 3px pad, a 24px font-size and 1px letter-spacing meant for the "." after
   its own wordmark. Those land on our nested KEY/IT spans and render the mark
   as "your KEY to IT". !important is the clean way to opt the brand logo out of
   a vendor rule we do not control. */
.ykti-logo span {
  padding-left: 0 !important;
  letter-spacing: 0 !important;
}
.ykti-logo__word {
  font-family: var(--heading-font) !important;
  font-weight: 600;
  font-size: 22px !important;
  line-height: 1;
  color: var(--heading-color) !important;
  white-space: nowrap;
}
.ykti-logo__key,
.ykti-logo__it {
  color: var(--accent-color) !important;
  font-weight: 700;
  font-size: inherit !important;
}

/* --- Header polish -------------------------------------------------------- */
.header .btn-getstarted {
  border-radius: 50px;
}

/* On phones the logo, the "Request a demo" pill and the menu toggle were summing
   to nearly the full viewport, leaving no gap and forcing the pill to wrap onto
   two lines. Trim the wordmark a touch and make the pill a single compact line
   so the row breathes and stays one clean line. */
@media (max-width: 575px) {
  .ykti-logo__mark { width: 26px; height: 26px; }
  .ykti-logo__word { font-size: 19px !important; }
  .header .btn-getstarted {
    white-space: nowrap;
    font-size: 13px;
    padding: 8px 16px;
    margin-right: 12px;
  }
}

/* --- Product screenshots -------------------------------------------------- */
/* Real captures of the running app. A soft frame reads as a screenshot rather
   than a raw PNG dropped on the page. */
.ykti-shot img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 88%);
  box-shadow: 0 24px 60px rgba(34, 26, 78, 0.14);
}
.hero .hero-image.ykti-shot img {
  box-shadow: 0 30px 70px rgba(34, 26, 78, 0.18);
}
/* The call-to-action-2 image is mirrored (scaleX(-1)) by the template for a
   decorative stock photo. Our CTA image is a real product screenshot, so the
   flip turns its UI text into backwards gibberish. Un-flip it. */
.call-to-action-2 .cta-image-wrapper.ykti-shot img { transform: none; }

/* --- Line illustrations (platform page) ----------------------------------- */
.ykti-illus {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ykti-illus img { width: 100%; max-width: 440px; height: auto; }
/* Real product screenshots in the split sections: framed and full column width,
   not the smaller cap the decorative illustrations use, so the UI stays legible. */
.ykti-shot {
  width: 100%;
  height: auto;
  border: 1px solid #e6e8ec;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.10);
}
/* Numbered step marker on the tour page. */
.ykti-tour-step {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color);
}

/* --- Hero + newsletter email capture -------------------------------------- */
.ykti-hero-form { max-width: 520px; }
.ykti-hero-form--center { margin-inline: auto; }
.ykti-hero-form__row {
  display: flex;
  gap: 10px;
}
.ykti-hero-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  font-size: 15px;
  color: var(--default-color);
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 82%);
  border-radius: 50px;
  outline: none;
}
.ykti-hero-form input[type="email"]:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 82%);
}
.ykti-hero-form .btn {
  flex: 0 0 auto;
  height: 52px;
  border-radius: 50px;
  padding-inline: 26px;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .ykti-hero-form__row { flex-direction: column; }
  .ykti-hero-form .btn { width: 100%; }
}

/* --- Form status + anti-spam + consent ------------------------------------ */
.ykti-form__status {
  display: none;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.ykti-form__status.is-visible { display: block; }
/* Turnstile runs "interaction-only": usually empty, a checkbox when it asks. */
.ykti-turnstile { display: flex; justify-content: center; }
.ykti-turnstile:not(:empty) { margin-top: 12px; }
.ykti-form__status--block { text-align: center; }
.ykti-form__status--ok { color: #1d8757; }
.ykti-form__status--error { color: #c9414d; }
.ykti-form__status a { color: inherit; text-decoration: underline; }

/* Honeypot: off-screen, never shown to people, no layout footprint. */
.ykti-hp {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ykti-consent {
  font-size: 13px;
  color: var(--default-color);
  opacity: 0.75;
  line-height: 1.6;
  margin: 0;
}
.ykti-consent a { color: var(--accent-color); }

/* --- Services grid: keep 4-across cards even ------------------------------ */
.ykti-service { height: 100%; }

/* --- Alternating problem / closer-look rows ------------------------------- */
.ykti-split .content h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 14px;
}
/* The read-more link keeps the template's filled-pill styling (white text on
   accent). It sits a little clear of the paragraph above it. */
.ykti-split .content .read-more { margin-top: 10px; }

/* --- Solutions: tall cards with a checklist ------------------------------- */
.ykti-solution {
  height: 100%;
  padding: 34px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(34, 26, 78, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ykti-solution:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(34, 26, 78, 0.10);
}
.ykti-solution .service-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 26px;
  color: #fff;
  background: var(--accent-color);
  margin-bottom: 18px;
}
.ykti-solution h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; }

/* --- Checklists ----------------------------------------------------------- */
.ykti-checklist { list-style: none; padding: 0; margin: 16px 0 0; }
.ykti-checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.55;
}
.ykti-checklist li i {
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--accent-color);
}
.ykti-checklist--two-col {
  column-count: 2;
  column-gap: 40px;
}
.ykti-checklist--two-col li { break-inside: avoid; }
@media (max-width: 575px) {
  .ykti-checklist--two-col { column-count: 1; }
}

/* --- Pricing extras ------------------------------------------------------- */
/* Billing terms: the monthly floor and the annual rate on one line. These were
   two stacked paragraphs (.ykti-min and .ykti-annual); in a four-column grid
   each wrapped, so the card showed five lines of small print above the first
   feature. One line, one weight, one margin. */
.ykti-terms {
  margin: -6px 0 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  opacity: 0.8;
}
/* Homepage capability grid.
   Three across, not four. At four the column is ~240px: every second title
   wrapped to two lines ("Request / Intake", "Change / Control") and the body
   became a 10-line ribbon. Three gives ~356px - titles fit on one line and a
   card reads in four or five.
   height:100% is what makes a row of cards end level; without it each card is
   only as tall as its own text and the row looks broken. */
.ykti-service {
  height: 100%;
}

/* The two group headings that split the grid into what every plan includes and
   what costs extra. Thirteen cards of identical weight told the reader nothing
   about which was which; the heading does, and it also lets each add-on card
   drop its own "Optional paid add-on" tag - six repetitions of a line the
   group heading already carries once. */
.ykti-group {
  margin: 26px 0 2px;
}
.ykti-group:first-child {
  margin-top: 0;
}
.ykti-group__kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-color);
}
.ykti-group__line {
  font-size: 0.95rem;
  color: var(--text-muted, #605a7a);
  margin-top: 2px;
}

/* "Optional paid add-on" tag on the homepage services grid. */
.ykti-addon-note {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ykti-addon-note a {
  color: var(--accent-color);
  text-decoration: none;
}
.ykti-addon-note a:hover {
  text-decoration: underline;
}
/* "How AI handles your data" link, shown wherever the site claims an AI feature.
   Deliberately quieter than .ykti-addon-note: it is a disclosure, not a sell. */
.ykti-ai-note {
  margin: 8px 0 0;
  font-size: 13px;
}
.ykti-ai-note a {
  color: var(--default-color);
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ykti-ai-note a:hover { opacity: 1; }
.ykti-pricing-note {
  max-width: 720px;
  margin-inline: auto;
  color: var(--default-color);
  opacity: 0.8;
  font-size: 14.5px;
  line-height: 1.7;
}

/* --- CTA band ------------------------------------------------------------- */
.ykti-cta__inner {
  max-width: 760px;
  margin-inline: auto;
  padding: 8px 0;
}
.ykti-cta__eyebrow {
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 8px;
}
.ykti-cta h2 { font-weight: 600; }

/* --- FAQ group headings --------------------------------------------------- */
.ykti-faq-group {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent-color), transparent 78%);
}

/* --- Legal / prose pages -------------------------------------------------- */
.ykti-prose h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 34px 0 12px;
}
.ykti-prose h2:first-child { margin-top: 0; }
.ykti-prose p { line-height: 1.75; margin-bottom: 14px; }
.ykti-prose .ykti-list { padding-left: 0; list-style: none; margin: 0 0 16px; }
.ykti-prose .ykti-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  line-height: 1.7;
}
.ykti-prose .ykti-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-color);
}
.ykti-prose .ykti-meta {
  font-size: 14px;
  opacity: 0.7;
  font-style: italic;
}
.ykti-prose a { color: var(--accent-color); }

/* --- 404 ------------------------------------------------------------------ */
.ykti-error__inner { max-width: 640px; margin-inline: auto; padding: 40px 0; }
.ykti-error__code {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 120px;
  line-height: 1;
  color: var(--accent-color);
  letter-spacing: -2px;
}
.ykti-error h2 { font-weight: 600; margin: 8px 0 12px; }
.ykti-error__links { margin: 24px 0 28px; }
.ykti-error__nav {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
}
.ykti-error__nav a { color: var(--accent-color); font-weight: 500; }

/* --- Newsletter ----------------------------------------------------------- */
.ykti-newsletter h2 { font-weight: 600; }
.ykti-newsletter p { margin-bottom: 22px; }

/* ==========================================================================
   Accessibility (WCAG 2.1 AA) + polish
   ========================================================================== */

/* --- Step numbers clear of the icon (home "How a project moves") ---------- */
/* The template's decorative step number is absolutely positioned and its right
   edge slipped under the icon box. Push the icon + text right on desktop so the
   number reads in full with a clear gap. */
@media (min-width: 992px) {
  .how-we-work .process-item .card-body { padding-left: 4rem; }
  .how-we-work .process-item .step-number { left: -42px; }
}
/* The template renders the step number as accent at 0.2 opacity (~1.35:1),
   which fails AA even as decoration. #8b80cf at full opacity clears 3:1 for
   large text while staying a soft, watermark-like lavender. */
.how-we-work .process-item .step-number {
  color: #8b80cf;
  opacity: 1;
}

/* --- Contrast: muted text that fell just under 4.5:1 ---------------------- */
/* Non-popular pricing cards render dark text on white; the template's muted
   grays measured ~4.2:1. Darken them past AA. The popular (accent) card keeps
   its own white text and is excluded. */
.pricing .pricing-card:not(.popular) .description,
.pricing .pricing-card:not(.popular) .price .period {
  color: #55585c;
}

/* The consent line used opacity, which dragged the link's contrast down to
   3.9:1. Use a solid muted color instead and give the link full-strength
   accent plus an underline. */
.ykti-consent {
  opacity: 1;
  color: #55585c;
}

/* --- Links in body text must not rely on color alone (WCAG 1.4.1) --------- */
.ykti-prose a,
.ykti-consent a,
.ykti-split .content p a,
.info-card .info-content a,
.faq .faq-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Visible keyboard focus (WCAG 2.4.7) ---------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #2b2170;
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Skip link (WCAG 2.4.1) ----------------------------------------------- */
.ykti-skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 1200;
  padding: 10px 16px;
  background: var(--accent-color);
  color: #fff;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.ykti-skip:focus { top: 0; color: #fff; }

/* --- Respect reduced-motion (WCAG 2.3.3) ---------------------------------- */
/* AOS does not honor the OS setting on its own; neutralize its reveal so the
   page is fully visible and still for anyone who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Quote-priced (White Label) card -------------------------------------- */
/* "Custom" replaces the big dollar amount on the white-label card; size it so
   it reads as a label, not a number, and keep the four cards even in height. */
.pricing .pricing-card .price {
  flex-wrap: wrap;
}
.pricing .pricing-card .price .ykti-amount--quote {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}
/* Put "quoted to your rollout" on its own line under "Custom". The .price box
   is block-flow (not flex), so flex-basis does nothing here — force the
   qualifier onto its own line with display:block, otherwise it renders inline
   right after the price label and the two words run together. */
.pricing .pricing-card .price .ykti-amount--quote + .period {
  display: block;
  margin-top: 2px;
}

/* ===================== Pricing polish ==================================== */
/* Resting cards had no border or shadow, so they read as flat boxes on the
   white page. Give them real definition, align CTAs to the bottom, and make the
   recommended plan clearly lift off the page. */
.pricing .pricing-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e7e7ee;
  box-shadow: 0 1px 2px rgba(20, 16, 60, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pricing .pricing-card .features-list { flex: 1 1 auto; }
.pricing .pricing-card .btn { margin-top: auto; }
.pricing .pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(20, 16, 60, 0.12);
}

/* Recommended plan: lifted, deeper shadow, a little gradient depth. */
.pricing .pricing-card.popular {
  border: none;
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(43, 33, 112, 0.32);
  background: linear-gradient(160deg,
    var(--accent-color),
    color-mix(in srgb, var(--accent-color), #000 14%));
}
.pricing .pricing-card.popular:hover { transform: translateY(-12px); }

/* Make the number the hero. */
.pricing .pricing-card .price { align-items: baseline; }
.pricing .pricing-card .price .currency {
  font-size: 1.25rem;
  font-weight: 700;
  align-self: flex-start;
  margin-top: 0.35rem;
}
.pricing .pricing-card .price .amount {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}
.pricing .pricing-card .price .period { font-size: 0.85rem; }

/* Cleaner recommended-plan badge.
   The last three declarations are load-bearing, not cosmetic. The badge is
   absolutely positioned at top:-12px with left:50%, and because it is a block
   its shrink-to-fit width is capped at the space to the RIGHT of that 50% -
   half the card. "MOST COMPLETE" is wider than that, so it wrapped to two
   lines and the second line grew downward onto the plan name (measured: a 4px
   overlap on the Department card at desktop column widths).
   width:max-content sizes the pill to its own text instead of to half the
   card, nowrap keeps it on one line, and max-width stops it escaping the card
   if a future label is very long. Verified one line and clear of the heading
   at every card width from 237px down to 116px. */
.pricing .pricing-card .popular-badge {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  padding: 0.42rem 0.95rem;
  white-space: nowrap;
  width: max-content;
  max-width: calc(100% - 24px);
}

/* Add-on cards: match the lift-and-define treatment. */
#addons .service-item {
  height: 100%;
  border: 1px solid #e7e7ee;
  border-radius: 1rem;
  padding: 1.75rem;
  background: var(--surface-color);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#addons .service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(20, 16, 60, 0.10);
}
#addons .service-icon i { color: var(--accent-color); }

/* ---- Variant B: "why not a generic tool" comparison ---- */
.ykti-vs-card {
  height: 100%;
  background: var(--surface-color, #fff);
  border: 1px solid #e8e5f1;
  border-radius: 14px;
  padding: 28px 26px;
}
.ykti-vs-card__icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
  font-size: 22px;
  margin-bottom: 16px;
}
.ykti-vs-card h3 {
  font-size: 19px;
  line-height: 1.35;
  margin-bottom: 10px;
}
.ykti-vs-card p {
  margin: 0;
  color: #605a7a;
  font-size: 15px;
  line-height: 1.6;
}

.ykti-vs-table-wrap {
  overflow-x: auto;
}
.ykti-vs-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: var(--surface-color, #fff);
  border: 1px solid #e8e5f1;
  border-radius: 14px;
  overflow: hidden;
}
.ykti-vs-table th,
.ykti-vs-table td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid #eeecf6;
  font-size: 15px;
  vertical-align: middle;
}
.ykti-vs-table thead th {
  background: #f6f5fb;
  font-weight: 600;
  color: #272242;
}
.ykti-vs-table tbody th {
  font-weight: 600;
  color: #37325a;
}
.ykti-vs-table td {
  color: #7a7396;
}
.ykti-vs-table .ykti-vs-table__us {
  background: color-mix(in srgb, var(--accent-color) 7%, transparent);
  color: #272242;
  font-weight: 600;
}
.ykti-vs-table td .bi-check-circle-fill {
  color: var(--accent-color);
  margin-right: 6px;
}
.ykti-vs-table td .bi-dash-circle {
  color: #b9b3cc;
  margin-right: 6px;
}
.ykti-vs-table tbody tr:last-child th,
.ykti-vs-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---- Variant B: pricing wedge ---- */
.ykti-wedge {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 34px;
  background: color-mix(in srgb, var(--accent-color) 8%, #fff);
  border: 1px solid #e8e5f1;
  border-radius: 18px;
}
.ykti-wedge h2 {
  margin-bottom: 12px;
}
.ykti-wedge .lead {
  color: #4c466a;
}

/* ---- A/B compare page ---- */
.ykti-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 900px) {
  .ykti-compare { grid-template-columns: 1fr; }
}
.ykti-compare__col {
  border: 1px solid #e8e5f1;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.ykti-compare__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f6f5fb;
  border-bottom: 1px solid #e8e5f1;
}
.ykti-compare__bar--b {
  background: color-mix(in srgb, var(--accent-color) 12%, #fff);
}
.ykti-compare__tag {
  font-weight: 600;
  font-size: 14px;
  color: #272242;
}
.ykti-compare__bar a {
  font-size: 13.5px;
  white-space: nowrap;
}
.ykti-compare__frame {
  height: 78vh;
  min-height: 560px;
  overflow: hidden;
}
.ykti-compare__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.ykti-compare__note {
  color: #8a83a4;
  font-size: 14px;
}

/* ---- Pricing: per-seat vs per-editor ---- */
.ykti-seatvs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .ykti-seatvs { grid-template-columns: 1fr; }
}
.ykti-seatvs__card {
  border-radius: 16px;
  padding: 28px 26px;
  border: 1px solid #e8e5f1;
}
.ykti-seatvs__card--them {
  background: #f6f5fb;
}
.ykti-seatvs__card--us {
  background: color-mix(in srgb, var(--accent-color) 8%, #fff);
  border-color: color-mix(in srgb, var(--accent-color) 30%, #e8e5f1);
}
.ykti-seatvs__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #7a7396;
}
.ykti-seatvs__card--us .ykti-seatvs__label {
  color: var(--accent-color);
}
.ykti-seatvs__card p {
  font-size: 15px;
  line-height: 1.6;
  color: #4c466a;
  margin: 0 0 14px;
}
.ykti-seatvs__math {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid #e8e5f1;
  margin: 0 !important;
}
.ykti-seatvs__math span {
  font-size: 13.5px;
  color: #7a7396;
}
.ykti-seatvs__math strong {
  font-size: 20px;
  color: #272242;
}
.ykti-seatvs__card--us .ykti-seatvs__math strong {
  color: var(--accent-color);
}
.ykti-seatvs__foot {
  color: #605a7a;
  font-weight: 500;
}

/* --- Section intro measure ------------------------------------------------
   The template leaves `.section-title p` at the container's full width. On a
   desktop that is 1296px, which works out at 144 characters per line - about
   double the 45-75 band where the eye reliably finds the start of the next
   line. It is not a container problem: 1320px is a normal content width, and
   the cards and grids inside it want every pixel. Only the prose needs
   capping.

   72ch rather than a pixel value so the measure holds if the font size ever
   changes, and it lands close to the 720-760px this stylesheet already uses
   for .ykti-pricing-note and .ykti-cta__inner. Centered, because these
   paragraphs sit under a centered heading. */
.section-title p {
  max-width: 72ch;
  margin-inline: auto;
}

/* --- Prose measure guard --------------------------------------------------
   The rule above fixes the one place the template got wrong. This is the
   general case, and it is preventive: running text dropped straight into a
   .container inherits the container's full width - 1140px here, 1320px above
   1400px - which measures 142 characters a line, and 165 on a wide monitor.
   The 45-75 band is where the eye reliably finds the start of the next line.

   Nothing stops that today. The prose on this site is narrow because whoever
   wrote each section happened to wrap it in something, not because a rule
   says it has to be. That is a habit, and habits do not survive edits.

   68ch is a floor, not a preference. :where() carries zero specificity, so
   any deliberate rule still wins - .section-title p keeps its 72ch, and a
   future section that genuinely wants a wider measure only has to say so.

   The margin rule follows the alignment rather than imposing one. Centered
   copy (Bootstrap's .text-center, which the footer uses) keeps its box
   centered so nothing appears to move; left-aligned prose stays left, because
   a capped box floated to the middle of left-aligned copy reads as a bug. */
:where(.container, .container-fluid) > :where(p, ul, ol, dl, blockquote) {
  max-width: 68ch;
}

:where(.container, .container-fluid):where(.text-center)
  > :where(p, ul, ol, dl, blockquote),
:where(.container, .container-fluid)
  > :where(p, ul, ol, dl, blockquote):where(.text-center) {
  margin-inline: auto;
}