/*
 * wptream_dura_components.css
 * ------------------------------------------------------------------
 * WpStream "la vita e dura" design system - COMPONENT STYLES.
 *
 * Source of truth: Claude Design project "Wpstream Redo", components/*.jsx.
 * Each block below is a 1:1 CSS port of one React component. The React
 * `tone="dark"` prop becomes the `.wptream_dura_dark` context class (see
 * wptream_dura_tokens.css section 6); props become modifier classes; React
 * hover/focus state becomes :hover / :focus-visible / :focus-within.
 *
 * Requires wptream_dura_tokens.css loaded first.
 *
 * Naming
 *   block          .wptream_dura_<block>
 *   element        .wptream_dura_<block>_<element>
 *   modifier       .wptream_dura_<block>_<modifier>   (documented per block)
 *   state          .wptream_dura_open / .wptream_dura_active (JS-toggled)
 *   context        .wptream_dura_dark
 *
 * Contents
 *   A. Layout primitives     container, section, grid
 *   B. Typography utilities  display_1..4, headline, title, ... legal
 *   C. Core                  btn, icon_btn, field/input, select, checkbox,
 *                            switch, badge, card, icon
 *   D. Marketing             eyebrow, media, hero, section_header,
 *                            feature_row, spec_grid, price_card, disclosure
 *   E. Navigation            nav, tabs, footer
 *   F. Feedback              dialog, tooltip
 *   G. Responsive            stacking rules (not in the design source)
 *
 * Full usage documentation with markup examples:
 *   site/WPTREAM_DURA_DESIGN_SYSTEM.md
 * ------------------------------------------------------------------
 */


/* =====================================================================
 * A. LAYOUT PRIMITIVES
 * Not components in the design project; these are the repeated wrappers
 * every page/section in ui_kits/wpstream-site uses (max-width container,
 * section padding). Extracted once so pages do not repeat them.
 * ===================================================================== */

/* Centered content column. Default 1180px; _wide 1440px; _text 720px. */
.wptream_dura_container {
  width: 100%;
  max-width: var(--wptream_dura_container);
  margin: 0 auto;
  padding: 0 var(--wptream_dura_gutter);
}
.wptream_dura_container_wide { max-width: var(--wptream_dura_container_wide); }
.wptream_dura_container_text { max-width: var(--wptream_dura_container_text); }

/* Vertical section rhythm. Default 128px; _lg 192px; _sm 80px. */
.wptream_dura_section {
  padding: var(--wptream_dura_section_y) 0;
  background: var(--wptream_dura_bg);
  color: var(--wptream_dura_fg);
}
.wptream_dura_section_lg { padding: var(--wptream_dura_section_y_lg) 0; }
.wptream_dura_section_sm { padding: var(--wptream_dura_section_y_sm) 0; }
/* Raised sections sit on the white surface instead of the off-white page. */
.wptream_dura_section_raised { background: var(--wptream_dura_bg_raised); }

/* Simple equal-column grids used by card rows (monetization trio, reviews). */
.wptream_dura_grid {
  display: grid;
  gap: var(--wptream_dura_space_5);
  grid-template-columns: repeat(var(--wptream_dura_grid_cols, 3), minmax(0, 1fr));
}
.wptream_dura_grid_2 { --wptream_dura_grid_cols: 2; }
.wptream_dura_grid_3 { --wptream_dura_grid_cols: 3; }
.wptream_dura_grid_4 { --wptream_dura_grid_cols: 4; }

/* Horizontal cluster of actions (buttons side by side, wraps on small screens). */
.wptream_dura_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wptream_dura_space_3);
  align-items: center;
}


/* =====================================================================
 * B. TYPOGRAPHY UTILITIES
 * One class per step of the type scale (guidelines/type-*.card.html).
 * Display steps use the display face, black weight and display tracking;
 * everything below headline uses the body face.
 * ===================================================================== */
.wptream_dura_display_1,
.wptream_dura_display_2,
.wptream_dura_display_3,
.wptream_dura_display_4 {
  font-family: var(--wptream_dura_font_display);
  font-weight: var(--wptream_dura_weight_black);
  letter-spacing: var(--wptream_dura_track_display);
  line-height: var(--wptream_dura_lh_display);
  margin: 0;
}
.wptream_dura_display_1 { font-size: var(--wptream_dura_size_display_1); }
.wptream_dura_display_2 { font-size: var(--wptream_dura_size_display_2); }
.wptream_dura_display_3 { font-size: var(--wptream_dura_size_display_3); }
/* display_4 is the section-title size: bold (not black) and tight line height. */
.wptream_dura_display_4 {
  font-size: var(--wptream_dura_size_display_4);
  font-weight: var(--wptream_dura_weight_bold);
  line-height: var(--wptream_dura_lh_tight);
}

/* title_section is the one shared section-title style ("Broadcast the service,
   reach your congregation"): display_4 size (44px, 32px on mobile via the
   token), bold, tight line height, headline tracking (-0.02em). Widgets and
   heading elements add this class in their markup instead of restyling titles. */
.wptream_dura_title_section {
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_display_4);
  font-weight: var(--wptream_dura_weight_bold);
  letter-spacing: var(--wptream_dura_track_headline);
  line-height: var(--wptream_dura_lh_tight);
  margin: 0;
}

.wptream_dura_headline {
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_headline);
  font-weight: var(--wptream_dura_weight_bold);
  letter-spacing: var(--wptream_dura_track_headline);
  line-height: var(--wptream_dura_lh_tight);
  margin: 0;
}
/* title is the one shared card/item title style, the same look as the FAQ
   question: 24px display face, semibold,
   snug line height, foreground colour (white inside dark scopes). Widgets
   print it in their title markup; on native Elementor widgets it goes in
   _css_classes and the second selector reaches the inner heading.
   Scoped under .wptream_dura_site so it outranks the site heading reset
   (.wptream_dura_site h3) and Elementor's kit heading rule. */
.wptream_dura_site .wptream_dura_title,
.wptream_dura_site .wptream_dura_title .elementor-heading-title {
  display: block;
  margin: 0;
  color: var(--wptream_dura_fg);
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_title);
  font-weight: var(--wptream_dura_weight_semibold);
  letter-spacing: var(--wptream_dura_track_headline);
  line-height: var(--wptream_dura_lh_snug);
}
.wptream_dura_subtitle {
  font-size: var(--wptream_dura_size_subtitle);
  font-weight: var(--wptream_dura_weight_semibold);
  letter-spacing: var(--wptream_dura_track_headline);
  line-height: var(--wptream_dura_lh_snug);
  margin: 0;
}
.wptream_dura_body_lg { font-size: var(--wptream_dura_size_body_lg); line-height: var(--wptream_dura_lh_body); }
.wptream_dura_body    { font-size: var(--wptream_dura_size_body);    line-height: var(--wptream_dura_lh_body); }
.wptream_dura_body_sm { font-size: var(--wptream_dura_size_body_sm); line-height: var(--wptream_dura_lh_body); }
.wptream_dura_caption { font-size: var(--wptream_dura_size_caption); line-height: var(--wptream_dura_lh_snug); }
.wptream_dura_legal   { font-size: var(--wptream_dura_size_legal);   line-height: var(--wptream_dura_lh_snug); }

/* body_text is the one shared body-copy style for text inside the custom
   Elementor blocks: Manrope 17px / 400, line height 1.55 (26.35px),
   tracking -0.006em (-0.102px), secondary text colour (#45454C on light,
   flips to the dark-context secondary colour inside .wptream_dura_dark).
   Widgets add this class in their markup instead of styling body text. */
.wptream_dura_body_text {
  display: block;
  color: var(--wptream_dura_fg_2);
  font-family: var(--wptream_dura_font_body);
  font-size: var(--wptream_dura_size_body);
  font-weight: var(--wptream_dura_weight_regular);
  letter-spacing: var(--wptream_dura_track_normal);
  line-height: var(--wptream_dura_lh_body);
}
/* _light: white body text on dark sections (scroll video, website pricing). */
.wptream_dura_body_text.wptream_dura_body_text_light { color: var(--wptream_dura_text_on_dark); }

/* Saved paragraphs in the older text-only Elementor widgets. */
:is(.wptream_dura_feature_row_body, .wptream_dura_slider_body, .wptream_dura_steps_body, .wptream_dura_scrollvideo_body, .wptream_dura_review_excerpt) > p { margin: 0; }
:is(.wptream_dura_feature_row_body, .wptream_dura_slider_body, .wptream_dura_steps_body, .wptream_dura_scrollvideo_body, .wptream_dura_review_excerpt) > p + p { margin-top: .75em; }

/* Colour helpers: secondary and muted text in the current context. */
.wptream_dura_text_2     { color: var(--wptream_dura_fg_2); }
.wptream_dura_text_muted { color: var(--wptream_dura_fg_muted); }
/* Measure helpers: cap line length. */
.wptream_dura_measure_display { max-width: var(--wptream_dura_measure_display); }
.wptream_dura_measure_body    { max-width: var(--wptream_dura_measure_body); }
.wptream_dura_measure_narrow  { max-width: var(--wptream_dura_measure_narrow); }


/* =====================================================================
 * C. CORE
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * C1. Button  (components/core/Button.jsx)
 * Variants: _primary (default) | _secondary | _outline | _link
 * Sizes:    _sm 32px | _md 40px (default) | _lg 48px
 * Modifiers: _block (full width)
 * Children: .wptream_dura_btn_icon wraps a trailing icon; it nudges 3px
 *           right on hover (the design's "iconAfter" behaviour).
 * States: hover lifts 1px, active presses (scale .985), focus shows the
 *         accent ring, disabled = 40% opacity, no motion.
 * Works on <button> and <a>.
 * ------------------------------------------------------------------- */
.wptream_dura_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wptream_dura_space_2);
  font-family: var(--wptream_dura_font_body);
  font-size: var(--wptream_dura_size_body_sm);
  font-weight: var(--wptream_dura_weight_semibold);
  letter-spacing: var(--wptream_dura_track_normal);
  line-height: 1;
  text-decoration: none;
  padding: var(--wptream_dura_space_3) var(--wptream_dura_space_5);
  min-height: 40px;
  width: auto;
  border-radius: var(--wptream_dura_radius_pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--wptream_dura_tx);
  transform: none;
  box-shadow: none;
  outline: none;
  white-space: nowrap;
  /* primary is the default variant */
  background: var(--wptream_dura_accent);
  color: #fff;
}
.wptream_dura_btn:hover { transform: var(--wptream_dura_lift_sm); text-decoration: none; }
.wptream_dura_btn:active { transform: var(--wptream_dura_press); }
.wptream_dura_btn:focus-visible { box-shadow: var(--wptream_dura_focus_ring); }
.wptream_dura_btn:disabled,
.wptream_dura_btn.wptream_dura_disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* primary */
.wptream_dura_btn_primary { background: var(--wptream_dura_accent); color: #fff; }
.wptream_dura_btn_primary:hover,
.wptream_dura_btn:hover { background: var(--wptream_dura_accent_hover); color: #fff; }
.wptream_dura_btn_primary:active,
.wptream_dura_btn:active { background: var(--wptream_dura_accent_press); }

/* secondary - soft neutral fill (ink-900 light / white 10% dark) */
.wptream_dura_btn_secondary,
.wptream_dura_btn_secondary:active {
  background: var(--wptream_dura_fill_soft);
  color: var(--wptream_dura_fg);
}
.wptream_dura_btn_secondary:hover {
  background: var(--wptream_dura_fill_soft_hover);
  color: var(--wptream_dura_fg);
}

/* outline - hairline border, ghost fill on hover */
.wptream_dura_btn_outline,
.wptream_dura_btn_outline:active {
  background: transparent;
  color: var(--wptream_dura_fg);
  border-color: var(--wptream_dura_border);
}
.wptream_dura_btn_outline:hover {
  background: var(--wptream_dura_fill_ghost_hover);
  color: var(--wptream_dura_fg);
}

/* link - text only, accent colour, no padding/height/radius/motion */
.wptream_dura_btn_link,
.wptream_dura_btn_link:hover,
.wptream_dura_btn_link:active {
  background: transparent;
  color: var(--wptream_dura_accent);
  padding: 0;
  min-height: auto;
  border-radius: 0;
  transform: none;
}
.wptream_dura_btn_link:hover { color: var(--wptream_dura_accent_hover); }

/* sizes */
.wptream_dura_btn_sm { padding: var(--wptream_dura_space_2) var(--wptream_dura_space_4); font-size: var(--wptream_dura_size_caption); min-height: 32px; }
.wptream_dura_btn_md { padding: var(--wptream_dura_space_3) var(--wptream_dura_space_5); font-size: var(--wptream_dura_size_body_sm); min-height: 40px; }
.wptream_dura_btn_lg { padding: var(--wptream_dura_space_4) var(--wptream_dura_space_6); font-size: var(--wptream_dura_size_body); min-height: 48px; }
.wptream_dura_btn_link.wptream_dura_btn_sm,
.wptream_dura_btn_link.wptream_dura_btn_md,
.wptream_dura_btn_link.wptream_dura_btn_lg { padding: 0; min-height: auto; }

.wptream_dura_btn_block { width: 100%; }

/* trailing icon wrapper - nudges right on hover */
.wptream_dura_btn_icon {
  display: flex;
  transition: var(--wptream_dura_tx_transform);
}
.wptream_dura_btn:hover .wptream_dura_btn_icon { transform: var(--wptream_dura_nudge); }
/* Ready-made 14x10 arrow (FeatureRow / Disclosure "action" links). */
.wptream_dura_btn_arrow::after {
  content: "";
  display: block;
  width: 14px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M8.5 1 13 5l-4.5 4M13 5H1' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M8.5 1 13 5l-4.5 4M13 5H1' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: var(--wptream_dura_tx_transform);
}
.wptream_dura_btn_arrow:hover::after { transform: var(--wptream_dura_nudge); }


/* ---------------------------------------------------------------------
 * C2. IconButton  (components/core/IconButton.jsx)
 * Round 40px button holding a single icon.
 * Variants: _ghost (default, transparent) | _solid (soft fill) | _accent
 * Sizes:    default 40px | _sm 32px | _lg 48px
 * Always give it an aria-label.
 * ------------------------------------------------------------------- */
.wptream_dura_icon_btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wptream_dura_radius_round);
  border: 1px solid transparent;
  background: transparent;
  color: var(--wptream_dura_fg);
  cursor: pointer;
  transition: var(--wptream_dura_tx);
  padding: 0;
  outline: none;
}
.wptream_dura_icon_btn:hover { background: var(--wptream_dura_fill_ghost_hover_strong); }
.wptream_dura_icon_btn:focus-visible { box-shadow: var(--wptream_dura_focus_ring); }
.wptream_dura_icon_btn_solid { background: var(--wptream_dura_fill_soft); }
.wptream_dura_icon_btn_solid:hover { background: var(--wptream_dura_fill_soft_hover); }
.wptream_dura_icon_btn_accent { background: var(--wptream_dura_accent); color: #fff; }
.wptream_dura_icon_btn_accent:hover { background: var(--wptream_dura_accent_hover); }
.wptream_dura_icon_btn_sm { width: 32px; height: 32px; }
.wptream_dura_icon_btn_lg { width: 48px; height: 48px; }
.wptream_dura_icon_btn svg { display: block; flex: 0 0 auto; }


/* ---------------------------------------------------------------------
 * C3. Field + Input  (components/core/Input.jsx)
 * Structure:
 *   .wptream_dura_field            column: label, control box, hint
 *     .wptream_dura_field_label
 *     .wptream_dura_input          the 44px bordered box (flex row)
 *       .wptream_dura_input_affix  optional prefix/suffix (icon or "@")
 *       .wptream_dura_input_control  the real <input> / <textarea>
 *     .wptream_dura_field_hint
 * Modifiers on .wptream_dura_field: _error (red border + red hint)
 * States: :focus-within colours the border accent and shows the ring.
 * ------------------------------------------------------------------- */
.wptream_dura_field {
  display: flex;
  flex-direction: column;
  gap: var(--wptream_dura_space_2);
}
.wptream_dura_field_label {
  font-size: var(--wptream_dura_size_caption);
  font-weight: var(--wptream_dura_weight_semibold);
  color: var(--wptream_dura_fg_2);
}
.wptream_dura_input {
  display: flex;
  align-items: center;
  gap: var(--wptream_dura_space_2);
  background: var(--wptream_dura_bg_raised);
  border: 1px solid var(--wptream_dura_border);
  border-radius: var(--wptream_dura_radius_sm);
  padding: 0 var(--wptream_dura_space_4);
  height: 44px;
  box-shadow: none;
  transition: var(--wptream_dura_tx);
}
.wptream_dura_input:focus-within {
  border-color: var(--wptream_dura_accent);
  box-shadow: var(--wptream_dura_focus_ring);
}
.wptream_dura_input_affix {
  color: var(--wptream_dura_fg_muted);
  display: flex;
  flex: 0 0 auto;
}
.wptream_dura_input_control {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--wptream_dura_font_body);
  font-size: var(--wptream_dura_size_body_sm);
  color: var(--wptream_dura_fg);
  padding: 0;
  margin: 0;
  height: 100%;
  box-shadow: none;
}
.wptream_dura_input_control::placeholder { color: var(--wptream_dura_fg_muted); }
/* Multi-line variant: the box grows with the textarea. */
.wptream_dura_input_multiline { height: auto; padding: var(--wptream_dura_space_3) var(--wptream_dura_space_4); align-items: flex-start; }
.wptream_dura_input_multiline .wptream_dura_input_control { resize: vertical; min-height: 120px; line-height: var(--wptream_dura_lh_body); }
.wptream_dura_field_hint {
  font-size: var(--wptream_dura_size_caption);
  color: var(--wptream_dura_fg_muted);
}
.wptream_dura_field_error .wptream_dura_input { border-color: var(--wptream_dura_danger); }
.wptream_dura_field_error .wptream_dura_field_hint { color: var(--wptream_dura_danger); }


/* ---------------------------------------------------------------------
 * C4. Select  (components/core/Select.jsx)
 * Structure: .wptream_dura_field > label + .wptream_dura_select > <select>
 * Native <select> with the chrome removed and a 12x8 chevron drawn as a
 * background image, 16px from the right edge.
 * ------------------------------------------------------------------- */
.wptream_dura_select {
  position: relative;
  display: flex;
}
.wptream_dura_select_control {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  padding: 0 var(--wptream_dura_space_8) 0 var(--wptream_dura_space_4);
  background-color: var(--wptream_dura_bg_raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236E6E77' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--wptream_dura_space_4) center;
  border: 1px solid var(--wptream_dura_border);
  border-radius: var(--wptream_dura_radius_sm);
  font-family: var(--wptream_dura_font_body);
  font-size: var(--wptream_dura_size_body_sm);
  color: var(--wptream_dura_fg);
  box-shadow: none;
  outline: none;
  cursor: pointer;
  transition: var(--wptream_dura_tx);
}
.wptream_dura_select_control:focus {
  border-color: var(--wptream_dura_accent);
  box-shadow: var(--wptream_dura_focus_ring);
}


/* ---------------------------------------------------------------------
 * C5. Checkbox  (components/core/Checkbox.jsx)
 * Structure:
 *   <label class="wptream_dura_checkbox">
 *     <input type="checkbox" class="wptream_dura_checkbox_input">
 *     <span class="wptream_dura_checkbox_box"></span>
 *     <span>Label text</span>
 *   </label>
 * 20px box, 4px radius, accent fill + white tick when checked.
 * Disabled: 40% opacity on the whole label.
 * ------------------------------------------------------------------- */
.wptream_dura_checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--wptream_dura_space_3);
  cursor: pointer;
  font-size: var(--wptream_dura_size_body_sm);
  color: var(--wptream_dura_fg);
  position: relative;
}
.wptream_dura_checkbox_input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.wptream_dura_checkbox_box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: var(--wptream_dura_radius_xs);
  border: 1px solid var(--wptream_dura_border);
  background: var(--wptream_dura_bg_raised);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--wptream_dura_tx);
}
.wptream_dura_checkbox_input:checked + .wptream_dura_checkbox_box {
  border-color: var(--wptream_dura_accent);
  background-color: var(--wptream_dura_accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5 4.2 7.7 11 1' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.wptream_dura_checkbox_input:focus-visible + .wptream_dura_checkbox_box { box-shadow: var(--wptream_dura_focus_ring); }
.wptream_dura_checkbox_input:disabled ~ * { opacity: 0.4; }
.wptream_dura_checkbox:has(.wptream_dura_checkbox_input:disabled) { cursor: not-allowed; }


/* ---------------------------------------------------------------------
 * C6. Switch  (components/core/Switch.jsx)
 * Structure:
 *   <label class="wptream_dura_switch">
 *     <input type="checkbox" class="wptream_dura_switch_input">
 *     <span class="wptream_dura_switch_track"><span class="wptream_dura_switch_thumb"></span></span>
 *     <span>Label</span>
 *   </label>
 * 44x26 pill track, 20px white thumb travels 18px. Off track = ink-700
 * (light) / ink-300 (dark); on = accent.
 * ------------------------------------------------------------------- */
.wptream_dura_switch {
  display: inline-flex;
  align-items: center;
  gap: var(--wptream_dura_space_3);
  cursor: pointer;
  font-size: var(--wptream_dura_size_body_sm);
  color: var(--wptream_dura_fg);
  position: relative;
  --wptream_dura_switch_off: var(--wptream_dura_ink_700);
}
.wptream_dura_dark .wptream_dura_switch { --wptream_dura_switch_off: var(--wptream_dura_ink_300); }
.wptream_dura_switch_input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.wptream_dura_switch_track {
  width: 44px;
  height: 26px;
  border-radius: var(--wptream_dura_radius_pill);
  padding: 3px;
  background: var(--wptream_dura_switch_off);
  transition: background var(--wptream_dura_dur_fast) var(--wptream_dura_ease);
  display: flex;
  flex: 0 0 auto;
}
.wptream_dura_switch_thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--wptream_dura_radius_round);
  background: #fff;
  transform: translateX(0);
  transition: transform var(--wptream_dura_dur_fast) var(--wptream_dura_ease);
  box-shadow: var(--wptream_dura_shadow_sm);
}
.wptream_dura_switch_input:checked + .wptream_dura_switch_track { background: var(--wptream_dura_accent); }
.wptream_dura_switch_input:checked + .wptream_dura_switch_track .wptream_dura_switch_thumb { transform: translateX(18px); }
.wptream_dura_switch_input:focus-visible + .wptream_dura_switch_track { box-shadow: var(--wptream_dura_focus_ring); }
.wptream_dura_switch_input:disabled ~ * { opacity: 0.4; }
.wptream_dura_switch:has(.wptream_dura_switch_input:disabled) { cursor: not-allowed; }


/* ---------------------------------------------------------------------
 * C7. Badge  (components/core/Badge.jsx)
 * Pill label, caption size, semibold.
 * Tones: _neutral (default) | _accent | _live | _success | _on_dark
 * Modifier: _dot prepends a 7px dot in the text colour.
 * ------------------------------------------------------------------- */
.wptream_dura_badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wptream_dura_space_2);
  padding: var(--wptream_dura_space_1) var(--wptream_dura_space_3);
  border-radius: var(--wptream_dura_radius_pill);
  background: var(--wptream_dura_ink_900);
  color: var(--wptream_dura_text_on_light_2);
  border: 1px solid var(--wptream_dura_border_light);
  font-size: var(--wptream_dura_size_caption);
  font-weight: var(--wptream_dura_weight_semibold);
  letter-spacing: var(--wptream_dura_track_normal);
  line-height: 1.4;
  white-space: nowrap;
}
.wptream_dura_badge_accent  { background: var(--wptream_dura_accent_tint); color: var(--wptream_dura_accent); border-color: transparent; }
.wptream_dura_badge_live    { background: var(--wptream_dura_live); color: #fff; border-color: transparent; }
.wptream_dura_badge_success { background: var(--wptream_dura_success_tint); color: var(--wptream_dura_success_text); border-color: transparent; }
.wptream_dura_badge_on_dark { background: rgba(255, 255, 255, 0.12); color: var(--wptream_dura_text_on_dark); border-color: transparent; }
.wptream_dura_badge_dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}


/* ---------------------------------------------------------------------
 * C8. Card  (components/core/Card.jsx)
 * Raised surface, hairline border, 20px radius, 32px padding.
 * Modifiers: _interactive (pointer, lifts 2px + md shadow on hover)
 *            _pad_sm (24px) | _pad_lg (48px)
 *            _radius_md (12px) | _radius_xl (32px)
 *            _box (48px padding + 28px radius, standalone frame)
 * Inside .wptream_dura_dark the card uses the dark raised surface and the
 * soft dark border automatically.
 * ------------------------------------------------------------------- */
.wptream_dura_card {
  background: var(--wptream_dura_bg_raised);
  border: 1px solid var(--wptream_dura_border);
  border-radius: var(--wptream_dura_radius_lg);
  padding: var(--wptream_dura_space_6);
  color: var(--wptream_dura_fg);
  box-shadow: none;
  transform: none;
  transition: transform var(--wptream_dura_dur_med) var(--wptream_dura_ease_out), box-shadow var(--wptream_dura_dur_med) var(--wptream_dura_ease);
}
.wptream_dura_dark .wptream_dura_card { border-color: var(--wptream_dura_border_soft); }
.wptream_dura_card_interactive { cursor: pointer; }
.wptream_dura_card_interactive:hover {
  box-shadow: var(--wptream_dura_shadow_md);
  transform: var(--wptream_dura_lift);
}
.wptream_dura_card_pad_sm { padding: var(--wptream_dura_space_5); }
.wptream_dura_card_pad_lg { padding: var(--wptream_dura_space_7); }
.wptream_dura_card_radius_md { border-radius: var(--wptream_dura_radius_md); }
.wptream_dura_card_radius_xl { border-radius: var(--wptream_dura_radius_xl); }
/* card_box is the shared large-card frame: 48px padding on all sides and the
   28px card corner. Usable on its own (any widget or Elementor container via
   _css_classes), not only with .wptream_dura_card. Scoped under
   .wptream_dura_site so it outranks Elementor's container padding/radius
   defaults without !important. */
.wptream_dura_site .wptream_dura_card_box {
  padding: var(--wptream_dura_space_7);
  border-radius: var(--wptream_dura_radius_card);
}
/* card_shadow is the resting shadow of raised content cards (card slider,
   reviews). Hover shadows stay with each component / microinteraction.css,
   whose :hover rules are more specific and win. */
.wptream_dura_site .wptream_dura_card_shadow { box-shadow: var(--wptream_dura_shadow_card); }

/* bg_rings is the fine concentric-curves pattern (the free-trial CTA band's
   "C2 fine curves"): lilac rings spreading from the bottom-right corner, faded
   in from the left (from the top on mobile). It is drawn on ::after behind
   the content, over the element's own background colour, so it works on any
   fill (dark band, grey hero). Usable on any section/container via
   _css_classes / classes. */
.wptream_dura_site .wptream_dura_bg_rings { position: relative; isolation: isolate; }
.wptream_dura_site .wptream_dura_bg_rings::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-radial-gradient(ellipse 450px 410px at 105% 124%, transparent 0 48px, #a792cb15 49px 50px, transparent 51px 84px);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
}
@media (max-width: 767px) {
  .wptream_dura_site .wptream_dura_bg_rings::after {
    -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 85%);
    mask-image: linear-gradient(180deg, transparent 10%, #000 85%);
  }
}


/* ---------------------------------------------------------------------
 * C9. Icon  (components/core/Icon.jsx)
 * Sizing/colour for the Lucide SVGs in site/icons (24px, 1.5 stroke,
 * currentColor). The SVG itself must carry fill="none" stroke="currentColor".
 * Sizes: default 24 | _sm 16 | _md 20 | _lg 32 | _xl 40
 * ------------------------------------------------------------------- */
.wptream_dura_icon {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
  color: inherit;
}
.wptream_dura_icon_sm { width: 16px; height: 16px; }
.wptream_dura_icon_md { width: 20px; height: 20px; }
.wptream_dura_icon_lg { width: 32px; height: 32px; }
.wptream_dura_icon_xl { width: 40px; height: 40px; }
/* Accent-tinted round tile behind an icon (feature cards on use-case pages). */
.wptream_dura_icon_tile {
  width: 48px;
  height: 48px;
  border-radius: var(--wptream_dura_radius_md);
  background: var(--wptream_dura_accent_tint);
  color: var(--wptream_dura_accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}


/* =====================================================================
 * D. MARKETING
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * D1. Eyebrow  (components/marketing/Eyebrow.jsx)
 * 12px, bold, uppercase, +0.08em tracking. Sits above a headline.
 * Tones: accent (default) | _muted | on dark context it turns ink-700
 *        automatically via --wptream_dura_eyebrow_color.
 * ------------------------------------------------------------------- */
.wptream_dura_eyebrow {
  font-size: var(--wptream_dura_size_eyebrow);
  font-weight: var(--wptream_dura_weight_bold);
  letter-spacing: var(--wptream_dura_track_eyebrow);
  text-transform: uppercase;
  color: var(--wptream_dura_eyebrow_color);
}
.wptream_dura_eyebrow_muted { color: var(--wptream_dura_fg_muted); }


/* ---------------------------------------------------------------------
 * D2. MediaPanel  (components/marketing/MediaPanel.jsx)
 * Structure:
 *   <figure class="wptream_dura_media">
 *     <div class="wptream_dura_media_frame">
 *       <img class="wptream_dura_media_img">            (or)
 *       <span class="wptream_dura_media_placeholder">Photography</span>
 *       <div class="wptream_dura_media_scrim_bottom"></div>   optional
 *       <div class="wptream_dura_media_overlay">...</div>     optional
 *     </div>
 *     <figcaption class="wptream_dura_media_caption">...</figcaption>
 *   </figure>
 * Frame modifiers: _ratio_16_9 (default) | _ratio_4_3 | _ratio_1_1 |
 *   _ratio_auto (fills parent, used for full-bleed heroes)
 *   _radius_md | _radius_xl | _radius_0
 *   _unframed  (no clip, no bg, image object-fit: contain; used for the
 *               home hero laptop render)
 *   _shadow    (shadow_media, used by the centered hero)
 * Scrims: _scrim_top | _scrim_bottom | _scrim_flat
 * ------------------------------------------------------------------- */
.wptream_dura_media {
  margin: 0;
  width: 100%;
}
.wptream_dura_media_frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--wptream_dura_radius_lg);
  overflow: hidden;
  background: var(--wptream_dura_ink_800);   /* empty state, light */
  display: flex;
  align-items: center;
  justify-content: center;
}
.wptream_dura_media_frame:has(.wptream_dura_media_img) { background: var(--wptream_dura_ink_200); }
.wptream_dura_media_ratio_4_3  { aspect-ratio: 4 / 3; }
.wptream_dura_media_ratio_1_1  { aspect-ratio: 1 / 1; }
.wptream_dura_media_ratio_auto { aspect-ratio: auto; height: 100%; background: var(--wptream_dura_ink_200); }
.wptream_dura_media_radius_md { border-radius: var(--wptream_dura_radius_md); }
.wptream_dura_media_radius_xl { border-radius: var(--wptream_dura_radius_xl); }
.wptream_dura_media_radius_0  { border-radius: 0; }
.wptream_dura_media_shadow    { box-shadow: var(--wptream_dura_shadow_media); }
.wptream_dura_media_unframed  { border-radius: 0; overflow: visible; background: transparent; }
.wptream_dura_media_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wptream_dura_media_unframed .wptream_dura_media_img { object-fit: contain; }
/* Media grows a little inside its frame when its interactive parent is hovered. */
.wptream_dura_card_interactive:hover .wptream_dura_media_img,
.wptream_dura_media_zoom:hover .wptream_dura_media_img { transform: var(--wptream_dura_zoom); }
.wptream_dura_media_zoom .wptream_dura_media_img,
.wptream_dura_card_interactive .wptream_dura_media_img { transition: var(--wptream_dura_tx_transform); }
.wptream_dura_media_placeholder {
  font-size: var(--wptream_dura_size_caption);
  font-weight: var(--wptream_dura_weight_semibold);
  letter-spacing: var(--wptream_dura_track_eyebrow);
  text-transform: uppercase;
  color: var(--wptream_dura_text_on_light_muted);
}
/* Full-bleed frames share their box with page copy: label moves to the corner. */
.wptream_dura_media_ratio_auto .wptream_dura_media_placeholder {
  position: absolute;
  right: var(--wptream_dura_space_4);
  bottom: var(--wptream_dura_space_4);
  color: var(--wptream_dura_text_on_dark_muted);
}
.wptream_dura_media_scrim_top,
.wptream_dura_media_scrim_bottom,
.wptream_dura_media_scrim_flat {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wptream_dura_media_scrim_top    { background: var(--wptream_dura_scrim_top); }
.wptream_dura_media_scrim_bottom { background: var(--wptream_dura_scrim_bottom); }
.wptream_dura_media_scrim_flat   { background: var(--wptream_dura_scrim_flat); }
.wptream_dura_media_overlay { position: absolute; inset: 0; }
.wptream_dura_media_caption {
  margin-top: var(--wptream_dura_space_3);
  font-size: var(--wptream_dura_size_caption);
  color: var(--wptream_dura_fg_muted);
}


/* ---------------------------------------------------------------------
 * D3. Hero  (components/marketing/Hero.jsx)
 * Layouts: _centered (default) | _split | _full_bleed
 * Structure:
 *   <section class="wptream_dura_hero wptream_dura_dark">
 *     [full_bleed only: <figure class="wptream_dura_media wptream_dura_hero_bg">
 *        <div class="wptream_dura_media_frame wptream_dura_media_ratio_auto wptream_dura_media_radius_0">
 *        <img ...><div class="wptream_dura_media_scrim_flat"></div></div></figure>]
 *     <div class="wptream_dura_hero_inner">
 *       <div class="wptream_dura_hero_copy">
 *         <div class="wptream_dura_eyebrow">..</div>
 *         <h1 class="wptream_dura_hero_title">..</h1>
 *         <p class="wptream_dura_hero_subtitle">..</p>
 *         <div class="wptream_dura_hero_actions"> buttons </div>
 *       </div>
 *       <div class="wptream_dura_hero_media"> media panel </div>
 *     </div>
 *   </section>
 * Centered: 192px top / 128px bottom padding, copy max 900px, title
 *   display-2, media below copy at radius-xl with media shadow.
 * Split: 128px padding, 2 equal columns with 96px gap, title display-3,
 *   copy max 520px, 4:3 media.
 * Full-bleed: min-height 620px, background media with flat scrim, copy
 *   centered vertically.
 * ------------------------------------------------------------------- */
.wptream_dura_hero {
  position: relative;
  background: var(--wptream_dura_bg);
  color: var(--wptream_dura_fg);
  padding: var(--wptream_dura_section_y_lg) var(--wptream_dura_gutter) var(--wptream_dura_section_y);
}
.wptream_dura_hero_inner {
  max-width: var(--wptream_dura_container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wptream_dura_space_9);
}
.wptream_dura_hero_copy {
  display: flex;
  flex-direction: column;
  gap: var(--wptream_dura_space_5);
  align-items: center;
  text-align: center;
  max-width: 900px;
}
.wptream_dura_hero_title {
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_display_2);
  font-weight: var(--wptream_dura_weight_black);
  letter-spacing: var(--wptream_dura_track_display);
  line-height: var(--wptream_dura_lh_display);
  color: var(--wptream_dura_fg);
  margin: 0;
  max-width: var(--wptream_dura_measure_display);
}
.wptream_dura_hero_subtitle {
  font-size: var(--wptream_dura_size_body_lg);
  line-height: var(--wptream_dura_lh_body);
  color: var(--wptream_dura_fg_2);
  max-width: 48ch;
  margin: 0;
}
.wptream_dura_hero_actions {
  display: flex;
  gap: var(--wptream_dura_space_3);
  flex-wrap: wrap;
  margin-top: var(--wptream_dura_space_2);
}
.wptream_dura_hero_media { width: 100%; }
/* Centered layout media: radius-xl, clipped, floats on the media shadow.
   Add .wptream_dura_hero_media_unframed for a transparent render (laptop). */
.wptream_dura_hero_media .wptream_dura_media_frame {
  border-radius: var(--wptream_dura_radius_xl);
  box-shadow: var(--wptream_dura_shadow_media);
}
.wptream_dura_hero_media_unframed .wptream_dura_media_frame,
.wptream_dura_hero_media .wptream_dura_media_unframed {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
/* Optional cap on the media width (design uses 640px for the laptop). */
.wptream_dura_hero_media_narrow { max-width: 640px; margin: 0 auto; }

/* split */
.wptream_dura_hero_split { padding: var(--wptream_dura_section_y) var(--wptream_dura_gutter); }
.wptream_dura_hero_split .wptream_dura_hero_inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wptream_dura_space_9);
  align-items: center;
}
.wptream_dura_hero_split .wptream_dura_hero_copy { align-items: flex-start; text-align: left; max-width: 520px; }
.wptream_dura_hero_split .wptream_dura_hero_title { font-size: var(--wptream_dura_size_display_3); }
.wptream_dura_hero_split .wptream_dura_hero_media .wptream_dura_media_frame {
  aspect-ratio: 4 / 3;
  border-radius: var(--wptream_dura_radius_lg);
  box-shadow: none;
}

/* full bleed */
.wptream_dura_hero_full_bleed {
  min-height: 620px;
  background: var(--wptream_dura_ink_050);
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wptream_dura_hero_bg {
  position: absolute;
  inset: 0;
  height: 100%;
}
.wptream_dura_hero_full_bleed .wptream_dura_hero_inner {
  position: relative;
  min-height: 620px;
  padding: var(--wptream_dura_section_y) var(--wptream_dura_gutter);
  justify-content: center;
  width: 100%;
}


/* ---------------------------------------------------------------------
 * D4. SectionHeader  (components/marketing/SectionHeader.jsx)
 * Eyebrow + display-4 title (max 20ch) + body-lg subtitle (max 62ch),
 * 16px gaps. Modifier: _center (centered, max 720px, auto margins).
 * Structure:
 *   <header class="wptream_dura_section_header">
 *     <div class="wptream_dura_eyebrow">..</div>
 *     <h2 class="wptream_dura_section_header_title">..</h2>
 *     <p class="wptream_dura_section_header_subtitle">..</p>
 *   </header>
 * ------------------------------------------------------------------- */
.wptream_dura_section_header {
  display: flex;
  flex-direction: column;
  gap: var(--wptream_dura_space_4);
  align-items: flex-start;
  text-align: left;
  max-width: none;
  margin: 0;
}
.wptream_dura_section_header_center {
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.wptream_dura_section_header_title {
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_display_4);
  font-weight: var(--wptream_dura_weight_bold);
  letter-spacing: var(--wptream_dura_track_display);
  line-height: var(--wptream_dura_lh_tight);
  margin: 0;
  max-width: 20ch;
  color: var(--wptream_dura_fg);
}
/* Highlighted words inside a section title: <span class="wptream_dura_title_accent">best</span>.
   One shared class for every widget heading and native heading (landing rule, 2026-09-26). */
.wptream_dura_title_accent { color: var(--wptream_dura_accent); }
.wptream_dura_section_header_subtitle {
  font-size: var(--wptream_dura_size_body_lg);
  line-height: var(--wptream_dura_lh_body);
  color: var(--wptream_dura_fg_2);
  max-width: var(--wptream_dura_measure_body);
  margin: 0;
}


/* ---------------------------------------------------------------------
 * D5. FeatureRow  (components/marketing/FeatureRow.jsx)
 * Two equal columns, 96px gap, vertically centered: copy (max 460px) and
 * a 4:3 media panel. Modifier: _reverse puts media on the left.
 * Structure:
 *   <div class="wptream_dura_feature_row">
 *     <div class="wptream_dura_feature_row_copy">
 *       <div class="wptream_dura_eyebrow">..</div>
 *       <h3 class="wptream_dura_feature_row_title">..</h3>
 *       <p class="wptream_dura_feature_row_body">..</p>
 *       <div class="wptream_dura_feature_row_action">
 *         <a class="wptream_dura_btn wptream_dura_btn_link wptream_dura_btn_arrow">Learn more</a>
 *       </div>
 *     </div>
 *     <figure class="wptream_dura_media">..4:3 frame..</figure>
 *   </div>
 * ------------------------------------------------------------------- */
.wptream_dura_feature_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wptream_dura_space_9);
  align-items: center;
}
.wptream_dura_feature_row_copy {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: var(--wptream_dura_space_4);
  max-width: 460px;
}
.wptream_dura_feature_row > .wptream_dura_media { order: 2; }
.wptream_dura_feature_row > .wptream_dura_media .wptream_dura_media_frame { aspect-ratio: 4 / 3; }
.wptream_dura_feature_row_reverse .wptream_dura_feature_row_copy { order: 2; }
.wptream_dura_feature_row_reverse > .wptream_dura_media { order: 1; }
.wptream_dura_feature_row_title {
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_headline);
  font-weight: var(--wptream_dura_weight_bold);
  letter-spacing: var(--wptream_dura_track_headline);
  line-height: var(--wptream_dura_lh_tight);
  margin: 0;
  color: var(--wptream_dura_fg);
}
/* Type and colour come from .wptream_dura_body_text in the markup. */
.wptream_dura_feature_row_body { margin: 0; }
.wptream_dura_feature_row_action { margin-top: var(--wptream_dura_space_2); }
/* Stack of feature rows: 128px between rows (home page uses three). */
.wptream_dura_feature_row + .wptream_dura_feature_row { margin-top: var(--wptream_dura_space_10); }


/* ---------------------------------------------------------------------
 * D6. SpecGrid  (components/marketing/SpecGrid.jsx)
 * Definition list of label / value / note cells with hairline dividers.
 * Columns: _cols_4 (default) | _cols_2 | _cols_3
 * Modifier: _undivided removes the rules.
 * Structure:
 *   <dl class="wptream_dura_spec_grid wptream_dura_spec_grid_cols_4">
 *     <div class="wptream_dura_spec_grid_item">
 *       <dt class="wptream_dura_spec_grid_label">Latency</dt>
 *       <dd class="wptream_dura_spec_grid_value">~3s</dd>
 *       <span class="wptream_dura_spec_grid_note">optional note</span>
 *     </div>
 *   </dl>
 * Every cell carries a top rule; because cells are contiguous (no gap)
 * this reads as one hairline above each row, exactly like the design
 * (grid border-top + per-row item border-top).
 * ------------------------------------------------------------------- */
.wptream_dura_spec_grid {
  display: grid;
  grid-template-columns: repeat(var(--wptream_dura_spec_cols, 4), 1fr);
  gap: 0;
  margin: 0;
}
.wptream_dura_spec_grid_cols_2 { --wptream_dura_spec_cols: 2; }
.wptream_dura_spec_grid_cols_3 { --wptream_dura_spec_cols: 3; }
.wptream_dura_spec_grid_cols_4 { --wptream_dura_spec_cols: 4; }
.wptream_dura_spec_grid_item {
  padding: var(--wptream_dura_space_6) var(--wptream_dura_space_5) var(--wptream_dura_space_6) 0;
  border-top: 1px solid var(--wptream_dura_border);
  display: flex;
  flex-direction: column;
  gap: var(--wptream_dura_space_2);
}
.wptream_dura_spec_grid_undivided .wptream_dura_spec_grid_item { border-top: none; }
.wptream_dura_spec_grid_label {
  font-size: var(--wptream_dura_size_caption);
  font-weight: var(--wptream_dura_weight_semibold);
  letter-spacing: var(--wptream_dura_track_eyebrow);
  text-transform: uppercase;
  color: var(--wptream_dura_fg_muted);
}
.wptream_dura_spec_grid_value {
  margin: 0;
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_title);
  font-weight: var(--wptream_dura_weight_bold);
  letter-spacing: var(--wptream_dura_track_headline);
  color: var(--wptream_dura_fg);
}
.wptream_dura_spec_grid_note {
  font-size: var(--wptream_dura_size_body_sm);
  line-height: var(--wptream_dura_lh_body);
  color: var(--wptream_dura_fg_2);
}


/* ---------------------------------------------------------------------
 * D7. PriceCard  (components/marketing/PriceCard.jsx)
 * 48px padding, 20px radius, 24px vertical gaps.
 * Modifier: _featured = dark surface, "Most popular" badge, primary CTA.
 * Structure:
 *   <div class="wptream_dura_price_card [wptream_dura_price_card_featured wptream_dura_dark]">
 *     <div class="wptream_dura_price_card_head">
 *       <span class="wptream_dura_price_card_name">Plus</span>
 *       <span class="wptream_dura_badge wptream_dura_badge_on_dark">Most popular</span>
 *     </div>
 *     <div class="wptream_dura_price_card_price">
 *       <span class="wptream_dura_price_card_amount">$59</span>
 *       <span class="wptream_dura_price_card_period">/ month</span>
 *     </div>
 *     <p class="wptream_dura_price_card_blurb">..</p>
 *     <a class="wptream_dura_btn wptream_dura_btn_outline wptream_dura_btn_block">Choose Plus</a>
 *     <ul class="wptream_dura_price_card_features"><li>..</li></ul>
 *   </div>
 * The featured card needs BOTH _featured and wptream_dura_dark so the
 * button/badge inside pick up the dark context.
 * ------------------------------------------------------------------- */
.wptream_dura_price_card {
  display: flex;
  flex-direction: column;
  gap: var(--wptream_dura_space_5);
  padding: var(--wptream_dura_space_7);
  border-radius: var(--wptream_dura_radius_lg);
  background: var(--wptream_dura_bg_raised);
  border: 1px solid var(--wptream_dura_border);
  color: var(--wptream_dura_fg);
}
.wptream_dura_price_card_featured {
  background: var(--wptream_dura_surface_dark);
  border-color: var(--wptream_dura_border_dark);
  color: var(--wptream_dura_text_on_dark);
}
.wptream_dura_price_card_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wptream_dura_space_3);
}
.wptream_dura_price_card_name {
  font-size: var(--wptream_dura_size_body);
  font-weight: var(--wptream_dura_weight_semibold);
}
.wptream_dura_price_card_price {
  display: flex;
  align-items: baseline;
  gap: var(--wptream_dura_space_2);
}
.wptream_dura_price_card_amount {
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_display_4);
  font-weight: var(--wptream_dura_weight_black);
  letter-spacing: var(--wptream_dura_track_display);
  line-height: 1;
}
.wptream_dura_price_card_period {
  font-size: var(--wptream_dura_size_body_sm);
  color: var(--wptream_dura_fg_muted);
}
.wptream_dura_price_card_featured .wptream_dura_price_card_period { color: var(--wptream_dura_text_on_dark_2); }
.wptream_dura_price_card_blurb {
  margin: 0;
  font-size: var(--wptream_dura_size_body_sm);
  line-height: var(--wptream_dura_lh_body);
  color: var(--wptream_dura_fg_2);
}
.wptream_dura_price_card_features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wptream_dura_space_3);
}
.wptream_dura_price_card_features li {
  display: flex;
  gap: var(--wptream_dura_space_3);
  align-items: flex-start;
  font-size: var(--wptream_dura_size_body_sm);
  line-height: var(--wptream_dura_lh_snug);
  color: var(--wptream_dura_fg_2);
  margin: 0;
}
/* 13x10 accent check mark before every feature line. */
.wptream_dura_price_card_features li::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 10px;
  margin-top: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1 5 4.5 8.5 12 1' stroke='%234E2EE5' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---------------------------------------------------------------------
 * D8. Disclosure  (components/marketing/Disclosure.jsx)
 * Accordion list with hairline rules; single-open is a JS concern.
 * Structure:
 *   <div class="wptream_dura_disclosure">
 *     <div class="wptream_dura_disclosure_item [wptream_dura_open]">
 *       <button class="wptream_dura_disclosure_trigger" aria-expanded="false">
 *         <span class="wptream_dura_disclosure_title wptream_dura_title">Question</span>
 *         <span class="wptream_dura_disclosure_toggle" aria-hidden="true"></span>
 *       </button>
 *       <div class="wptream_dura_disclosure_panel">
 *         <div class="wptream_dura_disclosure_panel_inner">
 *           <div class="wptream_dura_disclosure_content [wptream_dura_disclosure_content_media]">
 *             <div class="wptream_dura_disclosure_body"><p>..</p></div>
 *             <img class="wptream_dura_disclosure_media" ...>   optional
 *           </div>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 * Open state: add .wptream_dura_open to the item OR set aria-expanded=true
 * on the trigger; both selectors are wired. The panel animates with the
 * grid-template-rows 0fr -> 1fr trick (320ms) and the plus rotates 45deg.
 * ------------------------------------------------------------------- */
.wptream_dura_disclosure { border-bottom: 1px solid var(--wptream_dura_border); }
.wptream_dura_disclosure_item { border-top: 1px solid var(--wptream_dura_border); }
.wptream_dura_disclosure_trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wptream_dura_space_5);
  padding: var(--wptream_dura_space_6) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: var(--wptream_dura_tx);
  color: var(--wptream_dura_fg);
  outline: none;
}
.wptream_dura_disclosure_trigger:hover,
.wptream_dura_disclosure_trigger[aria-expanded="true"],
.wptream_dura_open > .wptream_dura_disclosure_trigger { color: var(--wptream_dura_accent); }
/* On dark the title stays white; only the toggle button colours up. */
.wptream_dura_dark .wptream_dura_disclosure_trigger:hover,
.wptream_dura_dark .wptream_dura_disclosure_trigger[aria-expanded="true"],
.wptream_dura_dark .wptream_dura_open > .wptream_dura_disclosure_trigger { color: var(--wptream_dura_fg); }
.wptream_dura_disclosure_trigger:focus-visible .wptream_dura_disclosure_toggle { box-shadow: var(--wptream_dura_focus_ring); }
.wptream_dura_disclosure_toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wptream_dura_bg);
  border: 1px solid var(--wptream_dura_border);
  color: var(--wptream_dura_fg_muted);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 300ms ease;
  transform: rotate(0deg);
}
.wptream_dura_dark .wptream_dura_disclosure_toggle { background: var(--wptream_dura_bg_raised); color: var(--wptream_dura_fg_2); }
/* 13x13 plus glyph, drawn in currentColor through a mask. */
.wptream_dura_disclosure_toggle::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M6.5 1v11M1 6.5h11' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M6.5 1v11M1 6.5h11' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wptream_dura_disclosure_trigger:hover .wptream_dura_disclosure_toggle,
.wptream_dura_disclosure_trigger[aria-expanded="true"] .wptream_dura_disclosure_toggle,
.wptream_dura_open > .wptream_dura_disclosure_trigger .wptream_dura_disclosure_toggle {
  background: var(--wptream_dura_accent);
  border-color: var(--wptream_dura_accent);
  color: #fff;
}
.wptream_dura_disclosure_trigger[aria-expanded="true"] .wptream_dura_disclosure_toggle,
.wptream_dura_open > .wptream_dura_disclosure_trigger .wptream_dura_disclosure_toggle { transform: rotate(45deg); }

.wptream_dura_disclosure_panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms ease;
  overflow: hidden;
}
.wptream_dura_disclosure_panel_inner {
  min-height: 0;
  opacity: 0;
  transition: opacity 220ms ease;
}
.wptream_dura_open > .wptream_dura_disclosure_panel,
.wptream_dura_disclosure_trigger[aria-expanded="true"] + .wptream_dura_disclosure_panel { grid-template-rows: 1fr; }
.wptream_dura_open > .wptream_dura_disclosure_panel > .wptream_dura_disclosure_panel_inner,
.wptream_dura_disclosure_trigger[aria-expanded="true"] + .wptream_dura_disclosure_panel > .wptream_dura_disclosure_panel_inner { opacity: 1; }
.wptream_dura_disclosure_content {
  display: grid;
  gap: var(--wptream_dura_space_6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 0 0 var(--wptream_dura_space_7);
}
.wptream_dura_disclosure_content_media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wptream_dura_disclosure_body {
  display: flex;
  flex-direction: column;
  gap: var(--wptream_dura_space_4);
  max-width: var(--wptream_dura_measure_body);
}
/* Type and colour come from .wptream_dura_body_text on .wptream_dura_disclosure_body. */
.wptream_dura_disclosure_body p { margin: 0; text-wrap: pretty; }
.wptream_dura_disclosure_action { margin-top: var(--wptream_dura_space_2); }
.wptream_dura_disclosure_media {
  width: 100%;
  display: block;
  border-radius: var(--wptream_dura_radius_md);
  object-fit: cover;
}


/* =====================================================================
 * E. NAVIGATION
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * E1. Nav  (components/navigation/Nav.jsx)
 * Sticky 56px bar, 94% white (light) or 94% ink-050 (dark), hairline
 * bottom border. Container 1180px, 32px gaps.
 * Structure:
 *   <nav class="wptream_dura_nav [wptream_dura_dark]">
 *     <div class="wptream_dura_nav_inner">
 *       <a class="wptream_dura_nav_brand" href="/"><img class="wptream_dura_nav_logo" ...></a>
 *       <div class="wptream_dura_nav_items">
 *         <div class="wptream_dura_nav_item [wptream_dura_nav_item_has_panel] [wptream_dura_open]">
 *           <a class="wptream_dura_nav_link [wptream_dura_active]" aria-haspopup="true" aria-expanded="false">
 *             Use Cases<span class="wptream_dura_nav_chevron"></span></a>
 *           <div class="wptream_dura_nav_panel [wptream_dura_nav_panel_cols_2] [wptream_dura_nav_panel_flip]">
 *             <a class="wptream_dura_nav_panel_link" href="..">Churches</a> ...
 *           </div>
 *         </div>
 *       </div>
 *       <div class="wptream_dura_nav_actions">
 *         <a class="wptream_dura_nav_secondary" href="/login">Login</a>
 *         <a class="wptream_dura_btn wptream_dura_btn_sm" href="/pricing">Free Trial</a>
 *       </div>
 *     </div>
 *   </nav>
 * Panel opens on item :hover, :focus-within, or .wptream_dura_open (JS).
 * _cols_2 = two 236px columns (used when >6 children); _flip aligns the
 * panel to the right edge when it would overflow the viewport (JS sets it).
 * Logo is inverted to white on dark via filter.
 * ------------------------------------------------------------------- */
.wptream_dura_nav {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--wptream_dura_nav_h);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--wptream_dura_border);
  color: var(--wptream_dura_fg);
}
.wptream_dura_nav.wptream_dura_dark {
  background: rgba(10, 10, 11, 0.94);
  border-bottom-color: var(--wptream_dura_border_soft);
}
.wptream_dura_nav_static { position: static; }
.wptream_dura_nav_inner {
  max-width: var(--wptream_dura_container);
  margin: 0 auto;
  min-height: var(--wptream_dura_nav_h);
  padding: 0 var(--wptream_dura_gutter);
  display: flex;
  align-items: center;
  gap: var(--wptream_dura_space_6);
}
.wptream_dura_nav_brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  /* text fallback when no logo image is used */
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_subtitle);
  font-weight: var(--wptream_dura_weight_black);
  letter-spacing: var(--wptream_dura_track_brand);
  color: var(--wptream_dura_fg);
}
.wptream_dura_nav_brand:hover { text-decoration: none; color: var(--wptream_dura_fg); }
.wptream_dura_nav_logo {
  height: 32px;
  width: auto;
  display: block;
}
.wptream_dura_dark .wptream_dura_nav_logo { filter: brightness(0) invert(1); }
.wptream_dura_nav_items {
  display: flex;
  align-items: center;
  gap: var(--wptream_dura_space_6);
  flex: 1;
}
.wptream_dura_nav_item {
  position: relative;
  display: flex;
  align-items: center;
}
.wptream_dura_nav_link {
  display: flex;
  align-items: center;
  font-size: var(--wptream_dura_size_body_sm);
  font-weight: var(--wptream_dura_weight_medium);
  color: var(--wptream_dura_fg_2);
  text-decoration: none;
  transition: var(--wptream_dura_tx);
  white-space: nowrap;
  cursor: pointer;
  padding: var(--wptream_dura_space_4) 0;
}
.wptream_dura_nav_link:hover { color: var(--wptream_dura_accent); text-decoration: none; }
.wptream_dura_nav_link.wptream_dura_active,
.wptream_dura_nav_link[aria-expanded="true"],
.wptream_dura_open > .wptream_dura_nav_link,
.wptream_dura_nav_item:hover > .wptream_dura_nav_link[aria-haspopup] {
  color: var(--wptream_dura_fg);
}
.wptream_dura_nav_link.wptream_dura_active { font-weight: var(--wptream_dura_weight_semibold); }
.wptream_dura_nav_link[aria-expanded="true"],
.wptream_dura_open > .wptream_dura_nav_link,
.wptream_dura_nav_item:hover > .wptream_dura_nav_link[aria-haspopup] {
  font-weight: var(--wptream_dura_weight_medium);
}
/* 9x6 chevron after links that open a panel; rotates when open. */
.wptream_dura_nav_chevron {
  width: 9px;
  height: 6px;
  margin-left: 5px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1.25 4.5 4.75 8 1.25' stroke='%23000' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1.25 4.5 4.75 8 1.25' stroke='%23000' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--wptream_dura_dur_fast) var(--wptream_dura_ease);
}
.wptream_dura_nav_link[aria-expanded="true"] .wptream_dura_nav_chevron,
.wptream_dura_open > .wptream_dura_nav_link .wptream_dura_nav_chevron,
.wptream_dura_nav_item:hover > .wptream_dura_nav_link .wptream_dura_nav_chevron { transform: rotate(180deg); }

.wptream_dura_nav_panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  margin-top: var(--wptream_dura_space_2);
  z-index: 60;
  background: var(--wptream_dura_bg_raised);
  border: 1px solid var(--wptream_dura_border);
  border-radius: var(--wptream_dura_radius_md);
  box-shadow: var(--wptream_dura_shadow_lg);
  padding: var(--wptream_dura_space_3);
  grid-template-columns: repeat(1, minmax(258px, 1fr));
  gap: 0;
  animation: wptream_dura_rise var(--wptream_dura_dur_fast) var(--wptream_dura_ease_out);
}
/* Invisible bridge so the pointer can cross the 8px gap without closing. */
.wptream_dura_nav_panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--wptream_dura_space_2) - 1px);
  height: calc(var(--wptream_dura_space_2) + 1px);
}
.wptream_dura_nav_panel_cols_2 {
  grid-template-columns: repeat(2, minmax(236px, 1fr));
  gap: var(--wptream_dura_space_1) var(--wptream_dura_space_4);
}
.wptream_dura_nav_panel_flip { left: auto; right: 0; }
.wptream_dura_nav_item:hover > .wptream_dura_nav_panel,
.wptream_dura_nav_item:focus-within > .wptream_dura_nav_panel,
.wptream_dura_open > .wptream_dura_nav_panel { display: grid; }
.wptream_dura_nav_panel_link {
  display: block;
  padding: var(--wptream_dura_space_2) var(--wptream_dura_space_3);
  border-radius: var(--wptream_dura_radius_sm);
  font-size: var(--wptream_dura_size_body_sm);
  font-weight: var(--wptream_dura_weight_medium);
  line-height: var(--wptream_dura_lh_snug);
  text-decoration: none;
  color: var(--wptream_dura_fg_2);
  background: transparent;
  transition: var(--wptream_dura_tx);
}
.wptream_dura_nav_panel_link:hover {
  color: var(--wptream_dura_accent);
  background: var(--wptream_dura_accent_tint);
  text-decoration: none;
}
.wptream_dura_dark .wptream_dura_nav_panel_link:hover { background: rgba(255, 255, 255, 0.06); }

.wptream_dura_nav_actions {
  display: flex;
  align-items: center;
  gap: var(--wptream_dura_space_6);
  flex: 0 0 auto;
  margin-left: auto;
}
.wptream_dura_nav_secondary {
  font-size: var(--wptream_dura_size_body_sm);
  font-weight: var(--wptream_dura_weight_medium);
  color: var(--wptream_dura_fg_2);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--wptream_dura_tx);
}
.wptream_dura_nav_secondary:hover { color: var(--wptream_dura_accent); text-decoration: none; }
/* Mobile toggle button - hidden on desktop, shown by section G. Not in the
   design source; the kit has no mobile nav. Markup: an .wptream_dura_icon_btn
   with class .wptream_dura_nav_toggle placed inside .wptream_dura_nav_inner. */
.wptream_dura_nav_toggle { display: none; margin-left: auto; }


/* ---------------------------------------------------------------------
 * E2. TabBar  (components/navigation/TabBar.jsx)
 * Row of text tabs on a hairline; active tab is semibold with a 2px
 * accent underline (white underline on dark). 32px gaps.
 * Modifier: _center
 * Structure:
 *   <div class="wptream_dura_tabs" role="tablist">
 *     <button class="wptream_dura_tabs_tab" role="tab" aria-selected="true">Monthly</button>
 *   </div>
 * ------------------------------------------------------------------- */
.wptream_dura_tabs {
  display: flex;
  gap: var(--wptream_dura_space_6);
  justify-content: flex-start;
  border-bottom: 1px solid var(--wptream_dura_border);
}
.wptream_dura_dark .wptream_dura_tabs { border-bottom-color: var(--wptream_dura_border_soft); }
.wptream_dura_tabs_center { justify-content: center; }
.wptream_dura_tabs_tab {
  appearance: none;
  background: none;
  border: none;
  padding: 0 0 var(--wptream_dura_space_4);
  cursor: pointer;
  font-family: var(--wptream_dura_font_body);
  font-size: var(--wptream_dura_size_body_sm);
  font-weight: var(--wptream_dura_weight_medium);
  color: var(--wptream_dura_fg_muted);
  box-shadow: none;
  transition: var(--wptream_dura_tx);
  outline: none;
  text-decoration: none;
  border-radius: 0;
}
.wptream_dura_tabs_tab:hover { color: var(--wptream_dura_fg); text-decoration: none; }
.wptream_dura_tabs_tab[aria-selected="true"],
.wptream_dura_tabs_tab.wptream_dura_active {
  font-weight: var(--wptream_dura_weight_semibold);
  color: var(--wptream_dura_fg);
  box-shadow: inset 0 -2px 0 0 var(--wptream_dura_accent);
}
.wptream_dura_dark .wptream_dura_tabs_tab[aria-selected="true"],
.wptream_dura_dark .wptream_dura_tabs_tab.wptream_dura_active { box-shadow: inset 0 -2px 0 0 var(--wptream_dura_text_on_dark); }
.wptream_dura_tabs_tab:focus-visible { box-shadow: var(--wptream_dura_focus_ring); }


/* ---------------------------------------------------------------------
 * E3. Footer  (components/navigation/Footer.jsx)
 * Light inset surface (ink-900) with hairline top rule; 96px top /
 * 32px bottom padding. Brand on the left, link groups on the right, legal
 * line under a rule. Add wptream_dura_dark for the dark variant.
 * Structure:
 *   <footer class="wptream_dura_footer">
 *     <div class="wptream_dura_footer_inner">
 *       <div class="wptream_dura_footer_top">
 *         <a class="wptream_dura_footer_brand"><img class="wptream_dura_footer_logo"></a>
 *         <div class="wptream_dura_footer_groups">
 *           <div class="wptream_dura_footer_group">
 *             <span class="wptream_dura_footer_group_title">Solutions</span>
 *             <a class="wptream_dura_footer_link" href="..">Live Streaming</a>
 *             <span class="wptream_dura_footer_text">plain (non-link) line</span>
 *           </div>
 *         </div>
 *       </div>
 *       <div class="wptream_dura_footer_legal">(c)2017-2026 WpStream. All rights Reserved.</div>
 *     </div>
 *   </footer>
 * Links nudge 3px right and turn accent on hover.
 * ------------------------------------------------------------------- */
.wptream_dura_footer {
  background: var(--wptream_dura_bg_inset);
  border-top: 1px solid var(--wptream_dura_border);
  padding: var(--wptream_dura_space_9) var(--wptream_dura_gutter) var(--wptream_dura_space_6);
  color: var(--wptream_dura_fg);
}
.wptream_dura_footer.wptream_dura_dark {
  background: var(--wptream_dura_surface_dark);
  border-top-color: var(--wptream_dura_border_soft);
}
.wptream_dura_footer_inner {
  max-width: 1280px;
  margin: 0 auto;
}
.wptream_dura_footer_top {
  display: flex;
  gap: var(--wptream_dura_space_9);
  flex-wrap: wrap;
  justify-content: space-between;
}
.wptream_dura_footer_brand {
  display: block;
  text-decoration: none;
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_title);
  font-weight: var(--wptream_dura_weight_black);
  letter-spacing: var(--wptream_dura_track_brand);
  color: var(--wptream_dura_fg);
}
.wptream_dura_footer_brand:hover { text-decoration: none; color: var(--wptream_dura_fg); }
.wptream_dura_footer_logo {
  height: 30px;
  width: auto;
  display: block;
}
.wptream_dura_dark .wptream_dura_footer_logo { filter: brightness(0) invert(1); }
.wptream_dura_footer_groups {
  display: flex;
  gap: var(--wptream_dura_space_9);
  flex-wrap: wrap;
}
.wptream_dura_footer_group {
  display: flex;
  flex-direction: column;
  gap: var(--wptream_dura_space_3);
  min-width: 130px;
}
.wptream_dura_footer_group_title {
  font-size: var(--wptream_dura_size_eyebrow);
  font-weight: var(--wptream_dura_weight_bold);
  letter-spacing: var(--wptream_dura_track_eyebrow);
  text-transform: uppercase;
  color: var(--wptream_dura_fg_muted);
}
.wptream_dura_footer_link {
  font-size: var(--wptream_dura_size_body_sm);
  text-decoration: none;
  color: var(--wptream_dura_fg_2);
  transform: none;
  transition: var(--wptream_dura_tx), transform var(--wptream_dura_dur_med) var(--wptream_dura_ease_out);
  width: fit-content;
}
.wptream_dura_footer_link:hover {
  color: var(--wptream_dura_accent);
  transform: var(--wptream_dura_nudge);
  text-decoration: none;
}
.wptream_dura_footer_text {
  font-size: var(--wptream_dura_size_body_sm);
  color: var(--wptream_dura_fg_2);
}
.wptream_dura_footer_legal {
  margin-top: var(--wptream_dura_space_8);
  padding-top: var(--wptream_dura_space_5);
  border-top: 1px solid var(--wptream_dura_border);
  font-size: var(--wptream_dura_size_legal);
  color: var(--wptream_dura_fg_muted);
}
.wptream_dura_dark .wptream_dura_footer_legal { border-top-color: var(--wptream_dura_border_soft); }


/* =====================================================================
 * F. FEEDBACK
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * F1. Dialog  (components/feedback/Dialog.jsx)
 * Fixed 60% black backdrop (z 200) fading in over 280ms; a 480px raised
 * box with 20px radius, lg shadow, 32px padding, 24px gaps.
 * Structure:
 *   <div class="wptream_dura_dialog" hidden>
 *     <div class="wptream_dura_dialog_box" role="dialog" aria-modal="true">
 *       <div class="wptream_dura_dialog_head">
 *         <h3 class="wptream_dura_dialog_title">Title</h3>
 *         <button class="wptream_dura_icon_btn wptream_dura_icon_btn_sm wptream_dura_dialog_close" aria-label="Close"></button>
 *       </div>
 *       <div class="wptream_dura_dialog_body">..</div>
 *       <div class="wptream_dura_dialog_foot"> buttons </div>
 *     </div>
 *   </div>
 * Show/hide by toggling the `hidden` attribute (JS). Modifier _wide = 640px.
 * ------------------------------------------------------------------- */
.wptream_dura_dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wptream_dura_gutter);
  animation: wptream_dura_fade var(--wptream_dura_dur_med) var(--wptream_dura_ease_out);
}
.wptream_dura_dialog[hidden] { display: none; }
.wptream_dura_dialog_box {
  width: 100%;
  max-width: 480px;
  background: var(--wptream_dura_bg_raised);
  color: var(--wptream_dura_fg);
  border: 1px solid var(--wptream_dura_border);
  border-radius: var(--wptream_dura_radius_lg);
  box-shadow: var(--wptream_dura_shadow_lg);
  padding: var(--wptream_dura_space_6);
  display: flex;
  flex-direction: column;
  gap: var(--wptream_dura_space_5);
}
.wptream_dura_dialog_wide .wptream_dura_dialog_box { max-width: 640px; }
.wptream_dura_dialog_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wptream_dura_space_4);
}
.wptream_dura_dialog_title {
  margin: 0;
  font-family: var(--wptream_dura_font_display);
  font-size: var(--wptream_dura_size_title);
  font-weight: var(--wptream_dura_weight_bold);
  letter-spacing: var(--wptream_dura_track_headline);
}
/* 12x12 close cross drawn in currentColor. */
.wptream_dura_dialog_close::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wptream_dura_dialog_body {
  font-size: var(--wptream_dura_size_body_sm);
  line-height: var(--wptream_dura_lh_body);
  color: var(--wptream_dura_fg_2);
}
.wptream_dura_dialog_foot {
  display: flex;
  gap: var(--wptream_dura_space_3);
  justify-content: flex-end;
}


/* ---------------------------------------------------------------------
 * F2. Tooltip  (components/feedback/Tooltip.jsx)
 * Pure CSS: bubble appears on :hover / :focus-within of the wrapper.
 * Placements: _top (default) | _bottom | _left | _right
 * Structure:
 *   <span class="wptream_dura_tooltip">
 *     <button ...>?</button>
 *     <span class="wptream_dura_tooltip_bubble wptream_dura_tooltip_top" role="tooltip">Text</span>
 *   </span>
 * Bubble: ink-100 bg, white caption text, 4px radius, md shadow, 8px
 * offset from the trigger, no wrapping.
 * ------------------------------------------------------------------- */
.wptream_dura_tooltip {
  position: relative;
  display: inline-flex;
}
.wptream_dura_tooltip_bubble {
  position: absolute;
  z-index: 100;
  background: var(--wptream_dura_ink_100);
  color: var(--wptream_dura_text_on_dark);
  font-size: var(--wptream_dura_size_caption);
  font-weight: var(--wptream_dura_weight_medium);
  line-height: var(--wptream_dura_lh_snug);
  padding: var(--wptream_dura_space_2) var(--wptream_dura_space_3);
  border-radius: var(--wptream_dura_radius_xs);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--wptream_dura_shadow_md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wptream_dura_dur_fast) var(--wptream_dura_ease), visibility 0s linear var(--wptream_dura_dur_fast);
  /* default placement: top */
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.wptream_dura_tooltip_bottom { bottom: auto; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.wptream_dura_tooltip_left   { bottom: auto; left: auto; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.wptream_dura_tooltip_right  { bottom: auto; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.wptream_dura_tooltip:hover .wptream_dura_tooltip_bubble,
.wptream_dura_tooltip:focus-within .wptream_dura_tooltip_bubble {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* Multi-line tooltip (pricing InfoDot copy is long): allow wrapping. */
.wptream_dura_tooltip_wrap { white-space: normal; width: max-content; max-width: 280px; }
/* Small round "i" trigger used on the pricing page. */
.wptream_dura_info_dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--wptream_dura_border);
  background: var(--wptream_dura_bg_raised);
  color: var(--wptream_dura_fg_muted);
  font-size: 11px;
  font-weight: var(--wptream_dura_weight_bold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  padding: 0;
  transition: var(--wptream_dura_tx);
}
.wptream_dura_info_dot:hover { color: var(--wptream_dura_accent); border-color: var(--wptream_dura_accent); }


/* =====================================================================
 * G. RESPONSIVE
 * The design kit is desktop-only. These rules stack the two-column
 * components and collapse the nav on small screens. Token-level scale
 * changes live in wptream_dura_tokens.css section 9.
 * ===================================================================== */
@media (max-width: 900px) {
  .wptream_dura_hero_split .wptream_dura_hero_inner,
  .wptream_dura_feature_row,
  .wptream_dura_disclosure_content_media { grid-template-columns: 1fr; }
  .wptream_dura_hero_split .wptream_dura_hero_inner { gap: var(--wptream_dura_space_7); }
  .wptream_dura_feature_row { gap: var(--wptream_dura_space_6); }
  /* Media always sits under the copy when stacked, regardless of _reverse. */
  .wptream_dura_feature_row_copy,
  .wptream_dura_feature_row_reverse .wptream_dura_feature_row_copy { order: 1; max-width: none; }
  .wptream_dura_feature_row > .wptream_dura_media,
  .wptream_dura_feature_row_reverse > .wptream_dura_media { order: 2; }
  .wptream_dura_feature_row + .wptream_dura_feature_row { margin-top: var(--wptream_dura_space_8); }

  .wptream_dura_grid_3,
  .wptream_dura_grid_4 { --wptream_dura_grid_cols: 2; }
  .wptream_dura_spec_grid,
  .wptream_dura_spec_grid_cols_3,
  .wptream_dura_spec_grid_cols_4 { --wptream_dura_spec_cols: 2; }

  /* Nav: hide the link row and secondary action, show the toggle button.
     A page script must toggle .wptream_dura_open on .wptream_dura_nav to
     reveal the items as a vertical list. */
  .wptream_dura_nav_items,
  .wptream_dura_nav_secondary { display: none; }
  .wptream_dura_nav_toggle { display: inline-flex; }
  .wptream_dura_nav_actions { margin-left: 0; }
  .wptream_dura_nav.wptream_dura_open .wptream_dura_nav_inner { flex-wrap: wrap; padding-bottom: var(--wptream_dura_space_4); }
  .wptream_dura_nav.wptream_dura_open .wptream_dura_nav_items {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    order: 10;
    flex: 1 0 100%;
    border-top: 1px solid var(--wptream_dura_border);
    padding-top: var(--wptream_dura_space_2);
  }
  .wptream_dura_nav.wptream_dura_open .wptream_dura_nav_item { display: block; }
  .wptream_dura_nav.wptream_dura_open .wptream_dura_nav_link { padding: var(--wptream_dura_space_3) 0; }
  .wptream_dura_nav.wptream_dura_open .wptream_dura_nav_panel {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    box-shadow: none;
    border: none;
    padding: 0 0 var(--wptream_dura_space_3) var(--wptream_dura_space_3);
    margin: 0;
    animation: none;
  }
  .wptream_dura_nav.wptream_dura_open .wptream_dura_nav_panel::before { display: none; }
}

@media (max-width: 600px) {
  .wptream_dura_grid_2,
  .wptream_dura_grid_3,
  .wptream_dura_grid_4 { --wptream_dura_grid_cols: 1; }
  .wptream_dura_spec_grid,
  .wptream_dura_spec_grid_cols_2,
  .wptream_dura_spec_grid_cols_3,
  .wptream_dura_spec_grid_cols_4 { --wptream_dura_spec_cols: 1; }
  .wptream_dura_price_card { padding: var(--wptream_dura_space_6); }
  .wptream_dura_footer_top { flex-direction: column; gap: var(--wptream_dura_space_7); }
  .wptream_dura_footer_groups { gap: var(--wptream_dura_space_6) var(--wptream_dura_space_8); }
  .wptream_dura_hero_actions .wptream_dura_btn { width: 100%; }
  .wptream_dura_tooltip_bubble { white-space: normal; width: max-content; max-width: 240px; }
}

/* ---------------------------------------------------------------------
 * Back to top (site-wide control, printed once in the footer by
 * wptream_dura_styles.php)
 *   <button class="wptream_dura_back_to_top" aria-label="Back to top" hidden>
 *     <svg> chevron up </svg>
 *   </button>
 * Fixed bottom-right accent circle. It ships with `hidden` (no JS = no
 * button); microinteraction.js removes it, shows the button once the page
 * is scrolled and scrolls back up smoothly. The show/hide motion and the
 * runtime `mi-back-to-top-visible` state live in microinteraction.css.
 * Sits above the sticky header (z 50) and below dialogs (z 200).
 * ------------------------------------------------------------------- */
.wptream_dura_back_to_top {
  position: fixed;
  right: var(--wptream_dura_space_6);
  bottom: var(--wptream_dura_space_6);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wptream_dura_accent);
  color: var(--wptream_dura_text_on_dark);
  box-shadow: var(--wptream_dura_shadow_md);
  cursor: pointer;
}
.wptream_dura_back_to_top[hidden] { display: none; }
.wptream_dura_back_to_top:hover { background: var(--wptream_dura_accent_hover); }
.wptream_dura_back_to_top:focus-visible { outline: none; box-shadow: var(--wptream_dura_focus_ring), var(--wptream_dura_shadow_md); }
.wptream_dura_back_to_top svg { display: block; width: 20px; height: 20px; }
@media (max-width: 767px) {
  .wptream_dura_back_to_top { right: var(--wptream_dura_space_4); bottom: var(--wptream_dura_space_4); width: 44px; height: 44px; }
}

/* Motion opt-out: freeze every transition/animation in the system. */
@media (prefers-reduced-motion: reduce) {
  [class*="wptream_dura_"],
  [class*="wptream_dura_"]::before,
  [class*="wptream_dura_"]::after {
    transition: none !important;
    animation: none !important;
  }
}