/* ---------------------------------------------------------------------------
   mindcomb 2026 redesign
   Design tokens + components for redesigned pages. Self-contained: pages using
   these styles do NOT load bootstrap.css / custom.css, so nothing here has to
   fight the legacy stylesheet.
   Figma: mindcomb--redesing-2026
--------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Poppins:wght@300;400;500&display=swap');

:root {
   --mc-canvas: #E9E7E2;
   --mc-text: #4A595A;
   --mc-charcoal: #32322B;
   --mc-red: #E8524B;
   --mc-links: #8A9C9C;
   --mc-white: #FFFFFF;

   --mc-serif: 'Instrument Serif', Georgia, serif;
   --mc-sans: 'Poppins', system-ui, -apple-system, sans-serif;

   --mc-gutter: 64px;
}

/* --- reset --------------------------------------------------------------- */

*,
*::before,
*::after {
   box-sizing: border-box;
}

.mc-page {
   margin: 0;
   background: var(--mc-canvas);
   color: var(--mc-text);
   font-family: var(--mc-sans);
   font-weight: 400;
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
}

.mc-page img {
   max-width: 100%;
}

/* Element selectors throughout this reset, never `.mc-page x` — a class in the
   selector would outrank component classes like `.mc-btn` and quietly undo
   their colour, background or spacing. Safe here because the page is
   self-contained and loads no other stylesheet. */
h1,
h2,
p,
ul {
   margin: 0;
   padding: 0;
}

ul {
   list-style: none;
}

a {
   color: inherit;
   text-decoration: none;
}

/* Element selector on purpose: `.mc-page button` would outrank component
   classes like `.mc-btn` and strip their background and colour. */
button {
   font: inherit;
   color: inherit;
   border: 0;
   background: none;
   cursor: pointer;
}

.mc-visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}

/* --- shared components --------------------------------------------------- */

/* Mirrors .mc-btn in the mindcomb2 theme (assets/css/base.css) so the portal and
   the marketing site render the same button. Keep the two in sync. */
.mc-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   padding: 9px 22px;
   border-radius: 64px;
   font-family: var(--mc-sans);
   font-weight: 400;
   font-size: 15.8px;
   line-height: normal;
   letter-spacing: 0.02em;
   text-transform: uppercase;
   white-space: nowrap;
   --mc-btn-bg: var(--mc-red);
   background: var(--mc-btn-bg);
   color: var(--mc-white);
   transition: background 0.2s ease, color 0.2s ease;
}

.mc-btn:hover,
.mc-btn:focus-visible {
   background: var(--mc-white);
   color: var(--mc-btn-bg);
}

.mc-btn--teal {
   --mc-btn-bg: var(--mc-text);
}

.mc-btn--sage {
   --mc-btn-bg: var(--mc-links);
}

.mc-btn--block {
   width: 100%;
}

.mc-btn[disabled] {
   opacity: 0.6;
   cursor: not-allowed;
}

.mc-link-underline {
   font-weight: 300;
   font-size: 12px;
   line-height: 0.95;
   color: var(--mc-charcoal);
   text-decoration: underline;
   text-underline-position: from-font;
}

.mc-link-underline:hover {
   color: var(--mc-red);
}

/* Form field -------------------------------------------------------------- */

.mc-field {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 100%;
   /* Fields inside .mc-plancard (e.g. Profile) would otherwise inherit its
      text-align: center — labels/hints must stay left-aligned regardless
      of what container a field ends up in. */
   text-align: left;
}

.mc-field__label {
   font-size: 14px;
   line-height: 0.95;
   color: var(--mc-text);
}

.mc-field__labelrow {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   width: 100%;
}

.mc-field__control {
   position: relative;
}

.mc-field input[type="email"],
.mc-field input[type="password"],
.mc-field input[type="text"] {
   width: 100%;
   height: 48px;
   padding: 0 20px;
   border: 1px solid var(--mc-text);
   border-radius: 16px;
   background: transparent;
   font-family: var(--mc-sans);
   font-weight: 300;
   font-size: 14px;
   color: var(--mc-charcoal);
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mc-field input::placeholder {
   color: rgba(50, 50, 43, 0.8);
}

.mc-field input:focus {
   border-color: var(--mc-red);
   box-shadow: 0 0 0 3px rgba(232, 82, 75, 0.15);
}

.mc-field--has-toggle input {
   padding-right: 52px;
}

.mc-field__toggle {
   position: absolute;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
   font-size: 15px;
   line-height: 1;
   color: rgba(50, 50, 43, 0.6);
}

.mc-field__toggle:hover {
   color: var(--mc-text);
}

/* Safari (macOS) paints a keychain/key button inside password fields, which sits
   right on top of our show/hide eye toggle. Hide the shadow-DOM buttons. The
   type="text" selector matters too: the toggle flips the input to text, and
   Safari keeps treating it as a credential field. */
.mc-field input[type="password"]::-webkit-credentials-auto-fill-button,
.mc-field input[type="text"]::-webkit-credentials-auto-fill-button,
.mc-field input[type="password"]::-webkit-strong-password-auto-fill-button,
.mc-field input[type="text"]::-webkit-strong-password-auto-fill-button {
   display: none !important;
   visibility: hidden;
   pointer-events: none;
   width: 0;
   height: 0;
   margin: 0;
}

.mc-field input[type="password"]::-webkit-caps-lock-indicator {
   display: none !important;
}

/* Alerts ------------------------------------------------------------------ */

.mc-alert {
   width: 100%;
   padding: 12px 18px;
   border-radius: 14px;
   font-size: 13px;
   line-height: 1.45;
}

.mc-alert--success {
   border: 1px solid var(--mc-links);
   background: rgba(138, 156, 156, 0.18);
   color: var(--mc-text);
}

.mc-alert--error {
   border: 1px solid var(--mc-red);
   background: rgba(232, 82, 75, 0.1);
   color: #a8332d;
}

.mc-field__error {
   font-size: 12px;
   line-height: 1.35;
   color: var(--mc-red);
}

/* --- header -------------------------------------------------------------- */

.mc-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 24px var(--mc-gutter);
}

.mc-header__logo img {
   display: block;
   width: 219px;
   height: auto;
}

.mc-header__actions {
   display: flex;
   align-items: center;
   gap: 27px;
}

.mc-header__signin {
   padding-bottom: 2px;
   border-bottom: 1px solid var(--mc-text);
   font-size: 16px;
   color: var(--mc-text);
}

/* --- hero ---------------------------------------------------------------- */

/* No column gap: the sign-in column spans everything left of the panel so its
   form centres on that whole region. Separation comes from the column's own
   padding, which stays outside the centring maths. */
.mc-hero {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   overflow: hidden;
   /* The extra bottom padding is breathing room before the footer, which
      brings its own dark background right up against the content. The
      <=1024px rule below trims it back for the stacked layout. */
   padding: 40px var(--mc-gutter) 88px;
}

.mc-hero__blob {
   position: absolute;
   top: 0;
   left: 34px;
   width: 796px;
   height: 1053px;
   background: url('../images/redesign/blob.svg') center / 100% 100% no-repeat;
   transform: rotate(-90deg);
   transform-origin: center;
   pointer-events: none;
}

/* Sign-in column ---------------------------------------------------------- */

/* Fills the space left of the showcase panel and centres the 500px form within
   it, rather than sitting flush against the panel. */
.mc-authcol {
   position: relative;
   z-index: 1;
   display: flex;
   /* Grows to claim the space left of the panel, but never shrinks below the
      form's own width — the panel gives way instead. */
   flex: 1 0 580px;
   flex-direction: column;
   align-items: center;
   gap: 40px;
   min-width: 0;
   padding: 0 40px;
}

.mc-authcol > * {
   width: 100%;
   max-width: 500px;
}

.mc-authcol__intro {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   width: 100%;
   color: var(--mc-text);
}

.mc-title {
   font-family: var(--mc-serif);
   font-weight: 400;
   font-size: 52px;
   line-height: 0.95;
   text-align: center;
}

.mc-title em {
   font-style: italic;
}

.mc-authcol__lede {
   max-width: 446px;
   font-weight: 300;
   font-size: 16px;
   line-height: 1.35;
   text-align: center;
}

.mc-authcol__form,
.mc-authcol__fields {
   display: flex;
   flex-direction: column;
   gap: 24px;
   width: 100%;
}

.mc-authcol__actions {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   width: 100%;
}

.mc-terms {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   width: 100%;
   font-weight: 300;
   font-size: 12px;
   line-height: 1.45;
   color: var(--mc-text);
}

.mc-terms input[type="checkbox"] {
   flex: 0 0 auto;
   width: 14px;
   height: 14px;
   margin: 2px 0 0;
   accent-color: var(--mc-red);
}

.mc-terms a {
   color: var(--mc-charcoal);
   text-decoration: underline;
   text-underline-position: from-font;
}

.mc-authcol__switch {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 9px;
   text-align: center;
}

.mc-authcol__switch p {
   font-size: 14px;
   line-height: 0.95;
   color: var(--mc-text);
}

/* Showcase panel ---------------------------------------------------------- */

.mc-showcase {
   position: relative;
   z-index: 1;
   display: flex;
   flex: 0 1 848px;
   flex-direction: column;
   max-width: 848px;
   height: 924px;
   overflow: hidden;
   border-radius: 32px;
   background: url('../images/redesign/hero-bg.webp') center / cover no-repeat;
}

.mc-showcase::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(239, 237, 233, 0.33);
}

/* Takes the space above the banner and fits the mockup inside it. Deliberately
   not the Figma frame's crop offsets — those are tuned to one export's padding
   and silently clip the phone when the asset is re-exported. `contain` keeps the
   whole composition visible whatever its dimensions.
   `position: relative` on both children puts them above the ::before overlay. */
.mc-showcase__phone {
   position: relative;
   display: flex;
   flex: 1 1 auto;
   align-items: center;
   justify-content: center;
   min-height: 0;
   padding: 40px 24px 24px;
}

.mc-showcase__phone img {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

/* App banner -------------------------------------------------------------- */

.mc-appbar {
   position: relative;
   display: flex;
   flex: 0 0 auto;
   align-items: stretch;
   gap: 40px;
   padding: 24px 48px;
   background: rgba(221, 227, 227, 0.85);
   -webkit-backdrop-filter: blur(11.3px);
   backdrop-filter: blur(11.3px);
}

.mc-appbar__left {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   justify-content: space-between;
   gap: 16px;
   min-height: 99px;
}

.mc-appbar__title {
   font-family: var(--mc-serif);
   font-size: 20px;
   line-height: 1.1;
   color: var(--mc-charcoal);
}

.mc-appbar__title em {
   font-style: italic;
}

.mc-storebtns {
   display: flex;
   align-items: center;
   gap: 17px;
   /* Wrap to a second line rather than letting the badges compress. Paired with
      flex: 0 0 auto below, this is width-agnostic -- the badges keep their
      natural size and reflow whenever the row runs out of room, so no
      breakpoint has to guess where that happens. */
   flex-wrap: wrap;
}

.mc-storebtn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 12px 26px;
   border-radius: 18px;
   background: var(--mc-white);
   transition: transform 0.2s ease;
   /* .mc-appbar__left is flex: 1 1 auto, so without this the badges were shrunk
      by the row and "GET IT ON" / "Download on the" broke onto two lines from
      about 1400px down. */
   flex: 0 0 auto;
}

.mc-storebtn:hover {
   transform: translateY(-2px);
}

.mc-storebtn__glyph {
   flex: 0 0 auto;
   display: block;
   width: auto;
   height: 34px;
}

.mc-storebtn__text {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 5px;
   flex: 0 0 auto;
}

.mc-storebtn__text span {
   font-size: 12px;
   line-height: 0.95;
   color: var(--mc-text);
   white-space: nowrap;
}

.mc-storebtn__text img {
   display: block;
   width: auto;
   height: 20px;
}

.mc-appbar__divider {
   flex: 0 0 1px;
   background: rgba(74, 89, 90, 0.35);
}

.mc-appbar__right {
   display: flex;
   flex: 0 0 auto;
   align-items: stretch;
   gap: 16px;
}

.mc-appbar__scan {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 146px;
}

.mc-appbar__scan h2 {
   font-family: var(--mc-serif);
   font-weight: 400;
   font-size: 20px;
   line-height: 0.95;
   color: var(--mc-red);
}

.mc-appbar__scan p {
   font-weight: 300;
   font-size: 12px;
   line-height: 1.2;
   color: var(--mc-text);
}

/* The padding is the QR's quiet zone — without it the rounded corners clip the
   finder patterns and scanners struggle. */
.mc-appbar__qr {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   width: 99px;
   height: 99px;
   padding: 6px;
   overflow: hidden;
   border-radius: 16.5px;
   background: var(--mc-white);
}

.mc-appbar__qr img {
   display: block;
   width: 95%;
   height: 95%;
}

/* --- footer -------------------------------------------------------------- */

.mc-footer {
   display: flex;
   flex-direction: column;
   gap: 123px;
   padding: 72px;
   background: var(--mc-charcoal);
   color: var(--mc-white);
}

.mc-footer__top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 60px;
}

.mc-footer__brandnav {
   display: flex;
   align-items: flex-start;
   gap: 180px;
}

.mc-footer__brand {
   display: flex;
   flex-direction: column;
   gap: 24px;
   width: 303px;
}

.mc-footer__brand img {
   display: block;
   width: 286px;
   height: auto;
}

.mc-footer__brand p {
   font-size: 15px;
   line-height: 1.45;
   opacity: 0.8;
}

.mc-footer h2 {
   font-family: var(--mc-sans);
   font-weight: 500;
   font-size: 16.5px;
   line-height: 1.45;
   letter-spacing: 0.01em;
   text-transform: uppercase;
   white-space: nowrap;
}

.mc-footer__nav {
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.mc-footer__nav ul {
   display: flex;
   flex-direction: column;
   gap: 9px;
}

.mc-footer__nav li {
   font-size: 16.5px;
   line-height: 1.45;
   white-space: nowrap;
   opacity: 0.8;
}

.mc-footer__nav a:hover {
   opacity: 1;
}

.mc-footer__seen {
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.mc-footer__logos {
   display: flex;
   align-items: center;
   gap: 48px;
}

.mc-footer__logos img {
   display: block;
   opacity: 0.8;
}

.mc-footer__logos img.is-goop {
   width: 147px;
}

.mc-footer__logos img.is-sheerluxe {
   width: 151px;
}

.mc-footer__bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
}

.mc-footer__bottom p {
   font-size: 15px;
   line-height: 1.45;
   opacity: 0.8;
}

.mc-footer__legal {
   display: flex;
   align-items: center;
   gap: 90px;
}

.mc-footer__legal a {
   font-size: 16.5px;
   line-height: 1.45;
   white-space: nowrap;
   opacity: 0.8;
}

.mc-footer__legal a:hover {
   opacity: 1;
}

/* --- modal --------------------------------------------------------------- */

.mc-modal {
   position: fixed;
   inset: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   background: rgba(50, 50, 43, 0.35);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mc-plancard__note {
   margin: 0.25rem 0 1rem;
   font-size: 0.95rem;
   color: #4a5a58;
}

/* A class-level `display: flex` outranks the UA stylesheet's `[hidden]` rule. */
.mc-modal[hidden] {
   display: none;
}

.mc-modal.is-open {
   opacity: 1;
   visibility: visible;
}

.mc-modal__dialog {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   width: 100%;
   max-width: 573px;
   padding: 32px 96px;
   border-radius: 28px;
   background: rgba(255, 255, 255, 0.8);
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
   box-shadow: 0 24px 60px rgba(50, 50, 43, 0.18);
   transform: translateY(12px);
   transition: transform 0.2s ease;
}

.mc-modal.is-open .mc-modal__dialog {
   transform: translateY(0);
}

.mc-modal__close {
   position: absolute;
   top: 16px;
   right: 20px;
   font-size: 18px;
   line-height: 1;
   color: var(--mc-text);
}

.mc-modal__close:hover {
   color: var(--mc-red);
}

.mc-modal__intro {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   width: 100%;
   color: var(--mc-text);
}

.mc-modal__intro h2 {
   font-family: var(--mc-serif);
   font-weight: 400;
   font-size: 44px;
   line-height: 0.95;
   text-align: center;
}

.mc-modal__intro p {
   font-weight: 300;
   font-size: 14px;
   line-height: 1.35;
   text-align: center;
}

.mc-modal form {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   width: 100%;
}

.mc-modal .mc-field {
   gap: 7px;
}

.mc-modal .mc-field__label {
   font-size: 12px;
}

.mc-modal .mc-field input[type="email"] {
   height: 40px;
   padding: 0 16px;
   border-radius: 14px;
   font-size: 12px;
}

.mc-modal .mc-btn {
   padding: 10px 44px;
   border-radius: 40px;
   font-size: 11.5px;
}

.mc-modal__feedback {
   width: 100%;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1600px) {
   .mc-showcase {
      height: 840px;
   }

   .mc-footer__brandnav {
      gap: 100px;
   }
}

@media (max-width: 1280px) {
   :root {
      --mc-gutter: 40px;
   }

   .mc-authcol {
      flex: 1 0 488px;
      padding: 0 24px;
   }

   .mc-authcol > * {
      max-width: 440px;
   }

   .mc-showcase {
      height: 760px;
   }

   .mc-appbar {
      flex-wrap: wrap;
      gap: 24px;
      padding: 24px 32px;
   }

   .mc-appbar__divider {
      display: none;
   }
}

@media (max-width: 1024px) {
   .mc-hero {
      flex-direction: column;
      align-items: center;
      gap: 56px;
      padding-bottom: 64px;
   }

   .mc-hero__blob {
      left: 50%;
      width: 700px;
      height: 900px;
      transform: translateX(-50%) rotate(-90deg);
   }

   /* Stacked layout: no leftover space to centre in, so back to a plain block. */
   .mc-authcol {
      flex: 0 0 auto;
      width: 100%;
      max-width: 500px;
      padding: 0;
   }

   .mc-authcol > * {
      max-width: none;
   }

   /* The hero is a column here, so the 848px flex-basis would size the panel's
      height rather than its width. */
   .mc-showcase {
      flex: 0 0 auto;
      width: 100%;
      max-width: 848px;
      height: 680px;
   }

   .mc-footer {
      gap: 64px;
      padding: 56px 40px;
   }

   .mc-footer__top {
      flex-direction: column;
      gap: 48px;
   }

   .mc-footer__brandnav {
      gap: 64px;
   }
}

@media (max-width: 768px) {
   .mc-header {
      flex-wrap: wrap;
      gap: 16px;
      padding: 20px var(--mc-gutter);
   }

   .mc-header__logo img {
      width: 170px;
   }

   .mc-title {
      font-size: 40px;
   }

   /* Height follows the mockup here rather than being fixed. */
   .mc-showcase {
      height: auto;
      border-radius: 24px;
   }

   .mc-showcase__phone {
      min-height: 340px;
      padding: 32px 20px 20px;
   }

   .mc-appbar {
      padding: 20px 24px;
   }

   .mc-appbar__right {
      flex: 1 1 100%;
   }

   .mc-modal__dialog {
      padding: 32px 28px;
   }

   .mc-modal__intro h2 {
      font-size: 34px;
   }

   .mc-footer__brandnav {
      flex-direction: column;
      gap: 40px;
   }

   .mc-footer__brand {
      width: 100%;
   }

   .mc-footer__brand img {
      width: 220px;
   }

   .mc-footer__bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
   }

   .mc-footer__legal {
      gap: 40px;
   }
}

@media (max-width: 520px) {
   :root {
      --mc-gutter: 20px;
   }

   .mc-title {
      font-size: 34px;
   }

   .mc-showcase__phone {
      min-height: 260px;
   }

   .mc-storebtns {
      flex-wrap: wrap;
      gap: 12px;
   }

   .mc-appbar__right {
      flex-wrap: wrap;
   }

   .mc-footer__logos {
      gap: 28px;
   }

   .mc-footer__logos img.is-goop {
      width: 110px;
   }

   .mc-footer__logos img.is-sheerluxe {
      width: 115px;
   }
}

.mc-field--select .mc-field__control--select {
   border: none;
   border-bottom: 1px solid #4a595a;
   border-radius: 0;
   padding: 0;
   position: relative;
   display: flex;
   align-items: center;
   height: 48px;
}

.mc-field--select select {
   appearance: none;
   -webkit-appearance: none;
   background: transparent;
   border: none;
   outline: none;
   width: 100%;
   height: 100%;
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 14px;
   color: rgba(50, 50, 43, 0.8);
   cursor: pointer;
   padding-right: 24px;
}

.mc-field__select-icon {
   position: absolute;
   right: 4px;
   top: 50%;
   width: 12px;
   height: auto;
   transform: translateY(-50%) rotate(90deg);
   pointer-events: none;
}

.mc-authcol__checks {
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 100%;
}

.mc-checkbox {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   cursor: pointer;
}

.mc-checkbox input[type="checkbox"] {
   width: 14px;
   height: 14px;
   margin-top: 2px;
   accent-color: #4a595a;
   flex-shrink: 0;
}

.mc-checkbox__box {
   display: none;
}

.mc-checkbox__label {
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 14px;
   color: #4a595a;
   letter-spacing: 0.14px;
   line-height: 1.08;
}

.mc-checkbox__label a {
   color: #4a595a;
   text-decoration: underline;
}

.mc-authcol__links {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 9px;
   width: 100%;
   margin-top: 24px;
}

.mc-field[hidden] {
   display: none;
}

.mc-field__applied {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 14px;
   color: #4a595a;
}

.mc-field__applied[hidden] {
   display: none;
}

.mc-field__applied button {
   background: none;
   border: none;
   padding: 0;
   font: inherit;
   cursor: pointer;
}

.mc-field__control--action {
   display: flex;
   align-items: center;
   gap: 8px;
}

.mc-field__control--action input {
   flex: 1;
   min-width: 0;
}

.mc-field__action {
   flex-shrink: 0;
   background: none;
   border: none;
   padding: 0 4px;
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   color: #4a595a;
   text-decoration: underline;
   cursor: pointer;
}

.mc-field__action:disabled {
   opacity: 0.5;
   cursor: progress;
}

.mc-plancard__codes .mc-field__error {
   display: block;
   margin-top: 6px;
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 13px;
   color: #a8332d;
}

.mc-plancard__codes .mc-field__error[hidden] {
   display: none;
}

.mc-field__applied-text {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.mc-field__applied-detail {
   font-size: 12px;
   opacity: 0.8;
}

.mc-field__applied-detail:empty {
   display: none;
}

.mc-country-trigger {
   appearance: none;
   -webkit-appearance: none;
   background: transparent;
   border: none;
   outline: none;
   width: 100%;
   height: 100%;
   text-align: left;
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 14px;
   color: rgba(50, 50, 43, 0.8);
   cursor: pointer;
   padding-right: 24px;
}

.mc-country-panel {
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
   z-index: 20;
   width: 100%;
   max-height: 280px;
   overflow-y: auto;
   background: #ffffff;
   border: 1px solid #4a595a;
   border-radius: 16px;
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.mc-country-option {
   appearance: none;
   background: none;
   border: none;
   border-bottom: 1px solid #4a595a;
   padding: 0 0 10px;
   text-align: left;
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 12px;
   color: rgba(50, 50, 43, 0.8);
   cursor: pointer;
}

.mc-country-option:last-child {
   border-bottom: none;
   padding-bottom: 0;
}

.mc-country-option.is-highlighted,
.mc-country-option[aria-selected="true"] {
   color: #32322b;
   font-weight: 400;
}

.mc-country-trigger:focus-visible,
.mc-country-option:focus-visible {
   outline: 2px solid #4a595a;
   outline-offset: 2px;
}

.mc-country-panel[hidden] {
   display: none;
}

.mc-hero--centered {
   /* An error banner is a full-width sibling of the card, so a row layout
      pushed the card off-centre whenever one appeared. Stack them, and hold
      the banner to the card's width so the two line up. */
   flex-direction: column;
   gap: 24px;
   justify-content: center;
   /* Proportional breathing room above/below the card, scaled to viewport
      height — mirrors the generous vertical centering in the Figma design
      without reproducing its very tall fixed hero area. */
   min-height: 60vh;
}

.mc-hero--centered .mc-alert {
   width: 500px;
   max-width: 100%;
}

.mc-plancard {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   width: 500px;
   max-width: 100%;
   padding: 32px 48px;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-radius: 28px;
   text-align: center;
}

/* Settings reuses .mc-plancard's layout (centered column, 500px width) but
   the Figma design has no card chrome behind it — the pills/button sit
   directly on the page background. */
.mc-plancard--bare {
   background: none;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   padding: 0;
}

.mc-plancard__title {
   font-family: "Instrument Serif", serif;
   font-weight: 400;
   font-size: 40px;
   color: #4a595a;
   line-height: 0.95;
}

.mc-plancard__title em {
   font-style: italic;
}

.mc-plancard__toggle {
   display: flex;
   gap: 16px;
   align-items: center;
   justify-content: center;
}

/* A class-level `display: flex` outranks the UA stylesheet's `[hidden]` rule. */
.mc-plancard__toggle[hidden] {
   display: none;
}

.mc-plancard__pill {
   appearance: none;
   background: transparent;
   border: 1px solid #4a595a;
   border-radius: 40px;
   padding: 8px 24px;
   font-family: "Poppins", sans-serif;
   font-size: 14px;
   text-transform: uppercase;
   color: #4a595a;
   cursor: pointer;
}

.mc-plancard__pill.is-active {
   background: #e8524b;
   border-color: #e8524b;
   color: #ffffff;
}

.mc-plancard__pricing {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
}

/* A class-level `display: flex` outranks the UA stylesheet's `[hidden]` rule. */
.mc-plancard__pricing[hidden] {
   display: none;
}

.mc-plancard__was {
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 14px;
   color: rgba(74, 89, 90, 0.8);
}

.mc-plancard__price {
   font-family: "Instrument Serif", serif;
   font-size: 40px;
   color: #4a595a;
}

.mc-plancard__tag {
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 20px;
   text-transform: uppercase;
   color: #4a595a;
}

.mc-plancard form {
   display: flex;
   justify-content: center;
}

/* The subscription form carries the discount and referral fields beneath the
   price, so it stacks rather than being the single centered button row that
   .mc-plancard form assumes elsewhere. */
.mc-plancard__form {
   flex-direction: column;
   align-items: center;
   gap: 24px;
   width: 100%;
}

.mc-plancard__codes {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%;
}

.mc-plancard__disclaimer {
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 12px;
   color: rgba(50, 50, 43, 0.8);
   max-width: 320px;
   text-align: center;
}

.mc-header__logoutform {
   display: contents;
}

.mc-settings-nav {
   display: flex;
   flex-direction: column;
   gap: 14px;
   width: 100%;
}

.mc-settings-nav__item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 56px;
   padding: 12px 24px;
   border: 1.5px solid #4a595a;
   border-radius: 64px;
   font-family: "Poppins", sans-serif;
   font-size: 18px;
   text-transform: uppercase;
   color: #4a595a;
   transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mc-settings-nav__item:hover,
.mc-settings-nav__item:focus-visible {
   background-color: #4a595a;
   border-color: #4a595a;
   color: #ffffff;
}

.mc-settings-nav__item i {
   font-size: 14px;
   transition: transform 0.2s ease;
}

.mc-settings-nav__item:hover i,
.mc-settings-nav__item:focus-visible i {
   transform: translateX(4px);
}

.mc-settings-logout {
   width: 100%;
}

.mc-settings-danger {
   display: flex;
   gap: 16px;
   justify-content: center;
}

.mc-plancard form[hidden] {
   display: none;
}

.mc-field input[readonly] {
   background: rgba(74, 89, 90, 0.12);
   color: rgba(50, 50, 43, 0.6);
   cursor: not-allowed;
}

.mc-field__hint {
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 12px;
   color: rgba(74, 89, 90, 0.7);
}

.mc-password-checklist {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 12px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.mc-password-checklist li {
   position: relative;
   padding-left: 16px;
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-size: 12px;
   color: rgba(74, 89, 90, 0.6);
}

.mc-password-checklist li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 8px;
   height: 8px;
   border: 1px solid rgba(74, 89, 90, 0.6);
   border-radius: 50%;
}

.mc-password-checklist li.is-met {
   color: #4a595a;
}

.mc-password-checklist li.is-met::before {
   background: #4a595a;
   border-color: #4a595a;
}

/* --- manage subscription --------------------------------------------------- */

.mc-subrows {
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: 100%;
   text-align: left;
}

.mc-subrow__link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   width: 100%;
   height: 56px;
   padding: 12px 24px;
   border: 1.5px solid var(--mc-text);
   border-radius: 64px;
   font-family: var(--mc-sans);
   font-size: 16px;
   color: var(--mc-text);
   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.mc-subrow__link:hover,
.mc-subrow__link:focus-visible {
   background-color: var(--mc-text);
   border-color: var(--mc-text);
   color: var(--mc-white);
}

.mc-subrow__link--disabled {
   pointer-events: none;
   opacity: 0.6;
}

.mc-subrow__badge {
   display: inline-block;
   margin-left: 10px;
   padding: 3px 12px;
   border-radius: 20px;
   font-size: 11px;
   text-transform: uppercase;
   color: var(--mc-white);
}

.mc-subrow__badge--active {
   background: var(--mc-links);
}

.mc-subrow__badge--trial {
   background: var(--mc-text);
}

.mc-subrow__badge--canceled {
   background: var(--mc-red);
}

.mc-subrow__badge--complimentary {
   background: #dfe9e7;
   color: #2f4f4b;
}

.mc-subrow__badge--gift {
   background: rgba(232, 82, 75, 0.14);
   color: #a8332d;
}

.mc-subrow__detail {
   padding: 0 24px;
   font-size: 13px;
   font-weight: 300;
   line-height: 1.5;
   color: rgba(50, 50, 43, 0.85);
}

.mc-subrow__yearly-chip {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   margin-left: auto;
   padding: 7px 14px;
   border-radius: 64px;
   background: var(--mc-red);
   color: var(--mc-white);
   font-family: var(--mc-sans);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.02em;
   white-space: nowrap;
}

.mc-subrow__cancel {
   color: var(--mc-red);
}

.mc-subscription-banner {
   width: 100%;
   padding: 16px 24px;
   border-radius: 20px;
   background: var(--mc-links);
   color: var(--mc-white);
   font-size: 14px;
   font-weight: 300;
   line-height: 1.45;
   text-align: left;
}

/* --- Stripe Elements (update payment method) --------------------------- */

.mc-field__stripe {
   width: 100%;
   min-height: 48px;
   padding: 15px 20px;
   border: 1px solid var(--mc-text);
   border-radius: 16px;
   background: transparent;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mc-field__stripe.StripeElement--focus {
   border-color: var(--mc-red);
   box-shadow: 0 0 0 3px rgba(232, 82, 75, 0.15);
}

.mc-field__stripe.StripeElement--invalid {
   border-color: var(--mc-red);
}

/* --- gift a year --------------------------------------------------------- */

/* Card on the left, form on the right; the two centre together instead of the
   form claiming everything left of a fixed panel as on sign-in. */
.mc-hero--gift {
   justify-content: center;
   gap: 72px;
}

.mc-hero--gift .mc-authcol {
   flex: 0 1 500px;
   padding: 0;
}

.mc-gift__showcase {
   position: relative;
   z-index: 1;
   display: flex;
   flex: 0 1 560px;
   flex-direction: column;
   gap: 28px;
   min-width: 0;
}

.mc-gift__card img {
   display: block;
   width: 100%;
   height: auto;
   /* The card is cut out on a transparent background and sits at a slight
      angle, so a drop-shadow filter (which follows the alpha) rather than a
      box-shadow (which would draw a rectangle around it). */
   filter: drop-shadow(0 24px 32px rgba(50, 50, 43, 0.28)) drop-shadow(0 4px 8px rgba(50, 50, 43, 0.12));
}

.mc-gift__blurb {
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding: 0 24px;
}

.mc-gift__eyebrow {
   font-size: 12px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--mc-links);
}

.mc-gift__heading {
   font-family: var(--mc-serif);
   font-weight: 400;
   font-size: 36px;
   line-height: 1;
}

.mc-gift__heading em {
   font-style: italic;
}

.mc-gift__points {
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-weight: 300;
   font-size: 15px;
   line-height: 1.4;
}

.mc-gift__points li {
   padding-left: 18px;
   position: relative;
}

.mc-gift__points li::before {
   content: '';
   position: absolute;
   top: 0.6em;
   left: 0;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--mc-red);
}

.mc-gift__fineprint {
   font-weight: 300;
   font-size: 12px;
   line-height: 1.45;
   text-align: center;
   color: rgba(50, 50, 43, 0.8);
}

/* Step indicator: Recipient, Account, Payment. */
.mc-steps {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px 24px;
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(74, 89, 90, 0.6);
}

.mc-steps__item {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.mc-steps__item span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   border: 1px solid currentColor;
   border-radius: 50%;
   font-size: 11px;
   letter-spacing: 0;
}

.mc-steps__item.is-active {
   color: var(--mc-text);
}

.mc-steps__item.is-active span {
   border-color: var(--mc-red);
   background: var(--mc-red);
   color: var(--mc-white);
}

.mc-steps__item.is-done span {
   border-color: var(--mc-text);
   background: var(--mc-text);
   color: var(--mc-white);
}

/* Date and multi-line fields, styled like the text inputs above. */
.mc-field input[type="date"],
.mc-field textarea {
   width: 100%;
   padding: 0 20px;
   border: 1px solid var(--mc-text);
   border-radius: 16px;
   background: transparent;
   font-family: var(--mc-sans);
   font-weight: 300;
   font-size: 14px;
   color: var(--mc-charcoal);
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mc-field input[type="date"] {
   height: 48px;
   -webkit-appearance: none;
   appearance: none;
}

.mc-field textarea {
   min-height: 120px;
   padding: 14px 20px;
   line-height: 1.45;
   resize: vertical;
}

.mc-field textarea::placeholder {
   color: rgba(50, 50, 43, 0.8);
}

.mc-field input[type="date"]:focus,
.mc-field textarea:focus {
   border-color: var(--mc-red);
   box-shadow: 0 0 0 3px rgba(232, 82, 75, 0.15);
}

.mc-field__hint {
   font-weight: 300;
   font-size: 12px;
   line-height: 1.35;
   color: rgba(74, 89, 90, 0.8);
}

.mc-field__count {
   font-weight: 300;
   font-size: 12px;
   color: rgba(74, 89, 90, 0.8);
}

.mc-field__label em {
   font-style: normal;
   font-weight: 300;
   color: rgba(74, 89, 90, 0.8);
}

@media (max-width: 1024px) {
   .mc-hero--gift {
      gap: 48px;
   }

   .mc-gift__showcase {
      flex: 0 0 auto;
      width: 100%;
      max-width: 500px;
   }

   .mc-gift__blurb {
      padding: 0;
   }
}

/* Gift payment: the order summary under the card, and Stripe's form. */
.mc-gift__summary {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin: 0;
   padding: 24px 28px;
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.55);
}

.mc-gift__summary-row {
   display: flex;
   justify-content: space-between;
   gap: 24px;
   font-size: 14px;
   line-height: 1.4;
}

.mc-gift__summary-row dt {
   flex: 0 0 auto;
   font-weight: 300;
   color: rgba(74, 89, 90, 0.8);
}

.mc-gift__summary-row dd {
   margin: 0;
   text-align: right;
   overflow-wrap: anywhere;
}

.mc-gift__summary-message {
   font-weight: 300;
   font-style: italic;
   white-space: pre-line;
}

.mc-gift__summary-row--total {
   margin-top: 4px;
   padding-top: 14px;
   border-top: 1px solid rgba(74, 89, 90, 0.25);
   font-size: 18px;
}

.mc-gift__summary-row--total dd {
   font-family: var(--mc-serif);
   font-size: 28px;
   line-height: 1;
}

.mc-gift__summary-row--total s {
   margin-right: 8px;
   font-size: 18px;
   color: rgba(74, 89, 90, 0.6);
}

.mc-gift__summary-row--total small {
   font-family: var(--mc-sans);
   font-size: 12px;
   font-weight: 300;
}

.mc-gift__edit {
   padding: 0 28px;
   font-size: 14px;
}

.mc-gift__payment {
   min-height: 120px;
}

.mc-gift__fineprint a {
   color: inherit;
   text-decoration: underline;
}

/* Gift sent */
.mc-gift__card--small {
   width: 100%;
   max-width: 360px;
}

.mc-gift__lede {
   font-weight: 300;
   font-size: 16px;
   line-height: 1.4;
}

.mc-gift__actions {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
}

/* Gifts you've sent: one block per gift, in the manage-subscription idiom. */
.mc-giftrow {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 16px 24px;
   border: 1.5px solid var(--mc-text);
   border-radius: 48px;
   text-align: left;
}

.mc-giftrow__head {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 4px 10px;
   font-size: 16px;
   color: var(--mc-text);
}

.mc-giftrow__to {
   overflow-wrap: anywhere;
}

.mc-giftrow__head .mc-subrow__badge {
   margin-left: 0;
}

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

@media (max-width: 520px) {
   .mc-giftrow {
      border-radius: 28px;
   }
}