/* Small refinements to the existing layout, palette and typography. */
.site-header {
    background-color: rgb(255 255 255 / 97%);
    box-shadow: 0 2px 14px rgb(30 27 75 / 5%);
    backdrop-filter: blur(12px);
}
.site-header-menu { gap: clamp(16px, 1.8vw, 28px); }
.site-header-menu > a { padding-block: 10px; white-space: nowrap; }
.site-header-actions { flex-shrink: 0; gap: 12px; }
.site-header-actions > a { white-space: nowrap; }
.site-header-menu > a:hover { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.site-menu-button { width: 40px; height: 40px; border: 1px solid #e5e7eb; border-radius: 10px; }
.site-menu-button:hover { background: #f5f3ff; border-color: #c7d2fe; }
.site-header #mobile-menu a { border-radius: 8px; }
.site-header #mobile-menu a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-header :is(a, button):focus-visible,
.site-footer a:focus-visible,
.home-hero a:focus-visible,
.home-section :is(a, summary):focus-visible,
.home-closing a:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 4px; }
.site-footer { border-top: 1px solid rgb(165 180 252 / 15%); }
.site-footer .grid > div { min-width: 0; }
.site-footer a[href^="mailto:"] { overflow-wrap: anywhere; }
.site-footer p { line-height: 1.8; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

.home-hero { border-bottom: 1px solid rgb(255 255 255 / 18%); }
.home-hero-content { max-width: 70rem; padding-top: 112px; padding-bottom: 112px; }
.home-hero h1 { line-height: 1.32; text-wrap: balance; text-shadow: 0 2px 14px rgb(30 27 75 / 12%); }
.home-hero-word { display: inline-block; }
.home-promo {
    max-width: 100%;
    border: 1px solid rgb(255 255 255 / 55%);
    box-shadow: 0 8px 28px rgb(30 27 75 / 14%), inset 0 1px 0 rgb(255 255 255 / 45%);
}
.home-promo-title { white-space: nowrap; }
.home-promo > svg { flex-shrink: 0; }
.home-hero-actions > a, .home-closing a {
    min-height: 54px;
    transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.home-hero-actions > a:first-child, .home-closing a { box-shadow: 0 8px 24px rgb(30 27 75 / 18%), inset 0 1px 0 #fff; }
.home-hero-actions > a:last-child { background-color: rgb(255 255 255 / 5%); border-color: rgb(255 255 255 / 42%); }
.home-hero-actions svg, .home-closing a svg { flex-shrink: 0; }
.home-section { scroll-margin-top: 84px; }
.home-section h2, .home-closing h2 { line-height: 1.4; text-wrap: balance; }
.home-section h3 { line-height: 1.6; }
.home-section > div > .text-center > p:first-child { letter-spacing: .06em; }
.home-section:is(#plainpoint, #features, #trial, #blog) .grid > :is(div, a) {
    border-color: #e5e7f0;
    box-shadow: 0 5px 22px -12px rgb(49 46 129 / 19%);
    transition: border-color .2s ease, box-shadow .2s ease, translate .2s ease;
}
.home-section:is(#plainpoint, #features, #trial) .grid > div > div:first-child {
    box-shadow: inset 0 0 0 1px rgb(99 102 241 / 5%);
}
/* These CMS colors are absent from the current generated Tailwind stylesheet. */
.home-feature-icon[data-feature-color="pink"] { background-color: #fdf2f8; }
.home-feature-icon[data-feature-color="pink"] > svg { color: #db2777; }
.home-feature-icon[data-feature-color="teal"] { background-color: #f0fdfa; }
.home-feature-icon[data-feature-color="teal"] > svg { color: #0d9488; }
.home-feature-icon[data-feature-color="cyan"] { background-color: #ecfeff; }
.home-feature-icon[data-feature-color="cyan"] > svg { color: #0891b2; }

/* Soft colors for the three existing problem cards. */
.home-section#plainpoint .grid > div {
    --problem-rgb: 244 63 94;
    --problem-ink: #9f1239;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgb(var(--problem-rgb) / 10%), rgb(var(--problem-rgb) / 3%)), #fff;
    border-color: rgb(var(--problem-rgb) / 16%);
    box-shadow: 0 6px 20px -12px rgb(var(--problem-rgb) / 18%), inset 0 1px 0 rgb(255 255 255 / 65%);
}
.home-section#plainpoint .grid > div:nth-child(2) { --problem-rgb: 245 158 11; --problem-ink: #92400e; }
.home-section#plainpoint .grid > div:nth-child(3) { --problem-rgb: 168 85 247; --problem-ink: #6b21a8; }
.home-section#plainpoint .grid > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, rgb(var(--problem-rgb) / 50%), rgb(var(--problem-rgb) / 12%));
    pointer-events: none;
}
.home-section#plainpoint .grid > div > div:first-child {
    background: rgb(255 255 255 / 70%);
    box-shadow: inset 0 0 0 1px rgb(var(--problem-rgb) / 14%), 0 4px 12px rgb(var(--problem-rgb) / 8%);
}
.home-section#plainpoint .grid > div > div:first-child > svg,
.home-section#plainpoint .grid > div > h3 { color: var(--problem-ink); }
.home-section#plainpoint .grid > div > p { color: #475569; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .home-section#plainpoint > div > .grid > div:hover {
        border-color: rgb(var(--problem-rgb) / 30%);
        box-shadow: 0 12px 28px -14px rgb(var(--problem-rgb) / 22%);
    }
}

/* Feature colors follow the existing icon palette, including CMS selections. */
.home-section#features {
    background: radial-gradient(ellipse at top left, #e9e3ff 0, transparent 55%),
        radial-gradient(ellipse at bottom right, #e0edff 0, transparent 55%), #f5f3ff;
}
.home-section#features h2 { color: #312e81; }
.home-section#features > div > .text-center > p:last-child { color: #475569; }
#features .home-feature-card { --feature-rgb: 99 79 232; --feature-ink: #37308b; }
#features .home-feature-card[data-feature-color="emerald"] { --feature-rgb: 5 150 105; --feature-ink: #065f46; }
#features .home-feature-card[data-feature-color="blue"] { --feature-rgb: 37 99 235; --feature-ink: #1e40af; }
#features .home-feature-card[data-feature-color="orange"] { --feature-rgb: 234 88 12; --feature-ink: #9a3412; }
#features .home-feature-card[data-feature-color="pink"] { --feature-rgb: 219 39 119; --feature-ink: #9d174d; }
#features .home-feature-card[data-feature-color="teal"] { --feature-rgb: 13 148 136; --feature-ink: #115e59; }
#features .home-feature-card[data-feature-color="red"] { --feature-rgb: 220 38 38; --feature-ink: #991b1b; }
#features .home-feature-card[data-feature-color="amber"] { --feature-rgb: 217 119 6; --feature-ink: #92400e; }
#features .home-feature-card[data-feature-color="purple"] { --feature-rgb: 147 51 234; --feature-ink: #6b21a8; }
#features .home-feature-card[data-feature-color="cyan"] { --feature-rgb: 8 145 178; --feature-ink: #155e75; }
.home-section#features .grid > .home-feature-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgb(var(--feature-rgb) / 14%), rgb(var(--feature-rgb) / 4%)), #fff;
    border-color: rgb(var(--feature-rgb) / 18%);
    box-shadow: 0 6px 20px -12px rgb(var(--feature-rgb) / 20%), inset 0 1px 0 rgb(255 255 255 / 65%);
}
.home-section#features .home-feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, rgb(var(--feature-rgb) / 70%), rgb(var(--feature-rgb) / 16%));
    pointer-events: none;
}
.home-section#features .grid > .home-feature-card > div:first-child {
    background: linear-gradient(135deg, rgb(var(--feature-rgb)), rgb(var(--feature-rgb) / 80%)), var(--feature-ink);
    box-shadow: 0 5px 12px rgb(var(--feature-rgb) / 22%), inset 0 1px 0 rgb(255 255 255 / 25%);
}
.home-section#features .home-feature-card > div:first-child > svg { color: #fff; }
.home-section#features .home-feature-card h3 { color: var(--feature-ink); }
.home-section#features .home-feature-card > p { color: #475569; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .home-section#features .grid > .home-feature-card:hover {
        border-color: rgb(var(--feature-rgb) / 40%);
        box-shadow: 0 12px 28px -12px rgb(var(--feature-rgb) / 26%);
    }
}

.home-section#payments .grid > div { box-shadow: 0 6px 24px -14px rgb(49 46 129 / 17%); }
.home-plan-grid { align-items: stretch; }
.home-plan-grid > div { display: flex; flex-direction: column; }
.home-plan-grid > div > div.inline-flex { align-self: flex-start; }
.home-plan-grid > div > a:last-child { margin-top: auto; min-height: 46px; }
.home-plan-grid > div:not(.bg-indigo-600) { border-color: #e3e5ef; box-shadow: 0 6px 22px -12px rgb(49 46 129 / 20%); }
.home-plan-grid > div.bg-indigo-600 { box-shadow: 0 14px 32px -12px rgb(67 56 202 / 42%); }
.home-section#faq details { border-color: #e5e7f0; box-shadow: 0 3px 14px -9px rgb(49 46 129 / 18%); }
.home-section#faq details[open] { border-color: #c7d2fe; box-shadow: 0 6px 22px -14px rgb(79 70 229 / 28%); }
.home-section#faq summary { gap: 16px; line-height: 1.65; }
.home-section#faq summary > svg { flex-shrink: 0; }
.home-section#faq summary::-webkit-details-marker { display: none; }
.home-section#why img { box-shadow: 0 14px 34px -14px rgb(79 70 229 / 24%); }
.home-closing { border-top: 1px solid rgb(255 255 255 / 15%); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .home-section:is(#plainpoint, #features, #blog) .grid > :is(div, a):hover {
        border-color: #c7d2fe;
        box-shadow: 0 12px 28px -14px rgb(49 46 129 / 28%);
    }
    .home-hero-actions > a:first-child:hover, .home-closing a:hover { box-shadow: 0 12px 28px rgb(30 27 75 / 24%); }
    .home-hero-actions > a:last-child:hover { background-color: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 65%); }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .site-header-menu, .site-header-actions { display: none; }
    .site-header-mobile { display: flex; }
    .site-header #mobile-menu:not(.hidden) { display: block; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    .home-plan-grid { gap: 14px; }
    .home-plan-grid > div { padding: 22px 16px; }
}
@media (max-width: 639px) {
    .home-hero-content { padding-top: 72px; padding-bottom: 76px; }
    .home-hero h1 { font-size: clamp(30px, 8.7vw, 36px); line-height: 1.42; }
    .home-promo { display: grid; grid-template-columns: 20px auto; gap: 2px 10px; width: max-content; margin-left: auto; margin-right: auto; padding: 12px 22px; }
    .home-promo > svg { grid-row: 1 / 3; align-self: center; }
    .home-promo-title { grid-column: 2; font-size: 16px; }
    .home-promo > span:last-child { grid-column: 2; font-size: 13px; line-height: 1.6; }
    .home-hero-actions { gap: 12px; }
    .home-hero-actions > a { padding-left: 18px; padding-right: 18px; }
    .home-section { padding-top: 60px; padding-bottom: 60px; }
    .home-section .text-center.mb-12 { margin-bottom: 32px; }
    .home-section h2, .home-closing h2 { font-size: 28px; line-height: 1.45; }
    .home-plan-grid > div { padding: 28px; }
    .home-plan-grid > div.bg-indigo-600 { translate: none; margin-block: 8px; }
    .home-section#faq details { padding: 20px; }
    .home-closing > div { padding-top: 60px; padding-bottom: 60px; }
}
@media (max-width: 374px) {
    .site-header > div { padding-left: 16px; padding-right: 16px; }
    .site-header > div > div > a img { height: 32px; }
    .home-hero-content { padding-left: 20px; padding-right: 20px; }
    .home-hero-actions > a { font-size: 14px; }
    .home-section h2, .home-closing h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header *, .home-hero *, .home-section *, .home-closing * { transition: none !important; }
    .home-section:is(#features, #blog) .grid > :is(div, a):hover { translate: none; }
}