/* ── Design tokens: matching IntX Export Manager Admin style.css ─── */
:root
{
   /* Webapp colour palette */
   --color-bg: #ffffff;
   --color-border: #d0d7de;
   --color-border-alt: #b5bcc3;
   --color-text: #222;
   --color-text-muted: #6c757d;
   --color-accent: #0078d4;
   --color-accent-hover: #006bbd;
   --color-accent-active: #005fa9;
   --color-neutral-bg: #f3f4f6;
   --color-neutral-hover: #e7e9ec;
   --color-neutral-active: #dce1e5;
   --color-danger: #c0392b;
   /* Additional tones for the marketing page */
   --color-brand: #19327a;
   --color-brand-deep: #102251;
   --color-focus: #5476d5;
   --color-green: #1a7a3c;
   --color-green-bg: #e8f5ed;
   /* Fonts */
   --font-body: 'Noto Sans', 'Segoe UI', Arial, sans-serif;
   --font-heading: 'Urbanist', 'Segoe UI', Arial, sans-serif;
   /* Shared tokens */
   --radius: 4px;
   --radius-lg: 8px;
   --shadow: 0 2px 10px rgba(25,50,122,.09);
   --shadow-hover: 0 5px 18px rgba(25,50,122,.15);
   --nav-height: 60px;
}

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

body
{
   font-family: var(--font-body);
   background: var(--color-neutral-bg);
   color: var(--color-text);
   line-height: 1.65;
   font-size: 15px;
}

h1, h2, h3, h4, h5, h6
{
   font-family: var(--font-heading);
}

a
{
   color: var(--color-accent);
   text-decoration: none;
}

   a:hover
   {
      color: var(--color-accent-hover);
      text-decoration: underline;
   }

/* ── NAV ───────────────────────────────────────────────────────── */
.site-nav
{
   position: sticky;
   top: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: var(--nav-height);
   padding: 0 32px;
   background: var(--color-brand-deep);
   box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.nav-brand
{
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
}

   .nav-brand img
   {
      height: 32px;
      width: auto;
   }

   .nav-brand span
   {
      font-family: var(--font-heading);
      font-size: 1.15rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.3px;
   }

.nav-links
{
   list-style: none;
   display: flex;
   gap: 4px;
   align-items: center;
}

   .nav-links li
   {
      position: relative;
   }

   .nav-links a
   {
      display: block;
      padding: 8px 14px;
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: .88rem;
      font-weight: 600;
      color: rgba(255,255,255,.85);
      text-decoration: none;
      transition: background .15s, color .15s;
   }

      .nav-links a:hover,
      .nav-links a.active
      {
         background: rgba(255,255,255,.12);
         color: #fff;
         text-decoration: none;
      }

/* ── DROPDOWN ──────────────────────────────────────────────────── */
.nav-dropdown
{
   padding-bottom: 8px;
   margin-bottom: -8px;
}

.nav-dropdown:hover .dropdown-menu
{
   display: block;
}

.dropdown-menu
{
   display: none;
   position: absolute;
   top: calc(100% - 8px);
   left: 0;
   min-width: 220px;
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-hover);
   overflow: hidden;
   pointer-events: auto;
   z-index: 200;
}

   .dropdown-menu li a
   {
      color: var(--color-brand);
      padding: 10px 16px;
      font-size: .86rem;
      display: block;
   }

      .dropdown-menu li a:hover
      {
         background: var(--color-neutral-hover);
         color: var(--color-brand-deep);
         text-decoration: none;
      }

/* ── HERO ─────────────────────────────────────────────────────── */
header
{
   background: linear-gradient(135deg, var(--color-brand-deep) 0%, var(--color-brand) 55%, var(--color-accent) 100%);
   color: #fff;
   padding: 52px 40px 44px;
   text-align: center;
}

.hero-logo
{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   margin-bottom: 16px;
}

   .hero-logo img
   {
      height: 64px;
      width: auto;
      flex-shrink: 0;
      display: block;
   }

header .logo-text
{
   font-family: var(--font-heading);
   font-size: 2.6rem;
   font-weight: 800;
   letter-spacing: -0.5px;
   color: #fff;
}

header .tagline
{
   font-family: var(--font-body);
   margin-top: 10px;
   font-size: 1.1rem;
   opacity: .88;
   max-width: 660px;
   margin-left: auto;
   margin-right: auto;
}

header .badge-row
{
   margin-top: 22px;
   display: flex;
   justify-content: center;
   gap: 8px;
   flex-wrap: wrap;
}

.badge
{
   font-family: var(--font-body);
   background: rgba(255,255,255,.15);
   border: 1px solid rgba(255,255,255,.35);
   color: #fff;
   border-radius: 20px;
   padding: 4px 13px;
   font-size: .76rem;
   font-weight: 600;
   letter-spacing: .3px;
}

/* ── HERO BADGE HIGHLIGHT ─────────────────────────────────────── */
.badge.badge-highlight
{
   background: rgba(255,255,255,.28);
   border-color: rgba(255,255,255,.75);
   font-weight: 700;
   letter-spacing: .5px;
}

/* ── LAYOUT ───────────────────────────────────────────────────── */
main
{
   max-width: 1120px;
   margin: 0 auto;
   padding: 44px 24px 60px;
}

/* ── SECTION TITLES ───────────────────────────────────────────── */
.section-label
{
   font-family: var(--font-body);
   display: inline-block;
   background: var(--color-brand);
   color: #fff;
   font-size: .68rem;
   font-weight: 600;
   letter-spacing: 1.1px;
   text-transform: uppercase;
   padding: 3px 11px;
   border-radius: var(--radius);
   margin-bottom: 7px;
}

h2
{
   font-family: var(--font-heading);
   font-size: 1.45rem;
   font-weight: 800;
   color: var(--color-brand);
   margin-bottom: 4px;
}

.section-intro
{
   font-family: var(--font-body);
   color: var(--color-text-muted);
   margin-bottom: 24px;
   max-width: 700px;
}

section
{
   margin-bottom: 52px;
}

/* ── CARD GRID ────────────────────────────────────────────────── */
.cards
{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 18px;
}

.card
{
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 22px 22px 20px;
   box-shadow: var(--shadow);
   transition: transform .15s, box-shadow .15s;
}

   .card:hover
   {
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
   }

.card-icon
{
   font-size: 1.7rem;
   margin-bottom: 9px;
   line-height: 1;
}

.card h3
{
   font-family: var(--font-heading);
   font-size: .97rem;
   font-weight: 700;
   color: var(--color-brand);
   margin-bottom: 8px;
}

.card ul
{
   list-style: none;
   padding: 0;
}

   .card ul li
   {
      font-family: var(--font-body);
      padding: 3px 0 3px 17px;
      position: relative;
      color: var(--color-text);
      font-size: .86rem;
   }

      .card ul li::before
      {
         content: '✓';
         position: absolute;
         left: 0;
         color: var(--color-green);
         font-weight: 700;
      }

.card.highlight
{
   border-left: 4px solid var(--color-accent);
}

/* ── PROFILE FIELD TABLE ──────────────────────────────────────── */
.field-table-wrap
{
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow);
   overflow: hidden;
}

   .field-table-wrap table
   {
      width: 100%;
      border-collapse: collapse;
   }

   .field-table-wrap thead tr
   {
      background: var(--color-brand);
      color: #fff;
   }

   .field-table-wrap thead th
   {
      font-family: var(--font-heading);
      padding: 10px 16px;
      text-align: left;
      font-size: .77rem;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
   }

   .field-table-wrap tbody tr:nth-child(even)
   {
      background: var(--color-neutral-bg);
   }

   .field-table-wrap tbody tr:hover
   {
      background: var(--color-neutral-hover);
   }

   .field-table-wrap tbody td
   {
      font-family: var(--font-body);
      padding: 8px 14px;
      font-size: .84rem;
      border-top: 1px solid var(--color-border);
      vertical-align: top;
   }

      .field-table-wrap tbody td:first-child
      {
         font-family: var(--font-heading);
         font-weight: 700;
         color: var(--color-brand);
         white-space: nowrap;
         width: 26%;
      }

      .field-table-wrap tbody td:nth-child(2)
      {
         color: var(--color-text-muted);
         font-size: .8rem;
         width: 18%;
         white-space: nowrap;
      }

.field-group-heading td
{
   background: var(--color-neutral-active) !important;
   font-family: var(--font-heading) !important;
   font-weight: 700 !important;
   font-size: .78rem !important;
   color: var(--color-brand-deep) !important;
   letter-spacing: .5px;
   text-transform: uppercase;
   padding: 7px 16px !important;
}

/* ── SEGMENT FILTERING ────────────────────────────────────────── */
.segment-section
{
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow);
   overflow: hidden;
}

   .segment-section .seg-header
   {
      background: linear-gradient(90deg, var(--color-brand-deep) 0%, var(--color-brand) 100%);
      color: #fff;
      padding: 20px 26px 16px;
   }

      .segment-section .seg-header h3
      {
         font-family: var(--font-heading);
         font-size: 1.1rem;
         font-weight: 800;
         margin-bottom: 4px;
      }

      .segment-section .seg-header p
      {
         font-family: var(--font-body);
         font-size: .88rem;
         opacity: .85;
      }

.segment-body
{
   display: grid;
   grid-template-columns: 1fr 1fr;
}

@media (max-width: 680px)
{
   .segment-body
   {
      grid-template-columns: 1fr;
   }
}

.seg-col
{
   padding: 22px 26px;
   border-right: 1px solid var(--color-border);
}

   .seg-col:last-child
   {
      border-right: none;
   }

   .seg-col h4
   {
      font-family: var(--font-heading);
      font-size: .88rem;
      font-weight: 700;
      color: var(--color-brand);
      margin-bottom: 12px;
   }

.pill-list
{
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-bottom: 14px;
}

.pill
{
   font-family: var(--font-body);
   padding: 4px 12px;
   border-radius: 20px;
   font-size: .76rem;
   font-weight: 600;
   border: 1.5px solid transparent;
}

   .pill.green
   {
      background: var(--color-green-bg);
      color: var(--color-green);
      border-color: #a8d8b8;
   }

   .pill.red
   {
      background: #fde8e8;
      color: var(--color-danger);
      border-color: #f9b4b4;
   }

   .pill.blue
   {
      background: #e4edf9;
      color: var(--color-brand);
      border-color: #b8cce8;
   }

   .pill.amber
   {
      background: #fef3dc;
      color: #92480a;
      border-color: #f5c87a;
   }

   .pill.grey
   {
      background: var(--color-neutral-bg);
      color: var(--color-text-muted);
      border-color: var(--color-border-alt);
   }

.seg-example
{
   font-family: var(--font-body);
   background: var(--color-neutral-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 12px 14px;
   margin-top: 14px;
   font-size: .81rem;
}

   .seg-example strong
   {
      color: var(--color-brand);
   }

   .seg-example .use-case
   {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed var(--color-border-alt);
      color: var(--color-text-muted);
   }

      .seg-example .use-case span
      {
         display: block;
         margin-top: 4px;
         padding-left: 14px;
         position: relative;
      }

         .seg-example .use-case span::before
         {
            content: '→';
            position: absolute;
            left: 0;
            color: var(--color-accent);
            font-weight: 700;
         }

/* ── FORMAT TABLE ─────────────────────────────────────────────── */
.format-grid
{
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
}

@media (max-width: 680px)
{
   .format-grid
   {
      grid-template-columns: 1fr;
   }
}

.format-table
{
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow);
   overflow: hidden;
}

   .format-table table
   {
      width: 100%;
      border-collapse: collapse;
   }

   .format-table thead tr
   {
      background: var(--color-brand);
      color: #fff;
   }

   .format-table thead th
   {
      font-family: var(--font-heading);
      padding: 9px 14px;
      text-align: left;
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .4px;
      text-transform: uppercase;
   }

   .format-table tbody tr:nth-child(even)
   {
      background: var(--color-neutral-bg);
   }

   .format-table tbody tr:hover
   {
      background: var(--color-neutral-hover);
   }

   .format-table tbody td
   {
      font-family: var(--font-body);
      padding: 8px 14px;
      font-size: .84rem;
      border-top: 1px solid var(--color-border);
   }

      .format-table tbody td:first-child
      {
         font-family: var(--font-heading);
         font-weight: 700;
         color: var(--color-accent);
      }

/* ── NAMING / TEMPLATES ───────────────────────────────────────── */
.naming-section
{
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow);
   overflow: hidden;
}

   .naming-section .naming-header
   {
      background: linear-gradient(90deg, var(--color-brand-deep) 0%, var(--color-brand) 100%);
      color: #fff;
      padding: 20px 26px 16px;
   }

      .naming-section .naming-header h3
      {
         font-family: var(--font-heading);
         font-size: 1.1rem;
         font-weight: 800;
         margin-bottom: 4px;
      }

      .naming-section .naming-header p
      {
         font-family: var(--font-body);
         font-size: .88rem;
         opacity: .85;
      }

.naming-body
{
   padding: 22px 26px;
}

   .naming-body + .naming-body
   {
      border-top: 1px solid var(--color-border);
   }

.naming-subheading
{
   font-family: var(--font-heading);
   font-size: .88rem;
   font-weight: 700;
   color: var(--color-brand);
   margin: 18px 0 10px;
}

   .naming-subheading:first-child
   {
      margin-top: 0;
   }

.naming-example-block
{
   background: var(--color-neutral-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 13px 16px;
   margin-top: 10px;
   font-family: var(--font-body);
   font-size: .82rem;
}

   .naming-example-block strong
   {
      color: var(--color-brand);
   }

   .naming-example-block code
   {
      font-family: 'Courier New', monospace;
      font-size: .79rem;
      background: var(--color-neutral-active);
      padding: 1px 5px;
      border-radius: 3px;
      color: var(--color-brand);
   }

   .naming-example-block .ex-output
   {
      margin-top: 7px;
      padding-top: 7px;
      border-top: 1px dashed var(--color-border-alt);
      color: var(--color-text-muted);
      font-size: .79rem;
   }

      .naming-example-block .ex-output code
      {
         color: var(--color-green);
         background: var(--color-green-bg);
      }

.dir-mode-grid
{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 12px;
   margin-bottom: 18px;
}

.dir-mode-card
{
   background: var(--color-neutral-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 13px 15px;
}

   .dir-mode-card h5
   {
      font-family: var(--font-heading);
      font-size: .82rem;
      font-weight: 700;
      color: var(--color-brand);
      margin-bottom: 5px;
   }

   .dir-mode-card p
   {
      font-family: var(--font-body);
      font-size: .79rem;
      color: var(--color-text-muted);
   }

   .dir-mode-card code
   {
      font-family: 'Courier New', monospace;
      font-size: .77rem;
      background: var(--color-neutral-active);
      padding: 1px 4px;
      border-radius: 3px;
      color: var(--color-brand);
   }

.naming-note
{
   padding: 14px 26px;
   background: var(--color-neutral-bg);
   border-top: 1px solid var(--color-border);
   font-family: var(--font-body);
   font-size: .82rem;
   color: var(--color-text-muted);
}

   .naming-note strong
   {
      color: var(--color-brand);
   }

/* ── ADS METADATA ─────────────────────────────────────────────── */
.ads-section
{
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow);
   overflow: hidden;
}

   .ads-section .ads-header
   {
      background: linear-gradient(90deg, var(--color-brand-deep) 0%, var(--color-brand) 100%);
      color: #fff;
      padding: 20px 26px 16px;
   }

      .ads-section .ads-header h3
      {
         font-family: var(--font-heading);
         font-size: 1.1rem;
         font-weight: 800;
         margin-bottom: 4px;
      }

      .ads-section .ads-header p
      {
         font-family: var(--font-body);
         font-size: .88rem;
         opacity: .85;
      }

.ads-body
{
   padding: 22px 26px;
}

.ads-example-block
{
   background: var(--color-neutral-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 13px 16px;
   margin-top: 10px;
   font-family: var(--font-body);
   font-size: .82rem;
}

   .ads-example-block strong
   {
      color: var(--color-brand);
   }

   .ads-example-block code
   {
      font-family: 'Courier New', monospace;
      font-size: .79rem;
      background: var(--color-neutral-active);
      padding: 1px 5px;
      border-radius: 3px;
      color: var(--color-brand);
   }

.ads-note
{
   padding: 14px 26px;
   background: var(--color-neutral-bg);
   border-top: 1px solid var(--color-border);
   font-family: var(--font-body);
   font-size: .82rem;
   color: var(--color-text-muted);
}

   .ads-note strong
   {
      color: var(--color-brand);
   }

/* ── INSTALLER STEPS ──────────────────────────────────────────── */
.steps
{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
   gap: 14px;
   counter-reset: step-counter;
}

.step
{
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 18px 16px 16px;
   box-shadow: var(--shadow);
   position: relative;
   padding-top: 40px;
}

   .step::before
   {
      counter-increment: step-counter;
      content: counter(step-counter);
      position: absolute;
      top: 13px;
      left: 16px;
      width: 24px;
      height: 24px;
      background: var(--color-accent);
      color: #fff;
      border-radius: 50%;
      font-family: var(--font-heading);
      font-size: .75rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 24px;
      text-align: center;
   }

   .step h4
   {
      font-family: var(--font-heading);
      font-size: .86rem;
      font-weight: 700;
      color: var(--color-brand);
      margin-bottom: 5px;
   }

   .step p
   {
      font-family: var(--font-body);
      font-size: .79rem;
      color: var(--color-text-muted);
   }

/* ── IDEAL FOR ────────────────────────────────────────────────── */
.ideal-grid
{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
   gap: 14px;
}

.ideal-card
{
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 18px 18px 16px;
   box-shadow: var(--shadow);
   display: flex;
   gap: 13px;
   align-items: flex-start;
}

   .ideal-card .ico
   {
      font-size: 1.6rem;
      flex-shrink: 0;
      margin-top: 2px;
   }

   .ideal-card h4
   {
      font-family: var(--font-heading);
      font-size: .86rem;
      font-weight: 700;
      color: var(--color-brand);
      margin-bottom: 4px;
   }

   .ideal-card p
   {
      font-family: var(--font-body);
      font-size: .79rem;
      color: var(--color-text-muted);
   }

/* ── FOOTER ───────────────────────────────────────────────────── */
footer
{
   background: var(--color-brand-deep);
   color: rgba(255,255,255,.72);
   text-align: center;
   padding: 22px 20px;
   font-family: var(--font-body);
   font-size: .79rem;
}

   footer a
   {
      color: #fde9b8;
      text-decoration: none;
   }

      footer a:hover
      {
         text-decoration: underline;
      }

/* ── ADMIN WEBAPP ─────────────────────────────────────────────── */
.admin-section
{
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow);
   overflow: hidden;
}

.admin-header
{
   background: linear-gradient(90deg, var(--color-brand-deep) 0%, var(--color-brand) 100%);
   color: #fff;
   padding: 22px 28px 20px;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
}

.admin-header-text h3
{
   font-family: var(--font-heading);
   font-size: 1.1rem;
   font-weight: 800;
   margin-bottom: 6px;
}

.admin-header-text p
{
   font-family: var(--font-body);
   font-size: .88rem;
   opacity: .85;
   max-width: 560px;
}

.admin-badges
{
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   align-items: flex-start;
   padding-top: 2px;
}

.admin-badge
{
   font-family: var(--font-body);
   background: rgba(255,255,255,.18);
   border: 1px solid rgba(255,255,255,.4);
   color: #fff;
   border-radius: 20px;
   padding: 3px 11px;
   font-size: .73rem;
   font-weight: 600;
   letter-spacing: .3px;
   white-space: nowrap;
}

.admin-screenshot-wrap
{
   margin-bottom: 24px;
   text-align: center;
}

.admin-thumb
{
   display: block;
   width: 55%;
   max-width: 620px;
   height: auto;
   margin: 0 auto;
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-hover);
   cursor: zoom-in;
   transition: box-shadow .15s, transform .15s;
}

   .admin-thumb:hover
   {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(25,50,122,.18);
   }

.admin-screenshot-caption
{
   margin-top: 8px;
   font-family: var(--font-body);
   font-size: .74rem;
   color: var(--color-text-muted);
   font-style: italic;
}

/* ── ADMIN LIGHTBOX ───────────────────────────────────────────── */
.admin-lightbox
{
   display: none;
   position: fixed;
   inset: 0;
   z-index: 1000;
   background: rgba(10,18,40,.88);
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 14px;
   cursor: zoom-out;
   padding: 24px;
}

   .admin-lightbox.open
   {
      display: flex;
   }

   .admin-lightbox img
   {
      max-width: 100%;
      max-height: calc(100vh - 80px);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255,255,255,.15);
      box-shadow: 0 8px 48px rgba(0,0,0,.6);
      display: block;
   }

   .admin-lightbox p
   {
      font-family: var(--font-body);
      font-size: .78rem;
      color: rgba(255,255,255,.55);
   }

/* ── SEGMENT EXAMPLE SCREENSHOT ──────────────────────────────── */
.seg-screenshot-strip
{
   border-top: 1px solid var(--color-border);
   background: var(--color-bg);
   padding: 22px 26px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   align-items: start;
}

.seg-screenshot-text h4
{
   font-family: var(--font-heading);
   font-size: .92rem;
   font-weight: 800;
   color: var(--color-brand);
   margin-bottom: 10px;
}

   .seg-screenshot-text h4 code
   {
      font-family: 'Courier New', monospace;
      font-size: .79rem;
      background: var(--color-neutral-active);
      padding: 1px 5px;
      border-radius: 3px;
      color: var(--color-brand);
      font-weight: 700;
   }

.seg-screenshot-text p
{
   font-family: var(--font-body);
   font-size: .83rem;
   color: var(--color-text-muted);
   line-height: 1.6;
   margin-bottom: 12px;
}

.seg-screenshot-pills
{
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: 4px;
}

.seg-screenshot-img-wrap
{
   text-align: center;
}

.seg-thumb
{
   display: block;
   width: 100%;
   height: auto;
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-hover);
   cursor: zoom-in;
   transition: box-shadow .15s, transform .15s;
}

   .seg-thumb:hover
   {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(25,50,122,.18);
   }

@media (max-width: 680px)
{
   .seg-screenshot-strip
   {
      grid-template-columns: 1fr;
   }
}