/* ==========================================================================
   nifty.codes shared styles
   The palette mirrors the extension exactly so the site reads as the same
   product: light surfaces, #3A414E text, and the extension's blue (#394D73)
   for actions. Page-specific rules stay in each template's own <style> block.
   ========================================================================== */

:root {
      /* Surfaces */
      --bg:            #FFFFFF;
      --bg-soft:       #F8FAFC;
      --bg-overlay:    #F5F5FA;
      --card:          #FFFFFF;
      --border:        #E4E8F0;
      --border-hover:  #D1D5DB;

      /* Text */
      --ink:           #3A414E;
      --ink-body:      #6B7280;
      --ink-muted:     #9CA3AF;

      /* Action (the extension's blue) */
      --action:        #394D73;
      --action-hover:  #1D3156;

      /* Dark band */
      --dark-1:        #2D3440;
      --dark-2:        #3A414E;

      /* Accent tints */
      --indigo-bg:     #EEF2FF;
      --indigo-ink:    #4338CA;

      /* Radii */
      --r-sm:  6px;
      --r-md:  10px;
      --r-lg:  14px;

      /* Shadows */
      --shadow-card:   0 2px 8px rgba(0, 0, 0, 0.06);
      --shadow-soft:   0 1px 3px rgba(0, 0, 0, 0.08);
      --shadow-float:  0 18px 50px -12px rgba(20, 24, 33, 0.40);

      /* Motion */
      --t: 0.15s ease;

      /* Layout */
      --container: 1180px;
      --gutter: 24px;
}

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

html {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
}

body {
      background: var(--bg);
      color: var(--ink-body);
      min-height: 100vh;
      line-height: 1.6;
}

a { color: inherit; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
      width: 100%;
      max-width: var(--container);
      margin: 0 auto;
      padding-left: var(--gutter);
      padding-right: var(--gutter);
}

.section { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); }
.section--dark { background: linear-gradient(165deg, var(--dark-1) 0%, var(--dark-2) 100%); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.4px;
      color: var(--ink-muted);
}
.eyebrow--on-dark { color: rgba(255, 255, 255, 0.6); }

.display {
      font-size: clamp(34px, 5vw, 56px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.5px;
      color: var(--ink);
}

.h2 {
      font-size: clamp(26px, 3.4vw, 36px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.4px;
      color: var(--ink);
}
.h2--on-dark { color: #FFFFFF; }

.lede {
      font-size: clamp(16px, 1.6vw, 18px);
      line-height: 1.6;
      color: var(--ink-body);
}

.section-head {
      max-width: 620px;
      margin: 0 auto 48px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 50px;
      padding: 0 24px;
      border: 1px solid transparent;
      border-radius: var(--r-md);
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.btn svg { width: 17px; height: 17px; }

.btn--primary { background: var(--action); color: #FFFFFF; }
.btn--primary:hover { background: var(--action-hover); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-hover); }
.btn--ghost:hover { background: var(--bg-soft); border-color: var(--ink-muted); }

.btn--on-dark { background: #FFFFFF; color: var(--ink); }
.btn--on-dark:hover { background: #EEF0F5; }

.btn--lg { height: 56px; padding: 0 30px; font-size: 16px; }
.btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }

.text-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 600;
      color: var(--action);
      text-decoration: none;
      transition: gap var(--t), color var(--t);
}
.text-link:hover { gap: 9px; color: var(--action-hover); }
.text-link--on-dark { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Header (shared partial)
   -------------------------------------------------------------------------- */
.site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: saturate(180%) blur(12px);
      -webkit-backdrop-filter: saturate(180%) blur(12px);
      border-bottom: 1px solid transparent;
      transition: border-color var(--t), box-shadow var(--t);
}
.site-header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-soft); }

.site-header__inner { display: flex; align-items: center; gap: 22px; height: 70px; }
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 25px; width: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: 28px; margin-left: 10px; list-style: none; }
.site-nav a { font-size: 15px; font-weight: 500; color: var(--ink-body); text-decoration: none; transition: color var(--t); }
.site-nav a:hover { color: var(--ink); }
.site-header__spacer { flex: 1; }

@media (max-width: 767px) {
      .site-nav { display: none; }
      .site-header__inner { height: 62px; }
}

/* --------------------------------------------------------------------------
   Footer (shared partial) - clean light layout
   -------------------------------------------------------------------------- */
.site-footer {
      background: var(--bg-soft);
      border-top: 1px solid var(--border);
      padding: 48px 0 30px;
}
.site-footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.site-footer__brand { max-width: 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer__brand img { height: 22px; width: auto; display: block; }
.site-footer__tagline { font-size: 13px; color: var(--ink-muted); line-height: 1.6; }

.site-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.site-footer__col { display: flex; flex-direction: column; gap: 11px; }
.site-footer__col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-muted); }
.site-footer__col a { font-size: 14px; color: var(--ink-body); text-decoration: none; transition: color var(--t); }
.site-footer__col a:hover { color: var(--ink); }

.site-footer__bottom {
      margin-top: 36px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      font-size: 13px;
      color: var(--ink-muted);
}

@media (max-width: 599px) {
      .site-footer__top { gap: 32px; }
      .site-footer__cols { gap: 40px; }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-soft);
      transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.card--hover:hover { border-color: var(--border-hover); box-shadow: var(--shadow-card); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Metric strip
   -------------------------------------------------------------------------- */
.metric-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 96px; }
.metric { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.metric__value { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.5px; line-height: 1; color: var(--ink); }
.metric__label { font-size: 14px; font-weight: 500; color: var(--ink-muted); }

@media (max-width: 599px) { .metric-bar { gap: 32px 56px; } }

/* --------------------------------------------------------------------------
   Overlay recreation (the real on-page panel, in CSS)
   Reused by the hero and the how-it-works snapshots.
   -------------------------------------------------------------------------- */
.ovl {
      width: 100%;
      background: var(--bg-overlay);
      border-radius: 15px;
      box-shadow: var(--shadow-float);
      overflow: hidden;
      font-family: inherit;
}

.ovl__tray { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid rgba(20, 24, 33, 0.05); }
.ovl__grip { width: 16px; height: 10px; background: radial-gradient(circle, #BFC6D1 1px, transparent 1.6px) 0 0 / 5px 5px; }
.ovl__tray-spacer { flex: 1; }
.ovl__ctl { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: #9097A5; border-radius: 6px; }
.ovl__ctl svg { width: 13px; height: 13px; }

.ovl__body { padding: 15px 15px 16px; display: flex; flex-direction: column; gap: 14px; }
.ovl__title { font-size: 16px; font-weight: 700; color: var(--ink); }

.ovl__section { display: flex; flex-direction: column; gap: 9px; }
.ovl__badge {
      height: 46px;
      border-radius: 10px;
      background: var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
}
.ovl__btn-row { display: flex; gap: 9px; }
.ovl__action {
      height: 46px;
      flex: 1;
      border-radius: 10px;
      background: var(--action);
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
}
.ovl__view {
      height: 46px;
      width: 64px;
      border-radius: 10px;
      background: var(--action);
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
}
.ovl__tip { background: var(--border); border-radius: 10px; padding: 9px 11px; font-size: 12px; color: var(--ink); line-height: 1.45; }
.ovl__tip b { font-weight: 700; }

.ovl__pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      align-self: flex-start;
      padding: 7px 11px;
      border-radius: 8px;
      background: rgba(59, 130, 246, 0.1);
      border: 1px solid rgba(59, 130, 246, 0.3);
      font-size: 12px;
      font-weight: 500;
      color: #1E40AF;
}
.ovl__pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #3B82F6; }

.ovl__cancel {
      height: 44px;
      margin-top: 10px;
      border-radius: 10px;
      background: var(--dark-2);
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
}