@font-face {
  font-family: "Marlide Display";
  src: url("./fonts/MarlideDisplay-Regular.woff2") format("woff2"), url("./fonts/MarlideDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marlide Display";
  src: url("./fonts/MarlideDisplay-Medium.woff2") format("woff2"), url("./fonts/MarlideDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marlide Display";
  src: url("./fonts/MarlideDisplay-Medium.woff2") format("woff2"), url("./fonts/MarlideDisplay-Medium.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marlide Display";
  src: url("./fonts/MarlideDisplay-Medium.woff2") format("woff2"), url("./fonts/MarlideDisplay-Medium.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Marlide Fallback";
  src: local("Times New Roman"), local("Liberation Serif");
  font-weight: 400;
  size-adjust: 79.58%;
  ascent-override: 113.33%;
  descent-override: 28.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Marlide Fallback";
  src: local("Times New Roman"), local("Liberation Serif");
  font-weight: 500 700;
  size-adjust: 86.56%;
  ascent-override: 104.194%;
  descent-override: 26.571%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Regular.woff2") format("woff2"), url("./fonts/MinionPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: fallback;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-SemiboldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: fallback;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: fallback;
}

@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Minion Pro";
  src: url("./fonts/MinionPro-LightIt.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: fallback;
}

@font-face {
  font-family: "Minion Fallback";
  src: local("Times New Roman"), local("Liberation Serif");
  font-weight: 400;
  size-adjust: 98%;
  ascent-override: 74.184%;
  descent-override: 27.857%;
  line-gap-override: 20.408%;
}
@font-face {
  font-family: "Minion Fallback";

  src: local("Times New Roman Bold"), local("Liberation Serif Bold"), local("Times New Roman");
  font-weight: 700;
  size-adjust: 97.84%;
  ascent-override: 74.305%;
  descent-override: 27.903%;
  line-gap-override: 20.442%;
}
@font-face {
  font-family: "NHaas Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  font-weight: 400;
  size-adjust: 103.63%;
  ascent-override: 78.935%;
  descent-override: 17.562%;
  line-gap-override: 19.299%;
}
@font-face {
  font-family: "NHaas Fallback";

  src: local("Arial Bold"), local("Liberation Sans Bold"), local("Helvetica Bold"), local("Arial");
  font-weight: 700;
  size-adjust: 102.29%;
  ascent-override: 79.969%;
  descent-override: 17.793%;
  line-gap-override: 19.552%;
}

@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-Roman.woff2") format("woff2"), url("./assets/fonts/NeueHaasGroteskDisplayPro-Roman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-RomanItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
}
@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-Medium.woff2") format("woff2"), url("./assets/fonts/NeueHaasGroteskDisplayPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: fallback;
}
@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-Bold.woff2") format("woff2"), url("./assets/fonts/NeueHaasGroteskDisplayPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "NHaasGroteskDSPro";
  src: url("./assets/fonts/NeueHaasGroteskDisplayPro-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: fallback;
}

:root {

  --coastal-900: #26304a;
  --coastal-800: #3b4f6e;
  --coastal-700: #5c7d9e;
  --coastal-600: #6b94ba;
  --coastal-500: #6b94ba;
  --coastal-400: #89adc8;
  --coastal-300: #a7c4d8;
  --coastal-200: #c9dce8;
  --coastal-100: #e8f0f5;
  --coastal-50:  #f4f8fb;

  --sand-50:  #fdfcfa;
  --sand-100: #faf7f2;
  --sand-200: #f3ede4;
  --sand-300: #e5ddd0;
  --sand-400: #d1c5b4;
  --sand-500: #b5a895;

  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e8e8e8;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --white:    #ffffff;

  --off-white: var(--gray-50);
  --web-gray:  #e6e7e8;

  --stage-alpha: #EDB4CB;

  --ink-faded: #7e95ae;

  --success: #22c55e;
  --warning: #f59e0b;
  --error:   #ef4444;
  --info:    var(--coastal-600);

  --success-tint: color-mix(in srgb, var(--success) 15%, #fff);
  --success-ink:  color-mix(in srgb, var(--success) 55%, #14161b);

  --success-press: color-mix(in oklab, var(--success-ink) 65%, var(--coastal-900));
  --warning-tint: color-mix(in srgb, var(--warning) 16%, #fff);
  --warning-ink:  color-mix(in srgb, var(--warning) 50%, #14161b);
  --danger-tint:  color-mix(in srgb, var(--error) 14%, #fff);
  --danger-ink:   color-mix(in srgb, var(--error) 55%, #14161b);

  --success-ink-dark: #a9d6b8;
  --danger-ink-dark:  #f2b8b5;

  --deep-navy:        #1b2336;

  --ink-text:            var(--coastal-800);
  --ink-display:         var(--coastal-800);
  --ink-muted:           var(--coastal-800);
  --ink-secondary:       var(--coastal-800);
  --ink-rule:            var(--coastal-800);
  --ink-compliance:      var(--coastal-800);

  --ink-link:            var(--coastal-800);
  --ink-link-hover:      var(--coastal-800);
  --ink-link-line:       var(--coastal-600);
  --ink-link-line-hover: var(--coastal-800);

  --kicker-ink:          var(--coastal-800);
  --kicker-case:         none;
  --kicker-tracking:     0.02em;
  --kicker-features:     normal;

  --weight-body:         var(--weight-regular);
  --weight-lead:         var(--weight-medium);
  --weight-strong:       var(--weight-bold);
  --weight-display:      var(--weight-medium);
  --weight-credentials:  var(--weight-medium);
  --weight-compliance:   var(--weight-regular);
  --lead-style:          normal;

  --panel-light:         var(--off-white);
  --stand-in-fog:        var(--off-white);
  --stand-in-cream:      var(--off-white);
  --stand-in-cream-panel: var(--white);
  --stand-in-lightblue:  var(--off-white);
  --stand-in-lightblue-rule: var(--ink-rule);
  --ink-faded-on-white:  var(--coastal-600);
  --ink-faded-on-tint:   var(--coastal-600);

  --on-dark-display:     var(--off-white);
  --on-dark-text:        var(--white);
  --on-dark-muted:       var(--white);
  --on-dark-accent:      var(--white);
  --on-dark-accent-soft: var(--coastal-600);
  --on-dark-rule:        var(--coastal-600);
  --on-dark-panel-rule:  var(--coastal-600);
  --on-dark-disclosure:  var(--white);
  --on-dark-link-line:   var(--coastal-600);
  --on-dark-sub:         rgba(250, 250, 250, 0.9);
  --panel-navy:          var(--surface-ink);

  --label-font:          var(--font-body-serif);
  --label-weight:        var(--weight-medium);
  --label-tracking:      0.1em;
  --label-case:          none;
  --btn-radius:          var(--radius-none);
  --btn-font:            var(--font-body-serif);
  --btn-weight:          var(--weight-medium);
  --btn-tracking:        0.08em;
  --btn-case:            none;
  --btn-fill-navy:       var(--coastal-900);
  --btn-fill-sky:        var(--coastal-600);
  --btn-ink-filled:      var(--white);
  --btn-keyline-line:    var(--coastal-600);
  --btn-keyline-ink:     var(--coastal-900);
  --btn-hover-fill:      var(--coastal-800);
  --btn-keyline-hover-fill: var(--coastal-600);

  --press-tint:          var(--coastal-200);

  --type-text:           var(--size-base);
  --type-ratio:          2;

  --cw-ink:              #14161B;
  --cw-graphite:         var(--gray-600);
  --cw-mute:             var(--gray-400);
  --cw-line:             var(--gray-200);
  --cw-line-soft:        var(--gray-100);
  --cw-navy-soft:        #9AA8BE;
  --cw-navy-deep:        #1b2336;
  --cw-cream:            var(--sand-100);
  --surface-ink:         #1b2336;
  --info-tint:           color-mix(in srgb, var(--info) 15%, #fff);
  --info-ink:            color-mix(in srgb, var(--info) 55%, #14161b);

  --cw-blue:           var(--coastal-600);
  --cw-blue-soft:      var(--coastal-400);
  --cw-blue-air:       var(--coastal-300);
  --cw-blue-mist:      var(--coastal-200);
  --cw-blue-paper:     var(--coastal-100);

  --cw-navy:           var(--coastal-900);

  --cw-masthead-grad-a: var(--cw-navy);
  --cw-masthead-grad-b: var(--cw-navy);
  --cw-masthead-grad:   linear-gradient(135deg, var(--cw-masthead-grad-a) 0%, var(--cw-masthead-grad-b) 100%);

  --cw-chrome-glass:        rgb(38, 48, 74);
  --cw-chrome-glass-filter: none ;
  --cw-shade:               #26304a;

  --cw-cream-soft:     var(--sand-50);
  --cw-fog:            var(--coastal-50);

  --cw-white:          var(--white);

  --cw-success:        var(--success);
  --cw-warning:        var(--warning);
  --cw-danger:         var(--error);

  --cw-link:           var(--ink-link) ;
  --cw-blue-ink:       var(--ink-link);
  --cw-fog-soft:       var(--coastal-50);
  --cw-navy-ink:       var(--ink-text);

  --cw-desk:           var(--gray-300);

  --bg:                var(--cw-white);

  --fg1:               var(--cw-navy-ink);
  --fg2:               var(--ink-secondary);
  --fg3:               var(--ink-muted);

  --line:              var(--cw-line);
  --line-soft:         var(--cw-line-soft);

  --surface-cream:     var(--sand-100);
  --surface-fog:       var(--coastal-50);
  --surface-white:     var(--white);
  --surface-paper:     var(--coastal-100);
  --surface-paper-line:var(--coastal-200);
  --surface-navy:      var(--coastal-900);
  --surface-web-gray:  var(--web-gray) ;

  --font-display:      "Marlide Display", "Marlide Fallback", serif;
  --font-body-serif:   "Minion Pro", "Minion Fallback", serif;
  --font-ui:           "NHaasGroteskDSPro", "NHaas Fallback", sans-serif;

  --font-serif:        var(--font-body-serif);
  --font-body:         var(--font-body-serif);
  --font-sans:         var(--font-ui);
  --font-mono:         ui-monospace, monospace;

  --size-xs:           0.8125rem;
  --size-sm:           0.9375rem;
  --size-base:         1.0625rem;
  --size-md:           1.25rem;
  --size-lg:           1.5rem;
  --size-xl:           1.875rem;
  --size-2xl:          2.5rem;
  --size-3xl:          3.5rem;
  --size-4xl:          4.75rem;
  --size-5xl:          6.75rem;

  --text-hero:         clamp(52px, 6vw, 84px);

  --text-slide-headline: 56px;
  --text-display:      48px;
  --text-heading:      28px;
  --text-subheading:   20px;
  --text-body-lg:      18px;
  --text-body:         16px;
  --text-body-sm:      14px;
  --text-caption:      12px;
  --text-overline:     11px;
  --text-micro:        10px;

  --leading-tight:     1.05;
  --leading-snug:      1.2;
  --leading-normal:    1.5;
  --leading-loose:     1.65;
  --leading-hero:      0.94;
  --leading-slide-headline: 1.08;
  --leading-display:   1.05;
  --leading-heading:   1.25;
  --leading-subhead:   1.4;
  --leading-body:      1.65;
  --leading-body-serif:1.75;
  --leading-relaxed:   1.8;

  --tracking-tight:    -0.02em;
  --tracking-display:  -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.5px;
  --tracking-wider:    2px;
  --tracking-widest:   3px;
  --tracking-eyebrow:  0.28em;

  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  --photo-duotone:        grayscale(1) contrast(1.08) brightness(0.72) ;
  --photo-duotone-light:  grayscale(1) contrast(1.04) brightness(1.02) ;
  --photo-scrim:          grayscale(1) contrast(1.05) brightness(0.7) ;
  --photo-duotone-banner: grayscale(1) contrast(1.1) brightness(1.04) ;

  --photo-scrim-color:    contrast(1.05) brightness(0.7) ;

  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           24px;
  --space-6:           32px;
  --space-7:           48px;
  --space-8:           64px;
  --space-9:           96px;
  --space-10:          128px;
  --space-11:          192px;

  --radius-none:       0px;
  --radius-sm:         2px;
  --radius-md:         4px;
  --radius-lg:         8px;
  --radius-full:       9999px;

  --shadow-sm:         0 1px 3px rgba(38, 48, 74, 0.04);
  --shadow-md:         0 4px 16px rgba(38, 48, 74, 0.06);
  --shadow-lg:         0 12px 40px rgba(38, 48, 74, 0.08);
  --shadow-xl:         0 24px 64px rgba(38, 48, 74, 0.12);
  --shadow-1:          var(--shadow-sm);
  --shadow-2:          var(--shadow-md);
  --shadow-3:          var(--shadow-xl);

  --shadow-ring:       0 0 0 1px rgba(38, 48, 74, 0.08);
  --shadow-ring-sm:    var(--shadow-ring), var(--shadow-sm);
  --shadow-ring-md:    var(--shadow-ring), var(--shadow-md);
  --shadow-ring-lg:    var(--shadow-ring), var(--shadow-lg);
  --shadow-ring-xl:    var(--shadow-ring), var(--shadow-xl);

  --grad-navy-cover:   linear-gradient(160deg, var(--coastal-600) 0%, var(--coastal-800) 35%, var(--coastal-900) 70%) ;
  --grad-navy-deep:    linear-gradient(135deg, var(--coastal-800) 0%, var(--coastal-900) 50%) ;

  --max-width-content: 1200px;
  --max-width-text:    680px;
  --max-width-narrow:  480px;

  --z-base:            1;
  --z-card:            2;
  --z-nav:             10;
  --z-overlay:         100;
  --z-modal:           200;

  --focus-ring:        2px solid var(--coastal-700);
  --focus-ring-offset: 2px;

  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:     200ms;
  --duration-normal:   400ms;
  --ease-coastal:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover:         180ms;

}

html[data-portal-page],
html[data-app-page] {
  --ink-text:            var(--coastal-900);
  --ink-display:         var(--coastal-900);

  --ink-muted:           var(--coastal-800);
  --ink-secondary:       var(--coastal-800);
  --ink-rule:            var(--coastal-200);
  --ink-compliance:      var(--coastal-800);
  --ink-link:            var(--coastal-700);
  --ink-link-hover:      var(--coastal-700);
  --ink-link-line:       var(--coastal-600);
  --ink-link-line-hover: var(--coastal-900);
  --kicker-ink:          var(--coastal-800);
  --kicker-case:         uppercase;
  --kicker-tracking:     var(--tracking-eyebrow);
  --kicker-features:     "smcp" on;
  --weight-body:         var(--weight-regular);
  --weight-lead:         var(--weight-regular);
  --weight-strong:       bolder;
  --weight-display:      var(--weight-medium);
  --weight-credentials:  var(--weight-medium);
  --weight-compliance:   var(--weight-regular);
  --lead-style:          italic;
  --panel-light:         var(--coastal-50);
  --stand-in-fog:        var(--coastal-50);
  --stand-in-cream:      var(--coastal-50);
  --stand-in-cream-panel: var(--white);
  --stand-in-lightblue:  var(--coastal-100);
  --stand-in-lightblue-rule: var(--coastal-200);

  --ink-faded-on-white:  var(--coastal-600);
  --ink-faded-on-tint:   var(--coastal-700);
  --on-dark-display:     var(--white);
  --on-dark-text:        #FFFFFF;
  --on-dark-muted:       rgba(255, 255, 255, 0.88);
  --on-dark-accent:      var(--coastal-300);
  --on-dark-accent-soft: var(--coastal-400);
  --on-dark-rule:        rgba(167, 196, 216, 0.28);
  --on-dark-panel-rule:  rgba(167, 196, 216, 0.25);
  --on-dark-disclosure:  rgba(255, 255, 255, 0.78);
  --on-dark-link-line:   var(--coastal-400);
  --on-dark-sub:         rgba(232, 240, 245, 0.9);

  --panel-navy:          var(--surface-ink);

  --cw-ink:              var(--coastal-900);
  --cw-graphite:         var(--coastal-800);
  --cw-mute:             var(--coastal-700);
  --cw-line:             var(--coastal-200);
  --cw-line-soft:        var(--coastal-100);
  --cw-navy-soft:        var(--coastal-400);
  --cw-navy-deep:        var(--coastal-800);
  --cw-cream:            var(--coastal-50);
  --surface-ink:         var(--coastal-900);
  --info-tint:           var(--coastal-100);
  --info-ink:            var(--coastal-800);
  --label-font:          var(--font-ui);
  --label-weight:        var(--weight-bold);
  --label-tracking:      0.12em;
  --label-case:          uppercase;
  --btn-radius:          var(--radius-sm);
  --btn-font:            var(--font-ui);
  --btn-weight:          var(--weight-semibold);
  --btn-tracking:        0.06em;
  --btn-case:            uppercase;
  --btn-fill-navy:       var(--coastal-900);
  --btn-fill-sky:        var(--coastal-600);
  --btn-ink-filled:      var(--white);
  --btn-keyline-line:    var(--coastal-600);
  --btn-keyline-ink:     var(--coastal-900);
  --btn-hover-fill:      var(--coastal-800);
  --btn-keyline-hover-fill: var(--coastal-600);
  --press-tint:          var(--coastal-200);
  --type-text:           var(--size-base);
  --type-ratio:          2;
}

html[data-portal-page][data-theme="dark"] {
  color-scheme: dark;
  --white:        light-dark(#ffffff, #26304a);

  --coastal-50:   light-dark(#f4f8fb, var(--deep-navy));
  --coastal-100:  light-dark(#e8f0f5, rgb(137 173 200 / 0.12));
  --coastal-200:  light-dark(#c9dce8, rgb(167 196 216 / 0.24));
  --coastal-300:  light-dark(#a7c4d8, #5c7d9e);
  --coastal-400:  light-dark(#89adc8, #5c7d9e);
  --coastal-700:  light-dark(#5c7d9e, #a7c4d8);
  --coastal-800:  light-dark(#3b4f6e, #c9dce8);
  --coastal-900:  light-dark(#26304a, #e8f0f5);
  --success-tint: light-dark(color-mix(in srgb, var(--success) 15%, #fff), color-mix(in srgb, var(--success) 12%, transparent));
  --warning-tint: light-dark(color-mix(in srgb, var(--warning) 16%, #fff), color-mix(in srgb, var(--warning) 12%, transparent));
  --danger-tint:  light-dark(color-mix(in srgb, var(--error) 14%, #fff), color-mix(in srgb, var(--error) 12%, transparent));
  --success-ink:  light-dark(color-mix(in srgb, var(--success) 55%, #14161b), var(--success-ink-dark));

  --success-press: light-dark(color-mix(in oklab, var(--success-ink) 65%, var(--coastal-900)), color-mix(in oklab, var(--success-ink-dark) 80%, var(--deep-navy)));
  --warning-ink:  light-dark(color-mix(in srgb, var(--warning) 50%, #14161b), var(--warning));
  --danger-ink:   light-dark(color-mix(in srgb, var(--error) 55%, #14161b), var(--danger-ink-dark));
  --shadow-ring:  0 0 0 1px light-dark(rgba(38, 48, 74, 0.08), rgb(167 196 216 / 0.14));
  --cw-shade:     light-dark(#26304a, #14161b);
  --cw-desk:      light-dark(var(--gray-300), var(--deep-navy));
}

html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-body-serif);
  font-weight: var(--weight-body);
  font-size: var(--size-base);
  line-height: var(--leading-loose);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

b, strong {
  font-weight: var(--weight-strong);
}

button, input, select, textarea,
.chip, .badge, .tag, .pill, .syschip,
.toc, .toc a, .qa-floatcat, .qa-floatcat a,
.rcp-card, .hsw-modal-x, .rcp-lb-close {
  font-family: var(--label-font);
}

:where(button, [role="button"], summary, input:is([type="button"], [type="submit"], [type="reset"])) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

h1, .h1, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-display);
  text-wrap: balance;
}

.display-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(3rem, 9vw, var(--size-5xl));
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink-display);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-display);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-body-serif);
  font-weight: 400;
  font-size: var(--size-xl);
  line-height: var(--leading-snug);
  color: var(--ink-display);
}

h4, .h4 {
  font-family: var(--font-body-serif);
  font-weight: 400;
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--ink-display);
}

p, .body {
  font-family: var(--font-body-serif);
  font-size: var(--size-base);
  line-height: var(--leading-loose);
  color: var(--fg1);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body-serif);
  font-weight: var(--weight-lead);
  font-size: var(--size-md);
  line-height: 1.55;
  color: var(--fg1);
  font-style: var(--lead-style);
}

.eyebrow {
  font-family: var(--font-body-serif);
  font-size: var(--size-sm);
  letter-spacing: var(--kicker-tracking);
  text-transform: var(--kicker-case);
  color: var(--kicker-ink);
  font-feature-settings: var(--kicker-features);
}

.cw-kicker {
  font-family: var(--font-body-serif);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  letter-spacing: var(--kicker-tracking);
  text-transform: var(--kicker-case);
  color: var(--g-eyebrow, var(--kicker-ink));
  font-feature-settings: var(--kicker-features);
}

.num { font-variant-numeric: tabular-nums; }

.caption {
  font-family: var(--font-body-serif);
  font-size: var(--size-sm);
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.45;
}

.pull-quote {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-2xl);
  line-height: 1.15;
  font-style: italic;
  color: var(--ink-display);
}

a {
  color: var(--ink-text);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--ink-link-line);
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--ink-link-hover);
    text-decoration-color: var(--ink-link-line-hover);
  }
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-7) 0;
}

:root {
  --selection-bg: var(--cw-navy);
  --selection-ink: var(--cw-cream);
}
::selection {
  background: var(--selection-bg);
  color: var(--selection-ink);
}
.surface-navy, .surface-ink,
.mast, .qa-banner,
[data-ground="Navy"],
[data-ground="Logo Blue"] {
  --selection-bg: var(--cw-blue-soft);
  --selection-ink: var(--cw-navy);
}

.surface-cream { background: var(--surface-cream); color: var(--cw-navy-ink); }
.surface-fog   { background: var(--surface-fog);   color: var(--cw-navy-ink); }
.surface-white { background: var(--surface-white); color: var(--cw-navy-ink); }
.surface-paper { background: var(--surface-paper); color: var(--cw-navy-ink); }
.surface-paper .hairline,
.surface-paper hr { border-color: var(--surface-paper-line); }
.surface-navy  { background: var(--surface-navy);  color: #FFFFFF; }
.surface-ink   { background: var(--surface-ink);   color: #FFFFFF; }

.surface-navy h1, .surface-navy h2, .surface-navy h3, .surface-navy .display, .surface-navy .display-hero,.surface-ink  h1, .surface-ink  h2, .surface-ink  h3, .surface-ink  .display, .surface-ink  .display-hero { color: #FFFFFF; }
.surface-navy p, .surface-navy .body, .surface-navy .lead,
.surface-ink  p, .surface-ink  .body, .surface-ink  .lead { color: rgba(255, 255, 255, 0.88); }
.surface-navy .eyebrow, .surface-ink .eyebrow { color: var(--cw-blue-air); opacity: 1; }
.surface-navy a, .surface-ink a { color: #FFFFFF; text-decoration-color: var(--cw-blue-soft); }

.surface-navy.warm p, .surface-navy.warm .body, .surface-navy.warm .lead,
.surface-ink.warm  p, .surface-ink.warm  .body, .surface-ink.warm  .lead { color: rgba(245, 239, 230, 0.86); }

.navy-depth, .navy-depth--deep { background-color: var(--coastal-900); }
.navy-depth { background-image: var(--grad-navy-cover); }
.navy-depth--deep { background-image: var(--grad-navy-deep); }
@media print {
  .navy-depth, .navy-depth--deep { background-image: none; background-color: var(--coastal-900); }
}

.eyebrow-compass { display: inline-flex; align-items: center; gap: 0.7em; }
.eyebrow-compass::before {
  content: "";
  width: 1.25em; height: 1.25em;
  background: url("./assets/compass-star-navy.png") center/contain no-repeat;
  flex: 0 0 auto;
}
.surface-navy .eyebrow-compass::before,
.surface-ink .eyebrow-compass::before { display: none; }

.display-pair .display,
.display-pair .display-hero { margin-bottom: 0.28em; }
.cardo-sub {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--size-lg);
  line-height: 1.4;
  color: var(--fg1);
}
.surface-navy .cardo-sub, .surface-ink .cardo-sub { color: var(--on-dark-sub); }

.display .accent-blue, .display-hero .accent-blue, h1 .accent-blue, h2 .accent-blue {
  font-style: italic;
  color: var(--cw-blue-ink);
}
.surface-navy .accent-blue, .surface-ink .accent-blue { color: var(--cw-blue-air); }

.num-badge {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--cw-navy); color: var(--on-dark-display);
  font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-xl);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}

.rag { padding: 8px 0; text-align: center; font-family: var(--font-body-serif);
  font-size: var(--size-xs); letter-spacing: 0.22em; text-transform: uppercase; }
.rag-ahead   { background: var(--success-tint); color: var(--success-ink); }
.rag-onpace  { background: var(--warning-tint); color: var(--warning-ink); }
.rag-behind  { background: var(--danger-tint);  color: var(--danger-ink); }
.rag-climb   { background: var(--info-tint);    color: var(--info-ink); }

.cw-compliance {
  font-weight: var(--weight-compliance);
  color: var(--g-disclosure, var(--ink-compliance));
}

.cw-btn--filled-navy, .cw-btn--filled-sky, .cw-btn--keyline {
  display: inline-block;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.7em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--btn-font);
  font-weight: var(--btn-weight);
  font-size: var(--size-sm);
  line-height: 1.2;
  letter-spacing: var(--btn-tracking);
  text-transform: var(--btn-case);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.cw-btn--filled-navy { background: var(--btn-fill-navy); border-color: var(--btn-fill-navy); color: var(--btn-ink-filled); }
.cw-btn--filled-sky { background: var(--btn-fill-sky); border-color: var(--btn-fill-sky); color: var(--btn-ink-filled); }
.cw-btn--keyline { background: transparent; border-color: var(--btn-keyline-line); color: var(--btn-keyline-ink); text-transform: lowercase; }

:is(.cw-btn--filled-navy, .cw-btn--filled-sky):is(:hover, :active) {
  background: var(--btn-hover-fill); border-color: var(--btn-hover-fill); color: var(--btn-ink-filled); text-decoration: none;
}
:is(.cw-btn--keyline):is(:hover, :active) {
  background: var(--btn-keyline-hover-fill); border-color: var(--btn-keyline-line); color: var(--btn-keyline-ink); text-decoration: none;
}
:is(.cw-btn--filled-navy, .cw-btn--filled-sky, .cw-btn--keyline):focus-visible {
  outline: 2px solid var(--btn-keyline-line); outline-offset: 2px;
}

.t-text { font-size: var(--type-text); }
.t-h2 { font-size: calc(var(--type-text) * var(--type-ratio)); }
.t-h1 { font-size: calc(var(--type-text) * var(--type-ratio) * var(--type-ratio)); }