/* ==========================================================
   limaPOS storefront — Dexlab Technologies theme
   ==========================================================
   limaPOS now lives inside the Dexlab site, so the storefront should read as
   part of it. app.css already uses the same colour tokens (brand-blue,
   deep-navy, emerald), so this layers on the two things that actually differ:
   the typeface and the chrome treatment (nav, hero, footer, buttons).

   Written as an overlay rather than edits to shop.css so the component styles
   underneath stay intact and this is easy to lift back out.
   Load AFTER app.css and shop.css.
   ========================================================== */

:root {
  --navy:        #1e3a5f;
  --navy-deep:   #0f1d2e;
  --border-soft: #eef2f7;
  --text-secondary: #475569;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 12px 28px rgba(15, 23, 42, .10);
}

/* ---- Typography: the Dexlab signature ---------------------- */
body.shop,
body.shop input,
body.shop select,
body.shop textarea,
body.shop button {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body.shop { background: #fff; }

/* ---- Section nav controls ---------------------------------
   The site nav is shared (header.php); these are the controls limaPOS
   appends to it via $NAV_EXTRA. */
.nav-links .account-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-soft);
  font-size: 13px; font-weight: 700; color: var(--navy);
}
.nav-links .account-pill .circle {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.nav-links form { display: flex; align-items: center; }
.nav-links button.ghost {
  background: none; border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 8px 14px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
}
.nav-links button.ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue-dk); }

/* ---- Hero: the dark navy treatment from the Dexlab site ---- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 20% 0%, #1e3a5f 0%, #14233a 50%, #0f1d2e 100%);
  color: #fff;
  padding: 92px 24px 84px;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(40px);
  pointer-events: none;
}
.hero::before {
  top: -250px; right: -150px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59, 130, 246, .40), transparent 65%);
}
.hero::after {
  bottom: -200px; left: -120px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(16, 185, 129, .30), transparent 65%);
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  color: #fff;
  font-size: 52px;
  letter-spacing: -.035em;
  line-height: 1.06;
}
/* The accent word picks up the same sky-to-mint gradient as the Dexlab hero. */
.hero h1 .accent {
  background: linear-gradient(90deg, #7dd3fc 0%, #a5f3c9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: #cfe0f2; font-size: 19px; }

.hero .cta-row .btn { border-radius: 12px; font-weight: 700; }
.hero .cta-row .primary:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, .32);
  transform: translateY(-1px);
}
.hero .cta-row .ghost {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border-color: rgba(255, 255, 255, .30);
}
.hero .cta-row .ghost:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

/* The offline-download banner sits on the dark hero now, so invert it. */
.hero .desktop-banner {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #dbeafe;
  border-radius: 999px;
}
.hero .desktop-banner a { color: #a5f3c9; }

@media (prefers-reduced-motion: reduce) {
  .hero .cta-row .primary:hover { transform: none; }
}

/* ---- Sections and cards ------------------------------------ */
.section h2 {
  font-size: 40px; font-weight: 800; letter-spacing: -.025em;
  color: var(--navy); line-height: 1.1;
}
.plan-card, .key-card, .checkout-summary, .acct-licence {
  border-radius: var(--r-lg);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ---- Buttons ----------------------------------------------- */
.btn { border-radius: var(--r-md); font-weight: 700; transition:
       transform .12s ease, box-shadow .15s ease, background .12s ease; }
.btn.primary:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, .32); transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---- Forms ------------------------------------------------- */
.field input, .field select, .field textarea {
  border-radius: var(--r-md);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

@media (max-width: 760px) {
  .hero { padding: 64px 20px 60px; }
  .hero h1 { font-size: 34px; }
  .hero p { font-size: 17px; }
  .section h2 { font-size: 28px; }
}

/* ---- Desktop download panel -------------------------------
   The one place the product name belongs: this is the application itself,
   not the licensing site around it. */
.dl-panel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  max-width: 640px; margin: 0 auto;
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.dl-panel .dl-meta { display: flex; align-items: center; gap: 14px; }
.dl-panel .dl-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-light); color: var(--brand-blue-dk);
  font-size: 20px; font-weight: 800;
}
.dl-panel .dl-name { font-size: 15px; font-weight: 800; color: var(--navy); }
.dl-panel .dl-sub  { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.dl-note {
  text-align: center; color: var(--text-muted);
  font-size: 13px; margin: 14px 0 0;
}
@media (max-width: 560px) {
  .dl-panel { flex-direction: column; align-items: stretch; text-align: left; }
  .dl-panel .btn { justify-content: center; }
}

/* ---- Two delivery options (desktop vs cloud) --------------- */
.pos-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 940px; margin: 36px auto 0;
}
.pos-option {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 26px 26px 24px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.pos-option:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pos-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pos-head h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.pos-tag {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: .07em;
}
.pos-tag.now  { background: #d1fae5; color: #065f46; }
.pos-tag.soon { background: #fef3c7; color: #92400e; }
.pos-option > p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }
.pos-option ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.pos-option ul li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text-primary); font-weight: 500;
}
.pos-option ul li::before {
  content: ""; flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: #d1fae5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23047857' d='M6.5 11.5L3 8l1.4-1.4 2.1 2.1 4.6-4.6L12.5 5.5z'/></svg>") center/13px no-repeat;
}
.pos-option .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 760px) { .pos-options { grid-template-columns: 1fr; } }

/* ---- Custom quote form (path B) ---------------------------- */
.quote-wrap { max-width: 720px; margin: 0 auto; }
.quote-form {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-sm);
}
.quote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-form .field { margin-bottom: 18px; }
.quote-form label { display: block; font-size: 13px; font-weight: 700;
  color: var(--navy); margin-bottom: 6px; }
.quote-form .opt { color: var(--text-muted); font-weight: 500; }
.quote-form input[type="text"], .quote-form input[type="email"],
.quote-form input[type="tel"], .quote-form input[type="number"],
.quote-form select, .quote-form textarea {
  width: 100%; padding: 11px 14px; font: inherit; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: #fff; color: var(--text-primary);
}
.quote-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quote-choice .choice {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 13px 14px; border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer; background: #fff;
  transition: border-color .15s, background .15s;
}
.quote-choice .choice:hover { border-color: var(--brand-blue); }
/* :has lets the whole card show selection; browsers without it still show the
   radio itself, so the control stays usable either way. */
.quote-choice .choice:has(input:checked) {
  border-color: var(--brand-blue); background: var(--blue-light);
}
.quote-choice input { margin-top: 3px; flex: 0 0 auto; }
.quote-choice .c-body { display: flex; flex-direction: column; gap: 2px; }
.quote-choice .c-title { font-size: 13.5px; font-weight: 700; color: var(--navy); }
.quote-choice .c-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.quote-submit { width: 100%; justify-content: center; padding: 13px; font-size: 15px; }
.quote-done {
  background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: 40px 32px; text-align: center; box-shadow: var(--shadow-sm);
}
.quote-done h2 { margin-top: 0; color: var(--navy); }
.quote-done p { color: var(--text-secondary); margin-bottom: 22px; }
@media (max-width: 700px) {
  .quote-row, .quote-choice { grid-template-columns: 1fr; }
}

/* ---- Two buy options --------------------------------------- */
.buy-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 980px; margin: 36px auto 0;
}
.buy-option {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 28px 26px 24px;
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
}
.buy-option:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* The complete system is the one we want read first, so it carries the accent. */
.buy-option.featured { border-color: var(--brand-blue); box-shadow: var(--shadow-md); }
.bo-tag {
  align-self: flex-start; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--surface); color: var(--text-muted);
  padding: 4px 10px; border-radius: 6px; margin-bottom: 12px;
}
.bo-tag.alt { background: var(--blue-light); color: var(--brand-blue-dk); }
.buy-option h3 {
  margin: 0 0 8px; font-size: 22px; font-weight: 800;
  color: var(--navy); letter-spacing: -.02em;
}
.buy-option > p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }
.buy-option ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.buy-option ul li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text-primary); font-weight: 500;
}
.buy-option ul li::before {
  content: ""; flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: #d1fae5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23047857' d='M6.5 11.5L3 8l1.4-1.4 2.1 2.1 4.6-4.6L12.5 5.5z'/></svg>") center/13px no-repeat;
}
.bo-cta { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.bo-note { margin: 14px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* ---- Complete system breakdown ----------------------------- */
.sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.sys-card {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 24px 22px; box-shadow: var(--shadow-sm);
}
.sys-icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--blue-light); color: var(--brand-blue-dk);
}
.sys-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--navy); }
.sys-blurb { color: var(--text-muted); font-size: 13px; margin: 0 0 14px; }
.sys-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sys-table td { padding: 9px 0; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.sys-table tr:last-child td { border-bottom: 0; }
.sys-name { display: block; font-weight: 600; color: var(--text-primary); }
.sys-desc { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sys-price { text-align: right; white-space: nowrap; font-weight: 800; color: var(--navy); }
.sys-price .is-quote {
  font-weight: 700; font-size: 12px; color: var(--brand-blue-dk);
  background: var(--blue-light); padding: 3px 9px; border-radius: 6px;
}
.sys-unit { display: block; font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
.sys-foot {
  max-width: 640px; margin: 26px auto 0; text-align: center;
  color: var(--text-muted); font-size: 13.5px; line-height: 1.6;
}
.sys-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ---- Setup & support --------------------------------------- */
.setup-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.setup-step {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 22px 20px; box-shadow: var(--shadow-sm);
}
.setup-step .n {
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 13px;
}
.setup-step h3 { margin: 0 0 7px; font-size: 16px; font-weight: 800; color: var(--navy); }
.setup-step p { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }

/* ---- Industries -------------------------------------------- */
.ind-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px;
}
.ind-card {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 16px 18px;
  transition: border-color .15s, transform .15s;
}
.ind-card:hover { border-color: var(--brand-blue); transform: translateY(-2px); }
.ind-icon {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--blue-light); color: var(--brand-blue-dk);
}
.ind-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy); }
.ind-blurb { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.ind-foot { text-align: center; margin-top: 24px; font-size: 13.5px; color: var(--text-muted); }

@media (max-width: 980px) {
  .sys-grid, .setup-grid, .ind-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .buy-options, .sys-grid, .setup-grid, .ind-grid { grid-template-columns: 1fr; }
}

/* Package price withheld by the admin toggle. Sized down from the figure it
   replaces so a card reading "On request" does not shout louder than one
   showing a real number. */
.plan-card .amount-quote { font-size: 24px; color: var(--brand-blue-dk); }

/* Trust row under the hero CTAs. Short claims only — the hero is not the place
   to argue a case, just to signal that the obvious objections are answered. */
.hero-trust {
  display: flex; gap: 26px; flex-wrap: wrap; justify-content: center;
  margin-top: 28px; color: #9fb7d4; font-size: 13px; font-weight: 600;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust span::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(16, 185, 129, .25) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23a5f3c9' d='M6.5 11.5L3 8l1.4-1.4 2.1 2.1 4.6-4.6L12.5 5.5z'/></svg>") center/11px no-repeat;
}

/* ---- Step 1: deployment choice ----------------------------- */
.deploy-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 900px; margin: 36px auto 0;
}
.deploy-grid.single { grid-template-columns: minmax(0, 440px); justify-content: center; }
.deploy-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 26px 24px 24px;
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
}
.deploy-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* The unavailable option stays legible but visibly quieter, so the choice is
   obvious without hiding what is coming. */
.deploy-card.soon { background: var(--surface); border-style: dashed; }
.deploy-card.soon .dp-icon { background: #e7ecf5; color: var(--text-muted); }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dp-icon {
  width: 44px; height: 44px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; background: var(--blue-light); color: var(--brand-blue-dk);
}
.dp-status {
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
}
.dp-status.ok   { background: var(--emerald-light); color: var(--emerald-text); }
.dp-status.wait { background: var(--amber-light);   color: var(--amber-text); }
.deploy-card h3 { margin: 0 0 2px; font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.dp-sub { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; color: var(--brand-blue);
          text-transform: uppercase; letter-spacing: .07em; }
.dp-body { margin: 0 0 16px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; }
.deploy-card ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.deploy-card ul li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--text-primary); font-weight: 500;
}
.deploy-card ul li::before {
  content: ""; flex: 0 0 17px; height: 17px; margin-top: 1px; border-radius: 50%;
  background: #d1fae5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23047857' d='M6.5 11.5L3 8l1.4-1.4 2.1 2.1 4.6-4.6L12.5 5.5z'/></svg>") center/12px no-repeat;
}
.deploy-card .btn { margin-top: auto; align-self: flex-start; }
.dp-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* Price cells: a dash, not a repeated word. */
.sys-dash { color: var(--text-soft); font-weight: 600; cursor: help; }
.sys-price .sys-unit { display: block; font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
.ind-more {
  text-align: center; margin: 22px auto 0; max-width: 640px;
  font-size: 14px; color: var(--text-secondary); line-height: 1.6;
}
@media (max-width: 760px) { .deploy-grid { grid-template-columns: 1fr; } }

/* ---- Contact route shown when packages are hidden -----------
   Deliberately large and high-contrast: this replaces the pricing cards, so it
   is the primary action on the page, not a footnote. */
.ask-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  max-width: 820px; margin: 36px auto 0;
}
.ask-card {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm); text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ask-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  text-decoration: none; border-color: var(--brand-blue);
}
.ask-card.wa:hover { border-color: #25D366; }
.ask-icon {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 23px; background: var(--blue-light); color: var(--brand-blue-dk);
}
.ask-card.wa .ask-icon { background: #dcfce7; color: #15803d; }
.ask-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ask-title { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.ask-sub { font-size: 13px; color: var(--text-muted); }
.ask-go { font-size: 20px; color: var(--text-soft); transition: transform .15s, color .15s; }
.ask-card:hover .ask-go { transform: translateX(3px); color: var(--brand-blue); }
.ask-foot {
  text-align: center; max-width: 620px; margin: 26px auto 0;
  font-size: 14px; color: var(--text-muted); line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .ask-card:hover { transform: none; }
  .ask-card:hover .ask-go { transform: none; }
}
@media (max-width: 700px) { .ask-grid { grid-template-columns: 1fr; } }