/*----------------------------------------------------------------------
  FILENAME: custom.css
  DESCRIPTION: Rules placed in this file will override all other rules.
  You can use !important to ensure the rules are applied.
----------------------------------------------------------------------*/

/*======================================================================
  MERLIN AFFILIATES — affiliate front end theme
  ----------------------------------------------------------------------
  Loaded last by screen.css (@import "custom.css"), so these rules sit on
  top of reset/grid/type/lists/tables/forms/skin/widgets.

  !! ORDERING CAVEAT !!
  responsive.css is a separate <link> that comes AFTER screen.css in the
  document, so its media-query rules outrank anything here at the same
  specificity below 1100px. Where a mobile rule has to be beaten, this
  file uses !important — that is deliberate, not laziness.

  Palette + type mirror the marketing site (src/styles/clean.css):
  periwinkle #5258a6, coral #ef6d60, Paytone One display, Fredoka body.
======================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Fredoka:wght@300..600&display=swap');

:root {
    --ma-ink:        #ffffff;   /* copy on dark          */
    --ma-ink-soft:   #a9aede;   /* secondary copy        */
    --ma-brand:      #5258a6;   /* logo periwinkle       */
    --ma-brand-dark: #3c4180;
    --ma-brand-deep: #262a52;
    --ma-coral:      #ef6d60;   /* logo coral — CTA      */
    --ma-coral-dark: #d8554a;
    --ma-mist:       #0d1030;   /* alternate band        */
    --ma-line:       rgba(255, 255, 255, .10);  /* hairlines */

    --ma-void:       #080a1c;   /* page ground           */
    --ma-raised:     #151a3f;   /* cards, inputs         */
    --ma-ember:      #f2a473;   /* gradient partner      */

    --ma-display: 'Paytone One', ui-sans-serif, system-ui, sans-serif;
    --ma-body:    'Fredoka', ui-sans-serif, system-ui, sans-serif;

    --ma-radius:   14px;
    --ma-radius-lg: 20px;
    --ma-shadow:   0 18px 40px -18px rgba(0, 0, 0, .70);
}

/*======================================================================
  !! SCOPE !!
  Everything below is scoped to the signed-out pages only:
      #page_login #page_signup #page_password_retr
      #page_verify #page_email_unsub #page_2fa_verify

  An earlier version set body/html colour, input colour and heading colour
  globally. Those rules also reached the signed-in affiliate dashboard, which
  keeps skin.css's white panels — producing white text on white backgrounds for
  logged-in affiliates. The dashboard is not reachable without an affiliate
  login, so it was never verified.

  If :is() or :has() are unsupported the selectors simply fail and the stock
  MyAffiliates theme shows through, which is the correct way for this to break.

  Do not add an unscoped colour rule to this file.
======================================================================*/


/*----------------------------------------------------------------------
  1. Typography
----------------------------------------------------------------------*/

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) /* skin.css sets html {background:#FFF}:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) . Setting body alone leaves white showing
   wherever the body box is shorter than the viewport. */
/* Scoped with :has() so it cannot reach the dashboard. Where :has() is
   unsupported this simply does not apply — the signed-out bodies carry
   min-height:100vh, so the dark ground still covers the viewport. */
html:has(#page_login),
html:has(#page_signup),
html:has(#page_password_retr),
html:has(#page_verify),
html:has(#page_email_unsub),
html:has(#page_2fa_verify) {
    background: var(--ma-void);
}

body:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) {
    background: var(--ma-void);
    font-family: var(--ma-body);
    color: var(--ma-ink);
    font-size: .95em;
    -webkit-font-smoothing: antialiased;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) p {
    color: var(--ma-ink-soft);
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) h1,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) h2,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) h3,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .article .section h1,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .article .section h2,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .article .section h3,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #aside .section h1,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #aside .section h2,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .login h1 {
    font-family: var(--ma-display);
    font-weight: 400;
    color: var(--ma-ink);
}

/* Paytone One ships a single weight — bolder synthesises badly. */
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .article .section h1,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .article .section h2,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .article .section h3,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .login h1 {
    font-weight: 400;
}

/* #5258a6 on #080a1c is ~2:1 — unreadable. Links lift to a tint of the brand
   for the dark ground, and warm to coral on hover. */
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) a {
    color: #8f95d8;
    text-decoration: none;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) a:hover {
    color: var(--ma-coral);
    text-decoration: underline;
}

/* The "* required" marker — house red to brand coral. */
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .reqStar {
    color: var(--ma-coral);
    font-weight: 400;
}

/*----------------------------------------------------------------------
  2. Header / logo
----------------------------------------------------------------------*/

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #header {
    background: var(--ma-void);
    border-bottom: 1px solid var(--ma-line);
    height: auto;
    min-height: 78px;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #siteLogo {
    margin: 16px 22px;
    width: auto;
}

/* The template hard-codes width="250" height="100" on the <img>, which would
   squash our 3.7:1 logo. The PNG ships at 500x135 (2x) and is displayed at
   250px wide, height derived. */
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #siteLogo img {
    width: 250px !important;
    height: auto !important;
    display: block;
}

/*----------------------------------------------------------------------
  3. Primary navigation
----------------------------------------------------------------------*/

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #nav {
    background: var(--ma-brand);
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #nav ul li a {
    font-family: var(--ma-display);
    font-weight: 400;
    font-size: 1.05em;
    color: #fff;
    letter-spacing: .01em;
    transition: background .15s ease;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #nav ul li.selected a,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #nav ul li a:hover,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #nav ul li:hover a {
    background: var(--ma-brand-deep);
    color: #fff;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #nav ul li.selected div,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #nav ul li:hover div {
    border-top-color: var(--ma-coral);
}

/*----------------------------------------------------------------------
  4. Form controls (global)
----------------------------------------------------------------------*/

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=url],
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=text],
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=email],
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=tel],
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=number],
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=password],
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) select,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) textarea {
    font-family: var(--ma-body);
    border: 1px solid var(--ma-line);
    background-color: var(--ma-raised);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--ma-ink);
    text-indent: 0 !important;   /* responsive.css adds text-indent:8px */
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=url]:hover,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=text]:hover,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=email]:hover,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=password]:hover,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) select:hover,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) textarea:hover {
    border-color: rgba(255, 255, 255, .28);
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=url]:focus,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=text]:focus,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=email]:focus,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=password]:focus,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) select:focus,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) textarea:focus {
    outline: none;
    border-color: var(--ma-brand);
    box-shadow: 0 0 0 3px rgba(82, 88, 166, .15);
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) ::placeholder {
    color: #7d81a8;
}

/* forms.css pins select to 34px, which clips our taller padding. */
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) form dl select {
    height: auto;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=checkbox],
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=radio] {
    accent-color: var(--ma-brand);
    width: auto;
    margin-right: .45em;
    vertical-align: -1px;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) label {
    font-family: var(--ma-body);
    font-weight: 500;
    color: var(--ma-ink);
}

/*----------------------------------------------------------------------
  5. Buttons
----------------------------------------------------------------------*/

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) button,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .button,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=submit] {
    font-family: var(--ma-display);
    font-weight: 400;
    background: linear-gradient(94deg, var(--ma-coral), var(--ma-ember));
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 13px 28px;
    color: #14162e;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(239, 109, 96, .55);
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) button:hover,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .button:hover,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) a:hover.button,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=submit]:hover {
    background: linear-gradient(94deg, var(--ma-coral-dark), var(--ma-coral));
    color: #14162e;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(239, 109, 96, .65);
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) button:active,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=submit]:active {
    transform: translateY(0);
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) button:focus-visible,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=submit]:focus-visible {
    outline: 3px solid rgba(82, 88, 166, .45);
    outline-offset: 2px;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) button.inactive,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) button.inactive:hover {
    background: #b8bacb;
    box-shadow: none;
    transform: none;
}

/*----------------------------------------------------------------------
  6. Page shell — login & signup
----------------------------------------------------------------------*/

/* skin.css puts a full-bleed photo on the login <body> itself:
       #page_login,
#page_2fa_verify { height:100vh; background:url(login-bg.jpg) }
   :is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) Two problems with that. The fixed 100vh clips the card whenever it is taller
   than the viewport (short laptops,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) landscape phones,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) and any page carrying a
   validation error). And the photo is not ours.

   So the wash goes on the <body> — one surface,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) no seam where #pageBody ends
   and #footer begins — and the height becomes a minimum rather than a cap.

   To go back to a photo instead,
drop a branded images/login-bg.jpg in and
   delete the `background` line below; the min-height fix should stay either way. */
#page_login,
#page_2fa_verify,
#page_signup {
    height: auto;
    min-height: 100vh;
    background: radial-gradient(900px 520px at 50% 0,
                                rgba(239, 109, 96, .16),
                                rgba(8, 10, 28, 0) 70%),
                var(--ma-void);
    background-repeat: no-repeat, repeat;
}

#page_login #pageBody,
#page_2fa_verify #pageBody,
#page_signup #pageBody {
    background: transparent !important;
}

#page_login .article,
#page_2fa_verify .article,
#page_signup .article {
    background: none;
}

/*----------------------------------------------------------------------
  6a. Login card  (#page_login)
----------------------------------------------------------------------*/

#page_login .login {
    width: 400px;
    max-width: calc(100% - 32px);
    margin: 64px auto 32px auto;
    padding: 34px 32px 30px 32px;
    background: var(--ma-raised);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius-lg);
    box-shadow: var(--ma-shadow);
    overflow: visible;
}

#page_login .login h1 {
    font-size: 1.45em;
    text-align: center;
    padding: 0 0 20px 0;
    margin: 0;
    color: var(--ma-ink);
}

#page_login .login form {
    text-align: left;
    margin: 0 0 4px 0;
}

/* Unstack the floated dt/dd pairs into a plain label-over-field layout. */
#page_login .login dl {
    float: none;
    width: 100%;
    margin: 0 0 16px 0;
}

#page_login .login dt {
    float: none;
    width: auto;
    padding: 0 0 6px 0;
}

#page_login .login dd {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

#page_login .login dt label {
    font-size: 13px;
    font-weight: 600;
}

#page_login .login input.text,
#page_login .login input[type=text],
#page_login .login input[type=password] {
    width: 100%;
    padding: 13px 16px;
}

#page_login .login button,
#page_login .login input[type=submit] {
    width: 100%;
    padding: 14px 28px;
    font-size: 1.05em;
}

/* reCAPTCHA sits in its own dl — centre it and let it breathe. */
#page_login .login .g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 2px 0 6px 0;
}

#page_login ul.loginLinks {
    margin: 22px auto 0 auto;
    padding-top: 18px;
    border-top: 1px solid var(--ma-line);
    max-width: 400px;
}

/* widgets.css leaves these display:inline with a bullet.png separator, which
   wraps raggedly at 400px. Stack them instead — same treatment the narrow
   breakpoint already gets. */
#page_login ul.loginLinks li {
    display: block;
    padding: 5px 0;
    background-image: none;
    list-style: none;
}

#page_login ul.loginLinks li a {
    font-size: 13px;
    color: var(--ma-ink-soft);
}

#page_login ul.loginLinks li a:hover {
    color: var(--ma-brand);
}

/*----------------------------------------------------------------------
  6b. Signup form  (#page_signup)
----------------------------------------------------------------------*/

#page_signup .article .section {
    max-width: 660px;
    margin: 40px auto 24px auto;
}

#page_signup .article .section h1 {
    font-size: 1.9em;
    text-align: center;
    padding: 0 0 6px 0;
}

#page_signup .article .section > p {
    text-align: center;
    max-width: 46em;
    margin-left: auto;
    margin-right: auto;
}

#page_signup form fieldset.accDetailSet {
    background: var(--ma-raised);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius-lg);
    box-shadow: 0 10px 28px -20px rgba(28, 30, 58, .35);
    padding: 26px 28px 22px 28px;
    margin: 0 0 18px 0;
}

/* Stack label over field — the default is a 26em label gutter. */
#page_signup form dt,
#page_signup form fieldset dt {
    float: none;
    width: auto;
    padding: 0 0 6px 0;
}

#page_signup form dd,
#page_signup form fieldset dd {
    margin-left: 0;
    padding: 0;
}

#page_signup form dl {
    margin: 0 0 18px 0;
}

#page_signup form dl:last-child {
    margin-bottom: 0;
}

#page_signup form dt label {
    font-size: 14px;
    font-weight: 600;
}

/* The grey helper sentence under some labels. */
#page_signup form dt span:not(.reqStar) {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--ma-ink-soft);
    margin-top: 3px;
    line-height: 1.45;
}

#page_signup form dt br {
    display: none;
}

#page_signup form dd input[type=text],
#page_signup form dd input[type=email],
#page_signup form dd input[type=password],
#page_signup form dd select {
    width: 100%;
}

/* Checkbox rows (mailout subscription, terms). */
#page_signup form dd ul {
    margin: 0;
}

#page_signup form dd ul li {
    padding-bottom: .35em;
}

#page_signup form dd ul li label {
    font-weight: 400;
    color: var(--ma-ink-soft);
    cursor: pointer;
}

/* Section headings — the template emits no <legend>, so label the groups
   here. Delete this block if MyAffiliates ever adds real legends. */
#page_signup fieldset.accDetailSet::before {
    display: block;
    font-family: var(--ma-display);
    font-size: 1.05em;
    color: var(--ma-brand);
    padding-bottom: 16px;
}

#page_signup #accDetailSet_0::before { content: "Account details"; }
#page_signup #accDetailSet_2::before { content: "Your details"; }
#page_signup #accDetailSet_3::before { content: "Terms & conditions"; }

/* Captcha + submit blocks carry no card chrome. */
#page_signup #accDetailSet_9 {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 18px;
}

#page_signup #accDetailSet_9 .g-recaptcha {
    display: flex;
    justify-content: center;
}

#page_signup fieldset.submit-buttons {
    background: transparent;   /* skin.css paints this #f5f6f7 */
    padding: 0;
    margin: 0 0 48px 0;
    border: none;
}

#page_signup fieldset.submit-buttons dt {
    display: none;
}

#page_signup fieldset.submit-buttons dd {
    margin-left: 0;
    text-align: center;
}

#page_signup fieldset.submit-buttons input[type=submit] {
    width: 100%;
    max-width: 320px;
    padding: 15px 28px;
    font-size: 1.1em;
}

/*----------------------------------------------------------------------
  7. Password reset / verify / unsubscribe — same centred card treatment
----------------------------------------------------------------------*/

#page_password_retr .article .section,
#page_verify .article .section,
#page_email_unsub .article .section {
    max-width: 560px;
    margin: 48px auto;
    background: var(--ma-raised);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius-lg);
    box-shadow: var(--ma-shadow);
    padding: 32px;
}

#page_password_retr form dt,
#page_verify form dt,
#page_email_unsub form dt {
    float: none;
    width: auto;
    padding: 0 0 6px 0;
}

#page_password_retr form dd,
#page_verify form dd,
#page_email_unsub form dd {
    margin-left: 0;
    padding: 0;
}

#page_password_retr form dd input[type=text],
#page_verify form dd input[type=text],
#page_email_unsub form dd input[type=text] {
    width: 100%;
}

/*----------------------------------------------------------------------
  8. Signed-in area — accent recolour only, no layout surgery
----------------------------------------------------------------------*/

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #aside .nav .section li:hover,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #aside .nav .section li.selected {
    background: var(--ma-brand);
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #aside .section h1,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #aside .notes h1,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #aside .section h2 {
    color: var(--ma-brand);
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .article .section h1,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .article .section h2 {
    color: var(--ma-ink);
}

/*----------------------------------------------------------------------
  9. Footer
----------------------------------------------------------------------*/

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #footer {
    border-top: 1px solid var(--ma-line);
    margin-top: 8px;
}

#page_login #footer,
#page_signup #footer {
    background: transparent;
    border-top: none;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #footer p,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #footer a {
    color: #8a8ca3;
    font-size: 12.5px;
}

:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #footer a:hover {
    color: var(--ma-brand);
}

/*----------------------------------------------------------------------
  10. Responsive — these must outrank responsive.css (loaded after us)
----------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {

    :is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #siteLogo {
        margin: 12px 14px;
    }

    :is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #siteLogo img {
        width: 190px !important;
    }

    #page_login .login {
        width: auto !important;
        margin: 32px 16px !important;
        padding: 26px 20px 24px 20px;
    }

    #page_signup .article .section {
        margin: 24px auto 16px auto;
    }

    #page_signup form fieldset.accDetailSet {
        padding: 20px 18px 16px 18px;
    }

    :is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) /* responsive.css sets button {width:100%} :is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) at this breakpoint — fine for
       the submit CTAs,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) but it also stretches inline buttons. Keep the pill
       shape and spacing regardless. */
    button,
:is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) input[type=submit] {
        border-radius: 999px;
        padding: 13px 22px;
    }

    /* The reCAPTCHA iframe is a fixed 304px — stop it forcing h-scroll. */
    :is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) .g-recaptcha {
        transform: scale(.88);
        transform-origin: center top;
    }
}

@media only screen and (max-width: 450px) {

    :is(#page_login,#page_signup,#page_password_retr,#page_verify,#page_email_unsub,#page_2fa_verify) #siteLogo img {
        width: 160px !important;
    }

    #page_signup .article .section h1 {
        font-size: 1.5em;
    }
}

/*----------------------------------------------------------------------
  11. reCAPTCHA
  Google renders its own light iframe and it cannot be restyled. On a dark
  card it reads as a bright rectangle, so give it a frame that makes the
  light box look deliberate rather than broken.
----------------------------------------------------------------------*/

#page_login .login .g-recaptcha,
#page_signup #accDetailSet_9 .g-recaptcha {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--ma-line);
    border-radius: 12px;
    padding: 10px;
}