:root {
   --orange: #FF5C1A;
   --orange-bg: #FFF4EE;
   --orange-bd: rgba(255, 92, 26, 0.2);
   --blue: #2563EB;
   --blue-bg: #EFF6FF;
   --blue-bd: rgba(37, 99, 235, 0.2);
   --rose: #E11D48;
   --rose-bg: #FFF1F2;
   --rose-bd: rgba(225, 29, 72, 0.2);
   --violet: #7C3AED;
   --violet-bg: #F5F3FF;
   --violet-bd: rgba(124, 58, 237, 0.2);
   --amber: #D97706;
   --amber-bg: #FFFBEB;
   --amber-bd: rgba(217, 119, 6, 0.2);
   --green: #059669;
   --green-bg: #ECFDF5;
   --ink: #18181B;
   --ink-2: #52525B;
   --ink-3: #A1A1AA;
   --surface: #F4F4F5;
   --white: #FFFFFF;
   --border: #E4E4E7;
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.05);
   --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.05), 0 12px 40px rgba(0, 0, 0, 0.09);
 }

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

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'Poppins', sans-serif;
   background: var(--surface);
   color: var(--ink);
   min-height: 100vh;
   overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Montserrat', sans-serif;
 }

 /* ── BG DECO ── */


 /* ── STICKY NAV ── */
 .top-nav {
   position: relative;
   top: 0;
   z-index: 200;
   background: rgba(244, 244, 245, 0.93);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border);
   padding: 10px 0;
 }

 .nav-inner {
   /* display: flex;
   align-items: center;
   gap: 8px;
   overflow-x: auto;
   scrollbar-width: none; */
   padding: 0 2px;
 }

 .nav-inner::-webkit-scrollbar {
   display: none;
 }

 .nav-tag {
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
   font-size: .6rem;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--ink-3);
   white-space: nowrap;
   flex-shrink: 0;
 }

 .nav-pill {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 7px 15px;
   border-radius: 50px;
   border: 1.5px solid var(--border);
   background: var(--white);
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: .72rem;
   color: var(--ink-2);
   text-decoration: none;
   white-space: nowrap;
   transition: all .2s;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }

 .nav-pill:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .np-or:hover {
   background: var(--orange-bg);
   border-color: var(--orange);
   color: var(--orange);
 }

 .np-bl:hover {
   background: var(--blue-bg);
   border-color: var(--blue);
   color: var(--blue);
 }

 .np-ro:hover {
   background: var(--rose-bg);
   border-color: var(--rose);
   color: var(--rose);
 }

 .np-vi:hover {
   background: var(--violet-bg);
   border-color: var(--violet);
   color: var(--violet);
 }

 .np-am:hover {
   background: var(--amber-bg);
   border-color: var(--amber);
   color: var(--amber);
 }

 /* ── LAYOUT ── */
 .page-wrap {
   position: relative;
   z-index: 1;
   padding: 52px 0 40px;
 }

 /* ── HEADER ── */
 .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 16px;
   border-radius: 50px;
   background: var(--orange-bg);
   border: 1.5px solid var(--orange-bd);
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: .65rem;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--orange);
   margin-bottom: 16px;
 }

 .eyebrow .dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--orange);
   animation: blink 2s infinite;
 }

 @keyframes blink {

   0%,
   100% {
     opacity: 1
   }

   50% {
     opacity: .2
   }
 }

 .page-title {
   font-family: 'Montserrat', sans-serif;
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 900;
   letter-spacing: -1.5px;
   line-height: 1.08;
   color: var(--ink);
 }

 .page-title em {
   font-style: italic;
   /* background: linear-gradient(120deg, var(--orange), #F59E0B); */
       background: linear-gradient(120deg, #e9af45, #d69719);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .page-desc {
   font-size: .95rem;
   color: var(--ink-2);
   line-height: 1.75;
   max-width: 500px;
   margin-top: 12px;
 }

 /* ── STAT BAR ── */
 .stat-bar {
   display: flex;
   background: var(--white);
   border: 1.5px solid var(--border);
   border-radius: 14px;
   overflow: hidden;
   box-shadow: var(--shadow);
   margin: 32px 0 52px;
 }

 .stat-cell {
   flex: 1;
   padding: 18px 16px;
   text-align: center;
   border-right: 1px solid var(--border);
 }

 .stat-cell:last-child {
   border-right: none;
 }

 .sn {
   font-family: 'Montserrat', sans-serif;
   font-weight: 900;
   font-size: 1.55rem;
   line-height: 1;
   color: var(--ink);
 }

 .sn span {
   color: var(--orange);
 }

 .sl2 {
   font-size: .67rem;
   color: var(--ink-3);
   margin-top: 3px;
   font-weight: 500;
 }

 /* ── SWIPE CARD ── */
 .swipe-card {
   background: var(--white);
   border: 1.5px solid var(--border);
   border-radius: 16px;
   box-shadow: var(--shadow);
   overflow: hidden;
   margin-bottom: 28px;
   transition: box-shadow .3s, transform .3s;
 }

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

 /* Top colour stripe */
 .c-stripe {
   height: 3px;
 }

 .cst-or {
   background: linear-gradient(90deg, var(--orange), #FB923C);
 }

 .cst-bl {
   background: linear-gradient(90deg, var(--blue), #60A5FA);
 }

 .cst-ro {
   background: linear-gradient(90deg, var(--rose), #FB7185);
 }

 .cst-vi {
   background: linear-gradient(90deg, var(--violet), #A78BFA);
 }

 .cst-am {
   background: linear-gradient(90deg, var(--amber), #FCD34D);
 }

 /* Card head */
 .card-head {
   padding: 20px 26px 16px;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
 }

 .ch-left {
   display: flex;
   align-items: center;
   gap: 13px;
 }

 .ch-icon {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
 }

 .ci-or {
   background: var(--orange-bg);
 }

 .ci-bl {
   background: var(--blue-bg);
 }

 .ci-ro {
   background: var(--rose-bg);
 }

 .ci-vi {
   background: var(--violet-bg);
 }

 .ci-am {
   background: var(--amber-bg);
 }

 .ch-title {
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
   font-size: 1.05rem;
   letter-spacing: -.3px;
   color: var(--ink);
 }

 .ch-sub {
   font-size: .73rem;
   color: var(--ink-3);
   margin-top: 2px;
 }

 .ch-badge {
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: .63rem;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 5px 13px;
   border-radius: 50px;
   border: 1.5px solid;
   white-space: nowrap;
 }

 .cbg-or {
   color: var(--orange);
   border-color: var(--orange-bd);
   background: var(--orange-bg);
 }

 .cbg-bl {
   color: var(--blue);
   border-color: var(--blue-bd);
   background: var(--blue-bg);
 }

 .cbg-ro {
   color: var(--rose);
   border-color: var(--rose-bd);
   background: var(--rose-bg);
 }

 .cbg-vi {
   color: var(--violet);
   border-color: var(--violet-bd);
   background: var(--violet-bg);
 }

 .cbg-am {
   color: var(--amber);
   border-color: var(--amber-bd);
   background: var(--amber-bg);
 }

 /* ── CARD ACTIONS ROW ── */
 .card-actions {
   padding: 14px 26px;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
   background: var(--surface);
 }

 .copy-btn {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: .72rem;
   padding: 8px 18px;
   border-radius: 9px;
   border: 1.5px solid;
   cursor: pointer;
   transition: all .2s;
   white-space: nowrap;
   background: var(--white);
 }

 .copy-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .copy-btn.done {
   background: var(--green-bg) !important;
   border-color: rgba(5, 150, 105, .25) !important;
   color: var(--green) !important;
 }

 .cb-or {
   color: var(--orange);
   border-color: var(--orange-bd);
 }

 .cb-bl {
   color: var(--blue);
   border-color: var(--blue-bd);
 }

 .cb-ro {
   color: var(--rose);
   border-color: var(--rose-bd);
 }

 .cb-vi {
   color: var(--violet);
   border-color: var(--violet-bd);
 }

 .cb-am {
   color: var(--amber);
   border-color: var(--amber-bd);
 }

 /* ══════════════════════════════════
       THE ONE UNIFIED SCROLL BOX
    ══════════════════════════════════ */
 .unified-scroll {
   max-height: 520px;
   overflow-y: auto;
   scrollbar-width: auto;
   scrollbar-color: var(--border) transparent;
 }

 .unified-scroll::-webkit-scrollbar {
   width: 5px;
 }

 .unified-scroll::-webkit-scrollbar-track {
   background: transparent;
 }

 .unified-scroll::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 4px;
 }

 /* ── SUBJECT LINES INSIDE UNIFIED SCROLL ── */
 .sec-label {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 22px 10px;
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
   font-size: .58rem;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--ink-3);
   background: var(--surface);
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
   z-index: 10;
 }

 .sec-label .lbl-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   flex-shrink: 0;
 }

 .sec-label .lbl-line {
   flex: 1;
   height: 1px;
   background: var(--border);
 }

 .sl-row {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 13px 22px;
   border-bottom: 1px solid var(--border);
   cursor: pointer;
   transition: background .18s;
 }

 .sl-row:hover .sl-copy {
   visibility: visible;
 }

 .sl-n {
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
   font-size: .62rem;
   min-width: 22px;
   height: 22px;
   border-radius: 6px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 2px;
 }

 .sl-t {
   font-size: .875rem;
   color: var(--ink);
   line-height: 1.5;
   font-weight: 400;
   flex: 1;
 }

 .sl-copy {
   font-size: .65rem;
   font-weight: 600;
   color: var(--ink-3);
   display: flex;
   align-items: center;
   gap: 3px;
   white-space: nowrap;
   padding-top: 3px;
   flex-shrink: 0;
   visibility: hidden;
 }

 /* per-color rows */
 .sr-or .sl-n {
   background: var(--orange-bg);
   color: var(--orange);
 }

 .sr-or:hover {
   background: var(--orange-bg);
 }

 .sr-or:hover .sl-copy {
   color: var(--orange);
   visibility: visible;
 }

 .sr-bl .sl-n {
   background: var(--blue-bg);
   color: var(--blue);
 }

 .sr-bl:hover {
   background: var(--blue-bg);
 }

 .sr-bl:hover .sl-copy {
   color: var(--blue);
   visibility: visible;
 }

 .sr-ro .sl-n {
   background: var(--rose-bg);
   color: var(--rose);
 }

 .sr-ro:hover {
   background: var(--rose-bg);
 }

 .sr-ro:hover .sl-copy {
   color: var(--rose);
   visibility: visible;
 }

 .sr-vi .sl-n {
   background: var(--violet-bg);
   color: var(--violet);
 }

 .sr-vi:hover {
   background: var(--violet-bg);
 }

 .sr-vi:hover .sl-copy {
   color: var(--violet);
   visibility: visible;
 }

 .sr-am .sl-n {
   background: var(--amber-bg);
   color: var(--amber);
 }

 .sr-am:hover {
   background: var(--amber-bg);
 }

 .sr-am:hover .sl-copy {
   color: var(--amber);
   visibility: visible;
 }

 /* ── EMAIL BODY INSIDE UNIFIED SCROLL ── */
 .body-label {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 22px 10px;
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
   font-size: .58rem;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--ink-3);
   background: var(--surface);
   border-top: 2px solid var(--border);
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
   z-index: 10;
 }

 .body-label .lbl-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   flex-shrink: 0;
 }

 .body-label .lbl-line {
   flex: 1;
   height: 1px;
   background: var(--border);
 }

 .email-body-inner {
   padding: 22px 22px;
   font-size: .875rem;
   color: var(--ink-2);
   line-height: 1.85;
   white-space: pre-line;
 }

 /* inline styles */
 .ev {
   font-weight: 600;
 }

 .ev-or {
   color: var(--orange);
 }

 .ev-bl {
   color: var(--blue);
 }

 .ev-ro {
   color: var(--rose);
 }

 .ev-vi {
   color: var(--violet);
 }

 .ev-am {
   color: var(--amber);
 }

 .ecta {
   font-weight: 700;
   text-decoration: underline;
   text-underline-offset: 3px;
   cursor: pointer;
 }

 .ec-or {
   color: var(--orange);
 }

 .ec-bl {
   color: var(--blue);
 }

 .ec-ro {
   color: var(--rose);
 }

 .ec-vi {
   color: var(--violet);
 }

 .ec-am {
   color: var(--amber);
 }

 .eb {
   font-weight: 700;
   color: var(--ink);
   font-family: 'Montserrat', sans-serif;
 }

 .email-body-inner ul {
   list-style: none;
   padding: 0;
   margin: 6px 0 12px;
 }

 .email-body-inner ul li {
   padding: 4px 0 4px 20px;
   position: relative;
   font-size: .855rem;
 }

 .email-body-inner ul li::before {
   content: '—';
   position: absolute;
   left: 0;
   font-weight: 700;
 }

 .li-or ul li::before {
   color: var(--orange);
 }

 .li-bl ul li::before {
   color: var(--blue);
 }

 .li-ro ul li::before {
   color: var(--rose);
 }

 .li-vi ul li::before {
   color: var(--violet);
 }

 .li-am ul li::before {
   color: var(--amber);
 }

 /* PS block at bottom of scroll */
 .ps-block {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   padding: 14px 22px;
   background: var(--surface);
   border-top: 1px solid var(--border);
 }

 .ps-av {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
   font-size: .68rem;
   color: #fff;
   margin-top: 1px;
 }

 .pa-or {
   background: var(--orange);
 }

 .pa-bl {
   background: var(--blue);
 }

 .pa-ro {
   background: var(--rose);
 }

 .pa-vi {
   background: var(--violet);
 }

 .pa-am {
   background: var(--amber);
 }

 .ps-txt {
   font-size: .81rem;
   color: var(--ink-2);
   line-height: 1.65;
 }

 .ps-txt strong {
   color: var(--ink);
   font-family: 'Montserrat', sans-serif;
 }

 /* ── DIVIDERS BETWEEN CARDS ── */
 .sep {
   display: flex;
   align-items: center;
   gap: 14px;
   margin: 44px 0 28px;
 }

 .sep-line {
   flex: 1;
   height: 1px;
   background: var(--border);
 }

 .sep-txt {
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
   font-size: .58rem;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--ink-3);
   white-space: nowrap;
 }

 /* ── TOAST ── */
 #toast {
   position: fixed;
   bottom: 24px;
   left: 50%;
   transform: translateX(-50%) translateY(70px);
   background: var(--ink);
   color: #fff;
   border-radius: 50px;
   padding: 11px 22px;
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: .77rem;
   display: flex;
   align-items: center;
   gap: 8px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
   transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
   z-index: 9999;
   pointer-events: none;
   white-space: nowrap;
 }

 #toast.show {
   transform: translateX(-50%) translateY(0);
 }