/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/flashsuite/src/styles.scss?ngGlobalStyle ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Keep CDK overlay prebuilt CSS imported at app styles entrypoints. */
@font-face {
  font-family: "Inter";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  /* --font-weight-normal */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  /* Adjust path */
  src: url("/assets/fonts/inter/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  /* --font-weight-medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  /* Adjust path */
  src: url("/assets/fonts/inter/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  /* --font-weight-bold */
  font-style: normal;
  font-display: swap;
}
/* --- END Default Font --- */
/* --- ADDED: @font-face rules for Circular font --- */
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Book.woff2") format("woff2");
  font-weight: 400;
  /* Corresponds to --font-weight-normal */
  font-style: normal;
  font-display: swap;
  /* Use swap for better perceived performance */
}
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Medium.woff2") format("woff2");
  font-weight: 500;
  /* Corresponds to --font-weight-medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Bold.woff2") format("woff2");
  font-weight: 700;
  /* Corresponds to --font-weight-bold */
  font-style: normal;
  font-display: swap;
}
/* --- END ADDED: @font-face rules --- */
/* ========================================================================== */
/* Variables                                                                  */
/* ========================================================================== */
:root {
  /* --- Journee Palette --- */
  --background-color-base: #F5F4F0;
  --background-color-accent: #4A4441;
  /* Dark Brown */
  --text-color-on-base: #212529;
  /* Default dark text on light cream */
  --text-color-on-accent: #f5f4f0;
  /* Light text on dark brown */
  /* --- Core Palette & Text --- */
  --background-color: var(--background-color-base);
  --text-color: #212529;
  /* Darker grey */
  --text-color-inverse: #ffffff;
  --contrast-aa: #5A5A5A;
  /* WCAG-AA compliant grey text */
  --text-secondary-color: var(--contrast-aa);
  --icon-color: var(--contrast-aa);
  /* Default icon color set to neutral grey */
  --border-color: #dee2e6;
  --highlight-color: #ffffff;
  /* --- Global Semantic Colors --- */
  --primary-color: #429546;
  /* Green */
  --primary-color-hover: #3a823e;
  --primary-color-rgb: 66, 149, 70;
  --secondary-color: #d14541;
  /* Red */
  --secondary-color-hover: #b83b37;
  --error-color: #b00020;
  --error-text-color: var(--error-color);
  --error-background-color: #fbe9e7;
  --warning-color: #ffa500;
  --success-color: #28a745;
  --success-background-color: #dff0d8;
  --success-text-color: #3c763d;
  --success-border-color: #d6e9c6;
  /* --- Component Accent Colors --- */
  --component-accent-color: var(--primary-color);
  /* Default accent to primary green */
  /* --- Invalid Input Border Color --- */
  --invalid-input-border-color: var(--warning-color);
  /* Use warning color for border by default */
  /* --- Overridable Variables for Buttons & Interactions --- */
  /* Marketing can override these via ts_page_configs.metadata.styleOverrides */
  --button-primary-text-override: var(--wp-surface);
  --button-primary-bg-override: var(--wp-accent);
  --button-secondary-bg-override: var(--wp-light);
  --button-primary-hover-bg-override: var(--wp-accent);
  --button-primary-rgb-override: var(--wp-accent-rgb);
  --button-secondary-border-override: var(--wp-accent);
  --button-secondary-text-override: var(--wp-accent);
  --button-secondary-hover-bg-override: rgba(var(--wp-accent-rgb), 0.1);
  --button-secondary-hover-text-override: var(--wp-ink);
  --button-text-color-override: var(--wp-accent);
  --button-text-hover-bg-override: rgba(var(--wp-accent-rgb), 0.1);
  --language-selector-focus-border-override: var(--wp-accent);
  --language-selector-focus-shadow-rgb-override: var(--wp-accent-rgb);
  /* Default: Dark Brown RGB */
  /* --- Implementation Variables --- */
  --primary-button-background: var(--button-primary-bg-override);
  --secondary-button-background: var(--button-secondary-bg-override);
  --primary-button-hover-background: var(--button-primary-hover-bg-override);
  --button-text-color: var(--button-primary-text-override);
  --language-selector-focus-border: var(--language-selector-focus-border-override);
  --language-selector-focus-shadow-rgb: var(--language-selector-focus-shadow-rgb-override);
  /* --- Button Sizing --- */
  --button-min-height: 44px;
  --button-min-height-mobile: 44px;
  --button-standard-min-width: 140px;
  /* Example value, adjust as needed */
  --control-size-lg: 48px;
  /* --- On-Dark Button Variant Implementation --- */
  --button-text-on-dark-variant: var(--button-text-on-dark-variant-override);
  --button-on-dark-hover-bg: var(--button-on-dark-hover-bg-override);
  --button-on-dark-active-bg: var(--button-on-dark-active-bg-override);
  /* --- Interaction States --- */
  --hover-background-color: #e2e6ea;
  --active-background-color: #dae0e5;
  /* --- Disabled State --- */
  --disabled-background-color: #e9ecef;
  --disabled-text-color: #6c757d;
  --disabled-border-color: #ced4da;
  --disabled-background-color-rgb: 233, 236, 239;
  /* --- Fonts --- */
  --font-family-default: "Inter", sans-serif;
  --font-family-circular: "Circular", sans-serif;
  --font-family: var(--wp-font-family);
  /* Set default font */
  --font-size-base: 15px;
  --font-size-large: 17px;
  --font-size-small: 13px;
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --h1-font-size: 2.4rem;
  --h2-font-size: 1.9rem;
  --h3-font-size: 1.6rem;
  --h4-font-size: 1.4rem;
  --h5-font-size: 1.2rem;
  --h6-font-size: 1rem;
  /* --- Borders & Shadows --- */
  --border-radius-small: 4px;
  --border-radius-base: 6px;
  --border-radius-medium: 10px;
  --border-radius-large: 16px;
  --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08),
    0 2px 4px -1px rgba(0, 0, 0, 0.05);
  --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-color: #ccc;
  --shadow-color-rgb: 204, 204, 204;
  /* --- Spacing --- */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  --spacing-xxl: 50px;
  /* --- 8pt Spacing System --- */
  --spacing-8pt-1: 8px;
  --spacing-8pt-2: 16px;
  --spacing-8pt-3: 24px;
  --spacing-8pt-4: 32px;
  --spacing-8pt-5: 40px;
  --spacing-8pt-6: 48px;
  /* --- Layout Control --- */
  --container-max-width: 1440px;
  --container-padding-inline: var(--spacing-md);
  --min-height-full: 100vh;
  /* NEW: Aspect Ratio Variables */
  --fp-aspect-16-9: 16 / 9;
  --fp-aspect-4-5: 4 / 5;
  /* --- Header Layout --- */
  --header-height-desktop: 56px;
  --header-height-mobile: 48px;
  /* --- Zigzag --- */
  --zigzag-bg-light: var(--background-color-base);
  --zigzag-bg-dark: var(--background-color-accent);
  --zigzag-text-light: var(--text-color-on-base);
  --zigzag-text-dark: var(--text-color-on-accent);
  --zigzag-title-dark: var(--text-color-on-accent);
  --zigzag-link-dark: #EAE8E1;
  /* --- Section Backgrounds --- */
  --section-bg-light: var(--background-color-base);
  --section-bg-dark: #EAEAEA;
  /* --- Sticky Header --- */
  --header-sticky-bg-opacity: 0.65;
  --header-sticky-blur: 0px;
  /* --- OS Integration --- */
  --theme-color: var(--primary-color);
  /* --- Component Specific (Legacy/Review) --- */
  --gradient-overlay-bottom: linear-gradient(to top, rgba(var(--overlay-background-rgb), 0.5), transparent);
  --overlay-background-rgb: 0, 0, 0;
  --z-index-loader: 1000;
  --z-index-header: 1000;
  --z-index-overlay-root: 140;
  --z-index-overlay: 150;
  --z-index-hud: 160;
  --loader-content-background: transparent;
  /* === Generic loader token (new) === */
  --loader-border-width-base: 0.2rem;
  /* ≈3 px @ root-15 px */
  /* --- Links --- */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-hover);
  --link-active-color: var(--link-hover-color);
  --link-disabled-opacity: 0.65;
  --link-focus-color: var(--primary-color);
  /* --- Blur Effects --- */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 12px;
  --blur-xl: 12px;
  /* ================================================================
   * WP Theme Tokens v1 — Canonical Bridge Layer (UI v9)
   * ADDITIVE ONLY — no variables above are removed.
   *
   * (a) --color-* / --radius-* / --font-* receive runtime values
   *     from ThemePartService (ts_app_settings.theme.tokens).
   *     Defaults below are the UI v9 primitives.
   * (b) --wp-* are the canonical aliases — the single source of
   *     truth every component should ultimately read from.
   * (c) Legacy variables (--background-color, --text-color, …)
   *     are remapped to --wp-* so existing consumers get v9 values
   *     without any component changes.
   * (d) Shell/theme-color variables used by widgets are also bridged
   *     so both naming systems resolve to the same v9 value.
   *
   * One-token-truth test: setting color.bg via ts_app_settings must
   * change both --background-color and --theme-color-bg consumers.
   * ================================================================ */
  --wp-bg: var(--theme-color-bg, #FCF8F0);
  --wp-color-bg: var(--wp-bg);
  --wp-surface: var(--theme-color-bg-secondary, #FFFFFF);
  --wp-ink: var(--theme-color-fg, #2D2D2D);
  --wp-accent: var(--theme-color-accent, #D4A853);
  --wp-border: var(--theme-color-border, #DEE2E6);
  --wp-radius-base: var(--theme-radius-sm, 6px);
  --wp-radius-lg: var(--theme-radius-lg, 16px);
  --wp-font-family: var(--theme-font-family, Inter, system-ui, sans-serif);
  --wp-accent-rgb: 212, 168, 83;
  --wp-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --wp-light: var(--light-disabled-background-color, #f5ede0);
  /* Legacy aliases */
  --background-color: var(--wp-bg);
  --background-color-base: var(--wp-bg);
  --highlight-color: var(--wp-surface);
  --text-color: var(--wp-ink);
  --border-color: var(--wp-border);
  --border-radius-base: var(--wp-radius-base);
  --border-radius-large: var(--wp-radius-lg);
  --font-family-base: var(--wp-font-family);
  /* Shell/widget aliases */
  --color-bg: var(--wp-bg);
  --color-fg: var(--wp-ink);
  --color-border: var(--wp-border);
  --surface-color: var(--wp-surface);
  --radius-md: var(--wp-radius-base);
  --radius-lg: var(--wp-radius-lg);
  /* Button aliases if used */
  --button-background-override: var(--wp-accent);
  --button-border-override: var(--wp-accent);
  --button-text-override: #FFFFFF;
}

/* ======================== Dark Theme Overrides ========================= */
[data-theme=dark] {
  /* --- Core Palette & Text (Dark) --- */
  --background-color-base: #1a1a1a;
  --background-color-accent: #4A4441;
  --background-color: var(--background-color-base);
  --text-color: #e0e0e0;
  --text-color-inverse: #1a1a1a;
  --text-secondary-color: #a0a0a0;
  --icon-color: var(--text-secondary-color);
  --border-color: #3a3a3a;
  --highlight-color: #2c2c2c;
  /* --- wp-* token aliases (Dark) — fallbacks override light defaults while
       preserving the ts_app_settings token chain (--theme-color-* takes priority) --- */
  --wp-bg: var(--theme-color-bg, #1a1a1a);
  --wp-surface: var(--theme-color-bg-secondary, #2c2c2c);
  --wp-ink: var(--theme-color-fg, #e0e0e0);
  --wp-border: var(--theme-color-border, #3a3a3a);
  --text-color-on-base: var(--text-color);
  --text-color-on-accent: #F5F4F0;
  /* --- Global Semantic Colors (Dark) --- */
  --primary-color: #5cb85c;
  --primary-color-hover: #4cae4c;
  --primary-color-rgb: 92, 184, 92;
  --secondary-color: #e57373;
  --secondary-color-hover: #ef5350;
  --error-color: #f44336;
  --error-text-color: var(--error-color);
  --error-background-color: #4d1b1b;
  --warning-color: #ffb74d;
  --success-color: #81c784;
  --success-background-color: #1e4620;
  --success-text-color: #c8e6c9;
  --success-border-color: #388e3c;
  /* --- Component Accent Colors (Dark Theme) --- */
  --component-accent-color: var(--primary-color);
  /* --- Invalid Input Border Color (Dark Theme) --- */
  --invalid-input-border-color: var(--warning-color);
  /* --- Overridable Variables (DARK THEME DEFAULTS) --- */
  --button-primary-bg-override: #E0E0E0;
  --button-primary-hover-bg-override: #FFFFFF;
  --button-primary-text-override: #1a1a1a;
  --button-primary-rgb-override: 224, 224, 224;
  --button-secondary-border-override: var(--button-primary-bg-override);
  --button-secondary-text-override: var(--button-primary-bg-override);
  --button-secondary-hover-bg-override: rgba(var(--button-primary-rgb-override), 0.1);
  --button-secondary-hover-text-override: var(--button-primary-hover-bg-override);
  --button-text-color-override: var(--button-secondary-text-override);
  --button-text-hover-bg-override: var(--button-secondary-hover-bg-override);
  --button-text-on-dark-variant-override: #DDDDDD;
  --button-on-dark-hover-bg-override: rgba(255, 255, 255, 0.1);
  --button-on-dark-active-bg-override: rgba(255, 255, 255, 0.15);
  --language-selector-focus-border-override: var(--button-primary-bg-override);
  --language-selector-focus-shadow-rgb-override: var(--button-primary-rgb-override);
  /* --- Implementation Variables (Dark Theme) --- */
  --primary-button-background: var(--button-primary-bg-override);
  --primary-button-hover-background: var(--button-primary-hover-bg-override);
  --button-text-color: var(--button-primary-text-override);
  --language-selector-focus-border: var(--language-selector-focus-border-override);
  --language-selector-focus-shadow-rgb: var(--button-primary-rgb-override);
  --button-text-on-dark-variant: var(--button-text-on-dark-variant-override);
  --button-on-dark-hover-bg: var(--button-on-dark-hover-bg-override);
  --button-on-dark-active-bg: var(--button-on-dark-active-bg-override);
  /* --- Interaction & Disabled States (Dark) --- */
  --hover-background-color: #383838;
  --active-background-color: #4a4a4a;
  --disabled-background-color: #303030;
  --disabled-text-color: #757575;
  --disabled-border-color: #424242;
  --disabled-background-color-rgb: 48, 48, 48;
  /* --- Borders & Shadows (Dark) --- */
  --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2),
    0 2px 4px -1px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2),
    0 4px 6px -2px rgba(0, 0, 0, 0.15);
  --shadow-color: #000;
  --shadow-color-rgb: 0, 0, 0;
  /* --- Zigzag (Dark) --- */
  --zigzag-bg-light: var(--background-color-base);
  --zigzag-bg-dark: var(--background-color-accent);
  --zigzag-text-light: var(--text-color-on-base);
  --zigzag-text-dark: var(--text-color-on-accent);
  --zigzag-title-dark: var(--text-color-on-accent);
  --zigzag-link-dark: #EAE8E1;
  /* --- Section Backgrounds (Dark) --- */
  --section-bg-light: var(--background-color);
  --section-bg-dark: #212121;
  /* --- OS Integration (Dark) --- */
  --theme-color: var(--primary-color);
  /* --- Component Specific (Dark) --- */
  --gradient-overlay-bottom: linear-gradient(to top, rgba(var(--overlay-background-rgb), 0.75), transparent);
  --table-header-background: #2a2a2a;
  --table-row-hover-background: #333333;
  --table-border-color: #424242;
  /* --- Links (Dark) --- */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-hover);
  --link-active-color: var(--link-hover-color);
  --link-focus-color: var(--primary-color);
  /* --- Other (Dark) --- */
  --light-gray: #555555;
}

/* ========================================================================== */
/* Global Styles                                                              */
/* ========================================================================== */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background-color: var(--page-background-color-override, var(--background-color));
  /* Fallback ensures body uses theme bg */
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

.text-base {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-color);
}

/* ========================================================================== */
/* Layout Utilities                                                           */
/* ========================================================================== */
/* aspect-ratio.utilities.scss */
.ar-16x9 {
  aspect-ratio: var(--fp-aspect-16-9, 16/9);
}

.ar-4x5 {
  aspect-ratio: var(--fp-aspect-4-5, 4/5);
}

.ar-1x1 {
  aspect-ratio: 1/1;
}

.ar-3x2 {
  aspect-ratio: 3/2;
}

/* NEW: Import aspect ratio utilities */
.content-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-inline);
  padding-right: var(--container-padding-inline);
  box-sizing: border-box;
}

.full-bleed {
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.fade-out-bottom {
  position: relative;
}

.fade-out-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  /* Adjust height of the fade effect */
  background: linear-gradient(to top, var(--background-color) 0%, transparent 100%);
  pointer-events: none;
  /* Allows clicking through the gradient */
}

/* ========================================================================== */
/* Fixed Header Compensation                                                   */
/* ========================================================================== */
.with-fixed-header {
  padding-top: var(--header-height-desktop, 56px);
}
@media (max-width: 767.98px) {
  .with-fixed-header {
    padding-top: var(--header-height-mobile, 48px);
  }
}

/* ========================================================================== */
/* Flexbox Utilities                                                          */
/* ========================================================================== */
/* ========================================================================== */
/* Dynamic Font Override Classes                                              */
/* ========================================================================== */
.font-family-circular {
  --font-family: var(--font-family-circular);
}

/* Add other font classes here */
/* Apply the overridden font (global context – no :host here) */
.font-family-circular,
.font-family-circular * {
  font-family: var(--font-family);
}

/* ========================================================================== */
/* Button Styles                                                              */
/* ========================================================================== */
.btn {
  /* Base styles for non-uic-button scenarios, or global defaults */
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-base);
  cursor: pointer;
  text-align: center;
  display: inline-block;
  transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease, color 0.2s ease;
  color: var(--button-text-color);
  /* Uses mapped override */
  background-color: var(--primary-button-background);
  /* Uses mapped override */
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  border: 1px solid var(--primary-button-background);
  /* Uses mapped override */
  -webkit-user-select: none;
          user-select: none;
}
.btn:hover:not(:disabled) {
  background-color: var(--primary-button-hover-background);
  /* Uses mapped override */
  border-color: var(--primary-button-hover-background);
  /* Uses mapped override */
}
.btn:focus-visible {
  outline: 2px solid var(--primary-color);
  /* Focus outline still uses global semantic primary green for consistency */
  outline-offset: 2px;
}
.btn:focus:not(:focus-visible) {
  outline: none;
}
.btn:active:not(:disabled) {
  transform: scale(0.98);
}
.btn:disabled {
  background-color: var(--disabled-background-color);
  border-color: var(--disabled-border-color);
  color: var(--disabled-text-color);
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

/* --- Rules for On-Dark Button Variants --- */
/* Styles applied directly to uic-button via its variant class */
.uic-button.variant-secondary-on-dark {
  background-color: transparent;
  border-color: transparent;
  color: var(--button-text-on-dark-variant, #ffffff);
}
.uic-button.variant-secondary-on-dark:hover:not(:disabled) {
  background-color: var(--button-on-dark-hover-bg, rgba(255, 255, 255, 0.1));
  border-color: transparent;
  color: var(--button-text-on-dark-variant, #ffffff);
}
.uic-button.variant-secondary-on-dark:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.uic-button.variant-secondary-on-dark:focus:not(:focus-visible) {
  outline: none;
}
.uic-button.variant-secondary-on-dark:active:not(:disabled) {
  background-color: var(--button-on-dark-active-bg, rgba(255, 255, 255, 0.15));
}

.uic-button.variant-text-on-dark {
  color: var(--button-text-on-dark-variant);
  background-color: transparent;
  border-color: transparent;
}
.uic-button.variant-text-on-dark:hover:not(:disabled) {
  background-color: var(--button-on-dark-hover-bg);
}
.uic-button.variant-text-on-dark:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ========================================================================== */
/* Responsive Styles                                                          */
/* ========================================================================== */
@media (max-width: 768px) {
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    min-height: var(--button-min-height-mobile);
  }
}
@media (max-width: 576px) {
  .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}
/* ========================================================================== */
/* Link Styles                                                                */
/* ========================================================================== */
a,
.uic-link-host > a {
  color: var(--link-color);
  -webkit-text-decoration: var(--link-text-decoration, none);
          text-decoration: var(--link-text-decoration, none);
  cursor: pointer;
  transition: color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
}
a:hover,
.uic-link-host > a:hover {
  color: var(--link-hover-color);
  -webkit-text-decoration: var(--link-hover-text-decoration, underline);
          text-decoration: var(--link-hover-text-decoration, underline);
  -webkit-text-decoration-color: var(--link-hover-color);
          text-decoration-color: var(--link-hover-color);
}
a:active,
.uic-link-host > a:active {
  color: var(--link-active-color);
}
a:visited,
.uic-link-host > a:visited {
  /* Intentionally empty */
}
a:focus-visible,
.uic-link-host > a:focus-visible {
  outline: 2px solid var(--link-focus-color);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus:not(:focus-visible),
.uic-link-host > a:focus:not(:focus-visible) {
  outline: none;
}

.uic-link-host.disabled {
  color: var(--disabled-text-color);
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
  opacity: var(--link-disabled-opacity);
}

/* Golden Welcome – Read lens */
.gw-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Card style */
.gw-mini-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Icon + Title Row */
.gw-mini-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

/* Icon circle */
.gw-mini-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0; /* text push na kare */
}

.gw-mini-icon img {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px;
  max-height: 20px;
  display: block;
  object-fit: contain;
}

.gw-mini-icon svg {
  fill: currentColor;
}

/* 🔥 UNIVERSAL ICON RESET */
/* Individual icon background colors */
.gw-mini-icon.watch {
  background: #F4EFFF;
}

.gw-mini-icon.explore {
  background: #F4EFFF;
}

.gw-mini-icon.read {
  background: #F4EFFF;
}

.gw-mini-icon.ask {
  background: #F4EFFF;
}

.gw-mini-title {
  font-size: 15px;
  font-weight: 600;
}

.gw-mini-text {
  font-size: 13px;
  opacity: 0.9;
}

/* STEP GRID */
.gw-step-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0 14px;
}

.gw-step {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.gw-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex-shrink: 0;
}

.gw-step-icon.speak {
  background: #F4EFFF;
}

.gw-step-icon.link {
  background: #F4EFFF;
}

.gw-step-icon.measure {
  background: #F4EFFF;
}

.gw-step-text {
  font-size: 13px;
  opacity: 0.9;
}

.gw-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

/* CTA FULL-WIDTH CARD (independent of grid) */
.gw-turn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  margin: 18px 0 12px;
}

.gw-proof {
  padding: 0;
  list-style: none;
}

.gw-proof-icon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gw-proof-icon img {
  width: 12px;
  height: 12px;
}

/* Buttons */
.gw-cta-link {
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #4a4441;
  background: #4a4441;
  color: #fff;
  text-decoration: none;
  margin-right: 8px;
}

.gw-secondary-btn {
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #D4D2CF;
  background: #fff;
  cursor: pointer;
}

/* MOBILE */
@media (max-width: 900px) {
  .gw-step-strip {
    grid-template-columns: 1fr;
  }
}
.gw-section-title {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  margin: 6px 0 10px;
  padding-right: 34px; /* space for bar */
}

.gw-section-title::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 4px;
  border-radius: 6px;
  background: #d742ff; /* magenta line */
}

.gw-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.gw-mini-icon,
.gw-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gw-mini-icon img,
.gw-step-icon img,
.gw-mini-icon svg,
.gw-step-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.gw-mini-icon svg,
.gw-step-icon svg {
  fill: currentColor;
}

@font-face {
  font-family: "Inter";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  /* --font-weight-normal */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  /* Adjust path */
  src: url("/assets/fonts/inter/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  /* --font-weight-medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  /* Adjust path */
  src: url("/assets/fonts/inter/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  /* --font-weight-bold */
  font-style: normal;
  font-display: swap;
}
/* --- END Default Font --- */
/* --- ADDED: @font-face rules for Circular font --- */
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Book.woff2") format("woff2");
  font-weight: 400;
  /* Corresponds to --font-weight-normal */
  font-style: normal;
  font-display: swap;
  /* Use swap for better perceived performance */
}
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Medium.woff2") format("woff2");
  font-weight: 500;
  /* Corresponds to --font-weight-medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Bold.woff2") format("woff2");
  font-weight: 700;
  /* Corresponds to --font-weight-bold */
  font-style: normal;
  font-display: swap;
}
/* --- END ADDED: @font-face rules --- */
/* ========================================================================== */
/* Variables                                                                  */
/* ========================================================================== */
:host {
  --text-secondary-color: #6c757d;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --border-radius-small: 4px;
  --spacing-xs: 8px;
  --border-radius-base: 6px;
}

/* ========================================================================== */
/* Global Styles                                                              */
/* ========================================================================== */
/* Apply new font-family and base styles */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  /* --- CHANGE: Use the page background override variable with fallback --- */
  background-color: var(--background-color);
  /* --- END CHANGE --- */
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

html,
body {
  overscroll-behavior-y: none;
}

/* Base text helper */
.text-base {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-color);
}

/* ========================================================================== */
/* Layout Utilities                                                           */
/* ========================================================================== */
/* aspect-ratio.utilities.scss */
.ar-16x9 {
  aspect-ratio: var(--fp-aspect-16-9, 16/9);
}

.ar-4x5 {
  aspect-ratio: var(--fp-aspect-4-5, 4/5);
}

.ar-1x1 {
  aspect-ratio: 1/1;
}

.ar-3x2 {
  aspect-ratio: 3/2;
}

/* NEW: Import aspect ratio utilities */
/* --- NEW: Content Container Utility Class --- */
.content-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-inline);
  padding-right: var(--container-padding-inline);
  box-sizing: border-box;
}

/* --- END NEW Content Container --- */
/* ========================================================================== */
/* Flexbox Utilities                                                          */
/* ========================================================================== */
/* Kept as is */
/* ========================================================================== */
/* Dynamic Font Override Classes                                              */
/* ========================================================================== */
.font-family-circular {
  --font-family: var(--font-family-circular);
}

/* Add other font classes here */
/* Apply the overridden font */
:host(.font-family-circular),
.font-family-circular {
  font-family: var(--font-family);
}

:host(.font-family-circular) *,
.font-family-circular * {
  font-family: inherit;
}

/* ========================================================================== */
/* Button Styles                                                              */
/* ========================================================================== */
/* Base styles for non-uic-button scenarios, or global defaults */
/* Kept for potential fallback use */
.btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-base);
  cursor: pointer;
  text-align: center;
  display: inline-block;
  transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease, color 0.2s ease;
  color: var(--button-text-color);
  background-color: var(--primary-button-background);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  border: 1px solid var(--primary-button-background);
  -webkit-user-select: none;
          user-select: none;
}
.btn:hover:not(:disabled) {
  background-color: var(--primary-button-hover-background);
  border-color: var(--primary-button-hover-background);
}
.btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.btn:focus:not(:focus-visible) {
  outline: none;
}
.btn:active:not(:disabled) {
  transform: scale(0.98);
}
.btn:disabled {
  background-color: var(--disabled-background-color);
  border-color: var(--disabled-border-color);
  color: var(--disabled-text-color);
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

/* --- Rules for On-Dark Button Variants --- */
/* Apply styles directly to uic-button assuming it uses these classes */
/* Secondary button variant specifically for use on dark backgrounds */
/* Example: white outline button - uses implementation variables */
.uic-button.variant-secondary-on-dark {
  /* Base State */
  background-color: transparent;
  border-color: transparent;
  color: var(--button-text-on-dark-variant, #FFFFFF);
  /* Hover State */
  /* Focus Visible State */
  /* Focus Not Visible State */
  /* Active State */
}
.uic-button.variant-secondary-on-dark:hover:not(:disabled) {
  background-color: var(--button-on-dark-hover-bg, rgba(255, 255, 255, 0.1));
  border-color: transparent;
  color: var(--button-text-on-dark-variant, #FFFFFF);
}
.uic-button.variant-secondary-on-dark:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.uic-button.variant-secondary-on-dark:focus:not(:focus-visible) {
  outline: none;
}
.uic-button.variant-secondary-on-dark:active:not(:disabled) {
  background-color: var(--button-on-dark-active-bg, rgba(255, 255, 255, 0.15));
}

/* Text button variant specifically for use on dark backgrounds */
/* Uses implementation variables */
.uic-button.variant-text-on-dark {
  color: var(--button-text-on-dark-variant);
  background-color: transparent;
  border-color: transparent;
}
.uic-button.variant-text-on-dark:hover:not(:disabled) {
  background-color: var(--button-on-dark-hover-bg);
}
.uic-button.variant-text-on-dark:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* --- END NEW Button Variant Rules --- */
/* ========================================================================== */
/* REMOVED Deprecated Styles                                                  */
/* ========================================================================== */
/* ========================================================================== */
/* Responsive Styles                                                          */
/* ========================================================================== */
/* Keep minimal base responsive adjustments for btn if needed */
@media (max-width: 767.98px) {
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    min-height: var(--button-min-height-mobile);
  }
}
@media (max-width: 576px) {
  .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}
/* ========================================================================== */
/* Link Styles                                                                */
/* ========================================================================== */
/* Keep link styles as they apply globally to <a> tags */
a,
.uic-link-host > a {
  color: var(--link-color);
  /* Still uses global primary green */
  -webkit-text-decoration: var(--link-text-decoration);
          text-decoration: var(--link-text-decoration);
  cursor: pointer;
  transition: color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
}
a:hover,
.uic-link-host > a:hover {
  color: var(--link-hover-color);
  -webkit-text-decoration: var(--link-hover-text-decoration);
          text-decoration: var(--link-hover-text-decoration);
  -webkit-text-decoration-color: var(--link-hover-color);
          text-decoration-color: var(--link-hover-color);
}
a:active,
.uic-link-host > a:active {
  color: var(--link-active-color);
}
a:visited,
.uic-link-host > a:visited {
  /* color: var(--link-visited-color); */
}
a:focus-visible,
.uic-link-host > a:focus-visible {
  outline: 2px solid var(--link-focus-color);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus:not(:focus-visible),
.uic-link-host > a:focus:not(:focus-visible) {
  outline: none;
}

.uic-link-host.disabled {
  color: var(--disabled-text-color);
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
  opacity: var(--link-disabled-opacity);
}

@media (max-width: 767.98px) {
  .header-cta-button .uic-button {
    min-width: auto !important;
  }
}
/* developer code story-page.component.scss */
@media (max-width: 767.98px) {
  .story-page {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }
  .media-container {
    order: 1;
    width: var(--size-pct-100);
    height: 40vh !important;
  }
  .media-container uic-media-viewer,
  .media-container video {
    max-width: var(--size-pct-100);
    max-height: none;
    width: var(--size-pct-100);
    height: auto;
    object-fit: contain;
  }
  .textbox-container {
    order: 2;
    width: var(--size-pct-100);
    margin-left: 0;
    height: 35vh;
    top: 1rem;
    display: flex;
    flex-direction: column;
  }
  .textbox-container .textbox-scroll-content {
    max-width: var(--size-pct-100);
    width: 82%;
    height: 600px;
    overflow-y: auto;
    padding: var(--spacing-md);
    margin: 0 auto;
    box-shadow: 0 0 14px rgba(86, 86, 86, 0.1882352941);
    background-color: #fff !important;
    border-radius: var(--spacing-md) !important;
    color: #000 !important;
  }
  .story-agent-container {
    order: 3;
    width: var(--size-pct-100);
    margin-top: var(--spacing-rem-xxs);
    display: flex;
    justify-content: center;
    padding: 0 var(--spacing-rem-xxs);
  }
  .read-more-button {
    margin-top: 10px;
  }
}
:host ::ng-deep uic-media-viewer video::-webkit-media-controls-panel {
  display: none !important;
}

:host ::ng-deep uic-media-viewer video::-moz-media-controls {
  display: none !important;
}

.textbox-scroll-content uic-image-gallery {
  cursor: pointer;
}

/* developer code story-detail-card.component.scss */
/* developer code storytelling-container.component.scss */
/* developer code story-actions.component.scss */
/* Shared glass stage (host framing) */
.uic-glass-stage {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.uic-glass-stage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* First-paint safe: avoid dark fallback while runtime tokens are still applying. */
  background-color: var(--wp-bg, #FCF8F0);
  background: var(--wp-color-bg, var(--wp-bg, #FCF8F0));
}

.uic-glass-stage__slot {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.omnilink-root .omnilink-card {
  width: 100%;
  max-width: 520px;
  min-height: 340px;
  padding: 16px;
}

.uic-glass-stage__state {
  width: min(100%, 920px);
  text-align: center;
}

.omnilink-root {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdf8f0;
}

/* Notification placement hardening for top-center snackbar. */
.cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center {
  position: fixed !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: 32px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  width: min(100vw - 48px, 620px) !important;
  max-width: min(100vw - 48px, 620px);
  min-width: min(420px, 100vw - 48px);
  z-index: 2005 !important;
  pointer-events: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .mat-mdc-snackbar-surface,
.cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .mdc-snackbar__surface {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  display: block !important;
}

.cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .mdc-snackbar__label {
  padding: 0 !important;
  width: 100%;
  display: block !important;
  color: inherit !important;
  overflow: visible !important;
}

.cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .wp-notification-snackbar-host {
  display: block;
  width: 100%;
  min-width: 0;
}

.cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .wp-notification-snackbar {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(216, 203, 184, 0.72);
  background: #fffdf8;
  box-shadow: 0 18px 45px rgba(94, 74, 35, 0.14);
  pointer-events: auto;
  box-sizing: border-box;
  overflow: visible;
}

.cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .wp-notification-snackbar__message {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  color: #3b362f;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: normal;
}

.cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .wp-notification-snackbar__close {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #c39324;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  cursor: pointer;
  pointer-events: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .cdk-overlay-container .cdk-overlay-pane.mat-mdc-snack-bar-handset {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
  }
  .cdk-overlay-container .cdk-overlay-pane.mat-mdc-snack-bar-handset .mat-mdc-snack-bar-container {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center {
    top: auto !important;
    left: 50% !important;
    bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px);
    min-width: 0;
  }
  .cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .mat-mdc-snackbar-surface,
  .cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .mdc-snackbar__surface {
    pointer-events: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .wp-notification-snackbar {
    gap: 12px;
    padding: 18px 16px;
    border-radius: 16px;
  }
  .cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .wp-notification-snackbar__message,
  .cdk-overlay-container .mat-mdc-snack-bar-container.snackbar-top-center .wp-notification-snackbar__close {
    font-size: 0.95rem;
  }
}

/*# sourceMappingURL=styles.css.map*/