/* Styles for the sections below the hero. Colors etc. come from theme.css. */
section[id]{border-top:1px solid var(--line)}
.hero{border-top:0}
.num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad-main);color:#fff;font-family:var(--font-heading);font-weight:700;margin-bottom:var(--space-2)}
.cta-row{margin-top:var(--space-4)}
.notice{border-left:3px solid var(--magenta);padding:8px 14px;background:rgba(255,61,154,.08);border-radius:0 12px 12px 0;color:var(--text)}
.tag{display:inline-block;padding:2px 12px;border-radius:var(--radius-pill);background:rgba(255,61,154,.15);color:#ff8cc3;font-size:.8rem;font-weight:700;margin:var(--space-1) 0}

.project{padding:0;overflow:hidden}
.project img{display:block;width:100%;height:auto}
.project .tag{margin:var(--space-2) var(--space-3) 0}
.project h3,.project p{padding:0 var(--space-3)}
.project p{padding-bottom:var(--space-3);margin:0}

.steps{list-style:none;padding:0;margin:0}
@media (min-width:860px){.steps{grid-template-columns:repeat(4,1fr)}}

/* Two packages: two equal columns, centered */
.price-grid{max-width:780px}
@media (min-width:860px){.price-grid{grid-template-columns:repeat(2,1fr)}}
.price{display:flex;flex-direction:column}
.price .from{margin:0;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}
.price .amount{font-family:var(--font-heading);font-size:2.4rem;font-weight:700;color:var(--text);margin:0;line-height:1.1}
.price .monthly{color:var(--cyan);font-size:.95rem}
.price ul{list-style:none;padding:0;margin:0 0 var(--space-3);flex:1}
.price li{padding:6px 0 6px 26px;position:relative;color:var(--text)}
.price li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:6px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}
.price.featured{background:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,var(--grad-accent) border-box;border-width:2px;box-shadow:0 0 40px rgba(91,46,255,.3)}

.prose{max-width:42rem}
.prose p{font-size:1.1rem}

.faq{max-width:46rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;font-family:var(--font-heading);font-weight:600;font-size:1.1rem;list-style:none;padding:8px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;padding-left:16px;color:var(--cyan);font-size:1.5rem}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:var(--space-2)}

.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2);max-width:32rem}
.contact-list li{display:flex;flex-direction:column;padding:var(--space-2);border:1px solid var(--line);border-radius:16px;background:var(--midnight-2);overflow-wrap:anywhere}
.contact-list span{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-soft)}
.contact-list a{min-height:44px;display:inline-flex;align-items:center;font-size:1.1rem}

.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin:var(--space-2) 0}
.foot-links a{min-height:var(--tap);display:inline-flex;align-items:center;padding:0 10px;color:var(--text);text-decoration:none}
.foot-links a:hover{color:var(--cyan)}