/* ==========================================================================
   Extra styles for the Products pages (products, product detail, terms).
   site.css is left exactly as it was; anything new lives here.
   Note: on English pages this file loads BEFORE site.css (same order as the old master page),
   so rules here use slightly stronger selectors where they must win.
   Colours are the site's own navy (#0B1F3A-ish via .bg-navy) and gold.
   ========================================================================== */

/* product card on /products */
.tek-card { transition: transform .3s ease, box-shadow .3s ease; }
.tek-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(26, 43, 74, .25); }
.tek-shot { height: 12rem; position: relative; overflow: hidden; }
.tek-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.tek-shot-icon { display: flex; align-items: center; justify-content: center; height: 100%; }
.tek-shot-icon img { width: 8rem; height: 8rem; object-fit: contain; }
.tek-logo { height: 3rem; width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; }

/* product hero icon */
.tek-hero-icon { width: 5rem; height: 5rem; object-fit: contain; flex-shrink: 0; }

/* monthly / yearly switch */
.tek-cycle { display: inline-flex; background: #fff; border-radius: 9999px; padding: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.tek-cycle button { border: 0; background: none; padding: .5rem 1.25rem; border-radius: 9999px; font-weight: 600; font-size: .9rem; cursor: pointer; color: inherit; }
.tek-cycle button.is-on { background: rgb(197 160 71); color: rgb(26 43 74); }

/* plan cards */
.tek-plan { position: relative; border: 2px solid transparent; display: flex; flex-direction: column; }
.tek-plan.is-popular { border-color: rgb(197 160 71); }
.tek-plan-tag { position: absolute; top: -0.8rem; inset-inline-start: 1.25rem; background: rgb(197 160 71); color: rgb(26 43 74); font-size: .75rem; font-weight: 700; padding: .2rem .75rem; border-radius: 9999px; }
.tek-plan .tek-plan-cta { margin-top: auto; }
.tek-price { font-size: 2rem; font-weight: 700; line-height: 1.1; }

/* screenshot frame on the detail page */
.tek-frame { background: linear-gradient(135deg, rgb(26 43 74), #1F3F73); }
.tek-frame-icon { display: flex; align-items: center; justify-content: center; min-height: 22rem; }
.tek-frame-icon img { width: 14rem; height: 14rem; }

/* small "more apps" row */
.tek-mini { transition: transform .2s ease; }
.tek-mini:hover { transform: translateY(-3px); }
.tek-mini img { width: 3.5rem; height: 3.5rem; margin: 0 auto .5rem; }

/* legal text (terms page) */
.tek-legal { color: #374151; line-height: 1.75; font-size: .97rem; }
.tek-legal h4 { color: rgb(26 43 74); font-weight: 700; font-size: 1.1rem; margin: 1.75rem 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid #e5e7eb; }
.tek-legal p { margin: .5rem 0; }
.tek-legal ul { list-style: disc; padding-inline-start: 1.25rem; margin: .5rem 0; }
.tek-legal li { margin: .3rem 0; }
.tek-legal .sm { font-size: .82rem; color: #6b7280; }

/* 5 columns on large screens (home page product strip) */
@media (min-width: 1024px) { .grid.tek-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* keep the "15 days free trial" badge inside the screen on phones */
@media (max-width: 1023px) { .absolute.tek-badge { left: .75rem; } }

/* home page "Our products" tiles: roomier tiles and clear space above the button */
.tek-tile { padding: 1.75rem 1rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.tek-mini.tek-tile img { width: 4.5rem; height: 4.5rem; margin: 0 auto .85rem; }
.tek-tile .block { line-height: 1.35; }
.tek-strip-cta { margin-top: 3rem; }

/* product tabs + dark cycle switch (pricing on the Products page) */
.tek-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.tek-tab { border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; border-radius: 9999px; padding: .5rem 1.1rem; font-weight: 500; cursor: pointer; }
.tek-tab.is-on { background: rgb(197 160 71); border-color: rgb(197 160 71); color: rgb(26 43 74); font-weight: 700; }
.tek-cycle-dark { background: rgba(255, 255, 255, .08); box-shadow: none; }
.tek-cycle-dark button { color: #fff; }
.tek-cycle-dark button.is-on { background: #fff; color: rgb(26 43 74); }
.tek-panel[hidden] { display: none; }
@media (min-width: 1024px) { .grid.tek-plans-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tek-why-ic { font-size: 1.4rem; }