html, body {
    height: 100%;
    margin: 0;
    background-color: #f6f5f3;
}

body {
    display: flex;
    justify-content: flex-start;
}

h1 {
    font-size: var(--font-size-xl);
    margin: 0px;
    margin-bottom: .5rem;
    font-weight: 600;
}

h2 {
    margin-bottom: 10px;
}

h3 {
    font-size: var(--font-size-xl);
    margin-bottom:0px;
}

h4 {
    font-weight: bold;
}

.forgot {
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
}

#next_section {
    opacity: 0;
    max-height: 0;
    visibility: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, visibility 0.5s;
}
#next_section.show {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    width: 100%;
}

.form-control {
    font-size: 1.5em;
    padding: 1em 0.5em;
    height: 1em;
}

.footer {
    align-items: center;
    display: flex;
    column-gap: .5em;
}

.wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
}

.header {
    margin-bottom:1em;
}

.header img {
    max-height: 180px;
    max-width: 300px;
}

.content {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    width: 100%;
    justify-content: center;
}

.flex {
    display: flex;
    flex-direction: row;
}

.flex-details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flex-details > div {
    margin-left: 5px;
    margin-right: 5px;
    flex: 1 1 0px
}

.login {
    background-color: var(--color-primary-blue);
    color: var(--color-white);
    border: none;
    padding: 15px 25px;
    border-radius: 5px;
    margin-top: 25px;
    display: block;
    text-align: center;
    font-size: 1em;
    width: 100%;
}

.login:hover {
    color: var(--color-white);
}

.login:focus {
    color: var(--color-white);
}

.legal {
    font-size: 1em;
}

label {
    color: var(--color-white);
    font-size: 1em;
}

.sidebar {
    min-height: 100%;
    background-color: var(--color-blue-90);
    width: 100%;
    padding: 64px 64px 128px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: flex-start;
}

.sidebar.bg-image {
    background-image: url(https://cdn-us-1.azureedge.net/content-pages/images/backgrounds/bg_login.jpg?v=1);
    background-size: cover;
    color:var(--color-white);
}

    .sidebar h2 {
        font-size: var(--font-size-xxxl);
        font-weight: 700;
        line-height: 1.2em;
    }

.sidebar p {
    font-size:1.2em;
}

.sidebar .btn {
    margin-top: 10px;
    width: 300px;
    font-size: 1.2em;
    font-weight: bold;
}

.sidebar img.logo {
    width: 150px;
    padding: 0 0;
}

.sidebar img {
    max-width: 300px;
    max-height: 300px;
    padding: 10px 0 20px;
}

#couponApplied.invalid {
    color: #d02d1d;
}

.box {
    width: 500px;
    padding: 25px;
    color: var(--color-blue-0);
    background: var(--color-white);
    border-radius: 5px;
    box-shadow: 0 12px 40px var(--color-gray-70);
    margin:0 50px;
}

.box a.btn-social {
    color: var(--color-blue-0);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.btn-social svg {
    margin-right: 8px;
}

.about {
    background-color: #efefef;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 14px;
    margin: 25px 0;
}

.md-checkbox {
    display:flex;
    margin-top:15px;
}
.md-checkbox label {
    margin: 0px;
    font-weight: normal;
    padding:0;
}
.md-checkbox input[type="checkbox"] {
    height: 20px;
    width: 20px;
    margin: 0 5px 0 0;
}

.grecaptcha-badge {
    width: 70px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    left: -2px !important;
    bottom: 20px !important;
}

.grecaptcha-badge:hover {
    width: 256px !important;
}

.btn-social {
    display: block;
    border: solid 2px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px;
    margin-bottom: 15px;
    color: #333;
    background-color: #fff;
}

ul.passwordCheck {
    list-style: none;
    padding: 0;
}

ul.passwordCheck li::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 8px;
    background: var(--color-red-40);
    position: relative;
    top: -3px;
}

ul.passwordCheck li.completed {
    opacity: .5;
}

ul.passwordCheck li.completed::before {
    background: green;
}

.field-required {
    color: var(--color-red-40);
    margin-left:3px;
}

.btn {
    font-size: var(--font-size-large);
    padding: 10px 15px;
    width: 100%;
}

.btn:hover {
    box-shadow: 0 1px 4px #0000004d;
}

.btn:focus {
    --saf-0: rgba(var(--sk_highlight,18,100,163),1);
    box-shadow: 0 0 0 1px var(--saf-0),0 0 0 5px #1d9bd14d;
}

.btn i {
    margin:0 10px;
}

a.btn-primary {
    text-decoration: none;
    border:none;
}
.btn-primary {
    margin-top: 15px;
    border: none;
    font-weight: 700;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active:hover {
    outline: none;
    border: none;
}

.btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
    outline: none;
    border: none;
    color: var(--color-white);
    background-color: var(--color-gray-70);
}

.form {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

form {
    padding: 25px;
    margin-bottom: 25px;
    min-width: 450px;
}

.box form {
    border: none;
    padding: initial;
    margin: initial;
    min-width: initial;
}
.plan-details {
    min-width: 350px;
}
.plan-pricing {
    background-color: var(--color-white);
    box-shadow: var(--shadow-90);
}
.plan-pricing ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--color-white);
}
.plan-pricing h2 {
    text-align: center;
    font-size: var(--font-size-xxl);
    padding: 25px 0;
    margin: 0px;
}
.plan-pricing li {
    padding: .5em;
    text-align: center;
}
.form label {
    color: var(--color-blue-0);
    display: block;
}

ul.highlights {
    list-style: none;
    padding: 0;
    font-size:1.2em;
}
ul.highlights li {
    margin-bottom: 10px;
    display: flex;
    column-gap: 10px;
}
ul.highlights i {
    margin-top: 4px;
}


@media only screen and (max-width: 768px) {
    body {
        justify-content: center;
    }

    h1 {
        font-size: 1.5em;
    }

    .h1__subtext {
        font-size: var(--font-size-large);
    }

    .box {
        width: 100%;
        margin: 0 0;
        border-radius: 0;
        box-shadow: none;
    }

    .content {
        display: flex;
        justify-content: flex-start;
    }

    .wrapper {
        margin: 0 0;
        width:initial;
    }

    .footer {
        display: none;
    }

    a.btn-social svg {
        height: 18px;
        width: 18px;
    }
    input.form-control {
        font-size: initial;
        padding: 10px 10px;
    }
    form {
        max-width: 100%;
        border: none;
        width: 100%;
        padding: 0 0;
    }
}
@media only screen and (max-width: 1200px) {
    .sidebar {
        display: none;
    }
}

@media only screen and ( max-height: 800px ) {
    .sidebar {
        display: none;
    }
}

/* ────────────────────────────────────────────────────────────────────
   OAuth consent screen (#9337) - Views/OAuth/Consent.cshtml.
   Lives here rather than in a page <style> block, and reuses .box /
   .about / .login from the sign-in pages this screen sits alongside.
   ──────────────────────────────────────────────────────────────────── */
.consent-heading {
    margin-bottom: 8px;
    font-weight: 600;
}

.consent-scopes {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}

.consent-scopes li {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-90);
}

.consent-scopes li:last-child {
    border-bottom: none;
}

.consent-scope-description {
    display: block;
}

.consent-scope-name {
    display: block;
    font-family: monospace;
    font-size: 0.85em;
    color: var(--color-gray-40);
}

.consent-deny {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 15px 25px;
    border: 1px solid var(--color-gray-70);
    border-radius: 5px;
    background: transparent;
    text-align: center;
    font-size: 1em;
}

.consent-footnote {
    margin-top: 20px;
    font-size: 0.85em;
    color: var(--color-gray-40);
}

/* A redirect_uri is attacker-supplied text: keep it on one line so a long or
   crafted value cannot push the buttons off the screen. */
.consent-redirect {
    font-family: monospace;
    word-break: break-all;
}

/* ────────────────────────────────────────────────────────────────────
   Trial signup (/free) - Views/Signup/free.cshtml on layout_trial.cshtml.

   That page is its own shell (1080px, two columns, own top bar), not the
   centred .box used by the other screens in this file, so the first block
   below neutralises the element-level rules at the top of this file for
   body.trial only. Everything after it is namespaced .trial-*, so no other
   page on layout_signup.cshtml is affected.

   The design handoff palette mapped onto the app's tokens almost exactly -
   its primary #217CE8 is --color-blue-50 - so there is no raw hex here
   beyond the focus ring alpha and the hairline on the navy card.
   ──────────────────────────────────────────────────────────────────── */
body.trial {
    display: block;
    height: auto;
    min-height: 100%;
    background: linear-gradient(180deg, var(--color-blue-100) 0%, var(--color-white) 46%);
    color: var(--color-gray-40);
}

body.trial form {
    padding: 0;
    margin: 0;
    min-width: 0;
    border: none;
}

body.trial h1 {
    font-size: clamp(27px, 3.4vw, 34px);
    line-height: 1.15;
    letter-spacing: -.03em;
    font-weight: 700;
    color: var(--color-blue-0);
    margin: 0 0 12px;
}

.trial-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 72px;
}

/* ── Top bar ── */
.trial-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 40px;
}

/* line-height:0 kills the inline descender space under the lockup */
.trial-logo {
    display: block;
    line-height: 0;
}

.trial-logo img {
    height: 28px;
    width: auto;
    display: block;
}

.trial-top-note {
    margin: 0;
    font-size: var(--font-size-normal);
    color: var(--color-slate-50);
}

.trial-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 32px;
    align-items: start;
}

/* ── Form column ── */
.trial-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-80);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 18px 44px -32px rgba(15, 23, 42, .3);
}

.trial-eyebrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-green-30);
    margin: 0 0 14px;
}

.trial-lede {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-gray-40);
    margin: 0 0 26px;
}

/* Beats a.btn-social in rebar/signup.css, which is also 0,1,1 */
a.trial-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 11px;
    width: 100%;
    padding: 13px 22px;
    border: 1px solid var(--color-gray-70);
    border-radius: 5px;
    background-color: var(--color-white);
    font-size: var(--font-size-normal);
    font-weight: 600;
    color: var(--color-blue-0);
    text-decoration: none;
    margin: 0;
}

a.trial-oauth svg {
    margin-right: 0;
}

a.trial-oauth:hover {
    border-color: var(--color-gray-60);
    background-color: var(--color-blue-100);
    color: var(--color-blue-0);
    box-shadow: none;
}

a.trial-oauth:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(33, 124, 232, .18);
}

.trial-card .trial-or {
    margin: 22px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: .1em;
    border-bottom-color: var(--color-gray-80);
}

.trial-card .trial-or span {
    color: var(--color-slate-50);
}

/* ── Fields ── */
.trial-field + .trial-field {
    margin-top: 18px;
}

.trial-card label {
    display: block;
    font-size: var(--font-size-normal);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--color-blue-0);
    margin-bottom: 6px;
}

.trial-hint {
    font-size: var(--font-size-small);
    line-height: 1.5;
    color: var(--color-slate-50);
    margin: 0 0 8px;
}

.trial-card .form-control {
    width: 100%;
    height: auto;
    padding: 12px 14px;
    border: 1px solid var(--color-gray-70);
    border-radius: 5px;
    font-size: var(--font-size-normal);
    color: var(--color-blue-0);
    background-color: var(--color-white);
}

.trial-card .form-control::placeholder {
    color: var(--color-gray-60);
}

.trial-card .form-control:focus {
    outline: none;
    border-color: var(--color-blue-50);
    box-shadow: 0 0 0 4px rgba(33, 124, 232, .18);
}

/* ── Sign-up code disclosure ──
   <details> carries the semantics; this just makes the summary read as the
   link it is. display:inline-block plus list-style:none drops the default
   triangle across browsers. */
.trial-code {
    margin-top: 18px;
}

.trial-code > summary {
    display: inline-block;
    list-style: none;
    font-size: var(--font-size-normal);
    font-weight: 600;
    color: var(--color-blue-50);
    text-decoration: underline;
    cursor: pointer;
}

.trial-code > summary::-webkit-details-marker {
    display: none;
}

.trial-code > summary:hover {
    color: var(--color-blue-40);
}

.trial-code > summary:focus-visible {
    outline: 2px solid var(--color-blue-50);
    outline-offset: 2px;
}

.trial-code .trial-field {
    margin-top: 12px;
}

/* ── Terms + submit ── */
.trial-card .trial-terms {
    align-items: flex-start;
    column-gap: 11px;
    margin-top: 22px;
    font-size: var(--font-size-normal);
    line-height: 1.55;
    color: var(--color-gray-40);
}

.trial-card .trial-terms label {
    font-weight: 400;
    color: var(--color-gray-40);
}

.trial-card .trial-terms input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 2px 0 0;
    accent-color: var(--color-blue-50);
}

.trial-card .btn-primary {
    width: 100%;
    margin-top: 22px;
    padding: 15px 22px;
    border-radius: 5px;
    background-color: var(--color-blue-50);
    font-size: var(--font-size-cta-button);
    font-weight: 600;
    color: var(--color-white);
}

.trial-card .btn-primary:hover {
    background-color: var(--color-blue-40);
    box-shadow: none;
}

.trial-card .btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(33, 124, 232, .18);
}

/* ── Reassurance ──
   Directly under the button on purpose: the marketing site promises "no
   credit card" and the old page never repeated it at the point of commitment. */
.trial-reassure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-small);
    color: var(--color-slate-50);
}

.trial-reassure li {
    display: flex;
    align-items: center;
    column-gap: 7px;
}

.trial-reassure svg {
    color: var(--color-green-30);
    flex: 0 0 15px;
}

/* Revealed by free.js (inline display:block) when the POST fails */
.trial-error {
    display: none;
    margin-top: 22px;
    font-size: var(--font-size-normal);
}

.trial-error ul {
    margin: 0;
    padding-left: 20px;
}

.trial-help {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--color-gray-80);
    font-size: var(--font-size-normal);
    color: var(--color-slate-50);
    text-align: center;
}

/* ── Side column ── */

/* Plan echo. No display property here - free.js toggles the hidden attribute,
   which also keeps the card out of the a11y tree while it is empty. */
.trial-plan {
    background-color: var(--color-blue-10);
    color: var(--color-blue-80);
    border-radius: 12px;
    padding: 24px;
}

.trial-plan-h {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-blue-60);
    margin: 0 0 16px;
}

.trial-plan-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: var(--font-size-normal);
}

.trial-plan-lines li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
}

/* Direct child only: a descendant selector would also catch nested spans */
.trial-plan-lines li > span:last-child {
    color: var(--color-white);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trial-plan-after {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: var(--font-size-small);
    line-height: 1.6;
    color: var(--color-blue-70);
}

.trial-plan-after strong {
    color: var(--color-white);
    white-space: nowrap;
}

.trial-plan a {
    color: var(--color-white);
    text-decoration: underline;
}

.trial-plan a:hover,
.trial-plan a:focus {
    color: var(--color-blue-80);
}

.trial-block {
    margin-top: 28px;
}

.trial-block h2 {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-slate-50);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-gray-80);
}

.trial-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: s;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trial-steps li {
    counter-increment: s;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 3px 12px;
    align-items: start;
    font-size: var(--font-size-normal);
    line-height: 1.5;
}

.trial-steps li::before {
    content: counter(s);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--color-blue-100);
    border: 1px solid var(--color-blue-80);
    color: var(--color-blue-50);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

/* The li holds three grid items - ::before, strong, span - so both of the
   latter have to be pinned to column 2 or the description wraps under the
   counter and renders one word per line. The 3px row gap is deliberate too:
   at the column's 12px each title floats away from its own description. */
.trial-steps li strong,
.trial-steps li span {
    grid-column: 2;
}

.trial-steps strong {
    display: block;
    color: var(--color-blue-0);
    letter-spacing: -.01em;
    margin-bottom: 2px;
}

.trial-steps span {
    color: var(--color-slate-50);
    font-size: var(--font-size-small);
}

/* Unnumbered blocks get their own class: reusing .trial-steps with
   counter-reset:none still increments and renders a stray badge. */
.trial-plain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: var(--font-size-normal);
    line-height: 1.5;
}

.trial-plain strong {
    display: block;
    color: var(--color-blue-0);
    letter-spacing: -.01em;
    margin-bottom: 3px;
}

.trial-plain span {
    color: var(--color-slate-50);
    font-size: var(--font-size-small);
}

.trial-note {
    margin-top: 28px;
    font-size: var(--font-size-small);
    line-height: 1.6;
    color: var(--color-slate-50);
}

@media only screen and (max-width: 880px) {
    .trial-grid {
        grid-template-columns: 1fr;
    }

    /* The plan echo is the continuity payoff - it has to be seen before the
       form, not after it. */
    .trial-side {
        order: -1;
    }

    .trial-card {
        padding: 24px;
    }
}

@media only screen and (max-width: 520px) {
    .trial-wrap {
        padding: 20px 16px 52px;
    }

    .trial-card {
        padding: 20px;
    }
}