/* ─────────────────────────────────────────────────────────────────────
 * feature-page.css — shared stylesheet for /features/, /industries/,
 * /who-its-for/, /why-donna/ pages (+ /landing.html via <link>).
 *
 * 2026-05-24 (rev. 2) — Palette is INLINED here as the single source
 * of truth. Earlier rev. used @import url('/_shared/palette.css') but
 * mobile Safari + LiteSpeed combo broke when the imported file 404'd,
 * cascading every CSS variable to "unresolved" and collapsing the
 * entire layout. Embedding the values means a missing/misnamed file
 * can never break the brand colors. To repaint the whole static site,
 * change the values in the :root block immediately below.
 * ─────────────────────────────────────────────────────────────────────*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  /* ── EMERALD · primary brand ──────────────────────────────── */
  --emerald-50:  #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-200: #A7F3D0;
  --emerald-300: #6EE7B7;
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --emerald-700: #047857;   /* ★ PRIMARY */
  --emerald-800: #065F46;
  --emerald-900: #064E3B;

  /* ── TEAL · success state ─────────────────────────────────── */
  --teal-500: #14B8A6;       /* ★ SUCCESS */
  --teal-700: #0F766E;
  --teal-900: #134E4A;
  --teal-50:  #F0FDFA;
  --teal-200: #99F6E4;

  /* ── CORAL · accent for promo / urgent CTAs ───────────────── */
  --coral-50:  #FFF7ED;
  --coral-200: #FED7AA;
  --coral-500: #F97316;      /* ★ ACCENT */
  --coral-600: #EA580C;
  --coral-900: #7C2D12;

  /* ── STONE · warm neutrals + text + numbers ───────────────── */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;      /* ★ TEXT + $ amounts */

  /* ── Semantic state colors ────────────────────────────────── */
  --amber-50:  #FFFBEB; --amber-100: #FEF3C7; --amber-500: #F59E0B; --amber-700: #B45309; --amber-900: #78350F;
  --red-50:    #FEF2F2; --red-100:   #FEE2E2; --red-500:   #EF4444; --red-700:   #B91C1C; --red-900:   #7F1D1D;
  --blue-50:   #EFF6FF; --blue-100:  #DBEAFE; --blue-500:  #3B82F6; --blue-700:  #1D4ED8; --blue-900:  #1E3A8A;

  /* ── Semantic aliases ─────────────────────────────────────── */
  --brand-primary:        var(--emerald-700);
  --brand-primary-hover:  var(--emerald-800);
  --brand-primary-active: var(--emerald-900);
  --brand-tint:           var(--emerald-50);
  --brand-tint-strong:    var(--emerald-100);
  --brand-border:         var(--emerald-200);

  --sidebar-bg:           var(--emerald-900);
  --sidebar-text:         var(--emerald-200);
  --sidebar-text-active:  #FFFFFF;
  --sidebar-divider:      rgba(255,255,255,.15);

  --text-primary:         var(--stone-900);
  --text-secondary:       var(--stone-600);
  --text-tertiary:        var(--stone-400);
  --text-on-brand:        #FFFFFF;
  --text-link:            var(--emerald-700);
  --text-money:           var(--stone-900);
  --text-money-positive:  var(--teal-700);
  --text-money-negative:  var(--red-700);

  --page-bg:              var(--stone-50);
  --surface:              #FFFFFF;
  --surface-raised:       #FFFFFF;
  --surface-sunken:       var(--stone-100);

  --success: var(--teal-500); --success-text: var(--teal-900); --success-bg: var(--teal-50); --success-border: var(--teal-200);
  --accent:  var(--coral-500); --accent-hover: var(--coral-600); --accent-text: var(--coral-900); --accent-bg: var(--coral-50); --accent-border: var(--coral-200);
  --warning: var(--amber-500); --warning-text: var(--amber-900); --warning-bg: var(--amber-50); --warning-border: var(--amber-100);
  --error:   var(--red-500);   --error-text:   var(--red-900);   --error-bg:   var(--red-50);   --error-border:   var(--red-100);
  --info:    var(--blue-500);  --info-text:    var(--blue-900);  --info-bg:    var(--blue-50); --info-border:    var(--blue-100);

  /* ── Legacy aliases ───────────────────────────────────────── */
  --green-50:  var(--emerald-50);  --green-100: var(--emerald-100); --green-200: var(--emerald-200); --green-300: var(--emerald-300);
  --green-400: var(--emerald-400); --green-500: var(--emerald-500); --green-600: var(--emerald-600); --green-700: var(--emerald-700);
  --green-800: var(--emerald-800); --green-900: var(--emerald-900);

  --primary:           var(--emerald-700);
  --primary-hover:     var(--emerald-800);
  --primary-dark:      var(--emerald-800);
  --primary-darkest:   var(--emerald-900);
  --primary-light:     var(--emerald-400);
  --primary-lighter:   var(--emerald-200);
  --primary-bg:        rgba(4,120,87,.05);
  --primary-bg-hover:  rgba(4,120,87,.10);

  --accent-warm:  var(--coral-500);
  --accent-coral: var(--coral-500);

  --white:    #ffffff;
  --gray-50:  #FAFBF6;
  --gray-100: #EEF1F6;
  --gray-200: #DDE3EC;
  --gray-300: #D4DAE0;
  --gray-400: #96a3b5;
  --gray-500: #6b7889;
  --gray-600: #4a5566;
  --gray-700: #343d4d;
  --gray-800: #1e2735;
  --gray-900: #111927;

  --text-dark:  #1A1F2C;
  --text-body:  #3d4757;
  --text-muted: #96a3b5;
  --border:       #D4DAE0;
  --border-light: #EEF1F6;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  --shadow-sm: 0 1px  2px rgba(4,120,87,.05), 0 1px  3px rgba(4,120,87,.07);
  --shadow-md: 0 4px  8px rgba(4,120,87,.05), 0 2px  4px rgba(4,120,87,.07);
  --shadow-lg: 0 12px 24px rgba(4,120,87,.07), 0 4px  8px rgba(4,120,87,.05);
  --shadow-xl: 0 24px 48px rgba(4,120,87,.09), 0 8px 16px rgba(4,120,87,.05);
}

/* Logo veil — same wrapper used in landing.html + sub-page headers. */
/* 2026-06-15 — glossy/3D treatment + hue recolor + ::before shine REMOVED.
   The new Della logo ships already coloured and reads best flat, so the veil
   now only provides the circular clip. */
.donna-logo-veil {
  position: relative; display: inline-block; width: 44px; height: 44px;
  flex-shrink: 0; border-radius: 9999px; overflow: hidden; vertical-align: middle;
}
.donna-logo-veil > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.donna-logo-veil > span { display: none; }



html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--white);color:var(--text-body);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.015em;line-height:1.18;color:var(--text-dark)}
h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,4.4vw,3.4rem);font-weight:600}
h2{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:600}
h3{font-size:1.15rem;font-weight:600}
.fp-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ─── PROMO BAR ─── */
.fp-promo{
  background:var(--primary);color:var(--white);
  text-align:center;padding:10px 24px;font-size:.84rem;font-weight:500;
}
.fp-promo a{color:var(--green-100);text-decoration:underline;text-underline-offset:2px}

/* ─── NAV ─── */
.fp-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-light);
}
.fp-nav-inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.fp-nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.fp-nav-brand img{width:44px;height:44px;border-radius:9999px;object-fit:cover;flex-shrink:0}
.fp-nav-wordmark{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:600;color:var(--text-dark)}
.fp-nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.fp-nav-links a{
  color:var(--text-secondary);text-decoration:none;
  font-size:.88rem;font-weight:450;transition:color .2s;
}
.fp-nav-links a:hover{color:var(--primary)}
/* 2026-05-14 (wFP1) — trigger styled independently of any parent so
   it also slots into landing.html's existing `.nav-links` without
   needing a CSS change there. */
button.fp-mm-trigger{
  color:var(--text-secondary);text-decoration:none;
  font-size:.88rem;font-weight:450;transition:color .2s;
  background:none;border:none;cursor:pointer;font-family:inherit;padding:0;
  display:inline-flex;align-items:center;gap:4px;
}
button.fp-mm-trigger:hover{color:var(--primary)}
.fp-nav-right{display:flex;align-items:center;gap:10px}
/* Log In button — outlined ghost. Same pattern as landing.html .btn-text.
   Border-only signals secondary action without competing with .fp-btn-fill
   (Start Free Trial primary). (Della pivot, 2026-05-14) */
/* 2026-05-25 — Mirrors landing.html .btn-text: filled emerald pill
   for the Log In CTA. Matches the shared visual language across
   landing + all 22 sub-pages. */
.fp-btn-text{
  background:var(--primary);border:1.5px solid var(--primary);
  color:var(--white);font-size:.88rem;cursor:pointer;
  padding:7.5px 18px;border-radius:999px;
  font-family:inherit;font-weight:600;
  transition:background .2s,color .2s,border-color .2s,transform .15s;
}
.fp-btn-text:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:var(--white);transform:translateY(-1px)}
.fp-btn-fill{
  background:var(--primary);color:var(--white);border:none;
  padding:10px 18px;border-radius:var(--r-sm);
  font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit;
  transition:background .2s,transform .15s,box-shadow .2s;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.fp-btn-fill:hover{background:var(--primary-light);transform:translateY(-1px);box-shadow:var(--shadow-md);color:var(--white)}
.fp-btn-border{
  background:var(--white);color:var(--primary);
  border:1px solid var(--border);
  padding:10px 18px;border-radius:var(--r-sm);
  font-size:.88rem;font-weight:500;cursor:pointer;font-family:inherit;
  transition:border-color .2s,background .2s;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.fp-btn-border:hover{border-color:var(--primary);background:var(--primary-bg)}
.fp-nav-mobile{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-dark)}

/* ─── MEGA MENU (Features) ─── */
.fp-mm-trigger .fp-chev{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s;
}
.fp-mm-trigger[aria-expanded="true"] .fp-chev{transform:rotate(180deg)}
.fp-mm-panel{
  position:absolute;top:calc(100% - 1px);left:50%;transform:translateX(-50%);
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);
  padding:28px;
  display:none;
  width:min(1080px,calc(100vw - 48px));
  z-index:99;
}
.fp-mm-panel.is-open{display:block}
.fp-mm-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.fp-mm-col-head{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--primary);
  padding-bottom:10px;border-bottom:1px solid var(--border-light);
  margin-bottom:8px;
}
.fp-mm-link{
  display:flex;gap:12px;padding:10px 8px;
  border-radius:var(--r-sm);
  text-decoration:none;color:var(--text-dark);
  transition:background .15s;
}
.fp-mm-link:hover{background:var(--primary-bg);color:var(--text-dark)}
.fp-mm-ico{
  width:28px;height:28px;flex:none;
  display:grid;place-items:center;color:var(--primary);
}
.fp-mm-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fp-mm-name{font-weight:500;font-size:.92rem;color:var(--text-dark);line-height:1.3}
.fp-mm-sub{font-size:.76rem;color:var(--text-secondary);margin-top:2px;line-height:1.4}

/* ─── MOBILE OVERLAY (mega-menu fallback) ─── */
.fp-mm-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:var(--white);overflow-y:auto;
  padding:24px;
}
.fp-mm-overlay.is-open{display:block}
.fp-mm-overlay-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:16px;border-bottom:1px solid var(--border-light);margin-bottom:16px;
}
.fp-mm-overlay-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:600;color:var(--text-dark)}
.fp-mm-close{
  background:none;border:none;cursor:pointer;font-size:24px;
  color:var(--text-dark);padding:8px;
}
.fp-mm-section{margin-bottom:12px;border-bottom:1px solid var(--border-light);padding-bottom:12px}
.fp-mm-section:last-child{border-bottom:none}
.fp-mm-section-toggle{
  width:100%;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 4px;font-family:inherit;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--primary);
}
.fp-mm-section-toggle .fp-chev{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s;
}
.fp-mm-section[data-open="true"] .fp-mm-section-toggle .fp-chev{transform:rotate(180deg)}
.fp-mm-section-body{display:none;padding-top:4px}
.fp-mm-section[data-open="true"] .fp-mm-section-body{display:block}
.fp-mm-overlay .fp-mm-link{padding:12px 4px}

/* ─── HERO ─── */
.fp-hero{
  position:relative;
  padding:80px 24px 60px;
  background:
    radial-gradient(circle at 10% 0%, rgba(30,58,95,.04), transparent 50%),
    radial-gradient(circle at 90% 100%, rgba(201,169,97,.04), transparent 50%);
}
.fp-hero-inner{max-width:1200px;margin:0 auto}
.fp-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;font-weight:600;
  color:var(--primary);margin-bottom:18px;
}
.fp-eyebrow::before{content:"";width:22px;height:1px;background:var(--primary)}
.fp-hero h1{max-width:880px}
.fp-hero h1 em{font-style:normal;color:var(--primary)}
.fp-hero-dek{
  font-size:clamp(1rem,1.4vw,1.18rem);color:var(--text-body);
  margin-top:20px;max-width:760px;line-height:1.55;
}
.fp-hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.fp-hero-cta .fp-btn-fill{padding:14px 24px;font-size:.95rem;border-radius:var(--r-md)}
.fp-hero-cta .fp-btn-border{padding:14px 24px;font-size:.95rem;border-radius:var(--r-md)}

/* ─── KPI tiles (at-a-glance) ─── */
.fp-kpis{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px;margin-top:48px;
}
.fp-kpi{
  background:var(--gray-50);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:20px;
}
.fp-kpi-v{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:var(--text-dark);letter-spacing:-.01em;line-height:1}
.fp-kpi-v.is-accent{color:var(--accent-warm)}
.fp-kpi-v.is-primary{color:var(--primary)}
.fp-kpi-l{font-size:.74rem;color:var(--text-secondary);margin-top:8px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* ─── SECTIONS ─── */
.fp-section{padding:72px 24px;border-top:1px solid var(--border-light)}
.fp-section.is-tinted{background:var(--gray-50)}
.fp-section-inner{max-width:1200px;margin:0 auto}
.fp-section h2{margin-bottom:14px;max-width:760px}
.fp-section-lede{font-size:1.05rem;color:var(--text-body);max-width:740px;line-height:1.6;margin-bottom:36px}

/* ─── BULLET LIST (What's inside) ─── */
.fp-bullets{
  display:grid;grid-template-columns:1fr;
  gap:14px;list-style:none;padding:0;
}
.fp-bullet{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:20px 22px;
  display:flex;gap:14px;
}
.fp-bullet-ico{
  flex:none;width:36px;height:36px;border-radius:8px;
  background:var(--primary-bg);
  color:var(--primary);
  display:grid;place-items:center;
}
.fp-bullet-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fp-bullet h3{margin-bottom:4px;font-size:1.02rem}
.fp-bullet p{font-size:.92rem;color:var(--text-body);line-height:1.55}

/* ─── VISUAL placeholder card ─── */
.fp-visual{
  background:linear-gradient(135deg,var(--gray-50),var(--green-50));
  border:1px dashed var(--border);
  border-radius:var(--r-lg);
  padding:32px;
  display:grid;place-items:center;text-align:center;
  aspect-ratio:16/9;
  margin-top:24px;
}
.fp-visual-label{
  font-size:.78rem;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  margin-bottom:8px;
}
.fp-visual-spec{font-size:.95rem;color:var(--text-body);max-width:540px;line-height:1.5}

/* ─── COMPARISON TABLE ─── */
.fp-compare{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.fp-compare table{width:100%;border-collapse:collapse}
.fp-compare th,.fp-compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--border-light);font-size:.92rem}
.fp-compare th{background:var(--gray-50);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);font-weight:600}
.fp-compare td.is-us{font-weight:600;color:var(--primary)}
.fp-compare td.is-no{color:var(--text-muted)}
.fp-compare tr:last-child td{border-bottom:none}

/* ─── PRICING ─── */
.fp-pricing{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;
}
.fp-tier{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px 24px;
}
.fp-tier.is-featured{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-bg);
}
.fp-tier-name{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:600;color:var(--text-dark);margin-bottom:6px}
.fp-tier-price{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;color:var(--primary);letter-spacing:-.02em;line-height:1.1}
.fp-tier-period{font-size:.84rem;color:var(--text-secondary);margin-top:2px}
.fp-tier-dek{font-size:.88rem;color:var(--text-body);margin-top:14px;line-height:1.5}
.fp-tier-list{list-style:none;padding:0;margin-top:18px;display:grid;gap:9px}
.fp-tier-list li{font-size:.88rem;color:var(--text-body);padding-left:24px;position:relative;line-height:1.5}
.fp-tier-list li::before{
  content:"";position:absolute;left:0;top:6px;
  width:14px;height:14px;border-radius:50%;
  background:var(--primary-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23557F26' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 7 2 2 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}

/* ─── RELATED features ─── */
.fp-related{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px;
}
.fp-related a{
  display:block;padding:20px;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  text-decoration:none;color:var(--text-dark);
  transition:border-color .2s,transform .15s;
}
.fp-related a:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.fp-related-name{font-weight:600;font-size:1rem;color:var(--text-dark);display:flex;align-items:center;gap:8px}
.fp-related-name::after{content:"→";color:var(--primary);transition:transform .2s}
.fp-related a:hover .fp-related-name::after{transform:translateX(2px)}
.fp-related-sub{font-size:.84rem;color:var(--text-secondary);margin-top:6px;line-height:1.5}

/* ─── FAQ (pure-CSS accordion) ─── */
.fp-faq{display:grid;gap:10px;margin-top:24px}
.fp-faq details{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-md);
  padding:0;
  overflow:hidden;
}
.fp-faq summary{
  list-style:none;cursor:pointer;padding:18px 22px;
  font-weight:600;font-size:.98rem;color:var(--text-dark);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.fp-faq summary::-webkit-details-marker{display:none}
.fp-faq summary::after{
  content:"+";font-size:1.4rem;color:var(--primary);
  font-weight:400;transition:transform .2s;line-height:1;
}
.fp-faq details[open] summary::after{transform:rotate(45deg)}
.fp-faq-a{padding:0 22px 18px;font-size:.92rem;color:var(--text-body);line-height:1.65}

/* ─── CTA footer (above site footer) ─── */
.fp-cta{
  margin-top:64px;
  background:linear-gradient(135deg,var(--green-50),var(--white));
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
  padding:64px 24px;
  text-align:center;
}
.fp-cta-inner{max-width:760px;margin:0 auto}
.fp-cta h2{margin-bottom:16px}
.fp-cta p{font-size:1.04rem;color:var(--text-body);margin-bottom:28px;line-height:1.55}
.fp-cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.fp-cta-buttons .fp-btn-fill,.fp-cta-buttons .fp-btn-border{padding:14px 24px;font-size:.95rem;border-radius:var(--r-md)}

/* ─── SITE FOOTER (compact version) ─── */
.fp-footer{
  background:var(--gray-50);padding:48px 24px 36px;
  font-size:.84rem;color:var(--text-secondary);
  border-top:1px solid var(--border-light);
}
.fp-footer-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
}
.fp-footer h4{font-size:.78rem;color:var(--text-dark);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;font-weight:700}
.fp-footer ul{list-style:none}
.fp-footer li{margin-bottom:8px}
.fp-footer a{color:var(--text-secondary);text-decoration:none;font-size:.86rem}
.fp-footer a:hover{color:var(--primary)}
.fp-footer-bottom{
  max-width:1200px;margin:32px auto 0;
  padding-top:24px;border-top:1px solid var(--border-light);
  text-align:center;font-size:.78rem;color:var(--text-muted);
}

/* ─── RESPONSIVE ─── */
@media (max-width:980px){
  .fp-mm-grid{grid-template-columns:repeat(2,1fr)}
  .fp-pricing{grid-template-columns:1fr 1fr}
  .fp-related{grid-template-columns:1fr 1fr}
  .fp-footer-inner{grid-template-columns:1fr 1fr;gap:24px}
}

@media (max-width:768px){
  .fp-nav-links{display:none}
  .fp-nav-mobile{display:inline-flex;align-items:center;padding:6px;background:none;border:none;cursor:pointer;color:var(--text-dark)}
  .fp-nav-mobile svg{width:28px;height:28px;stroke-width:2.2}
  .fp-hero{padding:48px 20px 40px}
  .fp-kpis{grid-template-columns:1fr 1fr}
  .fp-section{padding:48px 20px}
  .fp-pricing{grid-template-columns:1fr}
  .fp-related{grid-template-columns:1fr}
  .fp-mm-panel{display:none !important}
  .fp-footer-inner{grid-template-columns:1fr 1fr}

  /* 2026-05-25 — Mobile nav redesign (Clara-style full-screen overlay)
     ported from landing.html. Hides the promo strip, the desktop
     Log In + Start Free Trial buttons, and shows a clean logo + ☰
     bar that opens a full-screen .fp-mnav overlay. Markup is injected
     at runtime by /features/_shared/mobile-nav.js so all 22 sub-pages
     get the redesign without per-page HTML edits. */
  .fp-promo{display:none}
  .fp-nav-right{display:none}
  .fp-nav-inner{height:60px;padding:0 16px}
  .fp-nav-brand img{width:38px!important;height:38px!important}
  .fp-nav-brand .donna-logo-veil{width:38px!important;height:38px!important}
  .fp-nav-wordmark{font-size:1.05rem;font-weight:600}

  /* Full-screen overlay — JS toggles .is-open */
  .fp-mnav{
    position:fixed; inset:60px 0 0 0;
    background:var(--white);
    z-index:990;
    overflow-y:auto;
    opacity:0; pointer-events:none;
    transform:translateY(8px);
    transition:opacity .18s ease, transform .22s cubic-bezier(.2,.6,.2,1);
  }
  .fp-mnav.is-open{opacity:1; pointer-events:auto; transform:none}
  .fp-mnav-inner{
    max-width:480px; margin:0 auto;
    padding:24px 24px 40px;
    display:flex; flex-direction:column; gap:32px;
    min-height:100%;
  }
  .fp-mnav-links{list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:6px;
    text-align:center; padding-top:18px;
  }
  .fp-mnav-links li{list-style:none}
  .fp-mnav-link{
    display:block; padding:14px 8px;
    font-size:1.25rem; font-weight:600;
    color:var(--text-dark); text-decoration:none;
    border-radius:10px;
    transition:background .15s;
  }
  .fp-mnav-link:hover,.fp-mnav-link:active{background:var(--gray-50);color:var(--primary)}
  .fp-mnav-ctas{display:flex; flex-direction:column; gap:10px; padding:0 8px}
  .fp-mnav-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:14px 18px;
    border-radius:999px;
    font-size:.95rem; font-weight:600;
    cursor:pointer;
    transition:transform .15s, box-shadow .15s, background .15s, border-color .15s;
    background:transparent; color:var(--text-dark);
  }
  .fp-mnav-btn--ghost{background:var(--gray-50);border:1px solid var(--border)}
  .fp-mnav-btn--ghost:hover{background:var(--gray-100)}
  .fp-mnav-btn--outline{border:1.5px solid var(--border)}
  .fp-mnav-btn--outline:hover{border-color:var(--primary);color:var(--primary)}
  .fp-mnav-langs{border-top:1px solid var(--border-light);padding-top:22px}
  .fp-mnav-langs-label{
    font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
    color:var(--text-muted);text-align:center;margin-bottom:14px;
  }
  .fp-mnav-langs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .fp-mnav-langs-grid button{
    background:transparent;border:1px solid var(--border-light);
    border-radius:8px;padding:10px 6px;font-size:.82rem;font-weight:500;
    color:var(--text-secondary);cursor:pointer;
    transition:border-color .15s, color .15s, background .15s;
  }
  .fp-mnav-langs-grid button:hover,.fp-mnav-langs-grid button:active,.fp-mnav-langs-grid button.active{
    border-color:var(--primary);color:var(--primary);background:var(--gray-50);
  }
  .fp-mnav-langs-grid button.active{font-weight:600}
  .fp-mnav-stores{display:flex;gap:12px;justify-content:center;align-items:center;padding-top:8px}
  .fp-mnav-stores a{
    flex:1;max-width:160px;min-width:0;height:56px;
    display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .fp-mnav-stores img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
  .fp-mnav-stores a:last-child img{transform:scale(1.18);transform-origin:center}

  body.fp-mnav-open{overflow:hidden}
}
/* Desktop: never show the mobile overlay. */
@media (min-width:769px){
  .fp-mnav{display:none !important}
}

@media (max-width:480px){
  .fp-kpis{grid-template-columns:1fr}
  .fp-footer-inner{grid-template-columns:1fr}
}

@media (min-width:600px){
  .fp-bullets{grid-template-columns:1fr 1fr}
}

/* ─── WHY PAGE — alternating pillar rows ─────────────────────────────
 * Used by /why-donna/index.html. Each .why-pillar is a 2-col row;
 * even rows flip via :nth-child(even) RTL trick.
 * (Della pivot, 2026-05-14 — ported from salonapp.) */
.why-pillar{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  align-items:center;padding:80px 24px;
  max-width:1200px;margin:0 auto;
}
.why-pillar:nth-child(even){direction:rtl}
.why-pillar:nth-child(even) > *{direction:ltr}
.why-pillar + .why-pillar{border-top:1px solid var(--border-light)}
.why-pillar-eyebrow{
  font-size:.78rem;font-weight:600;color:var(--primary);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;
}
.why-pillar h2{font-size:2.1rem;margin-bottom:18px;letter-spacing:-.02em}
.why-pillar h2 em{color:var(--primary);font-style:italic}
.why-pillar-dek{font-size:1.06rem;color:var(--text-body);line-height:1.65;margin-bottom:20px}
.why-pillar-bullets{list-style:none;padding:0;margin:0 0 24px}
.why-pillar-bullets li{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 0;color:var(--text-secondary);font-size:.95rem;line-height:1.5;
}
.why-pillar-bullets svg{
  flex-shrink:0;width:18px;height:18px;color:var(--primary);margin-top:2px;
}
.why-pillar-link{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;color:var(--primary);font-size:.95rem;text-decoration:none;
}
.why-pillar-link:hover{color:var(--green-600);gap:10px;transition:gap .2s}
.why-pillar-visual{
  aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  background:var(--gray-50);border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.why-pillar-visual img{width:100%;height:100%;object-fit:cover;display:block}

/* ─── WHY PAGE — "moat" highlight grid ─── */
.why-moat{
  background:linear-gradient(180deg,var(--gray-50) 0%,var(--white) 100%);
  padding:80px 24px;
}
.why-moat-inner{max-width:1200px;margin:0 auto;text-align:center}
.why-moat h2{font-size:2rem;margin-bottom:16px;letter-spacing:-.02em}
.why-moat-dek{font-size:1.04rem;color:var(--text-body);max-width:720px;margin:0 auto 48px;line-height:1.65}
.why-moat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:left}
.why-moat-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;
}
.why-moat-card-ico{
  width:40px;height:40px;border-radius:10px;background:var(--primary-bg);color:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.why-moat-card-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.why-moat-card h3{font-size:1.02rem;margin-bottom:6px;color:var(--text-dark)}
.why-moat-card p{font-size:.88rem;color:var(--text-secondary);line-height:1.55;margin:0}

/* ─── WHY PAGE — "Built for" audience grid ─── */
.why-built{padding:80px 24px;background:var(--white)}
.why-built-inner{max-width:1200px;margin:0 auto}
.why-built-head{text-align:center;margin-bottom:48px}
.why-built-head h2{font-size:2rem;letter-spacing:-.02em;margin-bottom:12px}
.why-built-head p{color:var(--text-body);max-width:680px;margin:0 auto}
.why-built-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.why-built-card{
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:32px 24px;background:var(--gray-50);
}
.why-built-card h3{font-size:1.1rem;margin-bottom:10px;color:var(--text-dark)}
.why-built-card p{font-size:.92rem;color:var(--text-secondary);line-height:1.6;margin:0}
/* When .why-built-card is rendered as a link (clickable vertical
   tile on who-its-for), give it the same hover lift as elsewhere. */
a.why-built-card{
  display:block;color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.why-built-card:hover{
  border-color:rgba(24,95,165,.35);
  box-shadow:0 6px 16px rgba(4,44,83,.07);
  transform:translateY(-1px);
}
a.why-built-card:hover h3{color:var(--primary)}

/* ─── WHY PAGE — quote strip ─── */
.why-quote{padding:64px 24px;background:var(--gray-50)}
.why-quote-inner{max-width:840px;margin:0 auto;text-align:center}
.why-quote-mark{font-family:'Playfair Display',serif;font-size:4rem;color:var(--primary);line-height:1;margin-bottom:-12px}
.why-quote blockquote{font-family:'Playfair Display',serif;font-style:italic;font-size:1.6rem;line-height:1.4;color:var(--text-dark);font-weight:500}
.why-quote cite{display:block;margin-top:20px;font-style:normal;font-size:.92rem;color:var(--text-secondary);font-family:inherit}

/* ─── WHO IT'S FOR PAGE — vertical persona rows (Della pivot) ─── */
.wif-vertical{
  display:grid;grid-template-columns:1.15fr 1fr;gap:64px;
  align-items:center;padding:96px 24px;
  max-width:1200px;margin:0 auto;
}
.wif-vertical:nth-child(even){direction:rtl}
.wif-vertical:nth-child(even) > *{direction:ltr}
.wif-vertical + .wif-vertical{border-top:1px solid var(--border-light)}
.wif-vertical-eyebrow{
  font-size:.78rem;font-weight:600;color:var(--primary);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;
}
.wif-vertical h2{font-size:2.1rem;margin-bottom:18px;letter-spacing:-.02em}
.wif-vertical h2 em{color:var(--primary);font-style:italic}
.wif-vertical-dek{font-size:1.06rem;color:var(--text-body);line-height:1.65;margin-bottom:20px}
.wif-subtypes{
  display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px;
}
.wif-subtype{
  background:var(--white);border:1px solid var(--border);
  padding:7px 14px;border-radius:100px;font-size:.82rem;
  color:var(--text-dark);font-weight:500;
}
.wif-vertical-bullets{list-style:none;padding:0;margin:0 0 24px}
.wif-vertical-bullets li{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 0;color:var(--text-secondary);font-size:.95rem;line-height:1.5;
}
.wif-vertical-bullets svg{
  flex-shrink:0;width:18px;height:18px;color:var(--primary);margin-top:2px;
}
.wif-vertical-link{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;color:var(--primary);font-size:.95rem;text-decoration:none;
}
.wif-vertical-link:hover{color:var(--green-600);gap:10px;transition:gap .2s}
.wif-vertical-visual{
  aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  background:var(--gray-50);border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.wif-vertical-visual img{width:100%;height:100%;object-fit:cover;display:block}

/* ─── responsive overrides for why + who-it's-for ─── */
@media (max-width:980px){
  .why-built-grid{grid-template-columns:1fr 1fr;gap:18px}
  .wif-vertical{grid-template-columns:1fr;gap:36px;padding:64px 20px}
  .wif-vertical:nth-child(even){direction:ltr}
  .wif-vertical h2{font-size:1.7rem}
}
@media (max-width:768px){
  .why-built-grid{grid-template-columns:1fr;gap:14px}
}

/* ─── In-section image placeholder (Della pivot — 60 visuals across
 *     20 feature pages, 3 per page: problem / inside / compare).
 *     Same graceful-fallback pattern as .fp-hero-image: shows a clean
 *     dashed-border placeholder until the file at /images/sections/
 *     <slug>-<role>.jpg is dropped in. (2026-05-14) ─── */
.fp-section-image{
  margin:36px 0 8px;border-radius:var(--r-lg);
  aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,var(--green-50) 0%,var(--gray-100) 100%);
  border:1px dashed var(--border);
  max-width:920px;
}
.fp-section-image img{width:100%;height:100%;object-fit:cover;display:block}
.fp-section-image-fallback{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--text-muted);font-size:.85rem;text-align:center;padding:24px;
}
.fp-section-image-fallback code{opacity:.6;font-size:.75rem}

/* ─── "Hear Della live" inline player (2026-05-18) ─────────────────
 * Paired with /features/_shared/hear-donna.js. Renders inside any
 * <button data-dn-hear-btn> on the page. Mirrors the landing.html
 * hero-pill behavior so feature/industry pages get the same
 * play-MP3-in-place experience. */
.dn-hear-btn{
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
}
.dn-hear-btn[disabled]{cursor:wait;opacity:.85}
.dn-hear-btn[data-dn-state="playing"],
.dn-hear-btn[data-dn-state="paused"]{
  background:var(--primary);color:#fff;border-color:var(--primary);
}
.dn-hear-btn[data-dn-state="playing"]:hover,
.dn-hear-btn[data-dn-state="paused"]:hover{
  background:var(--primary-hover);border-color:var(--primary-hover);
}
.dn-hear-icon{display:inline-flex;align-items:center;line-height:0}
.dn-hear-icon svg{display:block}
.dn-hear-label{white-space:nowrap}
.dn-hear-time{
  font-size:.78rem;font-weight:500;font-variant-numeric:tabular-nums;
  opacity:.85;margin-left:2px;
}
.dn-hear-spin{animation:dn-hear-spin 1s linear infinite}
@keyframes dn-hear-spin{to{transform:rotate(360deg)}}

/* ─────────────────────────────────────────────────────────────────
   Screenshot-deterrent (L1, 2026-05-25)
   Loaded by every sub-page (features/*, industries/*, why-donna, who-its-for)
   via the shared feature-page.css link. Pairs with the JS at
   /features/_shared/screenshot-deterrent.js (L2: blur on focus loss +
   right-click block). See landing.html for the full reality-check on
   what these layers do and don't prevent.
   ───────────────────────────────────────────────────────────────── */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"], code, pre, .selectable {
  -webkit-user-select: text;
  user-select: text;
}
img { -webkit-user-drag: none; user-drag: none; }
@media print {
  body * { visibility: hidden !important; }
  body::after {
    content: 'Printing is disabled. Visit calldella.ai for an authorized export.';
    visibility: visible;
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1C1917; text-align: center; padding: 40px;
  }
}
body.is-blurred { filter: blur(20px); transition: filter .12s ease; }