/* ---------- Base & Variables ---------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root{
  --maxw: 1100px;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;

  --brand: #2563eb;
  --brand-dark: #1e40af;
  --ink: #111827;
  --muted: #334155;

  --bg: #ffffff;
  --bg-soft: #eff4ff;
  --navy: #1e2a78;
  --indigo: #263aa1;
}

*{ box-sizing: border-box; }
html, body{ max-width: 100%; overflow-x: hidden; }
html{ font-size: 16px; }
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}

/* ---------- Utilities ---------- */

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.section{ padding: var(--space-6) 0; text-align: center; }

h1{ font-size: clamp(2rem, 4vw + .5rem, 3rem); margin: 0 0 var(--space-2); }
h2{ font-size: clamp(1.25rem, 2.5vw + .25rem, 1.75rem); margin: var(--space-2) 0; }
p{ color: var(--muted); }

a{ color: var(--brand); text-decoration: none; }
a:hover{ text-decoration: underline; }

.btn{
  display: inline-block;
  padding: .75rem 1.25rem;
  background: var(--brand);
  color: #fff;
  border-radius: .5rem;
  font-weight: 600;
  transition: background .2s ease, transform .05s ease;
  min-height: 44px;
}
.btn:hover{ background: var(--brand-dark); }
.btn:active{ transform: translate(1px); }

:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Navbar ---------- */

.nav{
  position: sticky; top: 0; z-index: 1000;
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem;
  background: #000;
  color: #fff;
  border-bottom: 1px solid #111;
}
.links a{ margin-left: 1rem; color: #fff; }
.links a:hover{ color: #bfdbfe; text-decoration: underline; }
:target{ scroll-margin-top: 64px; }

/* ---------- Hero ---------- */

.hero{
  min-height: 20vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem;
  text-align: center;
  padding: 10vh 1rem;
  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
}
.hero p{ margin: .25rem 0 0; }

/* ---------- About / Goal ---------- */

#about{
  background: #f8fafc;
  text-align: center;
  padding: 4rem 1rem;
}
#about h2{ color: var(--brand); font-size: 1.8rem; margin-bottom: 1rem; }
#about p{ max-width: 700px; margin: 0 auto; font-size: 1.05rem; line-height: 1.6; }

/* ---------- Contact ---------- */

#contact p{ font-size: 1.2rem; font-weight: 500; }
#contact .btn{ margin-top: 2rem; }
#contact a{ display: inline-block; padding: 8px 4px; text-underline-offset: 3px; }

/* ---------- Accordion (details/summary) ---------- */
/* Markup:
<section class="accordion">
  <details class="accordion-item">
    <summary class="accordion-trigger">Learn More</summary>
    <div class="accordion-panel">
      <div class="accordion-inner"> ...content... </div>
    </div>
  </details>
</section>
*/

/* ===== Accordion (scoped, conflict-safe) ===== */

/* Accordion rules */
/* Wrapper centers the card and limits width nicely */
.accordion{
  max-width: 1100px;        /* remove or adjust to taste */
  margin: 24px auto 0;      /* centers it */
  padding: 0 16px;          /* breathing room on phones */
}

/* Card container */
.accordion-item{
  background: #eff4ff;      /* soft blue */
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  overflow: hidden;         /* clip inner corners */
  border: 1px solid rgba(0,0,0,.05);
}

/* Hide the native marker to avoid double arrows */
.accordion-trigger::-webkit-details-marker{ display:none; }
.accordion-trigger::marker{ content:""; }

/* Full-width trigger bar (no weird left alignment) */
.accordion-trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: #1e2f8d;      /* deep indigo */
  color: #fff;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Add on */

/* ===== Cooler dropdown animations (keeps your button intact) ===== */

/* Card lifts slightly when open */
.accordion-item{
  transition: box-shadow .35s ease, transform .35s ease;
  will-change: box-shadow, transform;
}
.accordion-item[open]{
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  transform: translateY(-1px);
}

/* Keep using grid-rows for height, but smooth it more */
/* Slower, smoother dropdown open/close */
.accordion-panel {
  transition: grid-template-rows 0.9s cubic-bezier(.18,.78,.22,1);
}

.accordion-inner > * {
  transition:
    opacity 0.8s ease,
    transform 5s cubic-bezier(.18,.78,.22,1),
    filter 0.8s ease;
}

/* Optional: keep stagger spacing the same or stretch it a bit */
.accordion-inner > *:nth-child(1){ transition-delay: .05s; }
.accordion-inner > *:nth-child(2){ transition-delay: .10s; }
.accordion-inner > *:nth-child(3){ transition-delay: .15s; }
.accordion-inner > *:nth-child(4){ transition-delay: .20s; }
.accordion-inner > *:nth-child(5){ transition-delay: .18s; }
.accordion-inner > *:nth-child(6){ transition-delay: .22s; }

/* Caret: tiny springy snap, no button restyle */
.accordion-trigger::after{
  transition: transform .26s cubic-bezier(.2,1.1,.2,1), opacity .2s ease;
}
.accordion-item[open] .accordion-trigger::after{
  transform: rotate(180deg) scale(1.06);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .accordion-item,
  .accordion-panel,
  .accordion-inner > *,
  .accordion-trigger::after{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}


/* End */


/* Single custom caret */
.accordion-trigger::after{
  content: "▾";
  display: inline-block;
  transform-origin: 50% 45%;
  transition: transform .25s ease;
}
.accordion-item[open] .accordion-trigger::after{
  transform: rotate(180deg);
}

/* Smooth open/close using grid rows (no hard max-height hacks) */
.accordion-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
  background: #eff4ff;
}
.accordion-item[open] .accordion-panel{
  grid-template-rows: 1fr;
}

/* The collapsible content */
.accordion-inner{
  overflow: hidden;           /* actually collapses */
  padding: 18px 20px 22px;
}

/* Typography inside the panel */
.accordion-inner h3{
  margin: 10px 0 6px;
  color: #1e3a8a;
  font-size: 1.1rem;
  text-align: center;
}
.accordion-inner ul{
  margin: 8px auto 14px;
  padding-left: 1.2rem;
  max-width: 42rem;           /* keeps lines readable */
  list-style: disc;
  text-align: left;
}
.accordion-inner li{ margin: 6px 0; }

/* Mobile niceties */
@media (hover:hover){
  .accordion-trigger:hover{ filter: brightness(1.05); }
}
@media (max-width: 640px){
  .accordion-inner{ padding: 16px 14px 18px; }
}


/* ---------- Pricing ---------- */

.price-section{ text-align: center; margin-top: 60px; padding: 40px 16px; }
.price-section h2{ font-size: 1.8rem; margin-bottom: 20px; color: #1a1a1a; }

.table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  table-layout: fixed;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.price-table th,
.price-table td{
  padding: 14px;
  border: 1px solid #e9e9e9;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.price-table th{ background: var(--navy); color: #fff; }

/* Stack rows into cards on small screens */
@media (max-width: 640px){
  .price-table thead{ display: none; }
  .price-table, .price-table tbody, .price-table tr, .price-table td{
    display: block; width: 100%;
  }
  .price-table tr{
    background: #fff;
    margin: 0 0 12px 0;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    overflow: hidden;
  }
  .price-table td{
    position: relative;
    padding: 12px 12px 12px 112px; /* space for label */
    border: 0;
    border-bottom: 1px solid #f2f2f2;
    min-height: 48px;
  }
  .price-table td:last-child{ border-bottom: 0; }
  .price-table td::before{
    content: attr(data-label);
    position: absolute; left: 12px; top: 12px;
    width: 96px;
    font-weight: 600; color: #222;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* Gentle bold for mobile labels */
.price-table td::before {
  font-weight: 600;     /* subtle bold, not heavy */
  color: #1a1a1a;       /* neutral dark gray for readability */
  font-size: 0.95rem;   /* slightly smaller so text fits cleanly */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}




/* ---------- Cards / Tutors ---------- */

.tutor-card{ width: 100%; max-width: 360px; margin: 0 auto; transition: transform .2s ease, box-shadow .2s ease; }
.tutor-card img{ border-radius: 16px; display: block; width: 100%; height: auto; }
@media (hover:hover){
  .tutor-card:hover{ transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
}

/* ---------- Small tweaks ---------- */

@media (max-width: 768px){
  h1{ font-size: clamp(1.8rem, 5.5vw, 2.2rem); }
  h2{ font-size: clamp(1.2rem, 4.8vw, 1.6rem); }
}

.tutor-section {
  margin-bottom: 60px;
}
.section-divider {
  width: 80%;
  max-width: 800px;
  height: 2px;
  background: linear-gradient(to right, transparent, #cdd3f9, transparent);
  margin: 40px auto 70px;
  border-radius: 2px;
}

/* OneTap utilities: isolated, zero side-effects */
.ot-spacer-32 { height: 32px; }
.ot-spacer-48 { height: 48px; }
.ot-spacer-64 { height: 64px; }
.ot-spacer-80 { height: 80px; }

/* === Contact alignment: center on desktop, left on mobile === */
.contact-section {
  padding-top: 16px;
}

.contact-section .container {
  max-width: 1100px;
  margin: 0 auto;          /* center the block under the table */
  padding: 40px 16px;
  text-align: center;      /* center heading + links */
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* center the row with the dot */
  gap: 12px 16px;
  margin: 0 0 20px;
}

.contact-row .dot { color: #334155; }
.contact-row a {
  font-weight: 600;
  font-size: clamp(1rem, 0.9vw + 0.8rem, 1.25rem);
  text-decoration: none;
}

/* Mobile: revert to left alignment for readability */
@media (max-width: 640px) {
  .contact-section .container { text-align: left; }
  .contact-row {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
  }
  .contact-row .dot { display: none; }
}


/* === Tutor Cards Layout Fix === */
.tutor-carousel {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  margin: 40px auto;
  max-width: 1100px;
}

.tutor-card {
  flex: 1 1 300px; /* responsive width */
  max-width: 320px;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tutor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.tutor-card img {
  width: 100%;
  height: auto;
  border-bottom: 2px solid #e5e7eb;
  display: block;
}

.tutor-card figcaption {
  padding: 12px 16px;
  color: #1e3a8a;
  font-weight: 500;
}

.tutor-card .name {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  color: #111827;
}

/* mobile stack */
@media (max-width: 768px) {
  .tutor-carousel {
    flex-direction: column;
    align-items: center;
  }
  .tutor-card {
    width: 90%;
    max-width: 360px;
  }
}

/* ===== Contact: force center at all sizes, fix button ===== */
#contact.contact-section { padding-top: 16px; }

#contact .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 16px;
  text-align: center !important;          /* win against earlier rules */
}

#contact .contact-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;      /* keep centered on mobile too */
  gap: 12px 16px;
  margin: 0 0 20px;
}

#contact .contact-row .dot{ color:#334155; }
#contact .contact-row a{
  font-weight: 600;
  font-size: clamp(1rem, 0.9vw + 0.8rem, 1.25rem);
  text-decoration: none;
}

/* Keep the dot from crowding on tiny screens, still centered */
@media (max-width: 480px){
  #contact .contact-row { gap: 8px; }
  #contact .contact-row .dot { display:none; }
}

/* Center the CTA button and stop it from drifting */
#contact .btn{
  display: inline-block;      /* shrink to content */
  margin: 12px auto 0;        /* center horizontally */
}


/* === Meet Your Tutors: center + sleek small cards === */
.tutors-section .tutors-title{
  text-align: center;
  margin: 0 auto 10px;
}

/* center the tray */
.tutor-carousel{
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 0 12px;
}

/* smaller, sleeker card */
.tutor-card{
  position: relative;
  width: clamp(220px, 26vw, 280px); /* smaller size */
  aspect-ratio: 3 / 4;             /* consistent shape */
  border-radius: 18px;
  overflow: hidden;
  background: #000;                 /* avoids flash on slow images */
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

/* keep your existing hover/active animations working */
.tutor-card:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

/* image fills the card perfectly */
.tutor-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* overlay caption on the image — NO WHITE BAR */
.tutor-card figcaption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px 12px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.78) 100%);
  border: 0;             /* kill any borders that made a bar */
}

/* text styling */
.tutor-card .name{
  display: block;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .2px;
  margin-bottom: 2px;
  color: #fff;
}
.tutor-card .role{
  display: block;
  font-weight: 600;
  font-size: .82rem;
  color: #dbe7ff;
  opacity: .95;
}

/* mobile: keep centered, slightly wider but still sleek */
@media (max-width: 768px){
  .tutor-carousel{
    gap: 18px;
  }
  .tutor-card{
    width: min(88vw, 340px);
    aspect-ratio: 3 / 4;
  }
}

/* if you have nav arrows for this section, keep them above cards */
.tutors-section .tutor-nav{
  z-index: 3;
}



/* ====== HERO LAYOUT ====== */
.hero {
  position: relative;
  min-height: 40vh;                 /* compact hero */
  display: grid;
  place-items: center;
  text-align: center;
  background: #dbeafe;              /* light blue */
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 1;                       /* above equations */
  padding: 2rem;
}

.hero-content h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin: 0 0 0.5rem;
  color: #0f172a;                   /* slate-900 */
  font-weight: 800;
}

.hero-content p {
  margin: 0 0 1rem;
  color: #334155;                   /* slate-600/700 */
  font-size: clamp(1rem, 2.4vw, 1.25rem);
}

.cta {
  display: inline-block;
  padding: 0.8rem 1.2rem;
  border-radius: 0.75rem;
  background: #3b82f6;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59,130,246,0.25);
}

/* ====== EQUATIONS LAYER ====== */
/* Place this div inside .hero (sibling of .hero-content) */
.eq-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* 3x3 grid, center cell intentionally unused so CTA stays clear */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto 1fr;
}

/* Shared equation styling */
.eq {
  color: rgba(0, 0, 0, 0.36);        /* darker but still subtle on blue */
  font-weight: 600;
  font-size: clamp(1.1rem, 1.8vw, var(--size, 2.4rem));
  line-height: 1;
  user-select: none;
  opacity: 0;
  transform: translateY(8px) scale(1);
  white-space: nowrap;

  /* fade in, hold, fade out; duration set via --dur (JS will randomize) */
  animation: fadeCycle var(--dur, 9.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Corner/edge placement classes (center stays empty) */
.tl  { grid-column: 1; grid-row: 1; justify-self: start; align-self: start;   margin: 1.2rem; }
.tr  { grid-column: 3; grid-row: 1; justify-self: end;   align-self: start;   margin: 1.2rem; }
.bl  { grid-column: 1; grid-row: 3; justify-self: start; align-self: end;     margin: 1.2rem; }
.br  { grid-column: 3; grid-row: 3; justify-self: end;   align-self: end;     margin: 1.2rem; }
.l   { grid-column: 1; grid-row: 2; justify-self: start; align-self: center;  margin-left: 1.2rem; }
.r   { grid-column: 3; grid-row: 2; justify-self: end;   align-self: center;  margin-right: 1.2rem; }
.t   { grid-column: 2; grid-row: 1; justify-self: center;align-self: start;   margin-top: 0.8rem; }
.b   { grid-column: 2; grid-row: 3; justify-self: center;align-self: end;     margin-bottom: 0.8rem; }
/* Optional extra slot near TL for variety */
.tl2 { grid-column: 1; grid-row: 1; justify-self: center;align-self: center;  margin: 0.6rem; }

/* Fade/hold/fade with gentle drift */
@keyframes fadeCycle {
  0%   { opacity: 0;   transform: translateY(10px) scale(1.01); }
  12%  { opacity: 0.9; transform: translateY(0px)  scale(1.02); }
  40%  { opacity: 0.9; transform: translateY(-2px) scale(1.02); }
  60%  { opacity: 0.0; transform: translateY(-6px) scale(1.03); }
  100% { opacity: 0.0; transform: translateY(8px)  scale(1.00); }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .hero { min-height: 35vh; }
  .eq   { color: rgba(0,0,0,0.34); }
  /* Hide a couple on small screens to keep it airy */
  .eq.tl2, .eq.b { display: none; }
}

/* ====== ACCESSIBILITY ====== */
@media (prefers-reduced-motion: reduce) {
  .eq { animation: none; opacity: 0.18; transform: none; }
}

.btn.ghost {
  background: transparent;
  color: #4169e1;
  border: 2px solid #4169e1;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn.ghost:hover {
  background: #4169e1;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(65,105,225,0.3);
}


/* Price Comparison Section */
.price-section {
  text-align: center;
  margin: 80px 0;
}

.price-section .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.table-scroll {
  width: 100%;
  overflow-x: auto; /* allows horizontal scroll on mobile */
  display: flex;
  justify-content: center;
}

.price-table {
  width: 100%;
  max-width: 800px;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  text-align: center;
}

/* Remove weird white bar at bottom */
.price-table tr:last-child td {
  border-bottom: none;
}

/* Table Header */
.price-table th {
  background-color: #1f2a7a;
  color: #fff;
  font-weight: 600;
  padding: 14px 10px;
}

/* Table Body */
.price-table td {
  padding: 14px 10px;
  border-bottom: 1px solid #e0e0e0;
  color: #333;
}

.price-table td[data-label]



/* ===== Mobile-safe table: keep table, allow horizontal scroll ===== */
@media (max-width: 700px) {
  /* Scroll container */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep it a real table; undo any block/card hacks */
  .price-table { 
    min-width: 640px;           /* widen as needed (640–760px is typical) */
    width: auto; 
    table-layout: fixed;        /* prevents weird wrap jitter */
    border-collapse: collapse;
  }

  .price-table thead { 
    display: table-header-group !important; 
  }
  .price-table tbody { 
    display: table-row-group !important; 
  }
  .price-table tr { 
    display: table-row !important; 
  }
  .price-table th,
  .price-table td { 
    display: table-cell !important; 
    white-space: nowrap;        /* keep cells compact; user can scroll */
    padding: 12px 10px;
    text-decoration: none;      /* nuke any stray strikethroughs */
  }

  /* Kill any label-in-before trick from previous CSS */
  .price-table td::before { 
    content: none !important; 
  }
}


/* ===== FINAL MOBILE FIX: stack label above value, no overlap ===== */
@media (max-width: 700px) {
  /* Keep the card layout per row */
  .price-table thead { display: none !important; }

  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table td {
    display: block !important;
    width: 100% !important;
  }

  .price-table tbody tr {
    margin: 0 0 16px !important;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  /* Cell content: label on top, value below */
  .price-table td {
    position: static !important;        /* kill absolute positioning */
    padding: 12px 16px !important;
    border-bottom: 1px solid #e5e7eb;
    white-space: normal !important;     /* allow wrapping */
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: anywhere;            /* wrap long strings if needed */
    text-decoration: none !important;   /* kill any stray line-through */
    line-height: 1.35;
  }
  .price-table td:last-child { border-bottom: none; }

  /* Label above the value */
  .price-table td::before {
    content: attr(data-label) !important;
    display: block !important;
    position: static !important;
    margin-bottom: 6px;
    font-weight: 700;
    color: #1f2a7a;
    white-space: normal !important;
    text-decoration: none !important;
  }

  /* Table wrapper scroll safety if someone shrinks insanely small */
  .table-scroll { overflow-x: hidden; -webkit-overflow-scrolling: touch; }
}