/* Homepage + product cards */

/* ----- Tighter homepage type & alignment ----- */
.hero--store{padding:28px 0 12px}
.hero-mobi{display:none}
.hero--store .hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:32px;align-items:center
}
.hero--store .hero-copy{max-width:540px}
.hero--store .eyebrow{
  margin-bottom:10px;font-size:.78rem;padding:5px 10px
}
.hero--store .hero-copy h1{
  font-size:clamp(1.35rem,2vw,1.75rem);
  line-height:1.28;letter-spacing:-.02em;margin:0 0 8px;font-weight:800
}
.hero--store .hero-copy h1 span{color:var(--teal)}
.hero--store .hero-sub{
  margin:0 0 10px;font-size:1.02rem;font-weight:650;color:#334155;line-height:1.4;
  font-family:var(--font-display)
}
.hero--store .lead{
  font-size:.95rem;line-height:1.6;color:#475569;max-width:48ch;margin:0 0 14px
}
.hero--store .hero-list{margin:0 0 18px}
.hero--store .hero-list li{margin:6px 0;font-size:.92rem;font-weight:600;line-height:1.4}
.hero--store .hero-cta{gap:10px}
.hero--store .btn-lg{padding:12px 18px;font-size:.92rem}
.hero--store .hero-proof{
  margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px
}
.hero--store .hero-proof__link{font-size:.88rem;font-weight:700;color:var(--teal-dark)}
.hero--store .hero-visual{min-height:400px}
.hero--store .hero-banner{min-height:400px;padding:22px;border-radius:22px}
.hero--store .hero-banner__stack{height:300px}
.hero--store .hero-shot{padding:12px;border-radius:14px;width:44%}
.hero--store .hero-shot img{height:130px}
.hero--store .hero-banner__card{left:18px;right:18px;bottom:14px;padding:12px 14px;border-radius:12px}
.hero--store .hero-banner__card a{font-size:1.05rem}

.section{padding:36px 0}
.section-head{align-items:flex-end;margin-bottom:18px}
.section-head h2{
  font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-.02em;line-height:1.25
}
.section-head p{margin:4px 0 0;font-size:.9rem;color:var(--muted);max-width:52ch;line-height:1.45}
.split-cta h2{font-size:clamp(1.25rem,2.2vw,1.55rem);margin:8px 0 8px}
.secure-band h2{font-size:clamp(1.2rem,2vw,1.45rem)}

/* ----- Product cards ----- */
.pcard{
  background:#fff;border:1px solid #E6EEF2;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  height:100%
}
.pcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(15,23,42,.08);border-color:#C7E8E1}
.pcard__media{
  position:relative;aspect-ratio:1.15/1;display:grid;place-items:center;padding:18px 16px 6px;
  background:linear-gradient(180deg,#FFFFFF 0%, #F4FBFA 100%)
}
.pcard__media img{max-width:76%;max-height:150px;width:auto;object-fit:contain;transition:transform .28s ease}
.pcard:hover .pcard__media img{transform:scale(1.04)}
.pcard__badge{
  position:absolute;top:10px;left:10px;z-index:2;background:#0F766E;color:#fff;
  font-size:.65rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px
}
.pcard__badge--hot{background:#C2410C}
.pcard__body{padding:6px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard__meta{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:#64748B}
.pcard__platform{background:#F0FDFA;border:1px solid #CCFBF1;color:#0F766E;padding:2px 7px;border-radius:999px;font-weight:700}
.pcard__rating{color:#B45309;font-weight:700}
.pcard__title{margin:0;font-family:var(--font-display);font-size:.9rem;line-height:1.35;min-height:2.55em}
.pcard__title a{color:var(--ink)}
.pcard__title a:hover{color:var(--teal-dark)}
.pcard__price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.pcard__price strong{font-family:var(--font-display);font-size:1.12rem;font-weight:800}
.pcard__price s{color:#94A3B8;font-size:.84rem}
.pcard__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px;align-items:stretch}
.pcard__actions form{min-width:0;display:flex}
.pcard__cart{
  width:100%;border:0;border-radius:10px;background:var(--teal);color:#fff;font-weight:800;
  font-family:var(--font-display);padding:10px 8px;cursor:pointer;font-size:.84rem;line-height:1.2
}
.pcard__cart:hover{background:var(--teal-dark)}
.pcard__call{
  display:inline-flex;align-items:center;justify-content:center;min-width:0;width:100%;
  padding:10px 8px;border-radius:10px;text-align:center;line-height:1.2;
  border:1px solid #99F6E4;background:#F0FDFA;color:var(--teal-dark);
  font-family:var(--font-display);font-weight:800;font-size:.84rem
}
.pcard__call:hover{background:#CCFBF1;color:var(--teal-dark)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.product-grid,.product-grid--4{grid-template-columns:1fr 1fr}}
/* Keep 2 columns on phones — see mobile.css */

/* ----- Reveal ----- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .65s ease, transform .65s ease}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal].delay-1{transition-delay:.08s}
[data-reveal].delay-2{transition-delay:.16s}
[data-reveal].delay-3{transition-delay:.24s}

/* ----- Stats ----- */
.stats-band{padding:4px 0 0}
.stats-band__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.stat-card{
  background:#fff;border:1px solid #E6EEF2;border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:center
}
.stat-card__icon{
  width:44px;height:44px;border-radius:12px;background:#ECFDF5;color:#0F766E;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto
}
.stat-card__icon svg{display:block;width:22px;height:22px}
.stat-card strong{display:block;font-family:var(--font-display);font-size:1.3rem;line-height:1}
.stat-card span{color:#64748B;font-size:.84rem}
.trust-mini{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:#fff;border:1px solid #E6EEF2;border-radius:14px;padding:12px 16px}
.trust-mini__items{display:flex;flex-wrap:wrap;gap:10px 18px}
.trust-mini__items span{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#334155;font-size:.86rem}
.trust-mini__items i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#D1FAE5;color:#047857;font-size:.7rem}

/* ----- Mac picks ----- */
.picks{
  margin:20px 0 4px;padding:22px 0 4px;overflow:hidden;
  background:
    radial-gradient(700px 220px at 10% 0%, rgba(15,118,110,.08), transparent 60%),
    linear-gradient(180deg, rgba(240,253,250,.7), transparent)
}
.picks__head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:14px;flex-wrap:wrap}
.picks__eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E2E8F0;
  border-radius:999px;padding:5px 10px;font-weight:700;font-size:.78rem;color:#334155;margin-bottom:8px
}
.picks h2{font-family:var(--font-display);margin:0;font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-.02em}
.picks p{margin:6px 0 0;color:#64748B;max-width:52ch;font-size:.9rem;line-height:1.45}
.picks-track-wrap{position:relative}
.picks-track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;
  scrollbar-width:none;-ms-overflow-style:none
}
.picks-track::-webkit-scrollbar{display:none}
.picks-track .pcard{flex:0 0 250px;scroll-snap-align:start}
.picks-track.is-autoplay{scroll-behavior:auto}
.picks-nav{display:flex;gap:8px}
.picks-nav button{
  width:38px;height:38px;border-radius:50%;border:1px solid #99F6E4;background:#fff;
  color:var(--teal-dark);font-size:1.05rem;cursor:pointer;font-weight:800
}
.picks-nav button:hover{background:#F0FDFA}

.hero-shot{animation:floaty 5.5s ease-in-out infinite}
.hero-shot--1{animation-delay:.4s}
.hero-shot--2{animation-delay:.9s}
.hero-shot--3{animation-delay:1.3s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-shot--0{animation-name:floaty-rot0}
.hero-shot--1{animation-name:floaty-rot1}
.hero-shot--2{animation-name:floaty-rot2}
.hero-shot--3{animation-name:floaty-rot3}
@keyframes floaty-rot0{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}
@keyframes floaty-rot1{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-10px)}}
@keyframes floaty-rot2{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-7px)}}
@keyframes floaty-rot3{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-9px)}}

/* ----- SEO with images ----- */
.seo-block{padding:28px 0 40px}
.seo-intro{max-width:720px;margin:0 auto 28px;text-align:center}
.seo-intro__eyebrow{
  display:inline-block;margin:0 0 8px;font-size:.78rem;font-weight:700;color:var(--teal-dark);
  text-transform:uppercase;letter-spacing:.04em
}
.seo-intro h2{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.3vw,1.65rem);
  margin:0 0 10px;letter-spacing:-.02em;line-height:1.3;color:var(--ink)
}
.seo-intro p{margin:0;color:#475569;font-size:.95rem;line-height:1.65}

.seo-features{display:grid;gap:18px}
.seo-feature{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;
  background:#fff;border:1px solid #E6EEF2;border-radius:20px;overflow:hidden;
  box-shadow:0 10px 28px rgba(15,23,42,.04);align-items:stretch
}
.seo-feature--flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.seo-feature--flip .seo-feature__media{order:2}
.seo-feature--flip .seo-feature__copy{order:1}
.seo-feature__media{
  background:
    radial-gradient(circle at 30% 20%, rgba(15,118,110,.12), transparent 55%),
    linear-gradient(160deg,#F0FDFA,#ECFEFF 55%,#FFF7ED);
  display:grid;place-items:center;padding:28px 22px;min-height:240px
}
.seo-feature__media img{
  max-width:min(78%,280px);max-height:220px;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(15,23,42,.12))
}
.seo-feature__copy{padding:28px 30px;display:flex;flex-direction:column;justify-content:center}
.seo-feature__eyebrow{
  margin:0 0 6px;font-size:.75rem;font-weight:800;color:var(--teal-dark);
  text-transform:uppercase;letter-spacing:.05em
}
.seo-feature__copy h3{
  font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.35rem);
  margin:0 0 10px;letter-spacing:-.02em;line-height:1.3
}
.seo-feature__copy p{margin:0 0 14px;color:#475569;font-size:.94rem;line-height:1.65;max-width:48ch}
.seo-feature__link{font-weight:800;color:var(--teal-dark);font-size:.92rem}
.seo-feature__link:hover{color:#0F766E}

.seo-note{
  margin-top:18px;padding:14px 18px;border-radius:14px;background:#F8FAFC;border:1px solid #E2E8F0
}
.seo-note p{margin:0;font-size:.86rem;line-height:1.55;color:#64748B}
.seo-note a{color:var(--teal-dark);font-weight:700}

.trend-section .product-grid{margin-top:2px}

/* Homepage help / callback (mirrors contact page) */
.home-help{scroll-margin-top:88px}
.home-help__intro{margin-bottom:16px;max-width:54ch}
.home-help__intro h2{
  font-family:var(--font-display);margin:8px 0 8px;
  font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-.02em;line-height:1.25
}
.home-help__intro .muted{margin:0;font-size:.95rem;line-height:1.5}
.home-help__grid{align-items:start}
.home-help .form-card label,
.home-help .summary-card label{display:block;font-weight:700;font-size:.82rem;margin:0 0 6px;color:#334155}
.home-help .form-card input,
.home-help .form-card select,
.home-help .form-card textarea{
  width:100%;box-sizing:border-box;border:1px solid #D8E4E8;border-radius:12px;
  padding:11px 12px;font:inherit;background:#fff
}
.home-help .form-card textarea{min-height:96px;resize:vertical}
.home-help .form-grid > div{display:flex;flex-direction:column}

/* ----- Mobile-only hero ----- */
@media (max-width:768px){
  .hero--store{padding:0 0 10px}
  .hero-desk{display:none !important}
  .hero-mobi{display:block}

  .hero-mobi__stage{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(120% 80% at 90% -10%, rgba(94,234,212,.28), transparent 55%),
      linear-gradient(155deg, #0F766E 0%, #134E4A 48%, #0B3B38 100%);
    color:#ECFDF5;
    padding:16px 0 6px;
  }
  .hero-mobi__inner{padding-bottom:2px}
  .hero-mobi__eyebrow{
    display:inline-flex;align-items:center;margin:0 0 10px;
    font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:#99F6E4;opacity:.95
  }
  .hero-mobi h1{
    margin:0 0 8px;
    font-family:var(--font-display);
    font-size:clamp(1.35rem, 6.2vw, 1.7rem);
    line-height:1.22;letter-spacing:-.02em;font-weight:800;color:#fff
  }
  .hero-mobi h1 span{color:#5EEAD4}
  .hero-mobi__sub{
    margin:0 0 12px;max-width:32ch;
    font-size:.88rem;line-height:1.4;color:rgba(236,253,245,.88)
  }
  .hero-mobi__cta{
    display:grid;grid-template-columns:1.1fr .9fr;gap:8px;margin-bottom:12px
  }
  .hero-mobi__cta .btn{
    min-height:46px;justify-content:center;text-align:center;
    font-size:.88rem;border-radius:12px;padding:11px 10px
  }
  .hero-mobi__cta .btn-primary{
    background:#fff;color:#0F766E;border-color:#fff
  }
  .hero-mobi__cta .btn-primary:hover{background:#F0FDFA;color:#134E4A}
  .hero-mobi__cta .btn-amber{
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff
  }
  .hero-mobi__cta .btn-amber:hover{background:rgba(255,255,255,.2);color:#fff}
  .hero-mobi__trust{
    display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 4px;
    font-size:.74rem;font-weight:700;color:rgba(204,251,241,.92)
  }
  .hero-mobi__trust span:not(:last-child)::after{
    content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
    background:rgba(153,246,228,.7);margin-left:10px;vertical-align:middle
  }

  .hero-mobi__rail{
    display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:12px 16px 20px;
    scroll-snap-type:x mandatory;scrollbar-width:none
  }
  .hero-mobi__rail::-webkit-scrollbar{display:none}
  .hero-mobi__item{
    flex:0 0 104px;scroll-snap-align:start;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:0 0 2px;background:transparent;border:0;
    color:#ECFDF5;text-decoration:none;
    transition:transform .2s ease
  }
  .hero-mobi__item:active{transform:scale(.97)}
  .hero-mobi__item img{
    width:88px;height:88px;object-fit:contain;display:block;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))
  }
  .hero-mobi__price{
    font-family:var(--font-display);font-weight:800;font-size:.86rem;color:#5EEAD4
  }
}

@media (max-width:380px){
  .hero-mobi__cta{grid-template-columns:1fr}
  .hero-mobi__item{flex-basis:100px}
  .hero-mobi__item img{width:70px;height:70px}
}

@media (max-width:980px){
  .hero--store .hero-grid{grid-template-columns:1fr;gap:22px}
  .hero--store .hero-copy{max-width:none}
  .hero--store .hero-visual,.hero--store .hero-banner{min-height:340px}
  .seo-feature,.seo-feature--flip{grid-template-columns:1fr}
  .seo-feature--flip .seo-feature__media,.seo-feature--flip .seo-feature__copy{order:initial}
  .seo-feature__copy{padding:20px 18px 22px}
  .seo-feature__media{min-height:200px;padding:22px}
}
@media (max-width:800px){
  .stats-band__grid{grid-template-columns:1fr}
  .picks-track .pcard{flex-basis:calc(50% - 5px)}
}
@media (max-width:640px){
  .section{padding:22px 0}
  .seo-intro{text-align:left;margin-bottom:16px}
}