(margin, font size) and, on phones, truncates links inside a
with nowrap: the hero and the link rows are therefore
s.
========================================================================== */
/* ===== hero: eyebrow, module H1, subtitle (inside the rose .header_block band) ===== */
.pricing-hero {
padding-top: 72px;
text-align: center;
}
.pricing-hero__eyebrow {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7f0052;
}
.pricing-hero__title {
max-width: 960px;
margin: 12px auto 16px;
font-family: Rubik, Open-Sans, sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.15;
color: #7f0052;
}
.pricing-hero__subtitle {
max-width: 760px;
margin: 0 auto 48px;
font-size: 20px;
line-height: 1.5;
color: #383838;
}
/* ===== module tiles: overlap the band's bottom edge ===== */
/* z-index 1 keeps them above the page content but below the open menus
(#nav is 20, .dropdown-content 15). */
.pricing-tiles {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
max-width: 1040px;
margin: 0 auto -88px;
}
.pricing-tile,
.pricing-tile:visited,
.pricing-tile:active,
.pricing-tile:focus {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 0;
padding: 24px 20px;
border: 3px solid transparent;
border-radius: 16px;
background-color: #fff;
box-shadow: 0 0.3em 1.2em rgba(160, 160, 160, 0.35);
text-align: center;
text-decoration: none;
color: #300224;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-tile:hover {
transform: translateY(-4px);
box-shadow: 0 0.6em 1.6em rgba(160, 160, 160, 0.45);
}
.pricing-tile:focus-visible {
outline: 3px solid rgba(255, 113, 113, 0.6);
outline-offset: 4px;
}
/* The homepage's icon treatment (.w5-icon in welcome_v5.css): a white line icon on the coral
gradient square. The same on every tile, current or not — selection is the border below. */
.pricing-tile__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #ff9f8f, #ff7171);
color: #fff;
}
.pricing-tile__icon svg {
width: 32px;
height: 32px;
}
.pricing-tile__name {
font-size: 19px;
font-weight: 500;
line-height: 1.3;
}
.pricing-tile__tagline {
font-size: 15px;
line-height: 1.4;
color: #515050;
}
.pricing-tile__short {
display: none;
}
/* The current page's tile: a 3px coral border and a coral-tinted shadow, nothing filled. Every tile
carries the 3px border (transparent when not current), so the contents line up. The brand purple is
for headings only (see DESIGN.md). */
.pricing-tile[aria-current="page"],
.pricing-tile[aria-current="page"]:visited,
.pricing-tile[aria-current="page"]:active,
.pricing-tile[aria-current="page"]:focus {
border-color: #ff7171;
background-color: #fff;
box-shadow: 0 0.4em 1.4em rgba(255, 113, 113, 0.25);
}
/* Room for the part of the tiles that hangs below the band. Only the page's own content
section: the footer's .content_section must keep its padding. */
body.pricing-page > section.content_section {
padding-top: 150px;
}
/* ===== "Need more? Talk to us." and the hub link ===== */
.pricing-talk {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px 16px;
margin-top: 8px;
font-size: 18px;
color: #383838;
text-align: center;
}
.pricing-hub-link {
margin-top: 48px;
font-size: 18px;
text-align: center;
}
.pricing-talk__link,
.pricing-talk__link:visited,
.pricing-talk__link:active,
.pricing-talk__link:focus,
.pricing-hub-link a,
.pricing-hub-link a:visited,
.pricing-hub-link a:active,
.pricing-hub-link a:focus {
font-weight: 500;
color: #7f0052;
text-decoration: none;
}
.pricing-talk__link:hover,
.pricing-hub-link a:hover {
text-decoration: underline;
}
.pricing-talk__link:focus-visible,
.pricing-hub-link a:focus-visible {
outline: 3px solid rgba(255, 113, 113, 0.6);
outline-offset: 4px;
}
/* Inline, so a label that wraps keeps its arrow at the end of the last line. */
.pricing-talk__link svg,
.pricing-hub-link svg {
display: inline-block;
margin-left: 6px;
vertical-align: -4px;
color: #e0485a;
}
/* ===== AI credit packs (formerly inline styles, same values) ===== */
.ai_credits_inner {
text-align: center;
}
.ai_credits_subtitle {
margin-bottom: 32px;
}
.ai_credits_packs {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.ai_credits_pack {
flex: 1;
min-width: 220px;
max-width: 300px;
border: 1px solid #e3e3e3;
border-radius: 10px;
padding: 28px;
}
.ai_credits_price {
font-size: 34px;
font-weight: 700;
}
.ai_credits_desc {
margin: 12px 0 20px;
color: #666;
}
/* ===== FAQ: native