/*
 * TUF design - the ONE shared stylesheet for the public site and the dashboard (TUF-93).
 * Brand colours and link colours (tokens), the primary and outline buttons (with their arrows), eyebrow labels (no teal
 * line on the dashboard), text links and cards. Public pages load it after Elementor's styles (theme/tuf/functions.php, priority 999);
 * the dashboard and sign-in pages load it after dashboard.css (theme/tuf/dashboard.php). Selectors carry the page
 * scope (.elementor / .tdb), so these rules win over Elementor's without per-element overrides.
 */
:root {
  /* brand palette */
  --tuf-navy: #0A1730; --tuf-surface: #14284C; --tuf-elev: #1B335C; --tuf-card: #0E1D3C; --tuf-panel: #0E1D38;
  --tuf-teal: #2DD4BF; --tuf-teal-hover: #22C4AF; --tuf-teal-pressed: #14B8A6; --tuf-teal-light: #5EEAD4; --tuf-teal-pale: #9FF5E8; --tuf-teal-deep: #17B5A1;
  --tuf-ink: #0A1730; --tuf-ice: #B9D4FF; --tuf-white: #FFFFFF; --tuf-grey: #A3ACB9;
  --tuf-amber: #F5A524; --tuf-amber-text: #F5C46B; --tuf-red: #FF8A8E;
  /* links */
  --tuf-link: #2DD4BF; --tuf-link-hover: #5EEAD4;
  /* the primary action (moved here from parts/components/00-base.html) */
  --tuf-action-ramp: linear-gradient(135deg, #7FF0DF 0%, #2DD4BF 50%, #17B5A1 100%);
  --tuf-action-shadow: 0 0 0 1px rgba(45,212,191,.4), 0 14px 40px -6px rgba(45,212,191,.7), 0 0 24px rgba(45,212,191,.35);
  --tuf-action-shadow-hover: 0 0 0 1px rgba(45,212,191,.5), 0 18px 48px -6px rgba(45,212,191,.85), 0 0 32px rgba(45,212,191,.45);
}

/* ---- Buttons ----
   Primary: the teal ramp with navy text, 5px corners, a glow; lifts 1px with a stronger glow on hover, resets on press
   (moved here from parts/motion/00-core.html and dashboard.css). Buttons that take you somewhere end with an arrow
   (→, or ↗ for a new tab, ↓ for a download); the arrow sits in its own span where the markup allows. */
.elementor .tuf-btn-primary, .tdb .tuf-btn-primary, .tdb a.tuf-btn-primary {
  background-color: var(--tuf-teal); background-image: var(--tuf-action-ramp); box-shadow: var(--tuf-action-shadow);
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.tdb .tuf-btn-primary, .tdb a.tuf-btn-primary { color: var(--tuf-ink); font-weight: 600; border-radius: 5px; border: 0; }
.elementor :is(.tuf-btn-primary, .tuf-legal-cta-primary):hover, .tdb .tuf-btn-primary:hover, .tdb a.tuf-btn-primary:hover {
  transform: translateY(-1px); background-image: var(--tuf-action-ramp); box-shadow: var(--tuf-action-shadow-hover); }
.tdb .tuf-btn-primary:hover, .tdb a.tuf-btn-primary:hover { color: var(--tuf-ink); }
.elementor :is(.tuf-btn-primary, .tuf-legal-cta-primary):active, .tdb .tuf-btn-primary:active { box-shadow: var(--tuf-action-shadow); }
.elementor .tuf-btn-primary:active, .tdb .tuf-btn-primary:active { transform: none; }
.elementor .tuf-btn-secondary-navy { transition: border-color .16s ease, box-shadow .16s ease; }
@media (prefers-reduced-motion: reduce) { .elementor .tuf-btn-primary:hover, .tdb .tuf-btn-primary:hover { transform: none; } }

/* ---- Eyebrow labels: the public site keeps its teal line (.tuf-eyebrow-rule, as before TUF-93 - TUF-97); the dashboard's
   eyebrows have none (TUF-80). ---- */
.tdb .tdk-eyebrow-rule { display: none !important; }

/* ---- Text links: teal, a lighter teal on hover. :where() keeps these at zero specificity, so a page's own link classes
   (navigation, buttons, menus) still win. ---- */
:where(.tdb) a { color: var(--tuf-link); }
:where(.tdb) a:hover { color: var(--tuf-link-hover); }
.elementor :is(.tuf-link, .tuf-co-teal-link, .tuf-ch-card-link, .tuf-ch-cross, .tuf-hiwp-link):hover { color: var(--tuf-link-hover); }

/* ---- Cards (dashboard): navy surface, a teal-tinted edge, 18px corners (zero specificity: a page may pad or tint its own).
   Not .tuf-card: the public site's cards style themselves - some are white (the homepage How it works steps, TUF-99). ---- */
:where(.tdk-card) { background: linear-gradient(160deg, var(--tuf-surface), var(--tuf-panel)); border: 1px solid rgba(45,212,191,.32); border-radius: 18px; padding: 22px; }

/* ---- TUF-124 ----
   The phone header's button (header template 119, element 3a735c64: "Log in", or "Dashboard" when signed in, TUF-121):
   an outlined teal button - transparent, teal border and text, same height. The selector outranks the header's own
   white link rules. */
html body .elementor .tuf-site-header a.e-33b36-71d9.tuf-link-login { background-color: transparent; background-image: none; border: 1px solid var(--tuf-teal); color: var(--tuf-teal); box-shadow: none; }
html body .elementor .tuf-site-header a.e-33b36-71d9.tuf-link-login:hover { border-color: var(--tuf-link-hover); color: var(--tuf-link-hover); }
/* TUF-162: signed in, the phone bar's Dashboard button is solid teal like the desktop one (the primary button's ramp and navy text) */
html body .elementor .tuf-site-header a.e-33b36-71d9.tuf-link-login.tuf-hdr-dash { background-color: var(--tuf-teal); background-image: var(--tuf-action-ramp); border-color: var(--tuf-teal); color: var(--tuf-ink); }
html body .elementor .tuf-site-header a.e-33b36-71d9.tuf-link-login.tuf-hdr-dash:hover { border-color: var(--tuf-teal-hover); color: var(--tuf-ink); }
/* TUF-125: phones - 38px tall (8px / 14px padding), the standard 5px corners, a 1.5px border, centred in the header row. */
@media (max-width: 767px) {
  html body .elementor .tuf-site-header a.e-33b36-71d9.tuf-link-login { box-sizing: border-box; height: 38px; min-height: 0; padding: 8px 14px; border-width: 1.5px; border-radius: 5px; align-self: center; }
}
/* "Show more on Trustpilot" (Home, reviews): the standard primary button's corners (its teal comes from tuf-btn-primary). */
.elementor .e-71832b85-c718.tuf-btn-primary { border-radius: 5px; }
/* Home hero on phones: fixed spacing in place of the auto margins that grew and shrank with the screen height
   (header to Trustpilot pill 30, pill to eyebrow 34, eyebrow to headline 30, subheading to buttons 40, buttons to the
   divider 50, the TwoThirds row to the stats strip 34; the eyebrow and the buttons row carry 8px / 28px of top padding). */
@media (max-width: 767px) {
  .elementor .e-con[data-id="14af89bc"] { margin-top: 2px; }
  .elementor .e-con[data-id="430ddcbf"] { margin-top: 26px; }
  .elementor h1.e-ccba5d7-8eaa { margin-top: 20px; }
  .elementor .e-con[data-id="5e69445c"] { margin-top: 12px; }
  .elementor [data-id="c0de4002"] .tuf-trust { margin-top: 50px; }
  .elementor .e-con[data-id="577f8f1a"] { margin-top: 34px; }
}

/* TUF-218/228: the segmented size bar (design A) - ONE version for the homepage hero card (.tufpc:not([data-picker])
   .tufpc-sizes, aria-pressed) and the dashboard's welcome picker (.tuf-segbar, role="radio" aria-checked). Equal-width
   segments on one row; a hidden size takes no column and draws no divider; a divider sits between unselected neighbours,
   never next to the selected one. Phone width: every size on one line. */
.tuf-segbar, .elementor .tufpc:not([data-picker]) .tufpc-sizes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin-top: 14px; padding: 5px; border-radius: 14px; background: #1D2E50; border: 1px solid #2A3D60; }
.tuf-segbar > button, .elementor .tufpc:not([data-picker]) .tufpc-sizes button { padding: 13px 0; border: 0; border-radius: 10px; background: transparent; color: #DFE6EF; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; box-shadow: none; cursor: pointer; }
.tuf-segbar > button[hidden], .elementor .tufpc:not([data-picker]) .tufpc-sizes button[hidden] { display: none; }
.tuf-segbar > button:not([hidden]) ~ button, .elementor .tufpc:not([data-picker]) .tufpc-sizes button:not([hidden]) ~ button { box-shadow: inset 1px 0 rgba(255,255,255,.07); }
.tuf-segbar > button[aria-checked="true"], .tuf-segbar > button[aria-checked="true"] + button,
.elementor .tufpc:not([data-picker]) .tufpc-sizes button[aria-pressed="true"], .elementor .tufpc:not([data-picker]) .tufpc-sizes button[aria-pressed="true"] + button { box-shadow: none; }
.tuf-segbar > button:hover, .tuf-segbar > button:focus, .elementor .tufpc:not([data-picker]) .tufpc-sizes button:hover, .elementor .tufpc:not([data-picker]) .tufpc-sizes button:focus { background: rgba(255,255,255,.06); color: #fff; border: 0; }
.tuf-segbar > button[aria-checked="true"], .tuf-segbar > button[aria-checked="true"]:hover, .tuf-segbar > button[aria-checked="true"]:focus,
.elementor .tufpc:not([data-picker]) .tufpc-sizes button[aria-pressed="true"], .elementor .tufpc:not([data-picker]) .tufpc-sizes button[aria-pressed="true"]:hover, .elementor .tufpc:not([data-picker]) .tufpc-sizes button[aria-pressed="true"]:focus { background: #fff; color: var(--navy-900, #0A1730); border: 0; }
.tuf-segbar > button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 480px) {
  .tuf-segbar, .elementor .tufpc:not([data-picker]) .tufpc-sizes { padding: 4px; }
  .tuf-segbar > button, .elementor .tufpc:not([data-picker]) .tufpc-sizes button { padding: 0; min-height: 44px; font-size: 13px; letter-spacing: -.01em; }
}
@media (max-width: 370px) { .tuf-segbar > button, .elementor .tufpc:not([data-picker]) .tufpc-sizes button { font-size: 12.5px; } }