/* Compare AI calling rates page (troikaplus.in). Builds on styles.css. */
.rp-hero { padding: calc(var(--nav) + clamp(40px, 6vh, 72px)) 0 clamp(64px, 8vw, 104px); position: relative;
  background: radial-gradient(60% 70% at 80% 40%, rgba(245, 158, 11, .07), transparent 70%), radial-gradient(50% 60% at 10% 100%, rgba(6, 182, 212, .06), transparent 70%); }
.rp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--dim); margin-bottom: 26px; }
.crumbs a { color: var(--mute); text-decoration: none; } .crumbs a:hover { color: var(--chalk); }
.rp-title { font: 600 min(clamp(38px, 4.2vw, 64px), 9vh)/1.04 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.rp-lede { margin-top: 22px; color: var(--mute); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; max-width: 52ch; }
.rp-jump { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rp-jump a { font-size: 14.5px; color: var(--chalk); text-decoration: none; border-bottom: 1px solid var(--line2); padding-bottom: 3px; transition: border-color .2s; }
.rp-jump a:hover { border-color: var(--amber); }
/* calculator bars */
.rbars { list-style: none; margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.rbars li p { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--mute); }
.rbars li b { font: 500 14px/1.5 var(--mono); color: var(--chalk); font-variant-numeric: tabular-nums; }
.rbars li i { display: block; margin-top: 7px; height: 10px; border-radius: 3px; background: rgba(243, 244, 246, .05); overflow: hidden; }
.rbars li s { display: block; height: 100%; background: rgba(243, 244, 246, .28); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.rbars li.us p span { color: var(--amber); font-weight: 600; } .rbars li.us b { color: var(--amber); } .rbars li.us s { background: var(--amber); }
.rbars .save { font: 500 11px/1 var(--mono); color: var(--cyan); margin-left: 8px; }
.rcalc-note { margin-top: 18px; font: 400 11px/1.6 var(--mono); color: var(--dim); }
/* two-column text sections */
.rp-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.rp-two h2 { max-width: 17ch; } .rp-two .sec-lede { margin-top: 22px; }
.rp-body p { color: var(--mute); font-size: 16.5px; line-height: 1.75; margin-top: 16px; }
.rp-body .rp-big { margin-top: 0; font: 400 clamp(21px, 1.7vw, 26px)/1.5 var(--sans); color: var(--chalk); letter-spacing: -.01em; }
.rp-parts { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line2); }
.rp-parts li { display: grid; grid-template-columns: 48px 1fr; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.rp-parts b { font: 500 12px/1.9 var(--mono); color: var(--amber); }
.rp-note { margin-top: 24px !important; padding: 16px 18px; border-left: 2px solid var(--amber); background: rgba(245, 158, 11, .05); border-radius: 0 8px 8px 0; }
.rp-note strong { color: var(--chalk); font-weight: 600; }
/* rates table */
.rtable td small { display: block; margin-top: 3px; font: 500 11px/1.3 var(--mono); color: var(--amber-ink); letter-spacing: .02em; }
.rtable td.y::before { content: "✓ "; color: #15803d; font-weight: 700; }
.rtable td.us.y::before { color: var(--amber-ink); }
.rtable td.n { color: rgba(11, 13, 18, .4); }
.rtable td.n::before { content: "✕ "; }
/* per-second vs per-minute */
.tick { border: 1px solid var(--line2); border-radius: 18px; padding: clamp(22px, 2.6vw, 32px); background: #0f1116; }
.tick-row + .tick-row { margin-top: 22px; }
.tick-row p { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--mute); }
.tick-row b { font: 500 14px/1.5 var(--mono); color: var(--chalk); font-variant-numeric: tabular-nums; }
.tick-row i { position: relative; display: block; margin-top: 9px; height: 34px; border-radius: 6px; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(243, 244, 246, .06) 0 calc(100% / 60 - 1px), rgba(243, 244, 246, .12) calc(100% / 60 - 1px) calc(100% / 60)); }
.tick-row s { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--amber); transition: width .15s linear; }
.tick-row:nth-child(2) s { background: linear-gradient(90deg, var(--amber) var(--spoke, 100%), rgba(243, 244, 246, .3) var(--spoke, 100%)); }
.tick-cap { margin-top: 20px; font-size: 15px; color: var(--chalk); } .tick-cap b { font-family: var(--mono); color: var(--amber); }
.tick-also { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line2); font-size: 14px; color: var(--mute); line-height: 1.65; }
/* evaluation sheet */
.sheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(11, 13, 18, .2); counter-reset: s; }
.sheet li { position: relative; padding: 26px 24px 28px 0; border-bottom: 1px solid rgba(11, 13, 18, .1); counter-increment: s; }
.sheet li:not(:nth-child(4n + 1)) { padding-left: 24px; border-left: 1px solid rgba(11, 13, 18, .1); }
.sheet li::before { content: counter(s, decimal-leading-zero); font: 500 12px/1 var(--mono); color: var(--amber-ink); }
.sheet h3 { margin-top: 14px; font: 600 19px/1.25 var(--display); color: var(--ink); }
.sheet p { margin-top: 8px; font-size: 15px; color: var(--ink2); line-height: 1.6; }
.sheet small { display: block; margin-top: 10px; font: 500 11.5px/1.5 var(--mono); color: var(--ink); }
/* features */
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.checks li { position: relative; padding: 15px 0 15px 34px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--chalk); line-height: 1.55; }
.checks li::before { content: ""; position: absolute; left: 0; top: 18px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--amber); }
.checks li::after { content: ""; position: absolute; left: 6px; top: 22px; width: 5px; height: 8px; border: solid var(--amber); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
/* steps */
.steps4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.steps4::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: rgba(11, 13, 18, .18); }
.steps4 li { position: relative; }
.steps4 span { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: 1px solid rgba(11, 13, 18, .25); font: 500 12px/1 var(--mono); color: var(--amber-ink); }
.steps4 h3 { margin-top: 20px; font: 600 22px/1.2 var(--display); color: var(--ink); }
.steps4 p { margin-top: 8px; color: var(--ink2); font-size: 15.5px; }
/* use cases */
.uses6 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line2); }
.uses6 li { padding: 26px 26px 28px 0; border-bottom: 1px solid var(--line); }
.uses6 li:not(:nth-child(3n + 1)) { padding-left: 26px; border-left: 1px solid var(--line); }
.uses6 h3 { font: 600 20px/1.25 var(--display); } .uses6 p { margin-top: 8px; color: var(--mute); font-size: 15.5px; }
/* cta */
.rp-cta { text-align: center; border-top: 1px solid var(--line); background: radial-gradient(50% 70% at 50% 100%, rgba(245, 158, 11, .08), transparent 70%); }
.rp-cta h2 { max-width: 18ch; margin: 0 auto; } .rp-cta .sec-lede { margin: 20px auto 0; } .rp-cta .cta-row { justify-content: center; }
@media (max-width: 1000px) {
  .rp-hero__grid, .rp-two { grid-template-columns: minmax(0, 1fr); }
  .sheet { grid-template-columns: 1fr 1fr; } .sheet li:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; } .sheet li:nth-child(even) { padding-left: 22px; border-left: 1px solid rgba(11, 13, 18, .1); }
  .steps4 { grid-template-columns: 1fr 1fr; row-gap: 36px; } .steps4::before { display: none; }
  .uses6 { grid-template-columns: 1fr 1fr; } .uses6 li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; } .uses6 li:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .rp-title { font-size: clamp(32px, 9vw, 40px); }
  .rtable, .rtable thead, .rtable tbody, .rtable tr, .rtable th, .rtable td { display: block; }
  .rtable thead { display: none; }
  .cmp.rtable tbody tr { display: block; padding: 16px 0; border-bottom: 1px solid rgba(11, 13, 18, .12); }
  .rtable tbody th { padding: 0 0 8px; border: 0; }
  .cmp.rtable td, .cmp.rtable td:not(.us) { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 4px 0; border: 0; font-size: 14px; background: none; }
  .rtable td small { grid-column: 2; }
  .cmp.rtable td.us { background: rgba(245, 158, 11, .1); margin: 0 -10px; padding: 6px 10px; border-radius: 6px; }
  .rtable td.y::before, .rtable td.n::before { font-weight: 500; }
  .rtable td::after { content: none; }
  .rtable td:nth-of-type(1)::before { content: "Troika"; } .rtable td:nth-of-type(2)::before { content: "Provider A"; } .rtable td:nth-of-type(3)::before { content: "Provider B"; } .rtable td:nth-of-type(4)::before { content: "Provider C"; }
  .rtable td::before { font: 500 10px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2) !important; }
  .rtable td.us::before { color: var(--amber-ink) !important; }
  .sheet, .steps4, .uses6 { grid-template-columns: minmax(0, 1fr); }
  .sheet li, .sheet li:nth-child(even), .uses6 li, .uses6 li:nth-child(even) { padding-left: 0; border-left: 0; }
}
.light .uses6 { border-top-color: rgba(11, 13, 18, .2); }
.light .uses6 li { border-color: rgba(11, 13, 18, .1); }
.light .uses6 h3 { color: var(--ink); } .light .uses6 p { color: var(--ink2); }