/* The marketing site's own rules.
 *
 * Everything shared with the documentation lives in shared.css. This is
 * the hero, the step list, the feature rows, the plans and the form -
 * the things only these pages have.
 */

/* ---- hero -------------------------------------------------------------- */
.hero{padding:var(--s9) 0 var(--s8);overflow:hidden}
.herorow{
  display:grid;gap:var(--s7);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}
.herotext h1{margin-bottom:var(--s4)}
.herocta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.heroengines{
  margin-top:var(--s6);font-size:.9rem;color:rgba(255,255,255,.66);
}
.heroengines b{color:#fff;font-weight:600}

.heroshot img,.splitshot img{
  width:100%;height:auto;border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow-lg);
}
.splitshot img{border-color:var(--line)}

/* A screenshot arriving is the one movement on the page. Short, and it
   stops entirely for anybody who asked for less motion (shared.css). */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.heroshot img{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.heroshot{animation-delay:.1s}

/* ---- page heads -------------------------------------------------------- */
.pagehead{padding-bottom:var(--s5)}
.pagehead h1{margin-bottom:var(--s3)}

/* ---- steps ------------------------------------------------------------- */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  counter-reset:step;
}
.steps li{
  margin:0;padding:var(--s5);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);
  position:relative;
}
.stepno{
  display:grid;place-items:center;width:2rem;height:2rem;margin-bottom:var(--s4);
  border-radius:var(--r-pill);background:var(--accent);color:#fff;
  font-weight:700;font-size:.9rem;
}
.steps h3{margin-bottom:var(--s2);font-size:1.05rem}
.steps p{margin:0;color:var(--muted);font-size:.95rem}

/* ---- feature rows ------------------------------------------------------ */
.featurelist{display:grid;gap:var(--s7)}
.featurerow{
  padding:var(--s6);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);
}
.featurehead{display:flex;gap:var(--s5);align-items:flex-start;
  margin-bottom:var(--s5)}
.featurehead h2{margin-bottom:var(--s2);font-size:1.5rem}
.featurehead .lede{font-size:1.02rem;margin:0}
.featurehead .cardicon{flex:0 0 auto;margin:0}

/* ---- tick lists -------------------------------------------------------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.ticks li{
  position:relative;padding-left:1.9rem;color:var(--muted);font-size:.98rem;
}
.ticks li::before{
  content:'';position:absolute;left:0;top:.42em;
  width:1.1rem;height:1.1rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--highlight) 16%,transparent);
}
.ticks li::after{
  content:'';position:absolute;left:.34rem;top:.68em;
  width:.42rem;height:.22rem;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.plainlist{list-style:none;margin:0;padding:0}
.plainlist li{margin:.35rem 0}

/* ---- split row --------------------------------------------------------- */
.splitrow{
  display:grid;gap:var(--s7);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
}
.splittext h2{margin-bottom:var(--s4)}
.splittext p{color:var(--muted)}
.splittext .ticks{margin-top:var(--s5)}

/* ---- providers --------------------------------------------------------- */
.providers{
  display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;
}
.provider{
  padding:.55rem 1.1rem;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line);
  font-weight:600;font-size:.95rem;color:var(--ink);
  box-shadow:var(--shadow-sm);
}

/* ---- prose ------------------------------------------------------------- */
.prose{max-width:46rem}
.prose h2{margin-top:var(--s7);font-size:1.5rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted)}

/* ---- plans ------------------------------------------------------------- */
.plans{
  display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  max-width:34rem;margin:0 auto;
}
.plan{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--shadow-sm);
}
.plan.featured{border-color:var(--accent);box-shadow:var(--shadow-md)}
.plan h3{margin-bottom:var(--s2)}
.planprice{
  font-size:1.9rem;font-weight:700;color:var(--accent);margin:0 0 var(--s3);
  letter-spacing:-.02em;
}
.planprice span{font-size:.9rem;font-weight:500;color:var(--muted)}
.plansummary{color:var(--muted);margin-bottom:var(--s5)}
.plan .ticks{margin-bottom:var(--s6)}

/* ---- FAQ --------------------------------------------------------------- */
.faqlist{max-width:50rem;display:grid;gap:var(--s3)}
.faqitem{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
.faqitem summary{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s4) var(--s5);cursor:pointer;font-weight:600;
  list-style:none;
}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::after{
  content:'';flex:0 0 auto;margin-left:auto;
  width:.55rem;height:.55rem;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faqitem[open] summary::after{transform:rotate(-135deg)}
.faqitem summary:hover{background:var(--base)}
.faqbody{padding:0 var(--s5) var(--s5)}
.faqbody p{margin:0;color:var(--muted)}

/* ---- contact ----------------------------------------------------------- */
.contactrow{
  display:grid;gap:var(--s6);
  grid-template-columns:minmax(0,1.4fr) minmax(min(100%,17rem),.8fr);
  align-items:start;
}
.contactaside{display:grid;gap:var(--s4)}
.contactaside .card:hover{transform:none;box-shadow:var(--shadow-sm)}
.contactaside p{margin-bottom:var(--s3)}
.small{font-size:.88rem;color:var(--muted)}

.field{margin-bottom:var(--s5)}
.field label{
  display:block;margin-bottom:var(--s2);font-weight:600;font-size:.95rem;
}
.req{color:var(--warn)}
.field input,.field textarea,.field select{
  width:100%;padding:.7rem .9rem;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);
  border-radius:var(--r-md);transition:border-color .15s ease;
}
.field textarea{resize:vertical;min-height:9rem}
.field input:hover,.field textarea:hover,.field select:hover{
  border-color:var(--muted)}
.field input:focus-visible,.field textarea:focus-visible,
.field select:focus-visible{border-color:var(--accent)}
.field [aria-invalid=true]{border-color:#C0392B;background:#FDF3F2}
.fielderror{margin:var(--s2) 0 0;font-size:.88rem;color:#C0392B;font-weight:500}

/* The honeypot. Taken out of the page without `display:none`, which some
   robots check for. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formsaid{
  margin-top:var(--s5);padding:var(--s4) var(--s5);
  border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--base);
}
.formsaid p{margin:0 0 var(--s3)}
.formsaid p:last-child{margin-bottom:0}
.formsaid.good{border-color:var(--ok);background:var(--ok-soft)}
.formsaid.bad{border-color:#C0392B;background:#FDF3F2}
.formsaid.held{border-color:var(--warn);background:var(--warn-soft)}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:62rem){
  .herorow,.splitrow,.contactrow{grid-template-columns:minmax(0,1fr)}
  /* The picture goes under the words it illustrates rather than above
     them, on every one of these. */
  .heroshot{order:2}
  .splitshot{order:2}
  .featurehead{flex-direction:column;gap:var(--s4)}
}
@media (max-width:40rem){
  .featurerow{padding:var(--s5)}
  .plans{max-width:none}
}