/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.14_typescript@6.0.3_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/portico/portico_variables.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
    --color-background-gradient-start: hsl(209deg 40% 50%);
    --color-background-gradient-end: hsl(210deg 48% 69%);
    /* This is the same color as set on `--color-table-background` in
       comparison_table.css. */
    --color-background-marketing-page: hsl(0deg 0% 100% / 80%);
    /* This is a legacy color previously set on .why-page divs. */
    --color-text-marketing-page: hsl(223deg 6% 25%);
    --color-background-solid-hero: var(--color-background-gradient-start);
    --color-text-hero: hsl(0deg 0% 100%);
    --font-ss3: "Source Sans 3 VF", sans-serif;
    --font-ops: "Open Sans Variable", sans-serif;
    --color-background-box: hsl(210deg 44% 92%);
    --color-background-box-muted: hsl(0deg 0% 100% / 50%);
    --color-background-box-muted-hover: hsl(0deg 0% 100% / 60%);
    --color-plan-tab-header: hsl(223deg 40% 30%);
    --color-plan-tab-copy: hsl(223deg 40% 25% / 70%);
    --color-box-header: hsl(223deg 43% 25%);
    --color-box-copy: hsl(223deg 43% 25%);
    --color-box-copy-fine-print: hsl(223deg 43% 55%);
    --color-link: hsl(210deg 94% 42%);
    --color-link-hover: hsl(210deg 100% 50%);
    --color-link-portico-auth: hsl(200deg 100% 40%);
    --color-link-portico-auth-hover: hsl(200deg 100% 25%);
    --color-link-underline: hsl(210deg 94% 42% / 30%);
    --color-link-underline-hover: hsl(210deg 100% 50%);
    --color-link-underline-alternate: hsl(210deg 94% 100% / 40%);
    --color-link-underline-alternate-hover: hsl(210deg 94% 100% / 80%);
    --color-prominent-border: var(--color-link);
    --color-action-button: hsl(240deg 66% 60%);
    --color-action-button-hover: hsl(240deg 66% 55%);
    --color-action-button-active: hsl(240deg 66% 50%);
    --color-action-button-subtle-hover: hsl(240deg 66% 97%);
    --color-action-button-subtle-active: hsl(240deg 66% 94%);
}
@media (prefers-color-scheme: dark) {
    :root {
        --color-background-gradient-start: hsl(209deg 63% 40%);
        --color-background-gradient-end: hsl(238deg 28% 50%);
}
    }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.14_typescript@6.0.3_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/portico/plans_pages.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* While the portico pages design is in flux,
   we need to limit globally scoped CSS like this
   to its own file.

   The bulk of styles as well as CSS variables are
   in `pricing_plans.css`, which gets shared on
   non-plans pages such as /for/business/ */

html {
    /* Set the background on HTML to the starting
       color for the plans-page gradient, so that the
       top overscroll is undetectable. */
    background: var(--color-background-gradient-start);
}


/*# sourceMappingURL=plans-page.css.map*/