/* Intravo — pricing page. */

.pr-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; margin-top: 8px; }
.pr-main { position: relative; padding: 44px; border-radius: 28px; background: var(--white); border: 2px solid var(--lav-700); box-shadow: 0 30px 70px rgba(18, 19, 15, .08); }
.pr-main .top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pr-badge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--lav-700); color: var(--white); font-size: 13px; }
.pr-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--gal-300); display: block; }
.pr-price { margin: 26px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pr-price b { font-size: 76px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--lav-800); }
.pr-price span { font-size: 22px; color: var(--ink-2); }
.pr-incl { margin: 8px 0 0; font-size: 18px; font-weight: 600; }
.pr-main > p { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 560px; }
.pr-main .p-checks { margin-top: 28px; }
.pr-main .btns { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

.pr-side { display: flex; flex-direction: column; gap: 24px; }
.pr-card { padding: 30px; border-radius: 24px; display: flex; flex-direction: column; gap: 10px; }
.pr-card h3 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 600; }
.pr-card p { margin: 0; font-size: 15px; line-height: 1.5; }
.pr-card .btn { margin-top: 12px; align-self: flex-start; }
.pr-card.trial { background: var(--gal-100); }
.pr-card.glove { background: var(--lav-700); color: var(--white); }
.pr-card.glove p { color: var(--lav-100); }
.pr-card .k { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.pr-card.trial .k { color: #1F5C43; }
.pr-card.glove .k { color: var(--lav-100); }
.pr-big { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: #1F5C43; }

/* Smart Break meter illustration */
.pr-meter-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pr-meter { padding: 28px; border-radius: 24px; background: var(--dark-1); border: 1px solid var(--dark-line); color: var(--white); }
.pr-meter .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pr-meter .lbl { font-size: 15px; font-weight: 600; }
.pr-meter .sub { font-size: 13px; color: var(--lav-100); }
.pr-clock { margin-top: 22px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pr-clock b { font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pr-state { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.pr-state.run { background: var(--gal-300); color: var(--onyx); }
.pr-state.pause { background: var(--lav-700); color: var(--white); }
.pr-track { margin-top: 20px; height: 44px; border-radius: 12px; background: #26271F; position: relative; overflow: hidden; display: flex; }
.pr-track span { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.pr-track .on { background: var(--gal-600); color: var(--onyx); }
.pr-track .brk { background: var(--lav-800); color: var(--white); }
.pr-track .head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--white); left: 0; animation: pr-head 9s linear infinite; }
@keyframes pr-head { 0% { left: 0; } 100% { left: calc(100% - 2px); } }
.pr-legend { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--lav-100); }
.pr-legend span { display: inline-flex; align-items: center; gap: 8px; }
.pr-legend i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.pr-flow { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pr-flow div { display: flex; align-items: center; gap: 10px; }
.pr-flow svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the knob flips between interpreting and break */
.pr-toggle { position: relative; width: 56px; height: 30px; border-radius: 999px; background: var(--lav-700); display: block; flex-shrink: 0; }
.pr-toggle i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); display: block; animation: pr-knob 9s ease-in-out infinite; }
@keyframes pr-knob { 0%, 36% { transform: translateX(0); } 39%, 54% { transform: translateX(26px); } 57%, 100% { transform: translateX(0); } }
.pr-pills { position: relative; display: inline-flex; }
.pr-pills .pause { position: absolute; left: 0; top: 0; white-space: nowrap; visibility: hidden; animation: pr-pause 9s linear infinite; }
.pr-pills .run { animation: pr-run 9s linear infinite; }
@keyframes pr-run { 0%, 37.9% { visibility: visible; } 38%, 55.9% { visibility: hidden; } 56%, 100% { visibility: visible; } }
@keyframes pr-pause { 0%, 37.9% { visibility: hidden; } 38%, 55.9% { visibility: visible; } 56%, 100% { visibility: hidden; } }

/* FAQ */
.pr-faq { max-width: 920px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 12px; }
.pr-faq details { border-radius: 18px; background: var(--white); border: 1px solid var(--lav-300); }
.pr-faq details[open] { border-color: var(--lav-700); }
.pr-faq summary { list-style: none; cursor: pointer; min-height: 64px; padding: 18px 64px 18px 24px; position: relative; font-size: 18px; font-weight: 600; display: flex; align-items: center; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2px solid var(--lav-700); border-bottom: 2px solid var(--lav-700); transform: rotate(45deg); transition: transform .2s; }
.pr-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
html[dir="rtl"] .pr-faq summary { padding: 18px 24px 18px 64px; }
html[dir="rtl"] .pr-faq summary::after { right: auto; left: 24px; }
.pr-faq .a { padding: 0 24px 22px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.pr-faq .a p { margin: 0; }
.pr-faq .a p + p { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .pr-track .head, .pr-toggle i, .pr-pills .run, .pr-pills .pause { animation: none !important; }
  .pr-track .head { display: none; }
}
@media (max-width: 1100px) {
  .pr-grid, .pr-meter-sec { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 720px) {
  .pr-main { padding: 26px; }
  .pr-price b { font-size: 52px; }
  .pr-clock b { font-size: 40px; }
  .pr-card { padding: 24px; }
  .pr-faq summary { font-size: 16px; padding: 16px 52px 16px 18px; }
  .pr-faq summary::after { right: 18px; }
  .pr-faq .a { padding: 0 18px 18px; }
}