@charset "UTF-8";
/*!
Theme Name: Ways2Well Theme
Theme URI: http://underscores.me/
Author: Ways2Well
Author URI: https://ways2well.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ways2well
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Ways2Well Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
/**
 * Design tokens as CSS custom properties.
 *
 * Pulled from the REAL current site (ways2well-website/src/assets/styles/
 * _variablesV2.scss + _buttons.scss + component styles) — not placeholder
 * values. Swap values here if/when the new design (still in progress,
 * separate from this) lands; components should never hardcode colors
 * directly so that swap doesn't require touching page-templates/.
 */
@font-face {
  font-family: "Roboto Flex";
  src: url("assets/fonts/roboto-flex.woff2") format("woff2-variations"), url("assets/fonts/roboto-flex.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: optional;
}
/**
 * "New brand" display face — see docs/new-brand-guidelines.md ("Display ·
 * The Voice"). Licensed (Monotype/MyFonts, GCarturm — the guidelines doc's
 * "GC arturm Demo Medium" was a Figma-only demo cut; this is the real
 * licensed family, 9 static weights, not a variable font).
 *
 * PROPRIETARY — not covered by this theme's GPL. Licensed under Monotype's
 * "Font Software For Web Content" EULA: self-hosting these woff2 files is the
 * granted right, but they must not be modified (no subsetting or
 * re-conversion), redistributed, or shipped in anything public. Page views are
 * metered and the licence is scoped to one domain. See
 * assets/fonts/LICENSES.md and docs/font-licensing.md before touching these
 * files or the repository's visibility.
 *
 * font-display: swap, NOT optional. These nine faces were on `optional`, and
 * it meant the display font simply did not render on a cold cache: measured
 * via CDP CSS.getPlatformFontsForNode (the only check that reports the font
 * actually used — computed styles and document.fonts both report a face as
 * fine either way, see @styles/custom/_fonts.scss's header), 52 elements on
 * /care-plan/ that declare this family rendered 1340 glyphs of Inter and
 * zero of Arturm on first load, then the full Arturm once cached. That is
 * every first-time visitor losing the brand's display face. `optional` gives
 * roughly a 100ms window and, on a miss, sticks with the fallback for the
 * whole page load — the same trap _fonts.scss already documents for Roboto
 * Flex, and worse here because nine separate files each race their own
 * window.
 */
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/**
 * "New brand" (dark) type system — see docs/new-brand-guidelines.md.
 * Inter and IBM Plex Mono self-hosted (latin subset only, matching the
 * Roboto Flex pattern above) instead of loading from Google Fonts at
 * request time.
 */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter.woff2") format("woff2-variations"), url("assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --w2w-color-brand: #2e8bff;
  --w2w-color-navy: #26355e;
  --w2w-color-near-black: #121418;
  --w2w-color-dark: #181b20;
  --w2w-color-beige: #eceef3;
  --w2w-color-grey-10: #dfd8cc;
  --w2w-color-muted: #4f5058;
  --w2w-color-border: #dfd8cc;
  --w2w-color-light: #ffffff;
  --w2w-color-bg: #ffffff;
  --w2w-color-bg-alt: #eceef3;
  --w2w-color-success: #309261;
  --w2w-color-error: #e55263;
  /* legacy aliases used by early scaffolding — same values as above */
  --w2w-color-primary: var(--w2w-color-brand);
  --w2w-color-primary-dark: var(--w2w-color-navy);
  --w2w-font-body: "Roboto Flex", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --w2w-font-heading: var(--w2w-font-body);
  --w2w-space-xs: 8px;
  --w2w-space-sm: 16px;
  --w2w-space-md: 24px;
  --w2w-space-lg: 40px;
  --w2w-space-xl: 80px;
  --w2w-radius: 8px;
  --w2w-radius-pill: 40px;
  --w2w-container-width: 1200px;
  /**
   * "New brand" (dark) tokens — Tier 1-4 palette + type system from
   * docs/new-brand-guidelines.md (Figma "New website" file). Additive only:
   * the --w2w-color-* tokens above are the current LIVE (light) theme and
   * are untouched by this. Use --w2w-nb-* on pages built against the new
   * dark system (e.g. /care-plan/). Site-wide dark-theme cutover is a
   * separate, still-undecided question.
   */
  --w2w-nb-bg: #121418;
  --w2w-nb-brand: #2e8bff;
  /*
   * interactive/primary-hover and -pressed, read off the "Button · W2W"
   * component (2088:5076), not chosen here.
   *
   * `--w2w-nb-brand-hover` was already being used by three files —
   * _longevitylab-sections.scss, _longevitylab-package-sections.scss and
   * houstonclinic-iv-therapy.scss — and declared by none, so every rule
   * naming it was invalid and dropped. That silently undid the page
   * checkup's "всі сині кнопки мають мати один ховер": the shared rule
   * compiled, shipped, and then did nothing, which looks identical to a
   * button that was never given a hover at all.
   */
  --w2w-nb-brand-hover: #4fa3ff;
  --w2w-nb-brand-pressed: #1f6ed6;
  --w2w-nb-text: #eceef3;
  --w2w-nb-surface-raised: #181b20;
  --w2w-nb-surface-teal: #0b1f28;
  --w2w-nb-warm-sand: #c99a5b;
  --w2w-nb-warm-clay: #a78656;
  --w2w-nb-warm-rust: #c2451f;
  --w2w-nb-warm-amber: #e8902a;
  --w2w-nb-cool-teal: #3d91a2;
  --w2w-nb-cool-cyan: #78c1d4;
  --w2w-nb-text-secondary: #a8aeb8;
  --w2w-nb-text-tertiary: #6e747e;
  /* text/lead — the Figma variable the shop kit's ghost button and its lead
   * paragraphs use. It was referenced by the shop flow before it was declared
   * anywhere, so `color: var(--w2w-nb-text-lead)` resolved to an invalid value
   * and the property was dropped: the order page's "View" label inherited its
   * cell instead of taking this. */
  --w2w-nb-text-lead: #c3d2d8;
  /* surface/backdrop — the fill every form control in the new design sits on,
   * one step below surface/sky so a field reads as a well rather than a card.
   * Same story as text/lead: used before it existed here. */
  --w2w-nb-surface-backdrop: #050b0e;
  --w2w-nb-divider: #252a31;
  --w2w-nb-border: #2f3540;
  /* text/lead — body copy one step brighter than text/secondary, for a lead
   * paragraph or a control's own label. Used by the shop's filter chips and
   * sort control, which referenced it before it existed here. */
  --w2w-nb-text-lead: #c3d2d8;
  /* surface/backdrop — the fill a control sits on, one step below
   * surface/sky so a field reads as a well rather than a card. Same story:
   * referenced by the shop sheet before it was declared. */
  --w2w-nb-surface-backdrop: #050b0e;
  /* text/on-teal-tertiary — the muted grey the design uses for quiet copy
   * that sits on surface/teal rather than on a card. text/tertiary (#6e747e)
   * is tuned for the darker card fill and reads as nearly invisible on the
   * teal band. From the shop frames (3630:3867 / 3646:4156). */
  --w2w-nb-text-on-teal: #8fa3ac;
  /* glass/fill and glass/fill-raised — the two card tints. The first is a
   * resting surface, the second is what a control ON that surface uses (a
   * chip, the add button), so the two never read as the same plane. Written
   * as rgba rather than 8-digit hex because these are the exact values the
   * frames name; #eceef30b is 0.043, not 0.05, and the difference was already
   * visible where the two spellings met. */
  --w2w-nb-glass-fill: rgba(236, 238, 243, 0.05);
  --w2w-nb-glass-fill-raised: rgba(236, 238, 243, 0.07);
  --w2w-nb-glass-stroke: rgba(236, 238, 243, 0.1);
  /* Real licensed Arturm (2026-08-12) — the rounded-sans stack that follows
   * stays as a fallback for the rare case the woff2 fails to load, not as
   * the intended look. */
  --w2w-nb-font-display: "GC Arturm", ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", "Nunito", "Quicksand", var(--w2w-nb-font-body);
  --w2w-nb-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --w2w-nb-font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/**
 * Scrollbar styling for the dark brand system.
 *
 * A partial rather than a rule so both of the nav's scroll regions share one
 * definition — the desktop catch-all panel and the mobile full-screen menu are
 * in separate sheets (sass/pages/header/_bar.scss, _bar-mobile.scss) and would
 * otherwise each grow their own copy. Imported the same way new-home.scss
 * imports abstracts/horizon-divider.
 *
 * The theme's only existing styled scrollbar is `.w2w-popup-body` in
 * components/w2w/_popup-manager.scss, and it is not reusable here: #f1f1f1
 * track on #ccc thumb is a light-theme bar, which on rgb(14, 16, 19) reads as
 * a bright white stripe down the panel edge.
 *
 * Standard properties first, legacy pseudo-elements only as a fallback, and
 * deliberately not both at once: Chrome ignores `::-webkit-scrollbar-*` on any
 * element that also sets `scrollbar-color`, so declaring the pair unguarded
 * means the webkit block is dead code in every current browser while still
 * looking authoritative. @supports splits them so exactly one applies —
 * standard for Firefox / Chrome 121+ / Safari 18.4+, webkit for older Safari
 * and Chrome.
 *
 * @param {Color}  $thumb       Resting thumb colour.
 * @param {Color}  $thumb-hover Hover colour. Fallback path only — the standard
 *                              `scrollbar-color` has no hover state, so modern
 *                              browsers keep the resting colour throughout.
 * @param {Color}  $track       Gutter fill. Defaults to the panel surface, see
 *                              the note on the declaration below.
 * @param {Length} $width       Gutter width, fallback path only; `thin` is the
 *                              only width the standard property offers.
 */
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
button,
input,
select,
optgroup,
textarea {
  color: #404040;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
/*
 * One colour, no state colours.
 *
 * The _s starter ships `a:visited { color: #800080 }` (purple) and
 * `a:hover, a:focus, a:active { color: #191970 }` (midnightblue) here, and
 * because style.css is enqueued on every page those two rules applied to every
 * link on the site. They are also unusually hard to override: a state selector
 * like `a:visited` has specificity (0,1,1), which beats a plain component class
 * at (0,1,0) — so a component had to restate every state to keep its own
 * colour, and a component that forgot got purple links.
 *
 * Twelve stylesheets across the theme were doing exactly that, each with its
 * own comment explaining the same trap: the header bar and its mobile and
 * catch-all panels, care-plan and four of its sections, new-home, the shop
 * components, and most recently the blog's category chips and pagination,
 * which is what made it obvious this belonged at the source. The nav bar's
 * current-page link was the clearest case — a browser counts the current page
 * as visited, so the label for the page you were on rendered purple.
 *
 * So: one resting colour, and nothing for :visited, :hover or :active.
 *
 * No hover colour deliberately, rather than a nicer hover colour. Any value
 * here has to work on both the light legacy pages and the dark new-brand ones,
 * and a base `a:hover` outranking component classes is the whole problem being
 * fixed — putting a different value in the same rule would just move it.
 * Components own their own hover states, which every redesigned page already
 * defines. :focus keeps its outline, so keyboard navigation is unaffected.
 *
 * The existing per-component restatements are left in place: they are now
 * redundant rather than wrong, and removing them touches twelve files for no
 * behaviour change. They can go as those components are next edited.
 */
a {
  color: var(--w2w-nb-brand, #2e8bff);
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type=button],
input[type=reset],
input[type=submit] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}
button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
  border-color: #ccc #bbb #aaa;
}
button:active, button:focus,
input[type=button]:active,
input[type=button]:focus,
input[type=reset]:active,
input[type=reset]:focus,
input[type=submit]:active,
input[type=submit]:focus {
  border-color: #aaa #bbb #bbb;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* W2W (header, footer, shared page building blocks)
--------------------------------------------- */
/**
 * Site footer — see footer.php for the Figma node references and link-href
 * notes. Rebuilt 2026-08-21 against the "new brand" dark system; the
 * previous version never left the legacy --w2w-color-* / --w2w-space-* tokens.
 *
 * Breakpoint convention matches the rest of the new-brand pages: mobile
 * first, desktop override at 1024px. The gutter formula below is the same
 * one new-home.scss's `new-home-gutter` mixin uses (fluid width capped at
 * 1420px content, min 20px/40px side padding) — not imported from there to
 * avoid a cross-page dependency, just the same real Figma measurement.
 */
.w2w-footer {
  display: flex;
  flex-direction: column;
  gap: 42px;
  background: #061116;
  color: var(--w2w-nb-text);
  font-family: var(--w2w-nb-font-body);
  padding-block: 64px;
  padding-inline: max(20px, (100% - 1420px) / 2);
}
@media (min-width: 1024px) {
  .w2w-footer {
    gap: 0;
    padding-block: 140px;
    padding-inline: max(40px, (100% - 1420px) / 2);
  }
}
.w2w-footer a {
  color: inherit;
}

.w2w-footer__top {
  display: flex;
  flex-direction: column;
  gap: 42px;
}
@media (min-width: 1024px) {
  .w2w-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
  }
}

/* Brand + subscribe column ------------------------------------------------ */
.w2w-footer__brand-col {
  display: flex;
  flex-direction: column;
  gap: 42px;
}
@media (min-width: 1024px) {
  .w2w-footer__brand-col {
    gap: 60px;
    flex: 0 0 374px;
  }
}

.w2w-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.w2w-footer__logo {
  display: inline-flex;
  align-items: center;
}

.w2w-footer__logo-icon {
  flex: none;
  width: 40px;
  height: 40px;
}

.w2w-footer__logo-word {
  flex: none;
  width: 110px;
  height: 22px;
}

.w2w-footer__rule {
  width: 64px;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--w2w-nb-brand);
  opacity: 0.9;
}

.w2w-footer__socials {
  display: flex;
  gap: 16px;
}

.w2w-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--w2w-nb-surface-teal);
  color: var(--w2w-nb-text);
}

.w2w-footer__subscribe {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.w2w-footer__subscribe-title {
  margin: 0;
  font-family: var(--w2w-nb-font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.8px;
  color: var(--w2w-nb-text);
}

.w2w-newsletter-form__row {
  display: flex;
  gap: var(--w2w-space-xs);
}
.w2w-newsletter-form input {
  flex: 1;
  padding: var(--w2w-space-xs);
  border-radius: var(--w2w-radius);
  border: 1px solid var(--w2w-color-border);
}
.w2w-newsletter-form button {
  padding: var(--w2w-space-xs) var(--w2w-space-sm);
  border-radius: var(--w2w-radius);
  border: none;
  background: var(--w2w-color-primary);
  color: var(--w2w-color-light);
  cursor: pointer;
  white-space: nowrap;
}
.w2w-newsletter-form__message {
  font-size: 12px;
  margin-top: var(--w2w-space-xs);
}

.w2w-footer .w2w-newsletter-form__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width: 1024px) {
  .w2w-footer .w2w-newsletter-form__row {
    gap: 14px;
  }
}
.w2w-footer .w2w-newsletter-form input[type=email] {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 12px 30px;
  border: 1px solid var(--w2w-nb-brand);
  border-radius: var(--w2w-radius-pill);
  background: transparent;
  color: var(--w2w-nb-text);
  font-family: var(--w2w-nb-font-body);
  font-size: 14px;
  line-height: 1.55;
}
.w2w-footer .w2w-newsletter-form input[type=email]::placeholder {
  color: var(--w2w-nb-text-tertiary);
}
.w2w-footer .w2w-newsletter-form button[type=submit] {
  flex: none;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--w2w-radius-pill);
  background: var(--w2w-nb-brand);
  color: var(--w2w-nb-text);
  font-family: var(--w2w-nb-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.55;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms ease-out, box-shadow 140ms ease-out;
}
@media (min-width: 1024px) {
  .w2w-footer .w2w-newsletter-form button[type=submit] {
    padding: 12px 30px;
  }
}
.w2w-footer .w2w-newsletter-form button[type=submit]:hover {
  background-color: #4fa3ff;
  box-shadow: 0 6px 20px rgba(46, 140, 255, 0.42);
}
.w2w-footer .w2w-newsletter-form button[type=submit]:disabled {
  opacity: 0.6;
  cursor: default;
}
.w2w-footer .w2w-newsletter-form__message {
  margin-top: 8px;
  font-size: 12px;
  color: var(--w2w-nb-text);
}
.w2w-footer .w2w-newsletter-form .cf-turnstile {
  margin-top: 12px;
}

/* Link columns ------------------------------------------------------------ */
.w2w-footer__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (min-width: 1024px) {
  .w2w-footer__links {
    display: flex;
    flex: 1;
    gap: 24px;
  }
}

.w2w-footer__column {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .w2w-footer__column {
    flex: 1;
  }
}
.w2w-footer__column a {
  padding: 8px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #c3d2d8;
  text-decoration: none;
  transition: color 160ms ease-out;
}
.w2w-footer__column a:hover, .w2w-footer__column a:focus-visible {
  color: var(--w2w-nb-brand);
}

.w2w-footer__column-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 18px;
}

.w2w-footer__column-label {
  font-family: var(--w2w-nb-font-data);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.w2w-footer__column-rule {
  width: 50px;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid currentColor;
}

.w2w-footer__column--amber .w2w-footer__column-label,
.w2w-footer__column--amber .w2w-footer__column-rule {
  color: var(--w2w-nb-warm-amber);
}

.w2w-footer__column--rust .w2w-footer__column-label,
.w2w-footer__column--rust .w2w-footer__column-rule {
  color: var(--w2w-nb-warm-rust);
}

.w2w-footer__column--cyan .w2w-footer__column-label,
.w2w-footer__column--cyan .w2w-footer__column-rule {
  color: var(--w2w-nb-cool-cyan);
}

.w2w-footer__column--teal .w2w-footer__column-label,
.w2w-footer__column--teal .w2w-footer__column-rule {
  color: var(--w2w-nb-cool-teal);
}

/* Divider + legal ----------------------------------------------------------- */
.w2w-footer__divider {
  display: none;
  border: 0;
}
@media (min-width: 1024px) {
  .w2w-footer__divider {
    display: block;
    height: 1px;
    margin: 24px 0;
    background: rgba(236, 238, 243, 0.07);
  }
}

.w2w-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (min-width: 1024px) {
  .w2w-footer__legal {
    gap: 8px;
  }
}
.w2w-footer__legal p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--w2w-nb-text);
}
@media (min-width: 1024px) {
  .w2w-footer__legal p {
    font-size: 14px;
    line-height: 1.55;
  }
}
.w2w-footer__legal p > a {
  text-decoration: none !important;
}
.w2w-footer__legal a {
  color: var(--w2w-nb-brand);
}

/**
 * Generic building blocks reused across page-templates/ + template-parts/.
 * Ported loosely from the "redesign/" component library in the Vue app —
 * one shared class per pattern rather than per-page one-off CSS.
 */
.w2w-container {
  max-width: var(--w2w-container-width);
  margin: 0 auto;
  padding: 0 var(--w2w-space-md);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w2w-space-xs);
  padding: var(--w2w-space-sm) var(--w2w-space-md);
  height: 48px;
  border-radius: var(--w2w-radius-pill);
  font-family: var(--w2w-font-body);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.button--primary {
  background: var(--w2w-color-brand);
  color: var(--w2w-color-navy);
}
.button--dark {
  background: var(--w2w-color-near-black);
  color: var(--w2w-color-beige);
}
.button--secondary {
  background: var(--w2w-color-grey-10);
  color: var(--w2w-color-navy);
}

.w2w-hero {
  padding: var(--w2w-space-xl) 0;
  text-align: center;
  background: var(--w2w-color-bg-alt);
}
.w2w-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: var(--w2w-color-primary);
  font-weight: 700;
  margin-bottom: var(--w2w-space-xs);
}
.w2w-hero h1 {
  font-size: clamp(28px, 5vw, 48px);
  margin: 0 0 var(--w2w-space-sm);
}
.w2w-hero p {
  font-size: 18px;
  color: var(--w2w-color-muted);
  max-width: 640px;
  margin: 0 auto var(--w2w-space-md);
}

.w2w-section {
  padding: var(--w2w-space-xl) 0;
}
.w2w-section--alt {
  background: var(--w2w-color-bg-alt);
}
.w2w-section h2 {
  font-size: clamp(24px, 4vw, 34px);
  margin: 0 0 var(--w2w-space-md);
  text-align: center;
}

.w2w-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--w2w-space-md);
}
@media (max-width: 900px) {
  .w2w-grid-3 {
    grid-template-columns: 1fr;
  }
}

.w2w-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--w2w-space-md);
}
@media (max-width: 900px) {
  .w2w-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.w2w-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--w2w-space-md);
  text-align: center;
  margin-top: var(--w2w-space-lg);
}
@media (max-width: 700px) {
  .w2w-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.w2w-stats__number {
  font-size: 28px;
  font-weight: 700;
  color: var(--w2w-color-navy);
  margin: 0;
}
.w2w-stats__label {
  color: var(--w2w-color-muted);
  margin: 4px 0 0;
}

.w2w-card {
  background: var(--w2w-color-light);
  border: 1px solid var(--w2w-color-border);
  border-radius: var(--w2w-radius);
  padding: var(--w2w-space-md);
}
.w2w-card h3 {
  margin: 0 0 var(--w2w-space-xs);
  font-size: 18px;
}
.w2w-card p {
  color: var(--w2w-color-muted);
  margin: 0;
}
.w2w-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease;
}
.w2w-card--link:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.w2w-price-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--w2w-space-md);
}
@media (max-width: 700px) {
  .w2w-price-cards {
    grid-template-columns: 1fr;
  }
}

.w2w-price-card {
  background: var(--w2w-color-light);
  border: 1px solid var(--w2w-color-border);
  border-radius: var(--w2w-radius);
  padding: var(--w2w-space-md);
}
.w2w-price-card h3 {
  margin: 0 0 var(--w2w-space-sm);
}
.w2w-price-card__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w2w-space-sm);
  padding: var(--w2w-space-sm) 0;
  border-top: 1px solid var(--w2w-color-border);
}
.w2w-price-card__option:first-of-type {
  border-top: none;
}

.w2w-cta-banner {
  background: var(--w2w-color-primary);
  color: var(--w2w-color-light);
  border-radius: var(--w2w-radius);
  padding: var(--w2w-space-lg);
  text-align: center;
}
.w2w-cta-banner h3 {
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 var(--w2w-space-sm);
}
.w2w-cta-banner p {
  max-width: 560px;
  margin: 0 auto var(--w2w-space-md);
  opacity: 0.9;
}

.w2w-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--w2w-space-md);
}
@media (max-width: 900px) {
  .w2w-reviews {
    grid-template-columns: 1fr;
  }
}

.w2w-review {
  background: var(--w2w-color-light);
  border: 1px solid var(--w2w-color-border);
  border-radius: var(--w2w-radius);
  padding: var(--w2w-space-md);
}
.w2w-review__author {
  font-weight: 600;
  margin: 0 0 var(--w2w-space-xs);
}
.w2w-review__text {
  color: var(--w2w-color-muted);
  margin: 0;
  font-style: italic;
}

.w2w-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
}
.w2w-checklist li {
  position: relative;
  padding-left: 32px;
  margin-bottom: var(--w2w-space-sm);
}
.w2w-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--w2w-color-brand);
  font-weight: 700;
}

.w2w-table {
  width: 100%;
  border-collapse: collapse;
}
.w2w-table th, .w2w-table td {
  padding: var(--w2w-space-sm);
  border-bottom: 1px solid var(--w2w-color-border);
  text-align: left;
}
.w2w-table th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--w2w-color-muted);
}

.w2w-faq {
  max-width: 760px;
  margin: 0 auto;
}
.w2w-faq__item {
  border-bottom: 1px solid var(--w2w-color-border);
}
.w2w-faq__question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--w2w-space-sm) 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--w2w-space-sm);
}
.w2w-faq__answer {
  display: none;
  padding-bottom: var(--w2w-space-sm);
  color: var(--w2w-color-muted);
}
.w2w-faq__item.is-open .w2w-faq__answer {
  display: block;
}

.w2w-legal {
  background: var(--w2w-nb-surface-teal);
  color: var(--w2w-nb-text);
  font-family: var(--w2w-nb-font-body);
}

.w2w-legal__masthead {
  border-bottom: 1px solid var(--w2w-nb-glass-stroke);
  padding: 56px 20px 32px;
}
@media (min-width: 1024px) {
  .w2w-legal__masthead {
    padding: 88px 48px 44px;
  }
}

.w2w-legal__masthead-inner {
  max-width: 1160px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w2w-legal__eyebrow {
  margin: 0;
  font-family: var(--w2w-nb-font-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w2w-nb-text-secondary);
}

.w2w-legal__title {
  margin: 0;
  font-family: var(--w2w-nb-font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.w2w-legal__meta {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--w2w-nb-font-data);
  font-size: 12.5px;
  color: var(--w2w-nb-text-lead);
}

.w2w-legal__meta-label {
  color: var(--w2w-nb-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10.5px;
}

.w2w-legal__body {
  max-width: 1160px;
  margin-inline: auto;
  padding: 40px 20px 96px;
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .w2w-legal__body {
    padding: 56px 48px 128px;
  }
}

@media (min-width: 1024px) {
  .w2w-legal--has-toc .w2w-legal__body {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 64px;
  }
}

.w2w-legal__contents {
  border-left: 2px solid var(--w2w-nb-glass-stroke);
  padding-left: 18px;
}
@media (min-width: 1024px) {
  .w2w-legal__contents {
    position: sticky;
    top: calc(var(--w2w-nav-clearance, 96px) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--w2w-nav-clearance, 96px) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 10px;
    /*
     * A twenty-one entry contents list does not fit a short viewport, so this
     * rail scrolls — and the browser's default scrollbar is a light rail on
     * the darkest surface in the system, which is the single most visible
     * thing on the page once it appears.
     *
     * The track is the page ground, not the mixin's default: this rail has no
     * fill of its own — only a left border — so a transparent or panel-dark
     * track would read as a seam beside the text.
     */
    scrollbar-width: thin;
    scrollbar-color: rgba(236, 238, 243, 0.22) var(--w2w-nb-surface-teal);
  }
  @supports not (scrollbar-color: auto) {
    .w2w-legal__contents::-webkit-scrollbar {
      width: 8px;
    }
    .w2w-legal__contents::-webkit-scrollbar-track {
      background: var(--w2w-nb-surface-teal);
    }
    .w2w-legal__contents::-webkit-scrollbar-thumb {
      border: 2px solid var(--w2w-nb-surface-teal);
      border-radius: 999px;
      background-color: rgba(236, 238, 243, 0.22);
      background-clip: padding-box;
    }
    .w2w-legal__contents::-webkit-scrollbar-thumb:hover {
      background-color: rgba(236, 238, 243, 0.34);
    }
  }
}

.w2w-legal__contents-heading {
  margin: 0 0 12px;
  font-family: var(--w2w-nb-font-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w2w-nb-text-secondary);
}

.w2w-legal__contents-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  line-height: 1.45;
}
.w2w-legal__contents-list a {
  display: block;
  padding: 5px 0;
  color: var(--w2w-nb-text-lead);
  text-decoration: none;
  transition: color 120ms ease-out;
}
.w2w-legal__contents-list a:hover,
.w2w-legal__contents-list a:focus-visible {
  color: var(--w2w-nb-text);
}

.w2w-legal__doc {
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.68;
  color: var(--w2w-nb-text-lead);
  /*
   * Doubled selector, not a stylistic tic: it has to outrank the heading
   * rules below.
   *
   * `.w2w-legal__doc > :first-child` and `.w2w-legal__doc .w2w-legal__heading`
   * are both (0,2,0), and the heading rule is emitted later, so a document
   * whose first node is a PROMOTED heading kept margin-top — measured 44px for
   * a section heading, 30.6px for a sub. A bare `h2` was fine, because
   * `.w2w-legal__doc h2` is only (0,1,1); that is why nothing on the twelve
   * current documents showed it, and why it would have appeared the first time
   * a document opened with a bold lead-in.
   */
}
.w2w-legal__doc > :first-child:first-child {
  margin-top: 0;
}
.w2w-legal__doc p {
  margin: 0 0 1.15em;
}
.w2w-legal__doc {
  /*
   * Promoted from a bold paragraph by w2w_legal_page_outline(). Read that
   * function's note before changing the selector — these documents contain no
   * real h1-h4 of their own.
   *
   * The size difference between the two levels has to be expressed through the
   * SAME class the markup carries, not through the tag. `.w2w-legal__heading`
   * is (0,2,0) and `.w2w-legal__doc h3` only (0,1,1), so a tag-based h3 rule
   * lost every time and all thirty subheadings on /terms/ rendered at section
   * size — the two-level outline was in the HTML and invisible on the page.
   */
}
.w2w-legal__doc .w2w-legal__heading,
.w2w-legal__doc h2,
.w2w-legal__doc h3 {
  margin: 2.2em 0 0.7em;
  font-family: var(--w2w-nb-font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--w2w-nb-text);
  text-wrap: balance;
  scroll-margin-top: calc(var(--w2w-nav-clearance, 96px) + 24px);
}
.w2w-legal__doc .w2w-legal__heading--sub,
.w2w-legal__doc h3:not([class]) {
  font-size: 17px;
  margin-top: 1.8em;
  color: var(--w2w-nb-text-lead);
}
.w2w-legal__doc strong,
.w2w-legal__doc b {
  color: var(--w2w-nb-text);
  font-weight: 600;
}
.w2w-legal__doc ul,
.w2w-legal__doc ol {
  margin: 0 0 1.15em;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.w2w-legal__doc ul li::marker {
  color: var(--w2w-nb-text-tertiary);
}
.w2w-legal__doc ol li::marker {
  color: var(--w2w-nb-text-secondary);
}
.w2w-legal__doc a {
  color: var(--w2w-nb-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.w2w-legal__doc address {
  font-style: normal;
  color: var(--w2w-nb-text);
}
.w2w-legal__doc .w2w-legal__doc-scroll,
.w2w-legal__doc table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.w2w-legal__doc table {
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 1.15em;
}
.w2w-legal__doc th,
.w2w-legal__doc td {
  border: 1px solid var(--w2w-nb-glass-stroke);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.w2w-legal__doc th {
  color: var(--w2w-nb-text);
  font-weight: 600;
}

.w2w-legal__gap {
  border: 1px solid var(--w2w-nb-glass-stroke);
  border-left: 3px solid var(--w2w-nb-brand);
  border-radius: 10px;
  background: var(--w2w-nb-glass-fill);
  padding: 20px 22px;
  max-width: 62ch;
}
.w2w-legal__gap p {
  margin: 0 0 0.7em;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--w2w-nb-text-lead);
}
.w2w-legal__gap p:last-child {
  margin-bottom: 0;
}
.w2w-legal__gap a {
  color: var(--w2w-nb-brand);
}

.w2w-legal__gap-title {
  font-family: var(--w2w-nb-font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--w2w-nb-text);
}

/**
 * Shared interactive primitives — see js/w2w-ui.js for the markup contract.
 */
.w2w-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.w2w-modal[aria-hidden=true] {
  display: none;
}

.w2w-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.w2w-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(90vw, 1200px);
  max-height: 85vh;
}

.w2w-modal__close {
  position: absolute;
  top: -40px;
  right: 0;
  border: 0;
  background: none;
  color: var(--w2w-color-light);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.w2w-modal [data-video-mount],
.w2w-modal iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}

.w2w-modal [data-video-mount] iframe {
  width: 100%;
  height: 100%;
}

body.w2w-modal-open {
  overflow: hidden;
}

/**
 * Marquee: JS duplicates the children, so -50% is exactly one full set.
 *
 * Element-targeting contract (see initMarquees() in js/w2w-ui.js):
 * `data-marquee` MUST be on the inner `.w2w-marquee__track` — the flex row
 * that gets its children cloned and gets translated — never on the outer
 * `.w2w-marquee` wrapper, which only clips overflow and never moves.
 *
 *   <div class="w2w-marquee">
 *     <div class="w2w-marquee__track" data-marquee>
 *       <span>Item 1</span>
 *       <span>Item 2</span>
 *     </div>
 *   </div>
 *
 * data-marquee on .w2w-marquee instead is a silent no-op: only
 * .w2w-marquee__track.is-animating is animated below.
 */
.w2w-marquee {
  overflow: hidden;
}

.w2w-marquee__track {
  display: flex;
  width: max-content;
}
.w2w-marquee__track.is-animating {
  animation: w2w-marquee-scroll var(--w2w-marquee-duration, 30s) linear infinite;
}

@keyframes w2w-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .w2w-marquee__track.is-animating {
    animation: none;
  }
}
/**
 * A card whose whole surface follows its own call-to-action.
 *
 * Asked for in three places in the page checkup - Houston clinic, IV Houston
 * and Peptides - so it lives here once rather than three times. The card keeps
 * exactly one link: the CTA already inside it grows a transparent ::after that
 * covers the card, instead of the card being wrapped in a second anchor. That
 * matters beyond tidiness - a wrapping anchor would swallow the CTA into
 * itself (nested anchors are invalid and browsers unnest them), and it would
 * announce the card's entire text as one link label to a screen reader, where
 * this keeps the label the CTA's own words.
 *
 * BEFORE USING THIS, check the card for an intermediate positioned ancestor.
 * `inset: 0` resolves against the nearest positioned element, not against the
 * card, so if the CTA sits inside a wrapper that has its own
 * `position: relative` - a hover-reveal overlay is the usual reason - the
 * overlay stops at that wrapper and covers only part of the card. That is a
 * silent failure: the card looks clickable and half of it is not. The theme's
 * own answer for that case is a duplicate `aria-hidden` anchor as a direct
 * child of the card (see `.new-home-service__stretched-link` in
 * sass/pages/new-home/_02-services.scss); use that instead, not this.
 *
 * The card must establish a containing block for the overlay, so it takes
 * `position: relative` here rather than relying on each page to remember.
 * Anything inside the card that has to stay clickable or selectable on its own
 * - a second link, a video control - needs `position: relative` and a z-index
 * above the overlay; `&__above` is that opt-out.
 */
.w2w-card-link {
  position: relative;
}
.w2w-card-link__target::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.w2w-card-link__above {
  position: relative;
  z-index: 2;
}
.w2w-card-link:hover .w2w-card-link__target, .w2w-card-link:focus-within .w2w-card-link__target {
  text-decoration: underline;
}

/* ==========================================================================
   SUGGESTED FOR YOU — [w2w_product_recommendations] shortcode
   --------------------------------------------------------------------------
   Fully isolated: only .w2w-suggested* classes, so this can never collide
   with the shop archive's own product-grid styling.
   Horizontal cards: image left, title + (price · cart) right.
   ========================================================================== */
.w2w-suggested {
  max-width: 1460px;
  margin: 60px auto 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.w2w-suggested__title {
  margin: 0;
  color: var(--blue, #2e8bff) !important;
  font-family: Roboto, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 1px;
  text-transform: none;
}

.w2w-suggested__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.w2w-suggested__product {
  display: flex;
  align-items: stretch;
  min-width: 0;
  background-color: #181b20 !important;
  background-image: none !important;
  border: 1px solid var(--grey, #4F5058);
  border-radius: 12px;
  overflow: hidden;
  padding-right: 42px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.w2w-suggested .w2w-suggested__product,
.w2w-suggested .w2w-suggested__product-image,
.w2w-suggested .w2w-suggested__product-link {
  background-color: #181b20 !important;
  background-image: none !important;
}

@media (hover: hover) {
  .w2w-suggested__product:hover {
    box-shadow: 0 0 10px 0 var(--blue, #2e8bff);
  }
}
.w2w-suggested__product-link {
  flex: 0 0 120px;
  width: 120px;
  height: 160px;
  display: block;
  overflow: hidden;
}

.w2w-suggested__product-image,
.w2w-suggested__product-image img {
  width: 100%;
  height: 100%;
}

.w2w-suggested__product-image img {
  object-fit: cover;
  display: block;
}

.w2w-suggested__product-info {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
}

.w2w-suggested__product-title {
  margin: 0;
  color: var(--white, #FFF);
  font-family: Roboto, sans-serif;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.1;
  letter-spacing: 1px;
  text-transform: none;
}

.w2w-suggested__product-title a {
  color: inherit;
  text-decoration: none;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.w2w-suggested__product-title a:hover {
  color: var(--blue, #2e8bff);
}

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

.w2w-suggested__product-price,
.w2w-suggested__product-price * {
  color: var(--blue, #2e8bff) !important;
  font-family: Roboto, sans-serif !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
  line-height: 1.1 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

.w2w-suggested__product-price del,
.w2w-suggested__product-price del * {
  color: #6B6C73 !important;
  font-size: 14px !important;
  text-decoration: line-through;
}

/* Hide any subscription discount badge ("10%") SATT may append — the card
   shows a clean price only (also suppressed PHP-side, see the shortcode). */
.w2w-suggested__product-price .wcsatt-sub-options,
.w2w-suggested__product-price .wcsatt-sub-discount,
.w2w-suggested__product-price .wcsatt-price-suffix {
  display: none !important;
}

/* Hide WooCommerce's "View cart" link appended after AJAX add-to-cart —
   the card keeps only the round cart button. */
.w2w-suggested .added_to_cart,
.w2w-suggested .added_to_cart.wc-forward {
  display: none !important;
}

.w2w-suggested__product-btn-cart,
.w2w-suggested__product-btn-cart:hover,
.w2w-suggested__product-btn-cart:focus,
.w2w-suggested__product-btn-cart:active {
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  border-radius: 50% !important;
  background: var(--blue, #2e8bff) !important;
  color: #FFF !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color 0.2s;
}

.w2w-suggested__product-btn-cart:hover {
  background: var(--Light-blue, #95D8F9) !important;
}

.w2w-suggested__product-btn-cart svg {
  width: 14px;
  height: 14px;
  display: block;
}

.w2w-suggested__product-btn-cart.loading,
.w2w-suggested__product-btn-cart.added {
  opacity: 0.85;
}

.w2w-suggested__product-btn-cart::after {
  display: none !important;
}

@media (max-width: 1024px) {
  .w2w-suggested__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .w2w-suggested {
    padding: 0 16px;
    margin-top: 40px;
  }
}
@media (max-width: 600px) {
  .w2w-suggested {
    gap: 20px;
  }
  .w2w-suggested__title {
    font-size: 24px;
    line-height: 1.2;
  }
  .w2w-suggested__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .w2w-suggested__product {
    padding-right: 20px;
  }
  .w2w-suggested__product-link {
    flex: 0 0 120px;
    width: 120px;
    height: 150px;
  }
  .w2w-suggested__product-info {
    gap: 10px;
    padding: 28px 0 32px;
    justify-content: space-between;
  }
  .w2w-suggested__product-title {
    font-size: 18px !important;
  }
  .w2w-suggested__product-btn-cart,
  .w2w-suggested__product-btn-cart:hover,
  .w2w-suggested__product-btn-cart:focus,
  .w2w-suggested__product-btn-cart:active {
    flex-basis: 40px;
    width: 40px !important;
    height: 40px !important;
  }
  .w2w-suggested__product-btn-cart svg {
    width: 18px;
    height: 18px;
  }
}
/**
 * W2W Popup Manager - Styles
 *
 * Modern, accessible popup styling with smooth animations. See
 * w2w-core/inc/popup-manager/ for the PHP registration engine and JS
 * trigger/session logic this styles.
 */
/* Overlay */
.w2w-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.w2w-popup-overlay.w2w-popup--showing {
  display: flex !important;
}

.w2w-popup-overlay.w2w-popup--visible {
  opacity: 1;
}

body.w2w-popup-open {
  overflow: hidden;
}

.w2w-popup-container {
  background: #1b1d29;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  max-width: 90%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.w2w-popup-overlay.w2w-popup--visible .w2w-popup-container {
  transform: scale(1);
}

.w2w-popup--small {
  width: 100%;
  max-width: 400px;
}

.w2w-popup--medium {
  width: 100%;
  max-width: 600px;
}

.w2w-popup--large {
  width: 100%;
  max-width: 900px;
}

.w2w-popup-content {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

button.w2w-popup-close {
  position: absolute;
  top: 0px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  z-index: 10;
}

button.w2w-popup-close:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.w2w-popup-header {
  padding: 25px 50px 20px 25px;
  border-bottom: 1px solid #e5e5e5;
  flex-shrink: 0;
}

.w2w-popup-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.w2w-popup-body {
  padding: 25px;
  overflow-y: auto;
  flex: 1;
}

.w2w-popup-body p:first-child {
  margin-top: 0;
}

.w2w-popup-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .w2w-popup-overlay {
    padding: 10px;
  }
  .w2w-popup-container {
    max-width: 100%;
    max-height: 95vh;
  }
  .w2w-popup--small,
  .w2w-popup--medium,
  .w2w-popup--large {
    max-width: 100%;
  }
  .w2w-popup-header {
    padding: 20px 45px 15px 20px;
  }
  .w2w-popup-title {
    font-size: 20px;
  }
  .w2w-popup-body {
    padding: 20px;
  }
  .w2w-popup-close {
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .w2w-popup-overlay,
  .w2w-popup-container,
  .w2w-popup-close {
    transition: none;
  }
}
@media print {
  .w2w-popup-overlay {
    display: none !important;
  }
}
.w2w-popup-body::-webkit-scrollbar {
  width: 8px;
}

.w2w-popup-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.w2w-popup-body::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.w2w-popup-body::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.w2w-popup-body .button,
.w2w-popup-body .btn {
  margin-top: 15px;
}

.w2w-popup-body ul,
.w2w-popup-body ol {
  padding-left: 20px;
}

.w2w-popup-body a {
  color: #007bff;
  text-decoration: underline;
}

.w2w-popup-body a:hover {
  color: #0056b3;
}

.w2w-popup-body strong {
  font-weight: 600;
}

/* Alert/warning style variants (can be added via custom classes) */
.w2w-popup-body.w2w-popup-body--warning {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
}

.w2w-popup-body.w2w-popup-body--error {
  background: #f8d7da;
  border-left: 4px solid #dc3545;
}

.w2w-popup-body.w2w-popup-body--info {
  background: #d1ecf1;
  border-left: 4px solid #17a2b8;
}

.w2w-popup-body.w2w-popup-body--success {
  background: #d4edda;
  border-left: 4px solid #28a745;
}

/* Gift card balance — WooCommerce My Account endpoint
--------------------------------------------- */
.woocommerce-MyAccount-content #pwgc-balance-title {
  font-weight: 500;
  font-size: 32px;
  color: #fff;
  text-transform: none;
}
.woocommerce-MyAccount-content #pwgc-balance-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
}
.woocommerce-MyAccount-content .w2w-gift-card-icon-wrapper {
  text-align: center;
  margin-bottom: 30px;
}
.woocommerce-MyAccount-content #pwgc-balance-number {
  width: 100%;
  max-width: 300px;
  margin: 0;
}
.woocommerce-MyAccount-content #pwgc-balance-button {
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 100px;
  margin-left: 20px;
}
.woocommerce-MyAccount-content .w2w-gift-card-image-wrapper {
  text-align: center;
  margin-top: 40px;
}
.woocommerce-MyAccount-content .w2w-gift-card-image {
  max-width: 100%;
  height: auto;
}

/* Navigation
--------------------------------------------- */
.main-navigation {
  display: block;
  width: 100%;
}
.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}
.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}
.main-navigation ul ul a {
  width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}
.main-navigation li {
  position: relative;
}
.main-navigation a {
  display: block;
  text-decoration: none;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }
  .main-navigation ul {
    display: flex;
  }
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}
.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*=wp-image-] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/* Jetpack infinite scroll
--------------------------------------------- */
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;
  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;
  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}