/* KineticConversion: styles for the pricing pieces shared by index.html and services.html
   (package cards, the founding-offer banner, the estimator and the price tables). */

/* ---------- Package cards ---------- */
.pkg { position: relative; display: flex; flex-direction: column; border-radius: 1.5rem; border: 1px solid rgba(238,241,246,.15); background: #111D33; padding: 1.75rem; transition: border-color .3s ease, transform .4s cubic-bezier(.2,1,.3,1); }
.pkg:hover { border-color: rgba(245,184,61,.45); }
.pkg.is-popular { border-color: rgba(245,184,61,.55); box-shadow: 0 40px 90px -50px rgba(245,184,61,.6); }
.pkg-badge { position: absolute; top: -.75rem; left: 1.5rem; padding: .2rem .7rem; border-radius: 9999px; background: #F5B83D; color: #0A1324; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pkg ul li { display: flex; gap: .6rem; }
.pkg ul li svg { flex-shrink: 0; margin-top: .2rem; }

/* ---------- Founding offer banner ---------- */
.founding { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid rgba(245,184,61,.45);
  background: linear-gradient(110deg, rgba(245,184,61,.14), rgba(91,140,255,.08) 55%, rgba(17,29,51,.9)); }

/* ---------- Estimator ---------- */
.est-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .est-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; } }
.est-controls { display: grid; gap: 1.75rem; min-width: 0; }
.est-controls fieldset { min-width: 0; }
.est-controls legend { margin-bottom: .6rem; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #97A3B8; }
.est-controls legend span { text-transform: none; letter-spacing: 0; }
.est-hint { margin-top: .6rem; font-size: 13px; line-height: 1.5; color: #97A3B8; }
.ec-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.ec-row.mt { margin-top: .6rem; }
.ec { cursor: pointer; }
.ec span { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem; border-radius: 9999px; border: 1px solid rgba(238,241,246,.18); color: rgba(238,241,246,.85); font-size: 14px; line-height: 1.3; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.ec span b { font-weight: 500; color: #97A3B8; white-space: nowrap; }
.ec:hover span { border-color: rgba(245,184,61,.6); }
.ec input:checked + span { background: #F5B83D; border-color: #F5B83D; color: #0A1324; font-weight: 500; }
.ec input:checked + span b { color: #0A1324; }
.ec input:focus-visible + span { outline: 2px solid #F5B83D; outline-offset: 3px; }
.ec.is-off { opacity: .45; cursor: not-allowed; }
.ec.is-off span { border-style: dashed; }
.ec.is-locked { cursor: default; }
.ec.is-locked input:checked + span { background: rgba(245,184,61,.14); border-color: rgba(245,184,61,.55); color: #EEF1F6; }
.ec.is-locked input:checked + span b { color: #F5B83D; }

.est-pay { display: inline-grid; grid-template-columns: 1fr 1fr; padding: .25rem; border-radius: 9999px; border: 1px solid rgba(238,241,246,.15); background: #111D33; justify-self: start; }
.est-pay button { min-height: 44px; padding: 0 1.4rem; border-radius: 9999px; font-weight: 500; font-size: 14px; color: rgba(238,241,246,.75); transition: background-color .25s ease, color .25s ease; }
.est-pay button.on { background: #EEF1F6; color: #0A1324; }
.est-pay button:focus-visible { outline: 2px solid #F5B83D; outline-offset: 2px; }

.est-good { color: #F5B83D; }
.est-step { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.est-step button { width: 44px; height: 44px; border-radius: 9999px; border: 1px solid rgba(238,241,246,.2); font-size: 1.25rem; line-height: 1; color: #EEF1F6; transition: border-color .2s ease, background-color .2s ease; }
.est-step button:hover { border-color: #F5B83D; background: rgba(245,184,61,.1); }
.est-step output { min-width: 6.5rem; text-align: center; font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.35rem; color: #EEF1F6; font-variant-numeric: tabular-nums; }
.est-step .est-hint { margin-top: 0; }

.est-out { border-radius: 1.5rem; border: 1px solid rgba(245,184,61,.45); background: #111D33; padding: 1.75rem; box-shadow: 0 40px 100px -50px rgba(245,184,61,.5); }
@media (min-width: 1024px) { .est-side { position: relative; } .est-out { position: sticky; top: 6rem; } }
.est-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #F5B83D; }
.est-big { margin-top: .5rem; font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: clamp(2.75rem, 6vw, 4rem); line-height: 1; color: #EEF1F6; font-variant-numeric: tabular-nums; }
.est-big small { font-size: 1.25rem; font-weight: 500; color: #97A3B8; }
.est-sub { margin-top: .6rem; color: rgba(238,241,246,.8); }
.est-lines { margin-top: 1.25rem; border-top: 1px solid rgba(238,241,246,.1); }
.est-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(238,241,246,.08); font-size: 14px; }
.est-lines dt { color: rgba(238,241,246,.7); }
.est-lines dd { color: #EEF1F6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-explain { margin-top: 1rem; font-size: 13px; line-height: 1.5; color: #97A3B8; }
.est-cta { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.5rem; border-radius: 9999px; background: #EEF1F6; color: #0A1324; font-weight: 500; transition: background-color .3s ease; }
.est-cta:hover { background: #F5B83D; }
.est-fine { margin-top: .9rem; font-size: 12px; line-height: 1.5; color: #97A3B8; }

/* Phones: price bar pinned to the bottom of the screen while the options are on screen */
.est-bar { position: sticky; bottom: .75rem; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .6rem .6rem 1.1rem; border-radius: 9999px; border: 1px solid rgba(245,184,61,.5); background: rgba(17,29,51,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); }
.est-bar b { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1.35rem; color: #EEF1F6; font-variant-numeric: tabular-nums; }
.est-bar small { color: #97A3B8; font-size: 12px; }
.est-bar button { min-height: 40px; padding: 0 1rem; border-radius: 9999px; background: #EEF1F6; color: #0A1324; font-size: 13px; font-weight: 500; white-space: nowrap; }
@media (min-width: 1024px) { .est-bar { display: none; } }

/* ---------- Price tables: a table on wide screens, one row-card per item on phones ---------- */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th { text-align: left; font-weight: 400; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #97A3B8; padding: 0 1rem .8rem 0; }
.price-table td { padding: 1rem 1rem 1rem 0; border-top: 1px solid rgba(238,241,246,.1); vertical-align: top; }
.price-table td:last-child, .price-table th:last-child { padding-right: 0; }
.price-table .pt-name { color: #EEF1F6; font-weight: 500; }
.price-table .pt-price { color: #EEF1F6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-table .pt-desc { color: rgba(238,241,246,.7); line-height: 1.55; }
@media (max-width: 767px) {
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: 1rem 0; border-top: 1px solid rgba(238,241,246,.1); }
  .price-table td { border: 0; padding: 0; }
  .price-table .pt-desc { grid-column: 1 / -1; margin-top: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pkg, .ec span, .est-pay button, .est-cta { transition: none; }
}

/* ---------- Example site preview under each package (a live, scaled-down iframe) ---------- */
.pkg-demo { display: block; margin-top: 1.25rem; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(238,241,246,.12); background: #0A1324; transition: border-color .3s ease; }
.pkg-demo:hover { border-color: rgba(245,184,61,.6); }
.pkg-demo:focus-visible { outline: 2px solid #F5B83D; outline-offset: 3px; }
.pkg-demo-frame { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #111D33; }
.pkg-demo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s cubic-bezier(.2,1,.3,1); }
.pkg-demo:hover .pkg-demo-frame img { transform: scale(1.04); }
.pkg-demo-cap { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; font-size: 12px; line-height: 1.35; }
.pkg-demo-cap span { color: #97A3B8; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; }
.pkg-demo-cap b { color: #EEF1F6; font-weight: 500; min-height: 2.7em; }
.pkg-demo:hover .pkg-demo-cap b { color: #F5B83D; }
@media (prefers-reduced-motion: reduce) { .pkg-demo, .pkg-demo-frame img { transition: none; } .pkg-demo:hover .pkg-demo-frame img { transform: none; } }