/*
 * CMC Funded site skin: design tokens.
 *
 * Taken from Yunus's new main site (CMC-Funded/cmc-funded-main-page, plugin cmc-main-page 0.3.0):
 * src/styles.css, src/landing/landing.css, src/landing/site-chrome.css, src/landing/brand-typography.css
 * and src/landing/support-page.css. Page files (chrome.css, checkout.css, account.css) use these
 * names and never hard-code a colour, a font or a radius of their own.
 *
 * Contrast, measured against --skin-ink (#101626): text 18.0, text-soft 14.9, text-muted 9.5,
 * text-subtle 6.9, text-faint 4.7, link 8.8, danger 7.9, success 11.0, warning 12.7. White on
 * --skin-azure is 5.0 and on --skin-azure-hover 5.7. --skin-azure is 3.6 on ink, so it is a fill
 * and a border colour only, never text on the page background: links use --skin-link.
 *
 * The fonts are the files the cmc-main-page plugin already serves at /assets/fonts/. If that plugin
 * is not active the stacks fall back to Georgia and Arial; nothing is fetched from a CDN.
 */

@font-face { font-family: "Austin News Deck"; src: url("/assets/fonts/AustinNewsDeck-Roman.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Haas Text"; src: url("/assets/fonts/NHaasGroteskText-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Haas Text"; src: url("/assets/fonts/NHaasGroteskText-Medium.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Neue Haas Text"; src: url("/assets/fonts/NHaasGroteskText-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Neue Haas Display"; src: url("/assets/fonts/NHaasGroteskDisplay-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Haas Display"; src: url("/assets/fonts/NHaasGroteskDisplay-Medium.otf") format("opentype"); font-weight: 600; font-display: swap; }

:root {
  /* Colour: surfaces */
  --skin-ink: #101626;              /* page background, the main site's --ink / --nl-navy */
  --skin-raised: #151d31;           /* a surface one step up */
  --skin-raised-solid: #17213b;     /* card fill when transparency is reduced */
  --skin-paper: #f2f2f2;
  --skin-white: #fff;

  /* Colour: brand and signal */
  --skin-azure: #325fff;            /* buttons, active marks, borders; not text on ink */
  --skin-azure-hover: #2b55f0;
  --skin-brand-blue: #0052ff;
  --skin-teal: #00c7c5;
  --skin-violet: #805cff;

  /* Colour: text on ink */
  --skin-text: #fff;
  --skin-text-soft: #e6eaf2;
  --skin-text-muted: #b3bdd0;
  --skin-text-subtle: #97a1b4;      /* footer copy */
  --skin-text-faint: #798397;       /* footer legal line, 12px */
  --skin-placeholder: #99a5ba;
  --skin-link: #9fb2ff;
  --skin-footer-link: #d9deea;

  /* Colour: states (text on ink, and a tinted fill behind a notice) */
  --skin-danger: #ff8a8a;
  --skin-danger-fill: rgba(255, 138, 138, .1);
  --skin-success: #5fe0b0;
  --skin-success-fill: rgba(95, 224, 176, .1);
  --skin-warning: #ffd27a;
  --skin-warning-fill: rgba(255, 210, 122, .1);
  --skin-info-fill: rgba(50, 95, 255, .14);

  /* Colour: lines, glass and focus */
  --skin-line: rgba(255, 255, 255, .16);
  --skin-line-strong: rgba(209, 221, 255, .24);
  --skin-glass-fill: linear-gradient(145deg, rgba(28, 41, 76, .68), rgba(13, 22, 45, .48));
  --skin-glass-edge: rgba(174, 198, 255, .2);
  --skin-glass-highlight: rgba(255, 255, 255, .1);
  --skin-glass-shadow: 0 28px 80px rgba(1, 7, 24, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
  --skin-glass-blur: blur(24px) saturate(145%);
  --skin-ambient:
    radial-gradient(circle at 20% 30%, rgba(50, 95, 255, .2), transparent 34%),
    radial-gradient(circle at 76% 8%, rgba(77, 167, 255, .12), transparent 28%);
  --skin-focus: #9fb2ff;
  --skin-focus-ring: 0 0 0 3px #080d18, 0 0 0 6px #9fb2ff;

  /* Type */
  --skin-serif: "Austin News Deck", Georgia, serif;          /* headings */
  --skin-sans: "Neue Haas Text", Arial, sans-serif;          /* everything else */
  --skin-sans-display: "Neue Haas Display", Arial, sans-serif;
  --skin-type-display: clamp(2.6rem, 4.8vw, 4.75rem);
  --skin-type-title: clamp(1.75rem, 2.35vw, 2.5rem);
  --skin-type-heading: clamp(1.25rem, 1.6vw, 1.5rem);
  --skin-type-lead: clamp(1.1rem, 1.35vw, 1.25rem);
  --skin-type-body: 1rem;
  --skin-type-small: .875rem;
  --skin-type-micro: .8125rem;
  --skin-type-legal: .75rem;
  --skin-leading-display: .94;
  --skin-leading-title: 1.04;
  --skin-leading-body: 1.42;
  --skin-tracking-display: -.025em;
  --skin-tracking-title: -.012em;
  --skin-weight-regular: 400;
  --skin-weight-strong: 600;

  /* Space and layout */
  --skin-space-1: 4px;
  --skin-space-2: 8px;
  --skin-space-3: 12px;
  --skin-space-4: 16px;
  --skin-space-5: 24px;
  --skin-space-6: 32px;
  --skin-space-7: 48px;
  --skin-space-8: 64px;
  --skin-space-9: 96px;
  --skin-page-pad: clamp(16px, 6vw, 120px);
  --skin-shell: min(1200px, calc(100% - (var(--skin-page-pad) * 2)));
  --skin-shell-wide: min(1380px, calc(100% - clamp(32px, 7vw, 120px)));
  --skin-shell-narrow: min(560px, calc(100% - (var(--skin-page-pad) * 2)));

  /* Radii */
  --skin-radius-sm: 12px;
  --skin-radius-md: 16px;
  --skin-radius-lg: 24px;
  --skin-radius-card: clamp(18px, 2vw, 26px);
  --skin-radius-pill: 999px;

  /* Buttons: .nl-button on the main site */
  --skin-button-height: 52px;
  --skin-button-height-small: 42px;
  --skin-button-pad: 0 24px;
  --skin-button-pad-small: 0 18px;
  --skin-button-bg: var(--skin-azure);
  --skin-button-bg-hover: var(--skin-azure-hover);
  --skin-button-text: #fff;
  --skin-button-shadow: 0 12px 28px rgba(24, 65, 220, .2);
  --skin-button-shadow-hover: 0 16px 34px rgba(24, 65, 220, .28);
  --skin-button-secondary-bg: rgba(255, 255, 255, .06);
  --skin-button-secondary-edge: rgba(255, 255, 255, .28);

  /* Inputs: the support page search field, squared to a field */
  --skin-input-height: 48px;
  --skin-input-pad: 0 16px;
  --skin-input-bg: rgba(8, 14, 30, .58);
  --skin-input-edge: var(--skin-line-strong);
  --skin-input-edge-focus: var(--skin-focus);
  --skin-input-radius: var(--skin-radius-sm);

  /* Header and footer: .nl-header and .nl-footer on the main site */
  --skin-header-height: 72px;
  --skin-header-inset: 18px;
  --skin-header-radius: var(--skin-radius-pill);
  --skin-header-fill: linear-gradient(112deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 44%, rgba(50, 95, 255, .1)), rgba(8, 13, 24, .9);
  --skin-header-edge: rgba(255, 255, 255, .2);
  --skin-header-shadow: 0 18px 50px rgba(2, 6, 16, .28), inset 0 1px rgba(255, 255, 255, .19);
  --skin-header-offset: calc(var(--skin-header-height) + var(--skin-header-inset) * 2);
  --skin-footer-pad: 70px 0 28px;

  /* Motion */
  --skin-ease: ease;
  --skin-duration: .2s;
}

@media (max-width: 700px) {
  :root {
    --skin-header-height: 64px;
    --skin-header-inset: 12px;
    --skin-page-pad: 16px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --skin-glass-fill: var(--skin-raised-solid);
    --skin-glass-shadow: 0 24px 64px rgba(1, 7, 24, .32);
    --skin-glass-blur: none;
  }
}

/* The base every skinned page shares. Page files build on it and do not restate it. */
body.cmc-skin {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  color: var(--skin-text);
  background: var(--skin-ink);
  font-family: var(--skin-sans);
  font-size: var(--skin-type-body);
  line-height: var(--skin-leading-body);
  font-synthesis: none;
}
body.cmc-skin :where(h1, h2) { font-family: var(--skin-serif); font-weight: 400; letter-spacing: var(--skin-tracking-display); }
body.cmc-skin :where(h3) { font-family: var(--skin-serif); font-weight: 400; letter-spacing: var(--skin-tracking-title); }
body.cmc-skin :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--skin-focus); outline-offset: 3px; }

/* No blanket reduced-motion override here: it would also freeze the order page's wave panel, which
   handles reduced motion itself. Each page file wraps its own transitions and animations in
   @media (prefers-reduced-motion: no-preference). */

/* ------------------------------------------------------------------ WooCommerce notices, every skinned page
   A dot and the sentence, in Yunus's colours: no box, no fill, no thick left border (Max, 29 September
   2026). Red for an error, teal for a success, azure for information. checkout.css and account.css
   no longer draw their own notice boxes, so this is the one place that says what a notice looks like.
   Three notices are drawn as something else on purpose and are left out: the empty orders and
   downloads card, the refused pay for order card, and the reset-link-sent label. */
html body.cmc-skin :is(.woocommerce-error, .woocommerce-message, .woocommerce-info):not(.woocommerce-MyAccount-content > .woocommerce-info):not(.woocommerce-order-pay .woocommerce > .woocommerce-error):not(.cmc-acct--lost-password-sent .woocommerce-message) {
  position: relative !important;
  box-sizing: border-box !important;
  margin: 0 0 1rem !important;
  padding: 0 0 0 1.15rem !important;
  color: var(--skin-text-soft) !important;
  font: 400 .92rem/1.5 var(--skin-sans) !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body.cmc-skin .woocommerce-error:not(.woocommerce-MyAccount-content > .woocommerce-info):not(.woocommerce-order-pay .woocommerce > .woocommerce-error):not(.cmc-acct--lost-password-sent .woocommerce-message) { color: #ffc2c2 !important; }
html body.cmc-skin :is(.woocommerce-error, .woocommerce-message, .woocommerce-info):not(.woocommerce-MyAccount-content > .woocommerce-info):not(.woocommerce-order-pay .woocommerce > .woocommerce-error):not(.cmc-acct--lost-password-sent .woocommerce-message)::before {
  content: "" !important;
  position: absolute !important;
  top: .6em !important;
  left: 0 !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  background: var(--skin-teal) !important;
  border-radius: 50% !important;
  -webkit-mask: none !important;
  mask: none !important;
  box-shadow: none !important;
}
html body.cmc-skin .woocommerce-error:not(.woocommerce-MyAccount-content > .woocommerce-info):not(.woocommerce-order-pay .woocommerce > .woocommerce-error):not(.cmc-acct--lost-password-sent .woocommerce-message)::before { background: #ff8f8f !important; }
html body.cmc-skin .woocommerce-info:not(.woocommerce-MyAccount-content > .woocommerce-info):not(.woocommerce-order-pay .woocommerce > .woocommerce-error):not(.cmc-acct--lost-password-sent .woocommerce-message)::before { background: #8ea5ff !important; }
html body.cmc-skin .woocommerce-error:not(.woocommerce-MyAccount-content > .woocommerce-info):not(.woocommerce-order-pay .woocommerce > .woocommerce-error):not(.cmc-acct--lost-password-sent .woocommerce-message) li { margin: 0 !important; padding: 0 !important; color: inherit !important; list-style: none !important; }
html body.cmc-skin .woocommerce-error:not(.woocommerce-MyAccount-content > .woocommerce-info):not(.woocommerce-order-pay .woocommerce > .woocommerce-error):not(.cmc-acct--lost-password-sent .woocommerce-message) li + li { margin-top: .3rem !important; }
/* The error notice is a <div class="woocommerce-error" role="alert"> around a plain <ul> on skinned
   pages (cmc-site-skin/notices-error.php), so the inner list takes no space of its own. */
html body.cmc-skin .woocommerce-error > ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
html body.cmc-skin :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) a:not(.button) { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
html body.cmc-skin :is(.woocommerce-error, .woocommerce-message, .woocommerce-info):focus { outline: none; }

/* ------------------------------------------------------------------ the "confirm your email" gate
   cmc-site-skin/verify-email.php: WooCommerce's verify form on order received and pay for order,
   as a centred glass card. */
html body.cmc-skin .cmc-skin-verify { display: flex; justify-content: center; padding: clamp(1rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); }
html body.cmc-skin .cmc-skin-verify__card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 !important;
  padding: clamp(1.6rem, 4vw, 2.5rem) !important;
  color: var(--skin-text) !important;
  background: radial-gradient(circle at 100% 0, rgba(50, 95, 255, .14), transparent 48%), linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025)), rgba(10, 17, 34, .62) !important;
  border: 1px solid rgba(209, 221, 255, .18) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 64px rgba(2, 6, 20, .2), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
}
html body.cmc-skin .cmc-skin-verify__title { margin: 0 !important; color: var(--skin-text) !important; font: 400 clamp(2rem, 3.4vw, 2.6rem)/1 var(--skin-serif) !important; letter-spacing: -.03em !important; }
html body.cmc-skin .cmc-skin-verify__lead { margin: .9rem 0 1.6rem !important; color: var(--skin-text-muted) !important; font: 400 1rem/1.5 var(--skin-sans) !important; }
html body.cmc-skin .cmc-skin-verify__lead a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
html body.cmc-skin .cmc-skin-verify .form-row { display: block !important; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
html body.cmc-skin .cmc-skin-verify label { display: block !important; margin: 0 0 .55rem !important; color: var(--skin-text-muted) !important; font: 400 .72rem/1.2 var(--skin-sans) !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
html body.cmc-skin .cmc-skin-verify label .required { color: var(--skin-text-muted) !important; text-decoration: none !important; }
html body.cmc-skin .cmc-skin-verify input.input-text {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  color: #fff !important;
  font: 400 1rem/1.2 var(--skin-sans) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035)), rgba(8, 14, 30, .58) !important;
  border: 1px solid rgba(209, 221, 255, .18) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html body.cmc-skin .cmc-skin-verify input.input-text:focus { border-color: #8ea5ff !important; outline: none; box-shadow: 0 0 0 3px rgba(50, 95, 255, .35) !important; }
html body.cmc-skin .cmc-skin-verify input.input-text[aria-invalid="true"] { border-color: rgba(255, 143, 143, .6) !important; }
/* AUTOFILLED FIELDS STAY READABLE on every other skinned form: sign in, lost password, My Account and
   the email check (Fable checkout critique mobile-02, 30 September 2026). Safari's pale yellow and
   Chrome's pale blue autofill grounds are covered by an inset shadow in the fields' own dark fill, and
   the text stays white, as a typed value. The email check field has a stronger rule of its own above,
   so it gets its own line here. The checkout's billing fields carry the same fix in checkout.css. */
html body.cmc-skin :is(input, textarea):-webkit-autofill,
html body.cmc-skin :is(input, textarea):-webkit-autofill:focus,
html body.cmc-skin .cmc-skin-verify input.input-text:-webkit-autofill,
html body.cmc-skin .cmc-skin-verify input.input-text:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1000px #131b33 !important;
}
html body.cmc-skin .cmc-skin-verify__error { position: relative; margin: .7rem 0 0 !important; padding: 0 0 0 1.15rem !important; color: #ffc2c2 !important; font: 400 .88rem/1.45 var(--skin-sans) !important; }
html body.cmc-skin .cmc-skin-verify__error::before { content: ""; position: absolute; top: .6em; left: 0; width: 6px; height: 6px; background: #ff8f8f; border-radius: 50%; }
html body.cmc-skin .cmc-skin-verify .form-row.cmc-skin-verify__submit { margin-top: 1.4rem !important; }
html body.cmc-skin .cmc-skin-verify button[name="verify"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: .6rem !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  color: #fff !important;
  font: 600 1rem/1 var(--skin-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: #325fff !important;
  border: 1px solid #325fff !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgba(24, 65, 220, .2) !important;
  cursor: pointer;
}
html body.cmc-skin .cmc-skin-verify button[name="verify"]:hover,
html body.cmc-skin .cmc-skin-verify button[name="verify"]:focus-visible { background: #3d67ff !important; border-color: #3d67ff !important; }
@media (max-width: 520px) { html body.cmc-skin .cmc-skin-verify button[name="verify"] { width: 100% !important; justify-content: center !important; } }