/* The homepage sections that present the whole suite: the app grid in the
   hero, the free email check and the trust strip. Built on the tokens in
   style.css so every theme still works. */

.hero-apps{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;
  padding:18px; border-radius:var(--radius-lg); background:var(--glass-bg);
  border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.hero-apps-head{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 4px 8px; font-size:.82rem; color:var(--text-dim); }
.hero-apps-head strong{ color:var(--text); font-size:.95rem; }
.hero-app{
  display:flex; align-items:center; gap:10px; min-width:0; padding:11px 12px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border); color:var(--text); text-decoration:none;
  transition:transform .15s ease, border-color .15s ease;
}
.hero-app:hover{ transform:translateY(-2px); border-color:var(--app); }
.hero-app img{ flex:none; width:34px; height:34px; border-radius:9px; display:block; box-shadow:0 6px 16px -8px var(--app); }
.hero-app span{ min-width:0; }
.hero-app b{ display:block; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-app small{ display:block; font-size:.74rem; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* The five that come with Premium and Enterprise, as a row of icons. */
.hero-apps-more{ grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 4px 0; font-size:.78rem; color:var(--text-faint); }
.hero-apps-more span{ margin-right:auto; font-weight:650; }
.hero-apps-more a{ display:block; border-radius:8px; transition:transform .15s ease; }
.hero-apps-more a:hover{ transform:translateY(-2px); }
.hero-apps-more img{ display:block; width:28px; height:28px; border-radius:8px; }

.hero-points{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:18px 0 0; padding:0; list-style:none; color:var(--text-dim); font-size:.92rem; }
.hero-points li{ display:flex; align-items:center; gap:7px; }
.hero-points li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }

/* free email check */
.email-check-card{
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;
  padding:36px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}
.email-check-card h2{ margin:8px 0 12px; }
.email-check-card p{ color:var(--text-dim); margin:0 0 14px; }
.email-check-form{ display:flex; gap:10px; margin-top:18px; }
.email-check-form input{
  flex:1; min-width:0; padding:14px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font:inherit; font-size:1.02rem;
}
.email-check-form input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.email-check-note{ font-size:.84rem; color:var(--text-faint); margin-top:10px; }
.email-check-grades{ display:grid; gap:10px; }
.email-check-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:var(--bg); border:1px solid var(--border); }
.email-check-row b{ flex:1; }
.email-check-row em{ font-style:normal; font-size:.8rem; font-weight:700; padding:3px 9px; border-radius:99px; }
.email-check-row .ok{ background:rgba(34,197,94,.15); color:#22c55e; }
.email-check-row .bad{ background:rgba(239,95,107,.15); color:var(--danger); }
.email-check-grade{ display:flex; align-items:center; gap:14px; }
.email-check-grade span{ width:62px; height:62px; border-radius:16px; background:#ea580c; color:#fff; display:grid; place-items:center; font-weight:800; font-size:2rem; }

/* line icons replacing the old emoji */
.feature-icon{ color:var(--accent); }
.feature-icon svg{ display:block; }
.who-card .who-icon{ display:inline-flex; color:var(--accent); font-size:inherit; }
.who-card .who-icon svg{ display:block; }

/* the promises that apply to every service */
.promise-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.promise{ padding:20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); }
.promise h3{ margin:0 0 6px; font-size:1rem; }
.promise p{ margin:0; color:var(--text-dim); font-size:.9rem; line-height:1.55; }

@media (max-width: 900px){
  .email-check-card{ grid-template-columns:1fr; padding:24px; }
  .promise-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .hero-apps{ padding:12px; gap:8px; }
  .hero-app{ padding:9px; gap:8px; }
  .hero-app img{ width:28px; height:28px; border-radius:8px; }
  .email-check-form{ flex-direction:column; }
  .promise-grid{ grid-template-columns:1fr; }
}

/* certificates */
.certs{ padding:80px 0; position:relative; }
.certs-layout{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:40px; align-items:start; }
.certs-list{ display:grid; gap:14px; }
.cert-item{ display:flex; gap:16px; padding:18px 20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); }
.cert-item img{ flex:none; width:44px; height:44px; }
.cert-item h3{ margin:0 0 4px; font-size:1.02rem; }
.cert-item p{ margin:0; color:var(--text-dim); font-size:.9rem; line-height:1.55; }
.certs-badges{ display:flex; flex-wrap:wrap; gap:12px; padding:16px; border-radius:var(--radius); background:#eef1f5; }
.certs-badges img{ max-width:100%; height:auto; }
.certs-shots{ position:sticky; top:96px; }
.certs-shot{ display:block; width:100%; height:auto; border-radius:18px; border:1px solid var(--border); box-shadow:0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03); }
.certs-shot-note{ margin-top:14px; padding:14px 16px; border-radius:14px; border:1px solid color-mix(in srgb, #22c55e 35%, var(--border)); background:color-mix(in srgb, #22c55e 8%, var(--surface)); color:var(--text-dim); font-size:.9rem; line-height:1.55; }
.certs-shot-note strong{ display:block; color:var(--text); margin-bottom:2px; }
.certs-trust{ margin-top:48px; display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:40px; align-items:center; padding:28px; border-radius:22px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); border:1px solid var(--border); }
.certs-trust img{ display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--border); }
.certs-trust h3{ font-size:1.6rem; margin:10px 0; letter-spacing:-.02em; }
.certs-trust p{ color:var(--text-dim); line-height:1.6; }
.certs-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
@media (max-width:900px){
  .certs-layout, .certs-trust{ grid-template-columns:1fr; }
  .certs-shots{ position:static; }
  .certs-trust{ padding:18px; }
}