/* 
Theme Name: Fyndable Smart SEO 
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Child Theme
Author: Fyndable Smart SEO
Author URI: https://www.fyndable.ai/
Template: hello-elementor
Version: 2.0.0
Text Domain: fyndable-smart-seo
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* ==========================================================================
   Fyndable Design System — tokens + component layer
   Values are taken verbatim from fynui/project/_ds/fyndable-design-system-
   Do not introduce raw hex or ad-hoc px here; extend the token set instead.
   ========================================================================== */

:root{
  /* Brand — CVI */
  --fyn-purple:#8F39AC;
  --fyn-blue:#379FD3;
  --fyn-ink:#333333;
  --fyn-mist:#E6E7E8;
  --fyn-purple-dark:#7A2F92;
  --fyn-purple-tint:#F4E9F8;
  --fyn-blue-dark:#2B84B3;
  --fyn-blue-tint:#E6F3FB;
  --fyn-gradient:linear-gradient(135deg,#8F39AC 0%,#379FD3 100%);
  --fyn-gradient-reverse:linear-gradient(135deg,#379FD3 0%,#8F39AC 100%);

  /* Neutrals */
  --fyn-white:#ffffff;
  --fyn-gray-50:#f9fafb;
  --fyn-gray-100:#f3f4f6;
  --fyn-gray-200:#e5e7eb;
  --fyn-gray-300:#d1d5db;
  --fyn-gray-400:#9ca3af;
  --fyn-gray-500:#6b7280;
  --fyn-gray-600:#4b5563;
  --fyn-gray-700:#374151;
  --fyn-gray-900:#111827;

  /* Semantic — solid + tint pairs */
  --fyn-success:#10b981; --fyn-success-light:#d1fae5; --fyn-success-ink:#07714f;
  --fyn-warning:#f59e0b; --fyn-warning-light:#fef3c7; --fyn-warning-ink:#92600b;
  --fyn-danger:#ef4444;  --fyn-danger-light:#fee2e2;  --fyn-danger-ink:#a32222;
  --fyn-info:#3b82f6;    --fyn-info-light:#dbeafe;
  --fyn-accent:#a855f7;  --fyn-accent-light:#f3e8ff;

  /* Surfaces */
  --surface-page:var(--fyn-gray-50);
  --surface-card:var(--fyn-white);
  --surface-sunken:var(--fyn-gray-100);
  --surface-brand:var(--fyn-gradient);
  --surface-header:linear-gradient(135deg,#2A1533 0%,#132A38 100%);

  /* Text */
  --text-heading:var(--fyn-gray-900);
  --text-body:var(--fyn-ink);
  --text-muted:var(--fyn-gray-500);
  --text-subtle:var(--fyn-gray-400);
  --text-inverse:var(--fyn-white);
  --text-link:var(--fyn-purple);
  --text-link-hover:var(--fyn-blue);

  /* Borders */
  --border-subtle:var(--fyn-gray-100);
  --border-default:var(--fyn-gray-200);
  --border-strong:var(--fyn-gray-300);
  --border-focus:var(--fyn-purple);
  --focus-ring:0 0 0 3px rgba(143,57,172,.15);

  /* Radii */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px;
  --radius-lg:12px; --radius-pill:20px; --radius-round:50%;

  /* Elevation */
  --shadow-sm:0 1px 3px rgba(0,0,0,.1);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-brand:0 10px 20px rgba(143,57,172,.2);
  --shadow-brand-strong:0 10px 20px rgba(143,57,172,.3);
  --shadow-lift:0 12px 20px -3px rgba(143,57,172,.25);

  /* Motion */
  --transition:all .2s ease;
  --lift-md:translateY(-2px);
  --lift-lg:translateY(-4px);

  /* Layout */
  --pad-page:40px;
  --width-content:1400px;
  --width-form:900px;

  --purple:#8F39AC; --blue:#379FD3; --ink:#333333; --mist:#E6E7E8;
  --grad:linear-gradient(135deg,#8F39AC 0%,#379FD3 100%);
  --void:#16161A; --paper:#FFFFFF;
  --line:rgba(51,51,51,.17); --line-w:rgba(255,255,255,.17);
  --dim:rgba(51,51,51,.66); --dim-w:rgba(255,255,255,.68);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body{ color:var(--text-body); background:var(--fyn-white); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ color:var(--text-heading); text-wrap:balance; }
p{ text-wrap:pretty; }

/* The one gradient-clipped text treatment. */
.fyn-grad-text,
.fyn-grad-text *{
  background:var(--fyn-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* --------------------------------------------------------------------------
   Buttons — Elementor button widget, restyled to the design system
   .fyn-btn-primary  gradient fill, purple shadow, lift on hover
   .fyn-btn-outline  2px border, turns purple on hover
   .fyn-btn-ghost    text-only, on dark bands
   Add .fyn-btn-hero for the 52px hero size.
   -------------------------------------------------------------------------- */
.fyn-btn-primary .elementor-button,
.fyn-btn-primary .elementor-button:visited{
  background:var(--fyn-gradient);
  color:var(--fyn-white);
  border:none;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-brand);
  transition:var(--transition);
}
.fyn-btn-primary .elementor-button:hover,
.fyn-btn-primary .elementor-button:focus{
  background:var(--fyn-gradient);
  color:var(--fyn-white);
  transform:var(--lift-md);
  box-shadow:var(--shadow-brand-strong);
}

.fynp-btn-primary .elementor-button,
.fynp-btn-primary .elementor-button:visited{
  background:var(--fyn-gradient);
  color:var(--fyn-white);
  border:none;
  border-radius:var(--radius-md);
  transition:var(--transition);
}

.fynp-btn-primary .elementor-button:hover,
.fynp-btn-primary .elementor-button:focus{
  background:var(--fyn-gradient);
  color:var(--fyn-white);
  transform:var(--lift-md);
  box-shadow:var(--shadow-brand);
}

.fyn-btn-outline .elementor-button,
.fyn-btn-outline .elementor-button:visited{
  background:transparent;
  color:var(--fyn-gray-700);
  border:2px solid var(--border-default);
  border-radius:var(--radius-md);
  box-shadow:none;
  transition:var(--transition);
}
.fyn-btn-outline .elementor-button:hover,
.fyn-btn-outline .elementor-button:focus{
  border-color:var(--fyn-purple);
  color:var(--fyn-purple);
  background:var(--fyn-white);
  transform:var(--lift-md);
}

.fyn-btn-ghost .elementor-button,
.fyn-btn-ghost .elementor-button:visited{
  background:rgba(255,255,255,.12);
  color:var(--fyn-white);
  border:2px solid rgba(255,255,255,.28);
  border-radius:var(--radius-md);
  transition:var(--transition);
}
.fyn-btn-ghost .elementor-button:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.5);
  transform:var(--lift-md);
}

.fyn-btn-hero .elementor-button{
  font-size:16px;
  padding:16px 30px;
}
/* No press animation in the product: the press state is colour + loss of lift. */
.elementor-button:active{ transform:none !important; }
.fyn-btn-primary .elementor-button:active{ box-shadow:var(--shadow-brand); }

/* --------------------------------------------------------------------------
   Eyebrow / badge
   -------------------------------------------------------------------------- */
.fyn-eyebrow .elementor-heading-title,
.fyn-eyebrow{
  display:inline-block;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--fyn-purple-tint);
  color:var(--fyn-purple-dark);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  line-height:1.4;
}
.fyn-eyebrow-plain .elementor-heading-title{
  color:var(--fyn-gray-400);
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.fyn-card{
  background:var(--surface-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transition:var(--transition);
}
.fyn-card-flat{
  background:var(--surface-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.fyn-card-hover:hover{
  transform:var(--lift-md);
  box-shadow:var(--shadow-lift);
}
/* 4px gradient accent bar along the top of a card. */
.fyn-accent-bar::before{
  content:"";
  display:block;
  height:4px;
  background:var(--fyn-gradient);
  margin:calc(var(--fyn-card-pad,30px) * -1) calc(var(--fyn-card-pad,30px) * -1) 0;
}

/* 48px gradient icon chip. */
.fyn-chip .elementor-icon,
.fyn-chip{
  width:48px;height:48px;
  border-radius:var(--radius-lg);
  background:var(--fyn-gradient);
  display:flex;align-items:center;justify-content:center;
  color:var(--fyn-white);
}
.fyn-chip .elementor-icon svg{ width:24px;height:24px;fill:var(--fyn-white); }
.fyn-chip .elementor-icon i{ font-size:24px;color:var(--fyn-white); }

/* --------------------------------------------------------------------------
   Interactive tool card — 2px border, no shadow at rest, purple on hover
   -------------------------------------------------------------------------- */
.fyn-toolcard{
  background:var(--fyn-white);
  border:2px solid var(--fyn-gray-200);
  border-radius:var(--radius-sm);
  transition:var(--transition);
}
.fyn-toolcard:hover{
  border-color:var(--fyn-purple);
  transform:var(--lift-lg);
  box-shadow:var(--shadow-brand);
}

/* --------------------------------------------------------------------------
   Dark bands
   -------------------------------------------------------------------------- */
.fyn-band-dark{ background:var(--surface-header); }
.fyn-band-dark h1,.fyn-band-dark h2,.fyn-band-dark h3{ color:var(--fyn-white); }
.fyn-band-dark p{ color:rgba(255,255,255,.7); }
.fyn-band-ink{ background:var(--fyn-gray-900); }

/* --------------------------------------------------------------------------
   Big gradient statistic figures
   -------------------------------------------------------------------------- */
.fyn-stat-figure .elementor-heading-title{
  font-size:44px;
  font-weight:700;
  line-height:1.1;
  background:var(--fyn-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.fyn-stat-label .elementor-heading-title{
  font-size:14px;
  font-weight:400;
  color:var(--fyn-gray-500);
}

/* --------------------------------------------------------------------------
   FAQ — Elementor accordion restyled to the flat rule-separated list
   -------------------------------------------------------------------------- */
.fyn-faq .e-n-accordion-item,
.fyn-faq .elementor-accordion-item{
  border:none;
  border-bottom:1px solid var(--border-default);
  background:transparent;
}
.fyn-faq .e-n-accordion-item:last-child,
.fyn-faq .elementor-accordion-item:last-child{ border-bottom:none; }
.fyn-faq summary,
.fyn-faq .elementor-tab-title{
  padding:22px 0;
  font-size:16px;
  font-weight:600;
  color:var(--fyn-gray-900);
  background:transparent;
  border:none;
  cursor:pointer;
  transition:var(--transition);
}
.fyn-faq summary:hover,
.fyn-faq .elementor-tab-title:hover{ color:var(--fyn-purple); }
.fyn-faq .e-n-accordion-item-content,
.fyn-faq .elementor-tab-content{
  padding:0 0 22px;
  font-size:14px;
  line-height:1.6;
  color:var(--fyn-gray-600);
  border:none;
  background:transparent;
}

/* --------------------------------------------------------------------------
   Forms — 2px borders, purple focus, 6px radius
   -------------------------------------------------------------------------- */
.fyn-form .elementor-field-group label{
  font-size:13px;
  font-weight:600;
  color:var(--fyn-gray-700);
  margin-bottom:6px;
}
.fyn-form .elementor-field-textual{
  border:2px solid var(--fyn-gray-200);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  font-size:15px;
  font-family:inherit;
  color:var(--fyn-ink);
  background:var(--fyn-white);
  transition:var(--transition);
}
.fyn-form .elementor-field-textual:focus{
  border-color:var(--border-focus);
  box-shadow:var(--focus-ring);
  outline:none;
}
.fyn-form .elementor-field-textual::placeholder{ color:var(--fyn-gray-400); }
.fyn-form .elementor-button[type="submit"]{
  background:var(--fyn-gradient);
  color:var(--fyn-white);
  border:none;
  border-radius:var(--radius-md);
  font-weight:600;
  box-shadow:var(--shadow-brand);
  transition:var(--transition);
}
.fyn-form .elementor-button[type="submit"]:hover{
  transform:var(--lift-md);
  box-shadow:var(--shadow-brand-strong);
}
.fyn-form .elementor-message{ font-size:14px; }
.fyn-form .elementor-message.elementor-message-success{ color:var(--fyn-success-ink); }
.fyn-form .elementor-message.elementor-message-danger{ color:var(--fyn-danger-ink); }

/* --------------------------------------------------------------------------
   Pills / severity badges
   -------------------------------------------------------------------------- */
.fyn-pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  font-size:11px;
  font-weight:600;
  line-height:1.5;
}
.fyn-pill--high{ background:var(--fyn-danger-light);  color:var(--fyn-danger-ink); }
.fyn-pill--mid{  background:var(--fyn-warning-light); color:var(--fyn-warning-ink); }
.fyn-pill--win{  background:var(--fyn-success-light); color:var(--fyn-success-ink); }
.fyn-pill--brand{ background:var(--fyn-purple-tint); color:var(--fyn-purple-dark); }

/* --------------------------------------------------------------------------
   Site header (Theme Builder)
   -------------------------------------------------------------------------- */
.fyn-header{
  background:var(--fyn-white);
  border-bottom:1px solid var(--border-default);
}
.fyn-nav .elementor-item{
  font-size:15px;
  font-weight:500;
  color:var(--fyn-gray-600);
  padding:8px 0;
  transition:var(--transition);
}
.fyn-nav .elementor-item:hover,
.fyn-nav .elementor-item.elementor-item-active{ color:var(--fyn-purple); }
.fyn-nav .elementor-nav-menu--main .elementor-item:hover{ background:transparent; }
.fyn-login-link a{
  font-size:15px;
  font-weight:500;
  color:var(--fyn-gray-600);
  transition:var(--transition);
}
.fyn-login-link a:hover{ color:var(--fyn-purple); text-decoration:none; }

/* --------------------------------------------------------------------------
   Site footer (Theme Builder)
   -------------------------------------------------------------------------- */
.fyn-footer{ background:var(--fyn-gray-900); }
.fyn-footer h4,.fyn-footer .fyn-footer-title .elementor-heading-title{
  color:var(--fyn-white);
  font-size:14px;
  font-weight:600;
  margin-bottom:9px;
}
.fyn-footer .fyn-footer-brand .elementor-heading-title{
  color:var(--fyn-white);
  font-size:22px;
  font-weight:700;
}
.fyn-footer p,.fyn-footer .elementor-widget-text-editor{
  color:rgba(255,255,255,.55);
  font-size:14px;
  line-height:1.6;
}
.fyn-footer .elementor-icon-list-item a,
.fyn-footer .elementor-icon-list-text{
  color:rgba(255,255,255,.55);
  font-size:14px;
  transition:var(--transition);
}
.fyn-footer .elementor-icon-list-item a:hover .elementor-icon-list-text{
  color:var(--fyn-white);
  text-decoration:none;
}

/* --------------------------------------------------------------------------
   Logo cloud — grey placeholder plates until real logos are supplied
   -------------------------------------------------------------------------- */
.fyn-logo-plate{
  height:26px;
  border-radius:var(--radius-sm);
  background:var(--fyn-gray-100);
}
.fyn-logo-cloud{
  display:flex;
  align-items:center;
  gap:34px;
  flex-wrap:wrap;
}

/* --------------------------------------------------------------------------
   Testimonial card
   -------------------------------------------------------------------------- */
.fyn-quote{
  background:var(--fyn-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:28px;
  height:100%;
}
.fyn-quote p{ margin:0;font-size:15px;line-height:1.6;color:var(--fyn-gray-700); }
.fyn-quote-author{ margin-top:16px;display:flex;align-items:center;gap:10px; }
.fyn-quote-avatar{ width:36px;height:36px;border-radius:var(--radius-round);background:var(--fyn-gray-100);flex:none;object-fit:cover; }
.fyn-quote-name{ font-size:13px;font-weight:600;color:var(--fyn-gray-900); }
.fyn-quote-role{ font-size:12px;color:var(--fyn-gray-500); }

/* --------------------------------------------------------------------------
   Hero product mock — the dashboard card in the homepage hero
   -------------------------------------------------------------------------- */
.fyn-mock{
  background:var(--surface-card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.fyn-mock-head{ background:var(--surface-header);padding:22px 25px; }
.fyn-mock-crumb{ font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.6); }
.fyn-mock-title{ font-size:24px;font-weight:700;letter-spacing:-.025em;color:var(--fyn-white);margin-top:4px; }
.fyn-mock-body{ padding:25px;display:grid;grid-template-columns:1fr 1fr;gap:15px; }
.fyn-mock-stat{
  position:relative;
  background:var(--fyn-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:20px 18px 18px;
  overflow:hidden;
}
.fyn-mock-stat::before{ content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--fyn-gradient); }
.fyn-mock-stat-value{ font-size:36px;font-weight:700;line-height:1.1;color:var(--fyn-gray-900); }
.fyn-mock-stat-label{ font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fyn-gray-500);margin-top:4px; }
.fyn-mock-stat-change{ font-size:12px;color:var(--fyn-success);margin-top:8px;font-weight:600; }
.fyn-mock-panel{
  grid-column:1 / -1;
  border-radius:var(--radius-lg);
  background:var(--fyn-white);
  box-shadow:var(--shadow-sm);
  padding:18px;
}
.fyn-mock-panel-title{ display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--fyn-gray-900); }
.fyn-mock-list{ margin-top:14px;display:flex;flex-direction:column;gap:10px; }
.fyn-mock-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:13px;color:var(--fyn-gray-700);
  padding-bottom:10px;border-bottom:1px solid var(--border-subtle);
}
.fyn-mock-row:last-child{ padding-bottom:0;border-bottom:none; }

/* Dashicons, used exactly as the product uses them. */
.fyn-ico{ font-size:18px;width:18px;height:18px;color:var(--fyn-purple);flex:none; }
.fyn-ico--ok{ color:var(--fyn-success); }

/* --------------------------------------------------------------------------
   Trust row under the hero CTAs
   -------------------------------------------------------------------------- */
.fyn-trust{ display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--fyn-gray-500); }
.fyn-trust span{ display:inline-flex;align-items:center;gap:6px; }

/* --------------------------------------------------------------------------
   Responsive — design-system breakpoints
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  :root{ --pad-page:32px; }
  .fyn-mock-body{ grid-template-columns:1fr 1fr; }
}
@media (max-width:767px){
  :root{ --pad-page:20px; }
  .fyn-mock-body{ grid-template-columns:1fr; }
  .fyn-logo-cloud{ gap:20px;justify-content:center; }
  .fyn-trust{ gap:12px;flex-direction:column; }
  .fyn-stat-figure .elementor-heading-title{ font-size:36px; }
}

/* --------------------------------------------------------------------------
   Tool card — Functies grid. 2px border at rest; the 4px gradient bar
   grows from 20% to full width on hover (behaviour from the mockup).
   -------------------------------------------------------------------------- */
.fyn-tool-card{
  background:var(--surface-card);
  border:2px solid var(--border-default);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition:var(--transition);
  height:100%;
}
.fyn-tool-card:hover{
  border-color:var(--fyn-purple);
  transform:var(--lift-lg);
  box-shadow:var(--shadow-brand);
}
.fyn-tool-bar{
  height:4px;
  width:20%;
  background:var(--fyn-gradient);
  transition:width .3s ease;
}
.fyn-tool-card:hover .fyn-tool-bar{ width:100%; }
/* Inline dashicon inside a heading. */
.fyn-ico-inline{
  color:var(--fyn-purple);
  font-size:20px;
  width:20px;
  height:20px;
  margin-right:10px;
  vertical-align:-4px;
}
.fyn-tool-title .elementor-heading-title{
  font-size:18px;
  font-weight:600;
  color:var(--text-heading);
  line-height:1.3;
}

/* --------------------------------------------------------------------------
   Price cards
   -------------------------------------------------------------------------- */
.fyn-price-card{
  background:var(--fyn-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:34px;
  height:100%;
  position:relative;
}
.fyn-price-card--featured{
  border:2px solid var(--fyn-purple);
  box-shadow:var(--shadow-brand);
}
.fyn-price-badge{
  position:absolute;
  top:-13px;
  left:34px;
  padding:4px 12px;
  border-radius:var(--radius-pill);
  background:var(--fyn-gradient);
  color:var(--fyn-white);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.fyn-price-name{ font-size:16px;font-weight:600;color:var(--fyn-purple); }
.fyn-price-amount{ margin-top:10px;font-size:42px;font-weight:700;color:var(--fyn-gray-900);line-height:1.1; }
.fyn-price-amount span{ font-size:15px;font-weight:500;color:var(--fyn-gray-500); }
.fyn-price-desc{ margin-top:6px;font-size:14px;color:var(--fyn-gray-500); }
.fyn-price-features{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.fyn-price-features li{
  font-size:14px;
  line-height:1.5;
  color:var(--fyn-gray-700);
  display:flex;
  gap:9px;
  align-items:flex-start;
}
/* ✓ and ✕ are literal characters in the product, not icons. */
.fyn-price-features li::before{ content:"\2713";color:var(--fyn-success);font-weight:700;flex:none; }
.fyn-price-features li.is-off{ color:var(--fyn-gray-400); }
.fyn-price-features li.is-off::before{ content:"\2715";color:var(--fyn-gray-300); }

/* Centred page hero (Functies, Prijzen, Over ons, Contact). */
.fyn-hero-centered{ text-align:center; }
.fyn-hero-centered .fyn-eyebrow{ margin:0 auto; }

/* Full-width button inside a card (price cards). */
.btn-full-w .elementor-button{ width:100%;justify-content:center; }

/* Image placeholder well — used until real photography is supplied. */
.fyn-img-placeholder{
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  background:var(--fyn-gray-100);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--fyn-gray-400);
  font-size:14px;
  font-weight:600;
}

/* --------------------------------------------------------------------------
   Blog — category pills, featured post, post cards
   -------------------------------------------------------------------------- */
.fyn-navpills{ display:flex;gap:10px;flex-wrap:wrap; }
.fyn-navpills a{
  display:inline-block;
  padding:7px 16px;
  border-radius:var(--radius-pill);
  border:2px solid var(--border-default);
  font-size:14px;
  font-weight:500;
  color:var(--fyn-gray-600);
  text-decoration:none;
  transition:var(--transition);
}
.fyn-navpills a:hover{ border-color:var(--fyn-purple);color:var(--fyn-purple);text-decoration:none; }
.fyn-navpills a.is-active{ background:var(--fyn-gradient);border-color:transparent;color:var(--fyn-white); }

.fyn-featured{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:36px;
  align-items:center;
  background:var(--fyn-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.fyn-featured-media{
  aspect-ratio:16/10;
  background:var(--fyn-gray-100);
  display:flex;align-items:center;justify-content:center;
  color:var(--fyn-gray-400);font-size:14px;font-weight:600;
  height:100%;
}
.fyn-featured-body{ padding:36px 40px 36px 4px; }
.fyn-featured-body h2{ margin:12px 0 0;font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:700;color:var(--fyn-gray-900); }
.fyn-featured-body h2 a{ color:inherit;text-decoration:none; }
.fyn-featured-body h2 a:hover{ color:var(--fyn-purple);text-decoration:none; }
.fyn-featured-body p{ margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--fyn-gray-600); }
.fyn-post-meta{ margin-top:14px;font-size:13px;color:var(--fyn-gray-500); }
@media (max-width:1024px){
  .fyn-featured{ grid-template-columns:1fr;gap:0; }
  .fyn-featured-body{ padding:28px 24px; }
}

/* Elementor Posts widget — Cards skin, restyled to the design system. */
.fyn-posts .elementor-post__card{
  border:none;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:var(--transition);
}
.fyn-posts .elementor-post__card:hover{ transform:var(--lift-md);box-shadow:var(--shadow-lift); }
.fyn-posts .elementor-post__thumbnail__link{ background:var(--fyn-gray-100); }
.fyn-posts .elementor-post__title,
.fyn-posts .elementor-post__title a{
  font-size:17px;font-weight:600;line-height:1.35;color:var(--fyn-gray-900);
}
.fyn-posts .elementor-post__title a:hover{ color:var(--fyn-purple); }
.fyn-posts .elementor-post__excerpt p{ font-size:14px;line-height:1.6;color:var(--fyn-gray-600); }
.fyn-posts .elementor-post__meta-data{ font-size:13px;color:var(--fyn-gray-500); }
.fyn-posts .elementor-post__badge{
  background:var(--fyn-purple-tint);
  color:var(--fyn-purple-dark);
  border-radius:var(--radius-pill);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 11px;
}
.fyn-posts .elementor-pagination .page-numbers{
  color:var(--fyn-gray-600);font-size:14px;font-weight:500;
  padding:6px 12px;border-radius:var(--radius-sm);transition:var(--transition);
}
.fyn-posts .elementor-pagination .page-numbers.current{
  background:var(--fyn-gradient);color:var(--fyn-white);
}

/* --------------------------------------------------------------------------
   Single post
   -------------------------------------------------------------------------- */
.fyn-article .elementor-widget-theme-post-content{ font-size:17px;line-height:1.75;color:var(--fyn-ink); }
.fyn-article .elementor-widget-theme-post-content h2{
  font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--fyn-gray-900);margin:38px 0 12px;
}
.fyn-article .elementor-widget-theme-post-content blockquote{
  margin:28px 0;padding:20px 26px;
  border-left:3px solid var(--fyn-purple);
  background:var(--fyn-purple-tint);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:18px;line-height:1.55;color:var(--fyn-gray-900);
}
.fyn-article .elementor-widget-theme-post-content blockquote p{ margin:0; }
.fyn-article .elementor-widget-theme-post-content ul{ padding-left:20px;margin:14px 0; }
.fyn-article .elementor-widget-theme-post-content li{ margin:7px 0; }
.fyn-authorbox{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--fyn-gray-50);
  border-radius:var(--radius-lg);
  padding:24px;
}
.fyn-authorbox-avatar{ width:52px;height:52px;border-radius:var(--radius-round);background:var(--fyn-gray-200);flex:none; }
.fyn-authorbox-name{ font-size:15px;font-weight:600;color:var(--fyn-gray-900); }
.fyn-authorbox-bio{ margin-top:4px;font-size:14px;line-height:1.6;color:var(--fyn-gray-600); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.fyn-404-figure .elementor-heading-title{
  font-size:120px;font-weight:700;line-height:1;letter-spacing:-.03em;
  background:var(--fyn-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (max-width:767px){ .fyn-404-figure .elementor-heading-title{ font-size:84px; } }

/* --------------------------------------------------------------------------
   Changelog / release notes
   -------------------------------------------------------------------------- */
.fyn-release{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--border-default);
}
.fyn-release:last-child{ border-bottom:none; }
.fyn-release-date{ font-size:14px;color:var(--fyn-gray-500);padding-top:2px; }
.fyn-release-type{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
}
.fyn-release-type--new{ color:var(--fyn-purple); }
.fyn-release-type--improved{ color:var(--fyn-blue); }
.fyn-release-type--fix{ color:var(--fyn-warning-ink); }
.fyn-release h3{ margin:8px 0 0;font-size:16px;font-weight:600;color:var(--fyn-gray-900); }
.fyn-release p{ margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--fyn-gray-600); }
@media (max-width:767px){ .fyn-release{ grid-template-columns:1fr;gap:6px; } }

/* --------------------------------------------------------------------------
   Comparison table — middle (Fyndable) column is tinted
   -------------------------------------------------------------------------- */
.fyn-compare{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  background:var(--fyn-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.fyn-compare > div{
  padding:15px 18px;
  font-size:14px;
  color:var(--fyn-gray-700);
  border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;
}
.fyn-compare > div:nth-child(4n+3){ background:var(--fyn-purple-tint); }
.fyn-compare .fyn-compare-h{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--fyn-gray-500);
  border-bottom:2px solid var(--border-default);
}
.fyn-compare .fyn-compare-h.is-brand{ color:var(--fyn-purple); }
.fyn-compare .is-center{ justify-content:center; }
.fyn-compare .yes{ color:var(--fyn-success);font-weight:700; }
.fyn-compare .no{ color:var(--fyn-gray-300);font-weight:700; }
@media (max-width:767px){
  .fyn-compare{ grid-template-columns:1.6fr 1fr 1fr 1fr;font-size:13px; }
  .fyn-compare > div{ padding:12px 10px; }
}

/* --------------------------------------------------------------------------
   Agency co-branding block
   -------------------------------------------------------------------------- */
.fyn-cobrand-swap{
  display:flex;align-items:center;justify-content:center;gap:18px;
}
.fyn-cobrand-plate{
  flex:1;
  max-width:190px;
  aspect-ratio:5/2;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.75);
  font-size:13px;font-weight:600;
}
.fyn-cobrand-swap .dashicons{ color:rgba(255,255,255,.5);font-size:26px;width:26px;height:26px; }

/* --------------------------------------------------------------------------
   SERP preview — Google's own colours, as the product uses them
   -------------------------------------------------------------------------- */
.fyn-serp{ font-family:var(--font-core,'Outfit',system-ui,sans-serif); }
.fyn-serp-title{ font-size:16px;line-height:1.3;color:#1a0dab; }
.fyn-serp-url{ margin-top:3px;font-size:13px;color:#006621; }
.fyn-serp-desc{ margin-top:5px;font-size:13px;line-height:1.5;color:#4d5156; }
.fyn-serp-frame{
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  padding:16px;
  background:var(--fyn-gray-50);
}
.fyn-serp-frame.is-after{
  border:2px solid var(--fyn-purple);
  background:var(--fyn-white);
}


/* ---- scan card: flat ---- */
.scan {
    border-radius: 20px;
    background: #fff;
    position: relative;
    z-index: 2;
    box-shadow: 0px 0px 10px 3px #0000001c;
}
.scan-bar{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:11px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;    border-top-left-radius: 20px;
    border-top-right-radius: 20px;}
.scan-bar .dot{width:6px;height:6px;background:#4ad295;border-radius:50%}
.scan-bar .sp{opacity:.4}
.scan-bar .clk{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.scan-body{display:grid;grid-template-columns:1fr;border-bottom-left-radius:20px;border-bottom-right-radius:20px;}
.scan-pane{padding:16px;border-top:1px solid var(--line)}
.scan-pane:first-child{border-top:0}
.pane-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.pane-head .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#fff;background:var(--purple);padding:3px 6px}
.pane-head .t{font-size:13px;font-weight:600;letter-spacing:-.01em}
.pane-head .s{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(51,51,51,.4)}
.kw{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:8px 10px;
  font-size:14px;color:var(--dim);border-left:3px solid transparent;transition:background .3s,color .3s,border-color .3s}
.kw .m{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;color:rgba(51,51,51,.42)}
.kw.on{background:rgba(143,57,172,.07);border-left-color:var(--purple);color:var(--ink);font-weight:500}
.kw.on .m{color:var(--purple)}
.brief{border:1px solid var(--line);padding:14px;transition:opacity .3s,transform .3s}
.brief.swap{opacity:0;transform:translateY(6px)}
.brief .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.brief h4{font-size:16.5px;font-weight:600;margin:8px 0 12px;line-height:1.22}
.brow{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:var(--dim);
  padding:6px 0;border-top:1px solid var(--line)}
.brow b{color:var(--ink);font-weight:500;text-align:right}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}
.tags span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 7px;background:rgba(55,159,211,.12);color:#2a7ba4}
.mini{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.mini .d{font-family:var(--mono);font-size:9px;color:rgba(51,51,51,.4);text-align:center}
.mini .c{height:30px;border:1px solid var(--line);padding:3px;position:relative}
.mini .c i{font-family:var(--mono);font-size:8.5px;color:rgba(51,51,51,.4);font-style:normal}
.pl{position:absolute;left:20px;right:15px;bottom:5px;height:11px;background:rgba(51,51,51,.13);width:80%;}
.pl.g{background:var(--grad)}
.pl.new{animation:drop .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes drop{from{transform:translateY(-14px) scaleX(.5);opacity:0}to{transform:none;opacity:1}}
.mini-note{margin-top:12px;font-size:12.5px;color:var(--dim)}
.mini-note b{color:var(--ink);font-weight:500}
@media(min-width:620px){.scan-body{grid-template-columns:1.1fr 1fr}
  .scan-pane:nth-child(2){border-left:1px solid var(--line)}
  .scan-pane:nth-child(3){grid-column:1/-1}}

/* ---- calendar ---- */
.cal-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,54px);align-items:start}
@media(max-width:920px){.cal-wrap{grid-template-columns:1fr}}
.cal{border:1px solid var(--line);background:#fff}
.cal-top{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cal-top .m{font-weight:600;font-size:15px}
.cal-top .lg{margin-left:auto;display:flex;gap:14px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cal-top .lg i{display:inline-block;width:8px;height:8px;margin-right:5px}
.cg{display:grid;grid-template-columns:repeat(5,1fr)}
.cg .hd{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:var(--ink);padding:9px 10px}
.cell{min-height:92px;padding:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cell:nth-child(5n){border-right:0}
.cell .dn{font-family:var(--mono);font-size:9.5px;color:rgba(51,51,51,.42)}
.post{margin-top:6px;font-size:11.5px;line-height:1.3;padding:6px 7px;border-left:3px solid var(--purple);
  background:rgba(143,57,172,.07)}
.post.s{border-left-color:var(--blue);background:rgba(55,159,211,.08)}
.post.l{border-left-color:#2f9e6a;background:rgba(47,158,106,.08)}
.cal-side h3{font-size:21px;margin-bottom:16px}
.cal-side dl{margin:0}
.cal-side dt{font-weight:600;font-size:15.5px;padding-top:15px;border-top:1px solid var(--line)}
.cal-side dd{margin:4px 0 0;font-size:14.5px;color:var(--dim);padding-bottom:2px}



.a-fyn-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 15px;
  border: 0;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  cursor: pointer;

  background-image: var(--fyn-gradient);
  background-size: 170% 170%;
  background-position: 0% 100%;

  animation: a-fyn-drift 5s ease-in-out infinite alternate;
  transition: transform .25s ease, box-shadow .25s ease;
}

@keyframes a-fyn-drift{
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.a-fyn-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(143,57,172,.28);
}

.a-fyn-btn:focus-visible{
  outline: 2px solid #379FD3;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .a-fyn-btn{ animation: none; }
}

.fyn-grad-text-move{
  background-image: var(--fyn-gradient);
  background-size: 175% 175%;
  background-position: 0% 100%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  animation: a-fyn-drift 5s ease-in-out infinite alternate;
}

.fyn-grad-text-move-bg{
  background-image: var(--fyn-gradient);
  background-size: 175% 175%;
  background-position: 0% 100%;
  color: transparent;

  animation: a-fyn-drift 5s ease-in-out infinite alternate;
}


@media (prefers-reduced-motion: reduce){
  .fyn-grad-text-move{ animation: none; }
}

.fyn-grad-text-drift{ color: #8F39AC; }

@supports (-webkit-background-clip: text) or (background-clip: text){
  .fyn-grad-text-drift{
    background-image: var(--fyn-gradient);
    background-size: 170% 170%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: a-fyn-drift 7s ease-in-out infinite alternate;
  }
}