:root{
  --teal:#3f746d;
  --gold:#c79a3d;
  --dark:#0f1e1d;
  --light:#f6f9f8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;}
body{color:#0f172a;background:linear-gradient(180deg,#fff, #fff 60%, var(--light));}
.container{max-width:1120px;margin:0 auto;padding:0 16px;}
.header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #e5e7eb;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nav a{color:#374151;text-decoration:none;margin-left:20px;font-size:14px}
.nav a:hover{color:var(--teal)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.brand img{width:36px;height:36px;border-radius:8px}
.button{display:inline-block;padding:10px 14px;border-radius:12px;font-weight:600;text-decoration:none}
.button.teal{background:var(--teal);color:#fff}
.button.gold{background:var(--gold);color:var(--dark)}
.hero{padding:64px 0;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg, rgba(199,154,61,.08), rgba(63,116,109,.08))}
.badge{display:inline-flex;gap:8px;align-items:center;background:rgba(63,116,109,.1);color:var(--teal);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
.h1{font-size:42px;line-height:1.1;margin:14px 0 6px;font-weight:800}
.lead{color:#374151;max-width:65ch}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns: repeat(1, minmax(0,1fr))}
@media (min-width:640px){.grid-3{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (min-width:1024px){.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}}
.card{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden}
.card .content{padding:18px}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:#475569;font-size:14px}
.store-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.store-buttons a{padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(63,116,109,.9);color:#fff;text-decoration:none;font-size:13px}
.store-buttons a:nth-child(2){background:rgba(199,154,61,.95);color:var(--dark)}
.controls{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.btn{padding:8px 12px;border-radius:10px;border:1px solid #d1d5db;background:#fff;font-weight:600;font-size:13px;color:#374151;cursor:pointer}
.btn.primary{background:var(--teal);color:#fff;border-color:transparent}
.btn.warn{background:var(--gold);color:var(--dark);border-color:transparent}
.note{font-size:12px;color:#6b7280}
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg,#fff,var(--light)) ;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.partners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.partners{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.partners{grid-template-columns:repeat(6,minmax(0,1fr))}}
.partner{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px;text-align:center;font-weight:600;color:#374151}
.aside{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:16px}
.footer{border-top:1px solid #e5e7eb;padding:30px 0;color:#64748b;font-size:14px;background:#fff}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:16px;z-index:100}
.modal.open{display:flex}
.modal-card{width:100%;max-width:1024px;height:80vh;background:#0f172a;border:1px solid #334155;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.modal-head{display:flex;justify-content:space-between;align-items:center;background:#1f2937;color:#e5e7eb;padding:10px 12px}
.modal-body{flex:1;background:#fff}
.store-buttons a.iconed{display:inline-flex;align-items:center;gap:8px}
.hero-stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.hero-stores a{display:inline-flex;align-items:center;gap:8px;border:1px solid #d1d5db;padding:10px 14px;border-radius:12px;background:#fff;color:#111827;text-decoration:none;font-weight:700}
.hero-stores img{width:18px;height:18px}
.featured{display:grid;gap:20px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:640px){.featured{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.featured{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feature-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden}
.feature-card img{display:block;width:100%;height:180px;object-fit:cover;background:#f1f5f9}
.footer .cols{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:768px){.footer .cols{grid-template-columns: 2fr 1fr 2fr}}
.footer h4{margin:0 0 8px 0;color:#0f172a;font-size:14px}
.footer a{color:#0ea5a0;text-decoration:none}
.footer a:hover{text-decoration:underline}

.card.image-first img.thumb{display:block;width:100%;height:180px;object-fit:cover;background:#f1f5f9}

/* v4 additions: size store icons & standardize buttons */
.store-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 120px; 
  white-space: nowrap; 
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  box-sizing: border-box;
}

@media (max-width: 420px){
  .store-buttons a{ width: 140px; }
}

.store-buttons a.iconed img {
  width: 18px;
  height: 18px;
  object-fit:contain;
  background: transparent;
  display: inline-block;
}

.btn {
  padding: 8px 12px;
  line-height: 1;
  height: 34px;
  display: inline-flex;
  align-items: center;
}

/* If not present yet, keep the image-first card + partner tile styles */
.card.image-first img.thumb {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #f1f5f9;
}

.partner.tile {
  position: relative;
  overflow: hidden;
  padding: 0;
  flex:0 0 auto;
  width:160px;
  height:120px;
  border-radius:14px;
}

.partner.tile img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  filter: saturate(0.85);
}

.partner.tile span {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  color: #ffffff;
  font-weight: 700;
  padding: 8px 10px;
  font-size: 12px;
}

.feature-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(15,23,42,.12);
}

/* thumbnail frame with subtle gradient + hover zoom */
.feature-card .thumb{
  position:relative;
  height: 360px; 
  aspect-ratio:auto;
  overflow:hidden;
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(199,154,61,.15), transparent 60%),
    radial-gradient(1200px 400px at 120% 110%, rgba(63,116,109,.12), transparent 60%),
    #f1f5f9;
  border-bottom:1px solid #e5e7eb;
}
.feature-card .thumb img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform .35s ease;
}
.feature-card:hover .thumb img{ transform:scale(1.06); }

.feature-card .content{ padding:18px }

/* partners: single-row, scrollable slider */
.partners.slider{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  border-radius:18px;
  background:#fff;
  padding:10px;                     /* keeps tiles from touching the edge */
}
.partners.slider .track{
  display:flex;
  gap:12px;
  width:max-content;
  align-items:center;
}

.footer .container.cols > div:last-child{
  margin-left: auto;   /* push it to the far right */
  text-align: right;   /* align the text inside */
}