/* Tariq (/tariq/ and its English twin): the product page of Tariq, the delivery-route platform.
   Built from the shared components in site.css; this file adds only what they lack. Class
   prefix: tq-. The route drawing in the hero and the driver's stop list are illustrations made
   here, not screenshots: no customer name, phone number or address appears on either. */

/* ---------- hero: the copy, and two drivers' routes over a city grid ---------- */
.tq-hero .page-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.tq-hero h1 { font-size: clamp(32px, 4vw, 54px); max-width: 16em; text-wrap: pretty; }
[dir="ltr"] .tq-hero h1 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.14; }
.tq-hero .lead { text-wrap: pretty; }
.tq-trial-note { margin-top: 16px; font-family: var(--f-ui); font-size: var(--t-sm); color: var(--gold-soft); }

.tq-map { display: block; width: 100%; height: auto; max-width: 460px; margin-inline: auto; overflow: visible; }
.tq-map .grid { stroke: rgba(201,211,242,.13); stroke-width: 1; fill: none; }
.tq-map .river { stroke: rgba(74,108,240,.45); stroke-width: 18; stroke-linecap: round; fill: none; }
.tq-map .route { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tq-draw 2.4s var(--ease) .4s forwards; }
.tq-map .route.a { stroke: var(--gold); }
.tq-map .route.b { stroke: var(--lapis-300); animation-delay: .9s; }
.tq-map .stop circle { stroke-width: 3; }
.tq-map .stop.a circle { fill: var(--lapis-950); stroke: var(--gold); }
.tq-map .stop.b circle { fill: var(--lapis-950); stroke: var(--lapis-300); }
.tq-map .stop text { font-family: "Thmanyah Sans", var(--f-ui); font-weight: 700; font-size: 15px; text-anchor: middle; dominant-baseline: central; }
.tq-map .stop.a text { fill: var(--gold-soft); }
.tq-map .stop.b text { fill: #dfe5f8; }
.tq-map .stop { opacity: 0; animation: rise-in .6s var(--ease) forwards; animation-delay: calc(.6s + var(--i) * .22s); }
.tq-map .depot rect { fill: var(--gold); stroke: var(--lapis-950); stroke-width: 3; }
@keyframes tq-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tq-map .route { animation: none; stroke-dashoffset: 0; }
  .tq-map .stop { animation: none; opacity: 1; }
}

/* ---------- the problem: the list beside one statement ---------- */
.tq-problem .ledger { margin-top: 0; }

/* ---------- what it does: groups of caps; the driver's group sits beside a phone ---------- */
.tq-group { margin-top: clamp(44px, 5vw, 68px); font-size: var(--t-lg); color: var(--lapis-900); }
.head + .tq-group { margin-top: 0; }
.tq-group + .caps, .tq-group + .tq-driver { margin-top: 22px; }
.tq-driver { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.tq-driver .caps { grid-template-columns: minmax(0, 1fr); }

/* The driver's screen: a drawing of the stop list, not a screenshot. */
.tq-phone {
  max-width: 320px; margin-inline: auto; padding: 18px 16px 20px; border-radius: 28px;
  background: var(--lapis-950); border: 5px solid var(--lapis-900);
  box-shadow: 0 28px 40px -26px rgba(14,27,82,.75);
  font-family: var(--f-ui); color: #fff;
}
.tq-phone-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 6px 14px; border-bottom: 1px solid rgba(201,211,242,.18); }
.tq-phone-top b { font-size: 17px; }
.tq-phone-top span { font-size: 13px; color: #aab6de; }
.tq-stops { list-style: none; display: grid; gap: 8px; margin-top: 14px; }
.tq-stops li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); }
.tq-stops .n { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; font-size: 14px; background: var(--lapis-700); }
.tq-stops .area { font-weight: 500; font-size: 15px; line-height: 1.4; }
.tq-stops .cod { grid-column: 2; font-size: 13px; line-height: 1.4; color: #aab6de; }
.tq-stops .st { grid-row: 1 / span 2; grid-column: 3; font-size: 12px; line-height: 1.4; padding: 3px 8px; border-radius: 3px; background: rgba(201,211,242,.12); color: #c9d3f2; }
.tq-stops .done .n { background: var(--lapis-500); }
.tq-stops .done .st { background: rgba(74,108,240,.3); color: #dfe5f8; }
.tq-stops .next { background: rgba(227,168,43,.14); box-shadow: inset 0 0 0 1.5px var(--gold); }
.tq-stops .next .n { background: var(--gold); color: var(--lapis-950); }
.tq-stops .next .st { background: var(--gold); color: var(--lapis-950); }
.tq-phone-sum { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 12px 6px 0; border-top: 1px solid rgba(201,211,242,.18); font-size: 14px; color: #c9d3f2; }
.tq-phone-sum b { color: var(--gold-soft); }
.tq-phone-cap { margin-top: 12px; text-align: center; font-size: 14px; color: var(--ink-3); }

/* ---------- the plans: a card per fleet size ---------- */
.tq-plans { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tq-plan {
  display: flex; flex-direction: column; gap: 6px; padding: 28px 24px 26px; border-radius: 3px; text-align: center;
  background: linear-gradient(180deg, #ffffff, #f1f4fa);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 5px 0 var(--lapis-500), inset 0 -4px 0 rgba(14,27,82,.07);
}
.tq-plan.top { box-shadow: inset 0 0 0 1px var(--line), inset 0 5px 0 var(--gold), 0 22px 34px -30px rgba(14,27,82,.55); }
.tq-plan h3 { font-size: 24px; color: var(--lapis-900); }
.tq-plan-size { font-family: var(--f-ui); font-weight: 500; font-size: 16px; color: var(--ink-2); }
.tq-plan-price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.tq-plan-price b { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.25; color: var(--lapis-700); }
.tq-plan-price span { font-family: var(--f-ui); font-weight: 500; font-size: 16px; color: var(--ink-2); }
.tq-plan .btn { justify-content: center; margin-top: auto; }
.tq-plan-price + .btn { margin-top: 18px; }
.tq-note { margin-top: 18px; font-size: 15.5px; line-height: 1.8; color: var(--ink-3); max-width: 46em; }
.tq-note + .tq-note { margin-top: 8px; }

/* ---------- the closing band: the product's own address ---------- */
.tq-mail { margin-top: 18px; font-size: 16px; }
.tq-mail a { color: var(--gold-soft); }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .tq-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .tq-map { max-width: 340px; }
  .tq-driver { grid-template-columns: minmax(0, 1fr); }
  .tq-plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
}
@media (max-width: 600px) {
  .tq-map { max-width: 260px; }
}