.page-template-page-app .hero{
  background:#fff;
  padding:0px 0 8px;
}

.page-template-page-app .hero-head{
  display:grid;
  gap:14px;
  justify-items:center;
  text-align:center;
}
.page-template-page-app .hero-title{
  color:#000;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

.page-template-page-app .hero-grid{
  display:grid;
  gap:24px;
  align-items:start;
  grid-template-areas:"cards" "logo" "cta";
}
@media (min-width:1024px){
  .page-template-page-app .hero-grid{
    grid-template-columns:minmax(0,1fr) clamp(180px,22vw,260px);
    grid-template-areas:"cards logo" "cta logo";
    gap:28px 32px;
  }
}

.page-template-page-app .hero-cards{ grid-area:cards; min-width:0; }
.page-template-page-app .hero-logo { grid-area:logo; }
.page-template-page-app .hero-actions{ grid-area:cta; }

.page-template-page-app .hero-logo{
  width:160px;
  height:auto;
  justify-self:center;
  align-self:start;
}
@media (min-width:1024px){
  .page-template-page-app .hero-logo{
    width:clamp(180px,22vw,260px);
    justify-self:end;
  }
}

.page-template-page-app .hero-actions{
  margin-top:6px;
  display:flex;
  gap:12px;
  justify-content:center;
  width:max-content;
  justify-self:center;
}
@media (min-width:1024px){
  .page-template-page-app .hero-actions{ margin-top:8px; gap:12rem;}
}
.page-template-page-app .hero-actions .btn-download,
.page-template-page-app .hero-actions .btn-ios{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 18px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  border:0;
  text-decoration:none;
  font-weight:700;
  line-height:1.15;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  font-size:16px;
}
.page-template-page-app .hero-actions .btn-download:hover,
.page-template-page-app .hero-actions .btn-ios:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.page-template-page-app .hero-actions .btn-download:active,
.page-template-page-app .hero-actions .btn-ios:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(0,0,0,.14);
  opacity:.95;
}
@media (max-width:600px){
  .page-template-page-app .hero-actions{
    flex-direction:column;
    align-items:center;
    width:100%;
  }
  .page-template-page-app .hero-actions .btn-download,
  .page-template-page-app .hero-actions .btn-ios{
    width:100%;
    max-width:320px;
  }
}
.page-template-page-app .hero-actions .btn-ico{
  display:inline-grid;
  place-items:center;
  width:1.25em;
  height:1.25em;
  line-height:1;
}
.page-template-page-app .hero-actions .btn-ico svg{
  width:100% !important;
  height:100% !important;
  display:block;
}
.page-template-page-app .hero-actions .btn-ico svg path{
  fill:currentColor;
  stroke:currentColor;
}

.page-template-page-app .toc .toc-title{
  position:absolute;
  top:0;
  left:0;
  transform:translate(10px,-50%);
  display:inline-block;
  padding:2px 8px;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  color:#fff;
  background:var(--brand);
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.page-template-page-app .toc ul{ margin:0; padding-left:16px; }
.page-template-page-app .toc li{ margin:6px 0; }
.page-template-page-app .toc a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px dashed transparent;
  transition:color .15s, border-color .15s, padding-left .15s;
}
.page-template-page-app .toc a:hover{
  color:var(--brand);
  border-color:color-mix(in srgb, var(--brand) 40%, #000 0%);
  padding-left:2px;
}
@media (max-width:480px){
  .page-template-page-app .toc{ padding:16px 12px 10px; }
  .page-template-page-app .toc .toc-title{
    transform:translate(8px,-50%);
    font-size:11px;
    padding:2px 7px;
  }
}

.page-template-page-app .hero-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px,1fr));
  gap:18px;
  margin:0;
}
@media (max-width:1200px){
  .page-template-page-app .hero-cards{
    grid-template-columns:repeat(2, minmax(220px,1fr));
  }
}
@media (max-width:600px){
  .page-template-page-app .hero-cards{
    grid-template-columns:1fr;
    gap:12px;
  }
}

.page-template-page-app .hero-card{
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:16px 18px;
  min-height:82px;
  box-shadow:0 1px 10px rgba(0,0,0,.06);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.page-template-page-app .hero-card:hover,
.page-template-page-app .hero-card:focus-within{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.12);
}

.page-template-page-app .hero-ico{
  width:48px;
  height:48px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 16%, #fff) 0%, #fff 100%);
  border:1px solid color-mix(in srgb, var(--brand) 26%, #000);
}
.page-template-page-app .hero-ico svg{
  width:22px;
  height:22px;
  display:block;
  fill:var(--brand);
}

.page-template-page-app .hero-txt{ min-width:0; text-align:left; }
.page-template-page-app .hero-txt .k{
  display:block;
  font-size:12px;
  line-height:1.15;
  color:var(--muted);
  letter-spacing:.3px;
  text-transform:uppercase;
}
.page-template-page-app .hero-txt .v{
  display:block;
  font-weight:800;
  line-height:1.25;
  font-size:17px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.page-template-page-app .hero-card[role="button"]{ cursor:pointer; }
.page-template-page-app .hero-card:focus-within{
  outline:2px solid color-mix(in srgb, var(--brand) 40%, #000);
  outline-offset:2px;
}

@media (max-width:600px){
  .page-template-page-app .hero-card{
    grid-template-columns:48px 1fr;
    padding:14px 16px;
    border-radius:10px;
    min-height:74px;
  }
  .page-template-page-app .hero-ico{ width:44px; height:44px; }
  .page-template-page-app .hero-ico svg{ width:20px; height:20px; }
  .page-template-page-app .hero-txt .v{ white-space:normal; }
}