/*
 * Single product page - styles.
 *
 * Lifted out of woocommerce/single-product.php on 30 Jul 2026. The block was
 * 58 KB of CSS, byte-identical on all 1,133 product pages and printed inline on
 * every one of them, so no browser could ever cache it. As a file it is fetched
 * once and reused, and the template drops to a size a person can read.
 *
 * Colour lives in tokens.css. Nothing in this file paints a literal colour
 * inside a rule any more - every value is either a semantic token or one of
 * the local properties below, so a dark variant needs to override one block
 * rather than hunt through 2,600 lines.
 *
 * The exceptions are marked where they appear: Klarna's pink and near-black
 * are that company's brand, not ours, and the design system says external
 * brands are not restyled.
 */

/* ==========================================================================
   FIXFACTOR SINGLE PRODUCT TEMPLATE v5.7 - SEO OPTIMIZED
   ========================================================================== */

/*
 * Local properties.
 *
 * Colours that the design system already names point at it, so this page moves
 * with the rest of the site - and, when a dark variant lands in tokens.css,
 * moves with that too for free. Rules keep using var(--ff-*), so pointing the
 * alias is a nine-line change rather than 2,600 lines of find-and-replace.
 *
 * The handful with no counterpart stay literal here, in one block, and are
 * marked. They are candidates for the design system, not for this file - but
 * tokens.css is copied verbatim from the design system and is not edited here.
 */
:root {
  /* --- Aliases onto the design system ----------------------------------- */
  --ff-brand-light: var(--teal-tint-fill);
  --ff-gray-50: var(--surface-alt);
  --ff-gray-200: var(--border-neutral);
  --ff-gray-300: var(--border-neutral);
  --ff-gray-500: var(--content-secondary);
  --ff-gray-600: var(--content-secondary);
  --ff-gray-900: var(--content-body);
  --ff-placeholder: var(--content-secondary);
  --ff-divider: var(--border-neutral);
  --ff-divider-text: var(--content-secondary);
  --ff-trustpilot-green: var(--trustpilot);
  --ff-brand-light-hover: var(--teal-tint-faint);
  --ff-tile-border: var(--teal-tint-border);
  --ff-fill: var(--surface-fill);
  --ff-radius: var(--radius-input);

  /* --- No counterpart in the design system yet -------------------------- */
  --ff-gray-100: #e9ecef;          /* one step between surface-alt and border-neutral */
  --ff-accent-light: #fff9e6;      /* amber tint - the system has no warm surface */
  --ff-note-fill: #fef6db;         /* amber tint, note boxes */
  --ff-badge-subtitle: #3d6b72;    /* muted teal, selected badge subtitle */
  --ff-fill-hover: #eaeaea;        /* modal close button, hover */

  /* --- Black-with-alpha: shadows, scrims, tooltip fills ------------------
     Named rather than inlined because these are the values a dark variant has
     to replace with a different technique, not a different colour: a black
     shadow is invisible on a dark surface. One block to override. */
  --ff-shadow-xs: rgba(0, 0, 0, 0.04);
  --ff-shadow-sm: rgba(0, 0, 0, 0.12);
  --ff-shadow-md: rgba(0, 0, 0, 0.15);
  --ff-shadow-lg: rgba(0, 0, 0, 0.2);
  --ff-hairline: rgba(0, 0, 0, 0.08);
  --ff-scrim: rgba(0, 0, 0, 0.5);
  --ff-tooltip-fill: rgba(0, 0, 0, 0.92);
  --ff-focus-glow: rgba(255, 209, 0, 0.2);

  /* --- Geometry and scale ------------------------------------------------ */
  --ff-border-width: 1px;
  --ff-border-width-thick: 2px;

  --ff-space-xs: 4px;
  --ff-space-sm: 8px;
  --ff-space-md: 12px;
  --ff-space-lg: 16px;
  --ff-space-xl: 20px;
  --ff-space-2xl: 24px;
  --ff-space-3xl: 30px;
  --ff-space-4xl: 40px;
  --ff-space-5xl: 48px;
  --ff-space-6xl: 60px;

  --ff-font-xs: 11px;
  --ff-font-sm: 12px;
  --ff-font-md: 14px;
  --ff-font-lg: 16px;
  --ff-font-xl: 18px;
  --ff-font-2xl: 20px;
  --ff-font-3xl: 24px;
  --ff-font-4xl: 28px;
  --ff-font-5xl: 32px;
  --ff-font-6xl: 36px;
}

/* Reset and Base Styles - Modified to use grid layout for consistent sidebar positioning */
.fixfactor-product {
    max-width: 1140px;
    margin: 0 auto;
    padding: 25px var(--ff-space-xl) var(--ff-space-5xl) var(--ff-space-xl);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    color: var(--content);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 0 var(--ff-space-6xl);
    grid-template-rows: auto 1fr;
}

/* ============================================================================
   WOOCOMMERCE DEFAULT ELEMENTS - HIDDEN
   Note: Rank Math Pro handles all SEO data (schema, categories, tags, SKU)
   ============================================================================ */
.woocommerce-product-gallery,
.woocommerce-tabs,
.related.products,
.cross-sells,
.woocommerce-product-attributes,
.woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs,
.single-product-summary,
.woocommerce-variation-add-to-cart {
    display: none !important;
}

/* Typography and Content */
.fixfactor-content-area h1,
.fixfactor-content-area h2,
.fixfactor-content-area h3,
.fixfactor-content-area h4,
.fixfactor-content-area h5,
.fixfactor-content-area h6 {
    color: var(--content);
    font-weight: 600;
    margin: 1.5em 0 0.5em 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.fixfactor-content-area h1 { font-size: var(--ff-font-4xl); }
.fixfactor-content-area h2 { font-size: var(--ff-font-3xl); }
.fixfactor-content-area h3 { font-size: var(--ff-font-2xl); }
.fixfactor-content-area h4 { font-size: var(--ff-font-xl); }
.fixfactor-content-area h5 { font-size: var(--ff-font-lg); }
.fixfactor-content-area h6 { font-size: var(--ff-font-md); }

.fixfactor-content-area p {
    margin: 0 0 1.2em 0;
    line-height: 1.7;
    color: var(--content);
}

.fixfactor-content-area ul,
.fixfactor-content-area ol {
    margin: 1em 0;
    padding-left: 1.5em;
    color: var(--content);
}

.fixfactor-content-area li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.fixfactor-content-area strong,
.fixfactor-content-area b {
    font-weight: 600;
    color: var(--content);
}

.fixfactor-content-area em,
.fixfactor-content-area i {
    font-style: italic;
}

.fixfactor-content-area a {
    color: var(--action);
    text-decoration: none;
    transition: color 0.2s ease;
}

.fixfactor-content-area a:hover {
    color: var(--action-hover);
    text-decoration: underline;
}

.fixfactor-content-area blockquote {
    background: var(--ff-gray-50);
    border-left: 3px solid var(--content);
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-radius: 0;
}

.fixfactor-content-area img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ff-radius);
    margin: 1em 0;
}

.fixfactor-content-area pre,
.fixfactor-content-area code {
    background: var(--ff-gray-50);
    border-radius: var(--ff-radius);
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    padding: 2px 6px;
    font-size: 90%;
}

.fixfactor-content-area pre {
    padding: 1em;
    overflow-x: auto;
    margin: 1em 0;
}

/* Form Styling */
.fixfactor-content-area .wpforms-container,
.fixfactor-content-area .wpforms-form {
    margin: 0;
}

.fixfactor-content-area .wpforms-field {
    margin-bottom: 6px;
}

/* WPForms Styling - Combined selectors for specificity against both Avada and WPForms defaults */
.fixfactor-content-area .wpforms-field input,
.fixfactor-content-area .wpforms-field select,
.fixfactor-content-area .wpforms-field input[type="text"],
.fixfactor-content-area .wpforms-field input[type="email"],
.fixfactor-content-area .wpforms-field input[type="tel"],
.fixfactor-content-area .wpforms-field input[type="number"],
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form select {
    width: 100% !important;
    padding: 14px var(--ff-space-md) !important;
    min-height: 47px !important;
    border: 1.5px solid var(--content-secondary) !important;
    border-radius: 9px !important;
    background: var(--surface) !important;
    font-size: 14px !important;
    color: var(--content) !important;
    line-height: 1.4 !important;
    transition: border-color 0.2s ease !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.fixfactor-content-area .wpforms-field textarea,
div.wpforms-container-full .wpforms-form textarea {
    width: 100% !important;
    padding: 14px var(--ff-space-md) !important;
    border: 1.5px solid var(--content-secondary) !important;
    border-radius: 9px !important;
    background: var(--surface) !important;
    font-size: 14px !important;
    color: var(--content) !important;
    line-height: 1.4 !important;
    transition: border-color 0.2s ease, border-width 0.2s ease !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.fixfactor-content-area .wpforms-field input::placeholder,
.fixfactor-content-area .wpforms-field textarea::placeholder,
div.wpforms-container-full .wpforms-form input::placeholder,
div.wpforms-container-full .wpforms-form textarea::placeholder {
    color: var(--content-secondary) !important;
    opacity: 1 !important;
}

.fixfactor-content-area .wpforms-field input:focus,
.fixfactor-content-area .wpforms-field select:focus,
.fixfactor-content-area .wpforms-field textarea:focus,
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
    outline: none !important;
    border: 2px solid var(--accent) !important;
    box-shadow: none !important;
}

.fixfactor-content-area .wpforms-field label {
    font-weight: 600;
    color: var(--content);
    margin-bottom: 6px;
    display: block;
    font-size: 13px;
}

.fixfactor-content-area .wpforms-submit-container {
    margin-top: var(--ff-space-md);
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.fixfactor-content-area .wpforms-submit {
    background: var(--action) !important; /* WCAG AA - white text on var(--accent) fails contrast */
    color: white !important;
    border: none !important;
    padding: 18px 24px !important;
    border-radius: var(--ff-radius) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
    min-height: 52px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.fixfactor-content-area .wpforms-submit:hover {
    background: var(--action-hover) !important;
    transform: scale(1.015) !important;
}

/* Layout - Grid wrapper uses display: contents to flatten into parent grid */
.fixfactor-product-grid {
    display: contents;
}

/* Left Column - Basic styles */
.fixfactor-left-column {
    display: block;
    grid-column: 1;
    grid-row: 2;
    margin-top: var(--ff-space-md);
}

/* Breadcrumbs - Hidden visually, accessible to crawlers & screen readers
   SEO Note: Google removed breadcrumbs from mobile SERPs (Jan 2025)
   but structured data remains important for PageRank & site structure */
.fixfactor-breadcrumbs {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Product Header */
.fixfactor-product-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 1;
}

/* Product title container - allow full width of left column */
.fixfactor-product-title {
    max-width: 100%; /* Use full width available in grid column */
}

/* Service Title with Icon (Variant A - Simple Inline) */
.fixfactor-title-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.fixfactor-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
    line-height: 1;
    margin-top: 6px;
    /* Circle outline frame */
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--accent);
}

.fixfactor-service-icon svg {
    width: 67px;
    height: 67px;
    display: block;
}

.fixfactor-title-content {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.fixfactor-title-content h1 {
    margin: 0;
    line-height: 1.15;
}

.fixfactor-title-content .fixfactor-hero-ratings {
    margin-top: 10px;
}


/* Hero Ratings - Review Badges */
.fixfactor-hero-ratings {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: var(--ff-space-sm);
    margin-bottom: 0;
    padding: 0;
    margin-left: -2px;
    padding-right: 0; /* Remove padding - grid handles spacing from sidebar */
}

.fixfactor-rating-badge {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.fixfactor-rating-badge:hover {
    opacity: 0.8;
}

.fixfactor-rating-logo {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.fixfactor-rating-stars {
    display: flex;
    gap: 0;
}

.fixfactor-rating-stars-trustpilot {
    display: flex;
    gap: 2px;
}

.fixfactor-rating-star {
    width: 15px;
    height: 15px;
    fill: var(--accent-warm);
}

.fixfactor-rating-star-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    background: var(--ff-trustpilot-green);
    border-radius: 2px;
}

.fixfactor-rating-star-box .fixfactor-rating-star {
    width: 8px;
    height: 8px;
    fill: white;
}

.fixfactor-rating-number {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--content);
    line-height: 1;
    margin-left: 0.25rem;
}

.fixfactor-rating-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--content);
    line-height: 1;
}

.fixfactor-rating-divider {
    display: none;
}


.fixfactor-product-title h1 {
    font-family: var(--font-stack);
    font-size: 34px;
    font-weight: 700;
    margin: 0;
    color: var(--content);
    letter-spacing: -0.02em;
    margin-left: -4px;
    line-height: 1.2;
}

/* Title Separator - Removed, replaced by service icons */

/* Short Description - Desktop */
.fixfactor-short-description {
    background: var(--surface);
    padding: 0 var(--ff-space-2xl) 10px 0;
    border-radius: var(--ff-radius);
    margin-top: calc(var(--ff-space-lg) + 5px); /* 16px + 5px extra spacing from reviews */
    margin-bottom: var(--ff-space-sm);
    border: none;
}

#ff-sp .fixfactor-short-description p {
    color: var(--content);
}

/* Trust Badges - Outlined Cards */
.fixfactor-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: var(--ff-space-lg);
    margin-bottom: var(--ff-space-3xl);
}

.fixfactor-badge {
    background: var(--surface);
    border: 1.5px solid var(--ff-tile-border);
    border-radius: var(--ff-radius);
    padding: 10px 8px 10px 12px;
    text-align: left;
}

.fixfactor-badge-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--action);
    display: block;
    margin: 0 0 2px 0;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.fixfactor-badge-subtitle {
    font-size: 11px;
    color: var(--content-secondary);
    display: block;
    font-weight: 500;
    line-height: 1.2;
}

.fixfactor-badge a {
    color: var(--action);
    text-decoration: none;
}

.fixfactor-badge a:hover {
    color: var(--action-hover);
    text-decoration: underline;
}

/* Sticky Sidebar - Spans both grid rows with fixed top offset for consistent alignment */
#ff-sp.fixfactor-no-price .fixfactor-sticky-sidebar {
    position: sticky;
    top: 5px;
    background: var(--surface);
    border-radius: 11px;
    padding: 0 5px;
    border: 5px solid var(--accent-warm);
    height: fit-content;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    margin-top: 8px; /* Aligned with title (no SERVICE badge) */
}

#ff-sp .fixfactor-sticky-sidebar {
    position: sticky;
    top: 5px;
    background: var(--surface);
    border-radius: 11px;
    padding: 0 5px;
    border: 2.5px solid var(--accent);
    height: fit-content;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    margin-top: 8px; /* Aligned with title (no SERVICE badge) */
}

/* Price Section */
#ff-sp .fixfactor-price-section {
    text-align: left;
    margin-bottom: 0;
    padding: 24px;
    position: relative;
    border: none;
    background: white;
}

.fixfactor-price-container {
    position: relative;
    margin-top: 0;
}

.fixfactor-price-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ff-space-md);
    margin-bottom: 0;
}

.fixfactor-price {
    font-family: var(--font-stack);
    font-size: 32px;
    font-weight: 700;
    color: var(--content);
    letter-spacing: -0.02em;
    transition: all 0.2s ease;
}

.fixfactor-price.range {
    font-size: var(--ff-font-4xl);
}

/* Negotiate Button - Inline with price */
.fixfactor-negotiate-btn {
    background: var(--surface);
    color: var(--content);
    /* 2px of yellow made the tag the loudest thing under the price. */
    border: 1.5px solid var(--accent-warm);
    padding: 5px 13px;
    border-radius: var(--ff-radius);
    font-size: var(--ff-font-xs);
    font-weight: 600;
    cursor: pointer;
    /* Named properties rather than `all`: `all` also animates the border and
       forces a layout pass on every hover. */
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Fills rather than grows. Scaling nudged the icons beside it and read as a
   jump; a fill plus a 1px rise stays inside the tag's own box. */
.fixfactor-negotiate-btn:hover {
    background: var(--accent-warm);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255, 209, 0, 0.4);
}

.fixfactor-negotiate-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Enhanced focus management for accessibility */
.fixfactor-negotiate-btn:focus-visible,
.fixfactor-variation-item:focus-visible,
.fixfactor-service-option:focus-visible,
.mobile-service-option:focus-visible,
.fixfactor-main-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Price Animation */
@keyframes priceUpdate {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

.fixfactor-price.animate {
    animation: priceUpdate 0.3s ease-in-out;
}

/* Payment Methods */
.fixfactor-payment-methods {
    margin: 4px -24px 0 -24px;
    padding: 0 24px var(--ff-space-lg) 27px;
    border-bottom: 2.5px solid var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Negotiate Button - moves to payment row */
.fixfactor-payment-methods .fixfactor-negotiate-btn {
    margin-left: auto;
}

.payment-card-icon {
    /* Width follows the viewBox ratio, so one number keeps the set aligned. */
    height: 20px;
    width: auto;
    display: block;
    flex: 0 0 auto;
}

/*
 * Klarna's own pink and near-black. The design system lists external brands as
 * do-not-restyle, so these two stay literal - the one pair of colours in this
 * file that must not follow our palette, in light mode or dark.
 */
.payment-badge.klarna {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Same height and radius as the cards, so the four read as one set
       rather than three cards and a sticker. Klarna's wordmark is lowercase;
       the old rule shouted it in uppercase at 900 weight. */
    height: 20px;
    padding: 0 7px;
    background: #FFA8CD;
    color: #0B051D;
    font-size: 9px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 2.5px;
    flex: 0 0 auto;
}

/* Variations - Unified Service Style */
#ff-sp .fixfactor-variations {
    margin-bottom: 0;
    padding: 10px 24px 0 24px;
    border: none;
    background: white;
}

.fixfactor-variation-group {
    margin-bottom: var(--ff-space-xl);
    text-align: left;
}

.fixfactor-variation-group .fixfactor-variation-group-label {
    font-size: 14px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--content);
    opacity: 0.7;
    text-align: left;
}

/*
 * Variation badges.
 *
 * auto-fill, not auto-fit. auto-fit collapses the empty tracks on the last
 * row, so a group with an odd number of options ended with one badge stretched
 * across the full width - the ragged item at the bottom of every other group.
 * auto-fill keeps the track, so the last badge is the same width as the rest.
 */
.fixfactor-variation-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--ff-space-sm);
    padding-left: 0;
    text-align: left;
}

.fixfactor-variation-item {
    background: var(--surface);
    border: 1px solid var(--ff-tile-border);
    border-radius: var(--ff-radius);
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fixfactor-variation-item:hover {
    border-color: var(--accent);
}

.fixfactor-variation-item.selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    background: transparent;
}

.fixfactor-variation-item input[type="radio"] {
    display: none;
}

/* Remove radio icon styles - Option 8 doesn't use radio buttons */
.fixfactor-variation-icon {
    display: none;
}

.fixfactor-variation-content {
    flex: 1;
}

.fixfactor-variation-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--content);
    line-height: 1.3;
    text-align: left;
}

.fixfactor-variation-item.selected .fixfactor-variation-title {
    color: var(--action);
}

.fixfactor-variation-description {
    display: none;
}

.fixfactor-variation-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.fixfactor-variation-info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--border-interactive);
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    font-style: normal;
    font-family: inherit;
}

.fixfactor-variation-info-trigger::after {
    content: "?";
}

.fixfactor-variation-info-trigger svg {
    display: none;
}

/* Gentle Reminder Pulsing */
@keyframes gentleReminder {
    0%, 100% { 
        background: transparent;
    }
    50% { 
        background: var(--ff-brand-light);
    }
}

.fixfactor-variation-item.reminder-pulse {
    animation: gentleReminder 2s ease-in-out;
}

/* Removed scale animation to prevent layout shift */

/* Service Selection - 24px SVG icons, borders: 1px inactive/2px active */
#ff-sp .fixfactor-service-options {
    margin-bottom: 0;
    padding: 6px 24px 14px 24px;
    border: none;
    background: white;
}

.fixfactor-service-options .fixfactor-service-options-label {
    font-size: 14px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--content);
    opacity: 0.7;
}

.fixfactor-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ff-space-md);
}

.fixfactor-service-option {
    background: var(--surface);
    border: 1px solid var(--ff-tile-border);
    border-radius: var(--ff-radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ff-space-md);
}

.fixfactor-service-option:hover {
    border-color: var(--accent);
}

.fixfactor-service-option.selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    background: transparent;
}

.fixfactor-service-option.selected .fixfactor-service-title {
    color: var(--action);
}

.fixfactor-service-option input[type="radio"] {
    display: none;
}

.fixfactor-service-content {
    flex: 1;
}

.fixfactor-service-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--content);
    text-align: left;
}

.fixfactor-service-desc {
    display: none;
}

/* Service Info Icon Tooltip */
.fixfactor-service-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.fixfactor-info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--border-interactive);
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    font-style: normal;
    font-family: inherit;
}

.fixfactor-info-trigger::after {
    content: "?";
}

.fixfactor-info-trigger svg {
    display: none;
}

/* Shared floating tooltip (appended to body) */
.fixfactor-floating-tooltip {
    position: fixed;
    background: var(--content);
    color: white;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    max-width: 220px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 999999;
    pointer-events: none;
    box-shadow: 0 4px 12px var(--ff-shadow-md);
}

/* Mobile service info trigger */
.mobile-service-desc {
    display: none;
}

.mobile-service-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.mobile-info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
}

.mobile-info-trigger::after {
    content: "i";
}

.mobile-info-trigger svg {
    display: none;
}

/* Hide service options when no price */
#ff-sp.fixfactor-no-price .fixfactor-service-options {
    display: none;
}

/* CTA Buttons */
#ff-sp .fixfactor-cta-section {
    margin-bottom: 0;
    padding: 24px;
    border: none;
    background: white;
}

.fixfactor-main-cta {
    width: 100%;
    background: var(--action); /* WCAG AA - white text on var(--accent) fails contrast */
    color: white;
    border: none;
    padding: var(--ff-space-xl) var(--ff-space-2xl);
    border-radius: var(--ff-radius);
    font-size: var(--ff-font-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: var(--ff-space-md);
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
}

.fixfactor-main-cta.active:hover {
    background: var(--action-hover);
    transform: scale(1.015);
}

.fixfactor-main-cta.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--ff-gray-300);
    box-shadow: none;
}

.fixfactor-main-cta.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Conditional Info Bar - 20px SVG icons, transparent bg, updates on service change */
.fixfactor-conditional-info {
    background: transparent;
    border: none;
    padding: var(--ff-space-md) 0;
    border-radius: 0;
    font-size: var(--ff-font-sm);
    font-weight: 400;
    color: var(--ff-gray-600);
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--ff-space-sm);
    transition: all 0.3s ease;
}

.fixfactor-conditional-info .status-icon {
    color: var(--accent);
    flex-shrink: 0;
    opacity: 0.7;
}

.fixfactor-conditional-info-content {
    flex: 1;
    line-height: 1.4;
}

.fixfactor-conditional-info.show {
    display: flex;
}

/* Micro-copy animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fixfactor-conditional-info.animate {
    animation: fadeInUp 0.3s ease-out;
}

/* Product Description - Variant #1 Style */
#ff-sp section.fixfactor-description {
    margin-top: var(--ff-space-3xl);
    position: relative;
}

/* PCB board decoration - brand signature, same idiom as Homepage (#ff-pcb-board).
   Background layer only: low opacity, no pointer events, never over interactive UI */
#ff-sp .fixfactor-pcb-decoration {
    position: absolute;
    bottom: -24px;
    right: -20px;
    width: 340px;
    height: auto;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

#ff-sp .fixfactor-description-content {
    position: relative;
    z-index: 1;
}

#ff-sp .fixfactor-description-header {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 0;
    padding-left: 12px;
    border-bottom: none;
    border-left: 3px solid var(--accent);
    color: var(--content);
    text-transform: none;
    letter-spacing: -0.3px;
}

#ff-sp .fixfactor-description-content {
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
}

/* No Details Message - Fallback when Service Details is empty */
.fixfactor-no-details-message {
    padding: var(--ff-space-xl) 0;
}

.fixfactor-no-details-message p {
    font-size: var(--ff-font-md);
    line-height: 1.6;
    color: var(--content);
    margin-bottom: var(--ff-space-md);
}

.fixfactor-no-details-message p:first-child {
    font-weight: 600;
    font-size: var(--ff-font-lg);
}

.fixfactor-no-details-message p a {
    color: var(--action);
    text-decoration: none;
    font-weight: 600;
}

.fixfactor-no-details-message p a:hover {
    color: var(--action-hover);
}

.fixfactor-info-buttons {
    display: flex;
    gap: var(--ff-space-md);
    margin-top: var(--ff-space-xl);
}

#ff-sp .fixfactor-info-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: var(--surface);
    color: var(--action);
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid var(--accent);
    font-weight: 600;
    font-size: var(--ff-font-md);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/*
 * Fills on hover, the same way .fixfactor-negotiate-btn does.
 *
 * This used to be transform: scale(1.02). The button is flex:1 and already
 * fills the row, so the 2% had nowhere to go: it put the box at x 166.81 with
 * width 325.38, and Chromium dropped the left border and both left corners
 * when rasterising that fractional geometry against a 2px border and an 8px
 * radius. Confirmed at 4x - nothing was clipping it, every ancestor is
 * overflow: visible.
 *
 * White on --action, not --accent: white on --accent fails contrast, as the
 * comment on the CTA in this file already records.
 */
#ff-sp .fixfactor-info-button:hover {
    background: var(--action);
    color: white;
    border-color: var(--action);
    text-decoration: none;
}

/* Service Details fallback - shown when a product has no long description */
#ff-sp .ff-sd {
    padding: var(--ff-space-xl) 0 0;
}

#ff-sp .ff-sd p {
    margin: 0 0 var(--ff-space-md);
    font-size: var(--ff-font-md);
    line-height: 1.7;
    color: var(--content-body);
}

#ff-sp .ff-sd p.ff-sd-lead {
    font-size: var(--ff-font-lg);
    font-weight: 600;
    line-height: 1.55;
    color: var(--content);
    margin-bottom: var(--ff-space-lg);
}

#ff-sp .ff-sd p.ff-sd-close {
    margin-bottom: 0;
}

/* Prose links only. Scoped to p on purpose: an unscoped .ff-sd a rule has the
   same specificity as .fixfactor-info-button:hover and, sitting later in the
   file, was winning - the hovered button rendered dark teal text on a dark
   teal fill, 1.46:1. */
#ff-sp .ff-sd p a {
    color: var(--action);
    font-weight: 600;
    text-decoration: none;
}

#ff-sp .ff-sd p a:hover {
    color: var(--action-hover);
    text-decoration: underline;
}

/* Other repairs for the same device. This is the part of the block that is
   unique to the page - of 40 such pages sampled, none had an internal link
   pointing at them from any published post. */
#ff-sp .ff-sd-siblings {
    margin: var(--ff-space-xl) 0;
    padding: var(--ff-space-lg) var(--ff-space-xl);
    background: var(--surface-alt);
    border: 1px solid var(--teal-tint-border);
    border-radius: var(--ff-radius);
}

#ff-sp .ff-sd-siblings h3 {
    margin: 0 0 var(--ff-space-md);
    font-size: var(--ff-font-md);
    font-weight: 700;
    color: var(--content);
    letter-spacing: -0.1px;
}

#ff-sp .ff-sd-siblings ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

#ff-sp .ff-sd-siblings li {
    margin: 0;
    padding: 0;
}

#ff-sp .ff-sd-siblings a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 7px 13px;
    background: var(--surface);
    border: 1px solid var(--teal-tint-border);
    border-radius: var(--radius-tag);
    font-size: 13px;
    font-weight: 600;
    color: var(--action);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#ff-sp .ff-sd-siblings a:hover {
    background: var(--action);
    border-color: var(--action);
    color: white;
    text-decoration: none;
}

#ff-sp .ff-sd-siblings .ff-sd-price {
    font-weight: 400;
    opacity: 0.75;
}

@media (max-width: 768px) {
    #ff-sp .ff-sd-siblings {
        padding: var(--ff-space-md) var(--ff-space-lg);
    }

    #ff-sp .ff-sd p.ff-sd-lead {
        font-size: var(--ff-font-md);
    }
}

/*
 * On a phone no two chips fit on a line, so inline-flex produced a ragged
 * one-per-row column of mismatched widths. Full-width rows with the price
 * pushed right read as a price list instead - and a price list is the more
 * useful thing to hand someone comparing repairs on a phone.
 */
@media (max-width: 575px) {
    #ff-sp .ff-sd-siblings ul {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    #ff-sp .ff-sd-siblings a {
        justify-content: space-between;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
    }

    #ff-sp .ff-sd-siblings .ff-sd-price {
        flex-shrink: 0;
        margin-left: var(--ff-space-md);
    }
}

/* Contact Form - Comic-Inspired Bold Design (Variant #7 Adapted) */
#ff-sp section.fixfactor-contact-form-wide {
    margin-top: 0;
    background: white;
    padding: 0;
    border-radius: 6px;
    position: relative;
    border: none;
}

#ff-sp .fixfactor-quote-header {
    text-align: left;
    margin-bottom: 0;
    padding: 24px;
    border-bottom: 5px solid var(--accent-warm);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    background: white;
    position: relative;
}

#ff-sp .fixfactor-quote-header h3 {
    font-size: 25px;
    font-weight: 900;
    margin: 0 0 12px 0;
    color: var(--content);
    text-transform: none;
    letter-spacing: -0.5px;
}

#ff-sp .fixfactor-quote-subtitle {
    font-size: 14px;
    color: var(--content);
    line-height: 1.6;
    margin: 0 0 16px 0;
    font-weight: 400;
}

#ff-sp .fixfactor-quote-highlight {
    background: var(--accent-warm);
    color: var(--content-body);
    padding: 5px 11px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0.2px;
    border: none;
}

#ff-sp .fixfactor-quote-highlight svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

#ff-sp .fixfactor-form-content {
    padding: 0 24px 24px 24px;
    background: white;
    border: none;
    border-radius: 0;
}

/* Modal */
.fixfactor-modal {
    display: none;
    position: fixed;
    z-index: 999999 !important; /* Avada override */
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--ff-scrim) !important;
    padding: 0;
    box-sizing: border-box;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
}

.fixfactor-modal.show {
    display: flex !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: ffModalFadeIn 0.25s ease;
}

.fixfactor-modal.show .fixfactor-modal-content {
    animation: ffModalScaleIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ffModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ffModalScaleIn {
    from { transform: scale(0.97); opacity: 0.6; }
    to { transform: scale(1); opacity: 1; }
}

.fixfactor-modal-wrapper {
    margin: auto;
    position: relative;
    width: 90%;
    max-width: 600px;
}

.fixfactor-modal-content {
    background: white;
    padding: var(--ff-space-3xl) var(--ff-space-3xl) 2px;
    border-radius: 12px;
    width: 100%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    box-shadow: 0 12px 32px var(--ff-shadow-sm);
}

/* Unified close button - 32px circle inside the card, same on all breakpoints */
.fixfactor-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: var(--content);
    background: var(--ff-fill);
    border: 1px solid var(--border-neutral);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 1001;
}

.fixfactor-modal-close:hover {
    background: var(--ff-fill-hover);
}

.fixfactor-modal-header {
    margin-bottom: 19px;
}

.fixfactor-modal-header-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 0;
}

.fixfactor-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}

.fixfactor-modal-icon svg {
    width: 50px;
    height: 50px;
    display: block;
}

.fixfactor-modal-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fixfactor-modal h3 {
    margin: 0;
    padding: 0;
    font-size: 28px;
    color: var(--content);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Product context line under the modal title - name + quiet price chip */
.fixfactor-modal-context {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--content);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 10px;
}

.fixfactor-modal-context-name {
    font-weight: 600;
}

.fixfactor-modal-context-price {
    display: inline-flex;
    align-items: center;
    background: var(--ff-gray-50);
    border: 1px solid var(--ff-gray-100);
    border-radius: 6px;
    padding: 2px 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--action);
    white-space: nowrap;
    line-height: 1.5;
}

/* Path 1: Klarna split payment - informational card */
.fixfactor-modal-option-klarna {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1.5px solid var(--ff-gray-100);
    border-radius: var(--ff-radius);
    padding: 14px 16px;
}

.fixfactor-modal-option-klarna .payment-badge.klarna {
    font-size: 10px;
    padding: 5px 9px;
}

.fixfactor-modal-option-klarna .payment-badge.klarna:hover {
    transform: none;
    box-shadow: none;
}

.fixfactor-modal-option-klarna-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--content);
    line-height: 1.35;
}

.fixfactor-modal-option-klarna-text span {
    display: block;
    font-size: 12px;
    color: var(--content-secondary);
    line-height: 1.4;
    margin-top: 1px;
}

/* Reply-time note under the proposal form */
.fixfactor-modal-reply-note {
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 12px;
    color: var(--content-secondary);
}

.fixfactor-modal-divider {
    margin: var(--ff-space-xl) 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fixfactor-modal-divider::before,
.fixfactor-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ff-divider);
}

.fixfactor-modal-divider span {
    color: var(--ff-gray-500);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.2px;
}

/* MOBILE OPTIMIZATIONS */
@media (max-width: 768px) {
    #ff-sp {
        padding: 18px 20px 25px 20px;
        display: block; /* Block layout for natural flow on mobile */
    }

    #ff-sp .fixfactor-product-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    #ff-sp .fixfactor-product-header {
        gap: 12px;
        margin-bottom: var(--ff-space-sm);
        padding: 0;
        grid-column: unset;
        grid-row: unset;
    }

    #ff-sp .fixfactor-left-column {
        grid-column: unset;
        grid-row: unset;
        margin-top: 0;
    }

    #ff-sp .fixfactor-sticky-sidebar {
        grid-column: unset;
        grid-row: unset;
        margin-top: var(--ff-space-lg);
    }

    /* Service icon adjustments for mobile */
    .fixfactor-title-with-icon {
        gap: 14px;
    }

    .fixfactor-title-content {
        padding-top: 2px;
    }

    .fixfactor-service-icon svg {
        width: 57px;
        height: 57px;
    }

    .fixfactor-service-icon {
        width: 66px;
        height: 66px;
        border-radius: 50%;
    }

    /* Title container uses full width on mobile */
    #ff-sp .fixfactor-product-title {
        max-width: 100%;
        padding-left: 0;
    }

    /* Title displays normally on mobile */
    #ff-sp .fixfactor-product-title h1 {
        font-size: 26px;
        line-height: 1.2;
        font-weight: 700;
        padding-right: 0;
        padding-left: 0;
        margin-left: 0;
    }

    /* Hero Ratings - Mobile */
    .fixfactor-hero-ratings {
        gap: 1rem;
        margin-top: var(--ff-space-xs);
        margin-bottom: 0;
        padding: 0 0 5px 0; /* Reduced from 10px - tighter spacing before short description */
        flex-wrap: wrap;
    }

    .fixfactor-rating-logo {
        width: 12px;
        height: 12px;
    }

    .fixfactor-rating-star {
        width: 13px;
        height: 13px;
    }

    .fixfactor-rating-star-box {
        width: 11px;
        height: 11px;
    }

    .fixfactor-rating-star-box .fixfactor-rating-star {
        width: 7px;
        height: 7px;
    }

    .fixfactor-rating-number {
        font-size: 0.75rem;
    }

    .fixfactor-rating-text {
        font-size: 0.75rem;
    }

    .fixfactor-rating-divider {
        display: none;
    }

    #ff-sp .fixfactor-sticky-sidebar {
        position: relative;
        top: 0;
        order: 1;
        margin-top: 0;
        margin-bottom: var(--ff-space-lg);
        padding: 20px;
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border-radius: 11px;
        border: 2.5px solid var(--accent);
    }

    #ff-sp.fixfactor-no-price .fixfactor-sticky-sidebar {
        position: relative;
        top: 0;
        background: var(--surface);
        border: 3px solid var(--accent-warm);
        border-radius: 11px;
    }

    /* Quote Form - Mobile border-radius adjustment */
    #ff-sp section.fixfactor-contact-form-wide {
        border-radius: 8px;
    }

    #ff-sp .fixfactor-quote-header {
        border-radius: 8px 8px 0 0;
    }

    #ff-sp .fixfactor-form-content {
        border-radius: 0 0 8px 8px;
    }

    #ff-sp .fixfactor-price-section {
        margin-bottom: 0;
        padding: 0;
        order: 3;
        border: none;
    }
    
    .fixfactor-price-container {
        margin-top: var(--ff-space-xl);
    }
    
    .fixfactor-price-row {
        justify-content: flex-start;
        align-items: center;
        gap: var(--ff-space-md);
    }

    #ff-sp .fixfactor-price {
        font-size: var(--ff-font-4xl);
        font-weight: 700;
    }

    #ff-sp .fixfactor-price.range {
        font-size: var(--ff-font-3xl);
    }

    #ff-sp .fixfactor-payment-methods {
        margin: 4px -20px var(--ff-space-sm) -20px;
        padding: 0 20px var(--ff-space-lg) 20px;
        gap: 6px;
        border-bottom: none;
        flex-wrap: wrap;
    }

    .fixfactor-payment-methods .fixfactor-negotiate-btn {
        margin-left: auto;
    }

    .payment-card-icon {
        height: 17px;
    }

    .payment-badge.klarna {
        height: 17px;
        font-size: 8px;
        padding: 0 6px;
    }

    .fixfactor-negotiate-btn {
        font-size: 11px;
        padding: 4px 10px;
    }
    
    #ff-sp .mobile-short-description {
        background: transparent;
        padding: 0 var(--ff-space-sm);
        margin-bottom: var(--ff-space-lg);
        border: none;
        border-radius: 0;
        font-size: 14px;
        order: 0;
    }

    #ff-sp .mobile-short-description p {
        font-size: 14px;
        line-height: 1.4;
        margin: 0 0 var(--ff-space-md) 0;
    }

    #ff-sp .mobile-short-description p:last-child {
        margin-bottom: 0;
    }

    /* Short description visible on mobile */
    #ff-sp .fixfactor-short-description {
        display: block;
        opacity: 1;
        visibility: visible;
        margin-bottom: var(--ff-space-lg);
        background: transparent;
        padding: 0;
        border-radius: 0;
        order: -1;
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
    }

    #ff-sp .fixfactor-short-description p {
        font-size: 14px;
        line-height: 1.4;
    }
    
    #ff-sp.fixfactor-no-price .fixfactor-contact-form-wide {
        order: 4;
        margin-bottom: 0;
        padding: 0;
        padding-top: var(--ff-space-xl);
        margin-top: var(--ff-space-lg);
    }

    #ff-sp .fixfactor-variations {
        margin-bottom: 0;
        padding: 10px 0 0 0;
        order: 1;
        border: none;
    }

    /* Option 8: Mobile - Auto-responsive (badges side-by-side if they fit) */
    .fixfactor-variation-list {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 6px;
    }

    /*
     * The four blocks that used to sit here - item, :hover, .selected and the
     * title size - restated the desktop values character for character. The
     * only mobile difference is the grid above. The :hover block also carried
     * "transform: none; box-shadow: none;", cancelling a scale animation that
     * was removed from the desktop rule some time ago.
     */

    /* Hide desktop service options on mobile */
    #ff-sp .fixfactor-sticky-sidebar .fixfactor-service-options {
        display: none;
    }

    #ff-sp .fixfactor-cta-section {
        margin-bottom: 0;
        padding: 0;
        order: 4;
        border: none;
    }
    
    .fixfactor-main-cta {
        padding: var(--ff-space-xl) var(--ff-space-2xl);
        font-size: var(--ff-font-lg);
        font-weight: 600;
    }
    
    .fixfactor-conditional-info {
        padding: var(--ff-space-md);
        font-size: var(--ff-font-sm);
        gap: var(--ff-space-sm);
    }
    
    .fixfactor-conditional-info-content {
        font-size: var(--ff-font-sm);
    }
    
    /* Trust badges on mobile - 2x2 grid */
    #ff-sp .fixfactor-badges {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: var(--ff-space-xl);
        order: 10;
        display: grid;
        width: 100%;
    }

    #ff-sp .fixfactor-badge {
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    #ff-sp .fixfactor-badge-title {
        font-size: 13px;
        line-height: 1.1;
    }

    #ff-sp .fixfactor-badge-subtitle {
        font-size: 10px;
        line-height: 1.2;
    }

    #ff-sp .fixfactor-left-column {
        order: 2;
        display: contents;
        width: 100%;
        min-height: auto;
        height: auto;
    }
    
    #ff-sp section.fixfactor-description {
        margin-top: var(--ff-space-xl);
        order: 11;
    }

    /* PCB decoration hidden on mobile - same as Homepage */
    #ff-sp .fixfactor-pcb-decoration {
        display: none;
    }

    #ff-sp .fixfactor-description-header {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 12px;
        padding-bottom: 0;
        padding-left: 12px;
        border-bottom: none;
        border-left: 3px solid var(--accent);
        color: var(--content);
        text-transform: none;
        letter-spacing: -0.3px;
    }

    #ff-sp .fixfactor-description-content {
        padding: 0;
        font-size: var(--ff-font-md);
        background: transparent;
        border: none;
    }

    #ff-sp .fixfactor-description-content p {
        font-size: var(--ff-font-md);
        line-height: 1.6;
    }

    /* No Details Message - Mobile */
    #ff-sp .fixfactor-no-details-message {
        padding: var(--ff-space-lg) 0;
    }

    #ff-sp .fixfactor-no-details-message p {
        font-size: var(--ff-font-sm);
    }

    #ff-sp .fixfactor-no-details-message p:first-child {
        font-size: var(--ff-font-md);
    }

    #ff-sp .fixfactor-info-button {
        padding: 12px 16px;
        font-size: var(--ff-font-sm);
    }

    .fixfactor-modal-content {
        padding: var(--ff-space-xl) var(--ff-space-xl) 0;
        width: 95%;
        max-height: 98vh;
    }

    .fixfactor-modal h3 {
        font-size: 24px;
    }

    /* Modal form fields on tablet */
    .fixfactor-content-area .wpforms-field {
        margin-bottom: 6px;
    }

    .fixfactor-content-area .wpforms-field input,
    .fixfactor-content-area .wpforms-field select,
    .fixfactor-content-area .wpforms-field input[type="text"],
    .fixfactor-content-area .wpforms-field input[type="email"],
    .fixfactor-content-area .wpforms-field input[type="tel"],
    .fixfactor-content-area .wpforms-field input[type="number"] {
        padding: 10px 14px !important;
        min-height: 41px !important;
        font-size: 16px !important;
    }

    .fixfactor-content-area .wpforms-field textarea {
        padding: 10px 14px !important;
        font-size: 16px !important;
        min-height: 90px !important;
    }

    .fixfactor-modal {
        padding: 0 !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .fixfactor-modal-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-height: 100vh;
        min-height: 100dvh; /* iOS address bar safe */
    }

    .fixfactor-modal-content {
        padding: var(--ff-space-xl) var(--ff-space-lg) 0;
        border-radius: 0;
        width: 100% !important;
        min-height: 100vh;
        min-height: 100dvh; /* iOS address bar safe */
        max-height: none;
        box-shadow: none;
    }

    .fixfactor-modal-header-grid {
        grid-template-columns: auto 1fr;
        gap: 14px;
    }

    .fixfactor-modal h3 {
        font-size: 24px;
    }

    .fixfactor-modal-context {
        font-size: 13px;
    }

    .fixfactor-modal-divider span {
        font-size: 11px;
    }
    
    /* Mobile Service Options Container - after variations, before price */
    #ff-sp #mobile-service-options-container {
        order: 2;
    }

    /* Mobile Service Options - JS rendered <768px */
    #ff-sp .mobile-service-options {
        margin-bottom: 0;
        padding: 0;
        margin-top: 6px;
    }

    #ff-sp .mobile-service-options .mobile-service-options-label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 12px;
        color: var(--content);
        opacity: 0.7;
    }

    .mobile-service-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 11px;
    }

    .mobile-service-option {
        background: var(--surface);
        border: 1px solid var(--ff-tile-border);
        border-radius: var(--ff-radius);
        padding: 12px 16px;
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-service-option:hover {
        border-color: var(--accent);
    }

    .mobile-service-option.selected {
        border-color: var(--accent);
        box-shadow: inset 0 0 0 1px var(--accent);
        background: transparent;
    }

    .mobile-service-option.selected .mobile-service-title {
        color: var(--action);
    }

    .mobile-service-icon {
        display: none;
    }

    .mobile-service-option.selected .mobile-service-icon {
        display: none;
    }

    .mobile-service-content {
        flex: 1;
    }

    .mobile-service-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--content);
    }

    .mobile-service-desc {
        display: none;
    }

    /* Quote Form - Mobile */
    #ff-sp section.fixfactor-contact-form-wide {
        border-width: 2px;
    }

    #ff-sp .fixfactor-quote-header {
        padding: 20px;
        border-bottom-width: 2px;
    }

    #ff-sp .fixfactor-quote-header h3 {
        font-size: 22px;
    }

    #ff-sp .fixfactor-quote-subtitle {
        font-size: 13px;
    }

    #ff-sp .fixfactor-quote-highlight {
        font-size: 12px;
        padding: 6px 12px;
    }

    #ff-sp .fixfactor-form-content {
        padding: 0 20px 20px 20px;
    }

    /* Submit button - mobile override */
    .fixfactor-content-area .wpforms-submit,
    section.fixfactor-contact-form-wide .wpforms-submit,
    .wpforms-container .wpforms-submit {
        padding: 18px 24px !important;
        min-height: 52px !important;
    }

}

@media (max-width: 576px) {
    #ff-sp {
        padding: 16px 10px 20px 10px;
    }

    #ff-sp .fixfactor-product-header {
        padding: 0 2px;
        margin-bottom: var(--ff-space-xs);
    }

    /* Service icon on very small screens */
    .fixfactor-title-with-icon {
        gap: 12px;
    }

    .fixfactor-service-icon svg {
        width: 44px;
        height: 44px;
    }

    .fixfactor-service-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
    }

    /* Hero ratings - very small screens */
    .fixfactor-hero-ratings {
        gap: 0.75rem;
    }

    .fixfactor-rating-badge {
        gap: 0.25rem;
    }

    .fixfactor-rating-logo {
        width: 11px;
        height: 11px;
    }

    .fixfactor-rating-star {
        width: 11px;
        height: 11px;
    }

    .fixfactor-rating-star-box {
        width: 10px;
        height: 10px;
    }

    .fixfactor-rating-star-box .fixfactor-rating-star {
        width: 6px;
        height: 6px;
    }

    .fixfactor-rating-number {
        font-size: 0.65rem;
    }

    .fixfactor-rating-text {
        font-size: 0.7rem;
    }

    /* Badges - 2 columns on very small screens */
    #ff-sp .fixfactor-badges {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    #ff-sp .fixfactor-badge {
        padding: 8px;
    }

    #ff-sp .fixfactor-badge-title {
        font-size: 12px;
    }

    #ff-sp .fixfactor-badge-subtitle {
        font-size: 9px;
    }

    #ff-sp .fixfactor-sticky-sidebar {
        padding: var(--ff-space-lg);
    }

    .fixfactor-modal {
        padding: 0 !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .fixfactor-modal-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-height: 100vh;
        min-height: 100dvh; /* iOS address bar safe */
    }

    .fixfactor-modal-content {
        padding: var(--ff-space-lg) var(--ff-space-lg) 0;
        border-radius: 0;
        width: 100% !important;
        min-height: 100vh;
        min-height: 100dvh; /* iOS address bar safe */
        max-height: none;
        box-shadow: none;
    }

    .fixfactor-modal h3 {
        font-size: 22px;
    }

    /* Modal form fields on mobile */
    .fixfactor-content-area .wpforms-field {
        margin-bottom: 5px;
    }

    .fixfactor-content-area .wpforms-field input,
    .fixfactor-content-area .wpforms-field select,
    .fixfactor-content-area .wpforms-field input[type="text"],
    .fixfactor-content-area .wpforms-field input[type="email"],
    .fixfactor-content-area .wpforms-field input[type="tel"],
    .fixfactor-content-area .wpforms-field input[type="number"] {
        padding: 8px 12px !important;
        min-height: 37px !important;
        font-size: 16px !important;
    }

    .fixfactor-content-area .wpforms-field textarea {
        padding: 8px 12px !important;
        font-size: 16px !important;
        min-height: 80px !important;
    }

    #ff-sp .fixfactor-payment-methods {
        gap: 5px;
        margin: 2px 0 var(--ff-space-xs) 0;
        padding-bottom: var(--ff-space-xs);
        flex-wrap: wrap;
        border-bottom: none;
    }

    .payment-card-icon {
        height: 15px;
    }

    .payment-badge.klarna {
        height: 15px;
        padding: 0 5px;
        font-size: 7px;
    }

    .fixfactor-negotiate-btn {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .mobile-service-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-service-option {
        padding: 12px 16px;
        gap: 12px;
    }

    .mobile-service-title {
        font-size: 14px;
    }
    
    #ff-sp .mobile-short-description {
        padding: 0 var(--ff-space-xs);
    }

    /* Quote Form - Extra Small Mobile */
    #ff-sp .fixfactor-quote-header {
        padding: 16px;
    }

    #ff-sp .fixfactor-quote-header h3 {
        font-size: 22px;
    }

    #ff-sp .fixfactor-form-content {
        padding: 16px;
    }
}

/* Core Web Vitals Optimizations */
@supports (content-visibility: auto) {
    .fixfactor-product img {
        content-visibility: auto;
        contain-intrinsic-size: 80px 80px;
    }

    /* Skip rendering of below-fold sections until near viewport */
    section.fixfactor-description {
        content-visibility: auto;
        contain-intrinsic-size: auto 400px;
    }

    section.fixfactor-contact-form-wide {
        content-visibility: auto;
        contain-intrinsic-size: auto 500px;
    }

    .fixfactor-modal {
        content-visibility: auto;
        contain-intrinsic-size: auto 0px;
    }
}

.fixfactor-sticky-sidebar {
    contain: layout style paint;
}

.fixfactor-variation-item,
.fixfactor-service-option {
    contain: layout style;
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Note Styling System - Yellow Left Border (like Service Details) */
.fixfactor-note {
    display: block;
    background: var(--ff-note-fill);
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin: var(--ff-space-lg) 0;
    font-size: var(--ff-font-md);
    font-weight: 500;
    line-height: 1.6;
    color: var(--content);
    border: none;
    border-left: 4px solid var(--accent-warm-hover);
    box-shadow: none;
}

#ff-sp .fixfactor-note-icon {
    display: none;
}

.fixfactor-note-content {
    flex: 1;
    min-width: 0;
}

.fixfactor-note strong {
    font-weight: 700;
    color: var(--content);
}

/* Mobile Note Styling */
@media (max-width: 768px) {
    .fixfactor-note {
        padding: 10px 12px;
        margin: var(--ff-space-md) 0;
        font-size: 13px;
    }
}

/* ==========================================================================
   PROGRESS BAR - FINAL DESIGN (Step 4 Active)
   ========================================================================== */

.fixfactor-progress-container {
    position: relative;
    width: 100%;
    background: var(--surface);
    padding: 18px 0;
    z-index: 900;
    border-bottom: 1px solid var(--ff-hairline);
}

.fixfactor-progress-wrapper {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.fixfactor-progress-steps {
    display: flex;
    justify-content: space-between;
    max-width: 468px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

/* Timeline line - spans exactly between first and last step circle centers */
.fixfactor-progress-steps::before {
    content: '';
    position: absolute;
    top: 11px;
    left: calc(12.5% + 10px);
    right: calc(12.5% + 10px);
    height: 2px;
    background: var(--border-neutral);
    z-index: 1;
}

/* Progress fill - spans exactly between first and last step circle centers */
.fixfactor-progress-bar-fill {
    position: absolute;
    top: 11px;
    left: calc(12.5% + 10px);
    right: calc(12.5% + 10px);
    height: 2px;
    background: var(--accent);
    z-index: 2;
    width: auto;
}

/* Semantic <ol> flattened into the flex row; li carry the step styles */
.fixfactor-progress-list {
    display: contents;
}

.fixfactor-progress-step {
    position: relative;
    z-index: 3;
    text-align: center;
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fixfactor-progress-step a {
    text-decoration: none;
    display: block;
}

/* Circle bubble - 24px */
#ff-pb .fixfactor-step-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    background: var(--surface);
    margin: 0 auto;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--content-secondary);
    font-weight: 600;
    font-size: 11px;
    line-height: 24px;
    font-family: var(--font-stack);
    border: 1.5px solid var(--border-neutral);
    box-shadow: 0 1px 3px var(--ff-shadow-xs);
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
}

/* Completed state - checkmark */
#ff-pb .fixfactor-step-bubble.completed {
    border-color: var(--accent);
    color: transparent;
    background: var(--teal-tint-faint);
    font-size: 0;
}

#ff-pb .fixfactor-step-bubble.completed::after {
    content: '✓';
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}

/* Active state - yellow filled */
#ff-pb .fixfactor-step-bubble.active {
    border-color: var(--accent-warm);
    color: var(--content-body);
    background: var(--accent-warm);
    font-weight: 600;
    box-shadow: 0 0 0 3px var(--ff-focus-glow);
}

/* Labels */
#ff-pb .fixfactor-step-label {
    font-size: 10px;
    font-weight: 450;
    font-family: var(--font-stack);
    margin-top: 8px;
    color: var(--content-secondary);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#ff-pb .fixfactor-step-label.completed {
    color: var(--content-secondary);
    font-weight: 450;
}

#ff-pb .fixfactor-step-label.active {
    color: var(--content-body);
    font-weight: 600;
}

/* Tooltip Styles */
#ff-pb .fixfactor-step-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: var(--ff-tooltip-fill);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 140px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 12px var(--ff-shadow-lg);
    z-index: 1000;
    pointer-events: none;
    margin-top: 8px;
    line-height: 1.3;
    text-align: center;
}

.fixfactor-step-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent var(--ff-tooltip-fill) transparent;
}

.fixfactor-progress-step:hover .fixfactor-step-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Progress Bar Mobile Responsive */
@media (max-width: 768px) {
    .fixfactor-progress-wrapper {
        padding: 0 1rem;
    }
}

@media (max-width: 576px) {
    .fixfactor-progress-wrapper {
        padding: 0 0.5rem;
    }

    .fixfactor-progress-steps::before {
        top: 10px;
    }

    .fixfactor-progress-bar-fill {
        top: 10px;
    }

    #ff-pb .fixfactor-step-bubble {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        font-size: 10px;
        line-height: 22px;
    }

    #ff-pb .fixfactor-step-bubble.completed::after {
        font-size: 11px;
    }

    #ff-pb .fixfactor-step-label {
        font-size: 9px;
    }

    #ff-pb .fixfactor-step-tooltip {
        font-size: 10px;
        padding: 6px 10px;
        width: 120px;
    }
}

/*
 * Service option: the second line (added 30 Jul 2026).
 *
 * "2-5 day turnaround, insured delivery" versus "bring it in, possibly same
 * day" is the whole basis on which someone picks between the two options, and
 * it used to be behind a 14px "?" that opened a hover tooltip. That failed
 * three ways at once: the target was well under the 24px minimum, hover does
 * not exist on the phones most of this traffic arrives on, and although the
 * trigger carried role="button" and tabindex="0" it had no keyboard handler -
 * a span does not fire click on Enter or Space, so a keyboard user could focus
 * it and nothing would happen. Nor was the text tied to the option with
 * aria-describedby, so screen readers never received it either.
 *
 * The grid was already designed for two lines (see .fixfactor-variation-
 * description). These two options simply were not using it.
 */
#ff-sp .fixfactor-service-description,
#ff-sp .mobile-service-description {
    margin: 2px 0 0;
    font-size: var(--ff-font-sm);
    line-height: 1.35;
    color: var(--ff-gray-500);
}

#ff-sp .fixfactor-service-option.selected .fixfactor-service-description,
#ff-sp .mobile-service-option.selected .mobile-service-description {
    color: var(--ff-badge-subtitle);
}

/* Two short buttons fit side by side down to about 500px of column, so they
   stack only in mobile portrait. They used to stack from 768px, where the
   column is still 728px wide and two full-width buttons cost a screen of
   height for nothing. */
@media (max-width: 575px) {
    #ff-sp .fixfactor-info-buttons {
        flex-direction: column;
        gap: var(--ff-space-sm);
    }

    #ff-sp .fixfactor-info-button {
        width: 100%;
    }
}


/* ==========================================================================
 * Why This Price modal (.ffwp)
 *
 * Replaces the old Negotiate Price dialog. Reuses the .fixfactor-modal shell
 * for the overlay, scrim and scroll behaviour; everything inside is new.
 *
 * Two things worth knowing before editing:
 *  - Section separation is surface + spacing. No one-sided decorative rules,
 *    per the design rules.
 *  - The two chart colours are chart-only values, validated against the
 *    #f8fafb surface (chroma >= 0.1, normal-vision dE 20.6, CVD dE 16+, both
 *    >= 3:1). The brand --accent measures 2.66:1 there and cannot be used.
 * ========================================================================== */

#ff-sp .ffwp,
.ffwp {
    --ffwp-cost: #0088a3;
    --ffwp-margin: #996f00;
    --ffwp-gap: var(--surface-alt);
}

.ffwp .ffwp-panel {
    width: 100%;
    max-width: 660px;
    /* Auto on all four sides, deliberately. The overlay centres with
       align-items and scrolls; a centred flex item taller than its scroll
       container puts its own top out of reach. Auto margins outrank
       align-items and collapse to zero when there is no free space, so a
       short panel is centred and a tall one starts at the overlay's padding
       and scrolls from the top. The gutter is the overlay's padding. */
    margin: auto;
    padding: 0;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 64px rgba(0, 40, 50, 0.16);
    /* The overlay scrolls. Boxing the panel as well put the form in a 660px
       column with its own scrollbar and cut it in half on a laptop. */
    overflow: hidden;
}

/* The gutter lives on the overlay, not the panel, so the panel's auto margins
   are free to collapse. The tablet block earlier in this file zeroes
   .fixfactor-modal padding and forces flex-start with !important; this is the
   one place that has to outrank it, and only above the full-bleed breakpoint. */
@media (min-width: 769px) {
    #negotiate-modal {
        padding: 24px 20px;
    }
}

.ffwp.show .ffwp-panel {
    animation: ffModalScaleIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- head --- */
.ffwp .ffwp-head {
    position: relative;
    /* Bottom padding was tuned for a paragraph sitting under the title. With
       the title alone it only has to clear the descenders. */
    padding: 26px 30px 20px;
    background: linear-gradient(180deg, var(--teal-tint-faint) 0%, var(--surface) 100%);
}

.ffwp .ffwp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-right: 44px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--action);
}

.ffwp .ffwp-eyebrow svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* The question is the whole head now. The sentence that used to explain it
   sat between the title and the figure that actually answers it, so it read
   as a delay rather than an introduction. Larger type wants tighter tracking:
   -0.7px was right at 26px, not at 34px. */
.ffwp .ffwp-head h2 {
    margin: 10px 0 0;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.12;
    color: var(--content);
}

.ffwp .fixfactor-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-neutral);
    background: var(--surface);
    border-radius: 50%;
    font-size: 19px;
    line-height: 1;
    color: var(--content-secondary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ffwp .fixfactor-modal-close:hover {
    color: var(--content);
    border-color: var(--content-secondary);
}

/* --- the figure --- */
.ffwp .ffwp-fig { padding: 22px 30px 24px; }

.ffwp .ffwp-fig-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

.ffwp .ffwp-fig-what {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-body);
}

.ffwp .ffwp-hero {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1;
    color: var(--content);
    white-space: nowrap;
}

/* 2px surface gap between segments, never a stroke. */
.ffwp .ffwp-bar {
    display: flex;
    gap: 2px;
    height: 22px;
    background: var(--ffwp-gap);
}

.ffwp .ffwp-seg {
    position: relative;
    height: 100%;
    background: var(--ffwp-cost);
}

.ffwp .ffwp-seg:first-child { border-radius: 4px 0 0 4px; }
.ffwp .ffwp-seg:last-child { border-radius: 0 4px 4px 0; }
.ffwp .ffwp-seg.is-margin { background: var(--ffwp-margin); }

.ffwp .ffwp-seg:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 3px;
}

.ffwp .ffwp-tip {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    min-width: 156px;
    padding: 9px 12px;
    background: var(--content-strong, #111111);
    color: #ffffff;
    border-radius: var(--radius-tag);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
}

.ffwp .ffwp-tip b { display: block; font-size: 13px; }

.ffwp .ffwp-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: var(--content-strong, #111111);
}

.ffwp .ffwp-seg:hover .ffwp-tip,
.ffwp .ffwp-seg:focus-visible .ffwp-tip { opacity: 1; }

/* The end segments would hang their tooltip outside the panel, so those two
   hang it from their own edge rather than from their centre. */
.ffwp .ffwp-seg:first-child .ffwp-tip {
    left: 0;
    transform: none;
}

.ffwp .ffwp-seg:first-child .ffwp-tip::after { left: 22px; }

.ffwp .ffwp-seg:last-child .ffwp-tip {
    left: auto;
    right: 0;
    transform: none;
}

.ffwp .ffwp-seg:last-child .ffwp-tip::after { left: auto; right: 17px; }

.ffwp .ffwp-legend {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

/* The bar and the sentence beneath it make the argument; the four line items
   are the evidence for it. A native <details> keeps the evidence one click
   away with no JavaScript, and reclaims 113px on desktop, 287px on a phone. */
.ffwp .ffwp-more {
    margin-top: 14px;
}

.ffwp .ffwp-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--action);
    -webkit-user-select: none;
    user-select: none;
}

.ffwp .ffwp-more-toggle::-webkit-details-marker {
    display: none;
}

/* Chevron drawn from two borders on a rotated square: no icon file, no extra
   element, and it inherits the link colour. */
.ffwp .ffwp-more-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
}

.ffwp .ffwp-more[open] .ffwp-more-toggle::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.ffwp .ffwp-more-toggle:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ffwp .ffwp-more-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

.ffwp .ffwp-more-shut { display: none; }
.ffwp .ffwp-more[open] .ffwp-more-open { display: none; }
.ffwp .ffwp-more[open] .ffwp-more-shut { display: inline; }

/* Inside the disclosure the list only needs clearance from the toggle. */
.ffwp .ffwp-more .ffwp-legend {
    margin-top: 12px;
}

.ffwp .ffwp-legend li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.ffwp .ffwp-key {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--ffwp-cost);
    transform: translateY(1px);
}

.ffwp .ffwp-key.is-margin { background: var(--ffwp-margin); }

.ffwp .ffwp-lt {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--content-body);
}

.ffwp .ffwp-lt b { font-weight: 600; color: var(--content); }

.ffwp .ffwp-lv {
    flex-shrink: 0;
    min-width: 82px;
    text-align: right;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--content-body);
    font-variant-numeric: tabular-nums;
}

.ffwp .ffwp-lv em {
    font-style: normal;
    font-weight: 400;
    color: var(--content-secondary);
    margin-left: 6px;
}

.ffwp .ffwp-note {
    margin: 16px 0 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--content-body);
}

.ffwp .ffwp-note b { color: var(--content); }

/* --- sections, separated by surface not by rules --- */
.ffwp .ffwp-sec { padding: 22px 30px; }
/* Klarna earns its place, but it states a single fact - same total, three
   payments - and was using 181px to say it. */
.ffwp .ffwp-sec.is-tinted {
    background: var(--surface-alt);
    padding-top: 16px;
    padding-bottom: 16px;
}

.ffwp .ffwp-sec.is-tinted .ffwp-sec-body {
    margin-top: 10px;
}

.ffwp .ffwp-sec-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ffwp .ffwp-sec-ico {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--teal-tint-fill);
    color: var(--action);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ffwp .ffwp-sec-ico svg { width: 18px; height: 18px; }

.ffwp .ffwp-sec h3 {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--content);
}

/* The badge is sized for the payment row under the price, where it stands
   beside 20px card marks. Next to a 16px heading it was too tall, and being
   inline-flex it takes its baseline from its own text rather than from the
   box - so it hung low. Centring it on the heading's x-height fixes both. */
.ffwp .ffwp-sec h3 .payment-badge.klarna {
    height: 17px;
    padding: 0 6px;
    font-size: 9px;
    border-radius: 3px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.ffwp .ffwp-sec-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--content-secondary);
}

/* No indent under the icon: it put the form 76px from the left edge and 30
   from the right, out of line with the bar and legend above. */
.ffwp .ffwp-sec-body {
    margin-top: 14px;
}

.ffwp .ffwp-split { display: flex; gap: 8px; }

/* Each card was 64px to hold two short lines. Most of that was inherited:
   the panel's 1.6 line-height put 9px of dead space around a single number.
   Both lines now set their own leading, which is what a card this small
   needs. 64px -> 46px, on three cards and on every breakpoint. */
.ffwp .ffwp-split-part {
    flex: 1;
    padding: 6px 10px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--teal-tint-border);
    border-radius: var(--radius-input);
}

.ffwp .ffwp-split-part .amt {
    display: block;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--content);
}

.ffwp .ffwp-split-part .when {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.25;
    color: var(--content-secondary);
}

/* --- the WPForms body, dressed to match --- */
.ffwp .ffwp-form .wpforms-container { margin: 0; }
.ffwp .ffwp-form .wpforms-head-container { display: none; }

.ffwp .ffwp-form .wpforms-field-container {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 0 10px;
}

.ffwp .ffwp-form .wpforms-field {
    grid-column: 1 / -1;
    padding: 0 0 11px;
}

.ffwp .ffwp-form .wpforms-field.ff-half { grid-column: auto; }
.ffwp .ffwp-form .wpforms-field.ff-context { display: none; }

.ffwp .ffwp-form .wpforms-field-label {
    display: block;
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--content-secondary);
}

.ffwp .ffwp-form .wpforms-required-label { display: none; }

/* Inputs, textareas and their focus state are styled by the theme's own
   .fixfactor-content-area rules, which carry !important. Nothing here tries to
   restate them - it would be dead CSS. */

/* Checkbox list as chips: the box goes, the label becomes the control. */
.ffwp .ffwp-form .ff-chips ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ffwp .ffwp-form .ff-chips li { margin: 0; padding: 0; }

/* Covers its own chip, so the whole chip is the hit target. Sized against the
   li, which is why the li below has position: relative - without it all seven
   stack in one place and swallow each other's clicks. */
.ffwp .ffwp-form .ff-chips input[type="checkbox"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.ffwp .ffwp-form .ff-chips label {
    display: inline-block;
    margin: 0;
    padding: 8px 13px;
    min-height: 24px;
    background: var(--surface);
    border: 1px solid var(--border-neutral);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 400;
    color: var(--content-body);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* On the li, because the input now sits above the label. */
.ffwp .ffwp-form .ff-chips li:hover label { border-color: var(--accent); }

.ffwp .ffwp-form .ff-chips input:checked + label {
    background: var(--action);
    border-color: var(--action);
    color: #ffffff;
    font-weight: 600;
}

.ffwp .ffwp-form .ff-chips input:focus-visible + label {
    outline: 2px solid var(--action);
    outline-offset: 2px;
}

/*
 * WPForms lays choice lists out as a grid of full-width rows. Scoped to the
 * dialog's id so it wins on specificity rather than on !important.
 */
#negotiate-modal .ff-chips ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    grid-template-columns: none;
}

/* Chrome draws the number spinner from its own pseudo-element, which the
   theme's appearance: none does not reach. */
#negotiate-modal input[type="number"]::-webkit-outer-spin-button,
#negotiate-modal input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#negotiate-modal input[type="number"] {
    -moz-appearance: textfield;
}

#negotiate-modal .ff-chips li {
    position: relative;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}


.ffwp .ffwp-form .wpforms-submit-container { padding: 0; margin-top: 3px; }

/* --- live preview of what lands in the inbox --- */
.ffwp .ffwp-preview {
    margin: 13px 0 0;
    padding: 14px 16px;
    background: var(--teal-tint-faint);
    border: 1px solid var(--teal-tint-border);
    border-radius: var(--radius-input);
}

.ffwp .ffwp-preview[hidden] { display: none; }

.ffwp .ffwp-preview-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--content-secondary);
}

.ffwp .ffwp-preview p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--content-body);
}

.ffwp .ffwp-send-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--content-secondary);
}

/* --- phone --- */
@media (max-width: 768px) {
    .ffwp .ffwp-panel {
        max-width: none;
        max-height: none;
        min-height: 100%;
        margin: 0;
        border-radius: 0;
    }

    .ffwp .ffwp-head,
    .ffwp .ffwp-fig,
    .ffwp .ffwp-sec {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* The sheet runs to about 1,950px and the overlay is what scrolls, so a
       close button in the flow disappears at the first swipe. */
    .ffwp .fixfactor-modal-close {
        position: fixed;
        top: 12px;
        right: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    }

    .ffwp .ffwp-head h2 { font-size: 28px; }

    .ffwp .ffwp-fig-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .ffwp .ffwp-hero { font-size: 36px; }

    /* The tooltip cannot be hovered on a phone, and a segment can be under
       40px wide - the legend below already carries every value. */
    .ffwp .ffwp-tip { display: none; }

    /* Three amounts side by side, not stacked: 354px of row is enough for
       114px a card once the padding and caption come down a step. */
    .ffwp .ffwp-split { gap: 6px; }
    .ffwp .ffwp-split-part {
        min-width: 0;
        padding: 6px 4px;
    }
    .ffwp .ffwp-split-part .amt { font-size: 15px; }
    .ffwp .ffwp-split-part .when {
        font-size: 10.5px;
        line-height: 1.3;
    }

    .ffwp .ffwp-form .wpforms-field-container { grid-template-columns: 1fr; }
    .ffwp .ffwp-form .wpforms-field.ff-half { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
    .ffwp .ffwp-legend li { gap: 8px; }
    .ffwp .ffwp-lt { flex-basis: 100%; order: 2; padding-left: 20px; }
    .ffwp .ffwp-lv { order: 1; margin-left: auto; }
}

/* ==========================================================================
 * Funnel steps bar (.ffp-steps)
 *
 * Same component as the model page's .ffd-steps, so hub -> model -> service
 * reads as one trail. Full width above the page, real names as the anchors.
 * ========================================================================== */
.ffp-steps-band {
    border-bottom: 1px solid rgba(0, 170, 196, 0.25);
    background: var(--surface, #fff);
}

/* Same column as #ff-sp, not the model page's 60rem: measured at 1440 the
   trail started at L240 and the product content at L150, so the bar read as
   belonging to a different page. Width and gutter are the product column's. */
.ffp-steps {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0.65rem 20px;
    display: flex;
    align-items: center;
    font-size: 0.86rem;
}

.ffp-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--action, #007a92);
    font-weight: 600;
    white-space: nowrap;
}

a.ffp-step:hover .ffp-step-label {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ffp-step-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(0, 170, 196, 0.12);
    color: var(--action, #007a92);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.ffp-step.is-current {
    color: var(--content, #000);
    font-weight: 800;
}

.ffp-step.is-current .ffp-step-dot {
    background: var(--action, #007a92);
    color: #fff;
    /* Optical centring: a numeral carries no descender, so its ink reads low
       inside a circle that is centred geometrically. Trimming the content box
       from the bottom lifts the glyph by half the padding, so 2px is a 1px lift.
       Horizontally it needs nothing: the glyph is centred as drawn. */
    box-sizing: border-box;
    padding-bottom: 2px;
}

/* The last step is the page you are on, so it may be long. Everything before
   it holds its width; only this one is allowed to shrink and ellipsis. */
.ffp-step.is-current .ffp-step-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ffp-step.is-current {
    min-width: 0;
}

.ffp-step-sep {
    flex: 0 1 44px;
    min-width: 12px;
    height: 1px;
    background: rgba(0, 170, 196, 0.35);
    margin: 0 0.7rem;
}

@media (max-width: 640px) {
    /* Scrolls rather than wraps: a wrapped trail reads as two trails. */
    .ffp-steps {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0.6rem 12px;
        font-size: 0.78rem;
    }

    .ffp-steps::-webkit-scrollbar { display: none; }

    .ffp-step { gap: 0.3rem; }

    .ffp-step.is-done .ffp-step-dot { display: none; }

    .ffp-step.is-current .ffp-step-dot {
        width: 15px;
        height: 15px;
        font-size: 9px;
        padding-bottom: 1px;
    }
}

/* Right corners only: the left edge stays flat because the accent bar runs
   down it. Two populations render the same callout — the ones the description
   filter classes, and the ones authored in content with the colours inline and
   no class at all. The attribute pair matches the second without touching any
   other div. Radius is the system default so these agree with cards and
   buttons. Scoped by id to outrank a plain class rule earlier in this file. */
#ff-sp .fixfactor-note,
#ff-sp div[style*="background-color"][style*="border-left"] {
    border-radius: 0 var(--radius, 12px) var(--radius, 12px) 0;
}