/*///////////////*/
/* LANDING PAGES */
/*///////////////*/

.landing-page-module-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 5vw;
    padding-right: 5vw;
}
.landing-page-module-container.left {
    flex-direction: row-reverse;
}
.landing-page-background-grey {
    background-color: var(--main-medium-grey);
}
.landing-page-background-light-grey {
    background-color: var(--main-light-grey);
}
.landing-page-background-white {
    background-color: var(--off-white);
}
.landing-page-background-green {
    background-color: var(--main-green);
    background-image: linear-gradient(to bottom left, var(--main-green), var(--main-blue-press));
}
.copy-block {
    flex-grow: 1;
    min-width: 300px;
    width: 50vw;
    max-width: calc(550px + 3vw);
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 3vw;
    margin-right: 3vw;
}
.copy-block p {
    margin-bottom: 24px;
}
.wide-copy-block {
    display: flex;
    flex-direction: column;
    width: 70vw;
    max-width: calc(1000px + 3vw);
}
.wide-copy-block p {
    max-width: 800px;
}

.image-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 14px;
    background: white;
    border-radius: 18px;
    margin-top: 42px;
    margin-bottom: 20px;
    margin-left: 3vw;
    margin-right: 3vw;
    box-shadow: 3px 3px 14px var(--main-steel-grey);
}
.image-block img {
    border-radius: 4px;
}
.image-group div img {
    width: 100%;
    max-width: 160px;
    opacity: 0.9;
}
.image-group .factor-dot-row {
    display: flex;
    justify-content: space-between;
    margin: 0;
}
.image-group .factor-dot-col {
    background-color: var(--main-medium-steel-grey);
    margin: 0 3px;   
}
.image-group .factor-dot {
    width: 14px;
    height: 14px;
}

.image-block .shrunk, .image-block .row {
    justify-content: center;
    align-items: center;
    margin-left: 0px;
    margin-right: 0px;
}
.image-block .big-figural {
    font-size: 40px;
}
.image-block span {
    display: inline-block;
}
.landing-page-background-green .copy-block {
    min-width: 360px;
    width: 85vw;
    max-width: 900px;
}
.landing-page-module-container h2 {
    font-size: 33px;
    font-size: calc(1.8rem + 0.5vw);
    font-weight: 900;
    margin-bottom: 26px;
}
.landing-page-module-container h3 {
    font-size: calc(1.6rem + 0.3vw);
    line-height: calc(2.4rem + 0.45vw);
    font-weight: 500;
    margin-bottom: 30px;
}
.landing-page-module-container p, .landing-page-module-container li {
    font-size: calc(16px + 0.2vw);
}
.landing-page-background-grey h2, .landing-page-background-light-grey h2 {
    color: var(--main-orange);
}
.landing-page-background-white h2 {
    color: var(--main-green);
}
.dark-blue-background h2, .dark-blue-background h2 {
    color: var(--off-white);
}

.landing-page-module-container table {
    border-spacing: 0px;
    border-collapse: separate;
    border-radius: 15px;
    border: 5px solid #0e7464;
    background: rgba(255, 255, 255, 0.07);
}
.landing-page-module-container tr:not(:last-child) td {
    border-bottom: 5px solid #0e7464;
}
.landing-page-module-container tr:last-child {
    border-bottom: none;
}
.landing-page-module-container td {
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: calc(5px + 1vw);
    padding-right: calc(5px + 1vw);
    font-size: calc(15px + 0.2vw);
}
.landing-page-module-container td:first-child {
    padding-left: 20px;
}
.landing-page-module-container td:last-child {
    padding-right: 20px;
}
.landing-page-module-container td h4 {
    color: #168472;
    font-size: calc(24px + 0.3vw);
}
.landing-page-module-container .btn {
    font-size: min(calc(1.5rem + 0.8vw), 45px);
    background-color: rgb(255, 255, 255, 0.2);
    color: white;
    padding: 13px 35px;
    margin-top: 55px;
}

/*///////*/
/* LEGAL */
/*///////*/

.legal-copy {
    font-family: avenir, sans-serif;
}
.legal-copy h4 {
    font-size: 180%;
}
/* Sub-section heading inside a numbered section. Added with the 2026 legal rewrite,
 * which the shared terms + privacy pages now carry: the copy uses <h5> under <h4>, and
 * without this the two headings sit at the same visual weight. */
.legal-copy h5 {
    margin-top: 1rem;
    font-size: 125%;
}
/* Policy notice — the block a legal page uses to say something ABOUT the document
 * rather than in it ("these Terms replace our previous Terms dated…"). Grey fill plus a
 * rule on the reading edge, so it reads as an aside without shouting. Heliomath has its
 * own copy of this in heliomath_marketing.css, built on the Sunset tokens; this brand
 * does not load those, so the values here are the legacy --main-* palette. */
.legal-copy .policy-notice {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background-color: var(--main-steel-grey);
    border-left: 4px solid var(--main-winter-green);
}
.legal-copy .policy-notice p:last-child { margin-bottom: 0; }
.legal-copy .last-updated p {
    color: var(--main-dark-dark-steel);
    /* font-size: 95%; */
}
.legal-copy li {
    font-size: calc(0.6rem + 0.6vw);
}
.legal-copy a {
    text-decoration: underline;
}

.legal-copy table {
    font-size: calc(0.6rem + 0.6vw);
}
.legal-copy table th {
    font-weight: 600;
    background-color: var(--main-steel-grey);
}

.legal-copy table td, .legal-copy table th  {
    padding: 5px;
    border: 1px solid var(--main-medium-steel-grey);
}

/*//////////////*/
/* BETA UPDATES */
/*//////////////*/

.beta-updates-area {
    font-family: avenir, sans-serif;
    margin-top: 65px;
    display: flex;
    flex-direction: column;
    margin-bottom: 105px;
    max-width: 700px;
    width: 80vw;
    margin-right: auto;
    margin-left: auto;
}
.beta-update, .up-next {
    margin-bottom: 20px;
}
.beta-update h5, .beta-update li, .up-next li {
    font-weight: 400;
}
.beta-update .date {
    font-size: 20px;
    font-weight: 900;
    color: var(--main-winter-green);
    margin-bottom: 5px;
}
.up-next {
    border: 4px dashed var(--main-light-grey);
    border-radius: 20px;
    padding: 0 20px;
}
.up-next h3 {
    font-size: 24px;
    font-weight: 900;
    color: var(--main-purple);
}

/*///////////////////*/
/* QUESTION EXAMPLES */
/*///////////////////*/

.MathJax .mn, .MathJax .mtext {
    font-family: 'Helvetica Neue', arial, sans-serif !important;
}
.shrunk {
    display: inline-flex;
    align-items: center;
}