.page-header{display: none !important;}

/* =========================================================
   TOKENS (unchanged)
   =======================================================*/
:root{
  --tnl-primary:#10bcd5; --tnl-primary-600:#0ea9bf;
  --tnl-dark:#0f172a; --tnl-text:#1f2937; --tnl-muted:#6b7280;
  --tnl-bg:#ffffff; --tnl-surface:#f7fbff; --tnl-line:#e9eef4;
  --tnl-radius:16px; --tnl-radius-lg:20px; --tnl-ring:rgba(16,188,213,.25);
  --tnl-shadow-1:0 1px 2px rgba(2,6,23,.06), 0 8px 22px rgba(16,188,213,.06);
  --tnl-shadow-2:0 2px 10px rgba(2,6,23,.06), 0 22px 44px rgba(16,188,213,.10);
}

/* =========================================================
   LAYOUT GRID (mobile-first)
   PATCH: move 2-col breakpoint earlier (900px instead of 992px)
   =======================================================*/
.tnl-wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
.tnl-grid-12{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.tnl-col{min-width:0}
.tnl-col-7{grid-column:span 12}
.tnl-col-5{grid-column:span 12}
@media (min-width:900px){ /* PATCH breakpoint */
  .tnl-col-7{grid-column:span 7}
  .tnl-col-5{grid-column:span 5}
}

/* =========================================================
   BUTTONS & TYPOGRAPHY (unchanged)
   =======================================================*/
.tnl-btn{
  display:inline-block;padding:12px 18px;
  background:linear-gradient(180deg,var(--tnl-primary),var(--tnl-primary-600));
  color:#fff;text-decoration:none;font-weight:700;border-radius:12px;
  box-shadow:var(--tnl-shadow-1);
  transition:transform .15s ease, filter .15s ease, box-shadow .2s ease
}
.tnl-btn:hover{filter:brightness(.98);transform:translateY(-1px);box-shadow:var(--tnl-shadow-2)}
.tnl-btn:focus-visible{outline:3px solid var(--tnl-ring);outline-offset:2px;border-radius:14px}

.tnl-section-title{margin:0 0 14px;font-weight:800;letter-spacing:-.01em;color:var(--tnl-dark);font-size:clamp(22px,2.4vw,28px)}
.tnl-section-eyebrow{color:var(--tnl-dark);opacity:.9;margin:0 0 12px;font-weight:800;font-size:18px}
.tnl-lead{color:var(--tnl-muted);max-width:820px;margin:0 0 12px}
.tnl-body{color:var(--tnl-text)}

/* =========================================================
   HERO (unchanged)
   =======================================================*/
.tnl-hero{border-bottom:1px solid var(--tnl-line);padding:56px 0 40px;background:var(--tnl-bg)}
.tnl-hero-inner{
  position:relative;display:grid;gap:18px;grid-template-columns:repeat(12,1fr);
  border-radius:var(--tnl-radius-lg);padding:32px;background:
    radial-gradient(700px 450px at 0% 10%, rgba(16,188,213,.08), transparent 60%),
    radial-gradient(700px 450px at 100% 0%, rgba(16,188,213,.06), transparent 60%),
    linear-gradient(180deg,#fff,#f8fbff);
  box-shadow:var(--tnl-shadow-1);border:1px solid var(--tnl-line)
}
.tnl-hero-copy{grid-column:span 12}
@media(min-width:900px){.tnl-hero-copy{grid-column:span 6}} /* match earlier breakpoint */
.tnl-hero-title{margin:0 0 8px;color:var(--tnl-dark);font-weight:800;letter-spacing:-.02em;font-size:clamp(30px,4.4vw,46px);line-height:1.08}
.tnl-hero-sub{color:var(--tnl-muted);margin:0 0 16px;max-width:740px}
.tnl-hero-illustration{
  grid-column:span 12;min-height:180px;border-radius:14px;background:
    radial-gradient(80% 60% at 70% 30%, rgba(16,188,213,.12), transparent 50%),
    linear-gradient(180deg,#ffffff,#f3fbff);
  border:1px solid var(--tnl-line)
}
@media(min-width:900px){.tnl-hero-illustration{grid-column:span 6;min-height:220px}}

/* =========================================================
   FEATURES (chips row) — unchanged
   =======================================================*/
.tnl-features{padding:24px 0}
.tnl-chip-row{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(12,1fr);padding:0;margin:0}
.tnl-chip{
  grid-column:span 12;display:flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--tnl-line);border-radius:14px;padding:12px 14px;box-shadow:var(--tnl-shadow-1)
}
@media(min-width:640px){.tnl-chip{grid-column:span 6}}
@media(min-width:900px){.tnl-chip{grid-column:span 3}}
.tnl-chip-bullet{width:22px;height:22px;border-radius:8px;background:rgba(16,188,213,.12);color:var(--tnl-primary);display:inline-flex;align-items:center;justify-content:center;font-weight:800}

/* =========================================================
   WHY SECTION
   PATCH A: make chips slightly smaller in WHY
   PATCH B: enforce image-left / text-right order only in WHY
   =======================================================*/
/* WHY section: put image LEFT (col-5) and text RIGHT (col-7) on desktop */
@media (min-width:900px){
  .tnl-why-grid{
    display:grid;                       /* ensure it's a grid container */
    grid-template-columns:repeat(12,1fr);
  }
  /* Image column (the sidecard block) */
  .tnl-why-grid .tnl-col-5{
    grid-column: 1 / span 5 !important; /* start at column 1 */
  }
  /* Text column (title, copy, button) */
  .tnl-why-grid .tnl-col-7{
    grid-column: 6 / span 7 !important; /* start at column 6 */
  }
}

/* Mobile/tablet: stack full width */
@media (max-width:899.98px){
  .tnl-why-grid .tnl-col-5,
  .tnl-why-grid .tnl-col-7{
    grid-column: 1 / -1 !important;     /* take full row when stacked */
  }
}


/* =========================================================
   ABOUT (two lists + result) — unchanged
   =======================================================*/
.tnl-about{padding:34px 0;border-top:1px solid var(--tnl-line)}
.tnl-sidecard{
  min-height:200px;border-radius:18px;background:
    radial-gradient(70% 60% at 60% 30%, rgba(16,188,213,.12), transparent 50%),
    linear-gradient(180deg,#ffffff,#f6fbff);
  border:1px solid var(--tnl-line);box-shadow:var(--tnl-shadow-1)
}
.tnl-two-lists{display:grid;gap:14px;margin-top:8px}
@media(min-width:700px){.tnl-two-lists{grid-template-columns:1fr 1fr}}
.tnl-list-card{background:#fff;border:1px solid var(--tnl-line);border-radius:14px;padding:14px;box-shadow:var(--tnl-shadow-1)}
.tnl-list-card h3{margin:0 0 8px;color:var(--tnl-dark);font-size:16px;font-weight:800}
.tnl-list-card ul{margin:0;padding-left:1.1rem}
.tnl-list-card li{margin:6px 0;color:var(--tnl-text)}
.tnl-result{margin:12px 0 0;color:var(--tnl-dark);font-weight:700}

/* =========================================================
   INSIGHTS CARDS — unchanged
   =======================================================*/
.tnl-insights{padding:34px 0}
.tnl-card-row{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.tnl-card{
  grid-column:span 12;background:#fff;border:1px solid var(--tnl-line);border-radius:16px;
  padding:18px;box-shadow:var(--tnl-shadow-1);display:flex;flex-direction:column;min-height:180px
}
.tnl-card h3{margin:0 0 8px;color:var(--tnl-dark);font-weight:800}
.tnl-card p{margin:0 0 10px;color:var(--tnl-muted)}
.tnl-card .tnl-btn{margin-top:auto;align-self:flex-start}
@media(min-width:768px){.tnl-card{grid-column:span 6}}
@media(min-width:900px){.tnl-card{grid-column:span 4}}

/* =========================================================
   FAQ — unchanged
   =======================================================*/
.tnl-faq{padding:34px 0}
.tnl-accordion details{background:#fff;border:1px solid var(--tnl-line);border-radius:14px;padding:12px 14px;margin:10px 0;box-shadow:var(--tnl-shadow-1)}
.tnl-accordion summary{list-style:none;cursor:pointer;position:relative;padding-right:26px;font-weight:700;color:var(--tnl-dark)}
.tnl-accordion summary::-webkit-details-marker{display:none}
.tnl-accordion summary::after{content:"▸";position:absolute;right:0;top:0;color:var(--tnl-primary);transition:transform .2s ease}
.tnl-accordion details[open] summary::after{content:"▾"}
.tnl-acc-body{margin-top:8px;color:var(--tnl-text)}
.tnl-acc-body p{margin:0}

/* =========================================================
   CTA PANEL — unchanged
   =======================================================*/
.tnl-cta{padding:22px 0 44px;border-top:1px solid var(--tnl-line)}
.tnl-cta-panel{
  display:grid;gap:14px;align-items:center;grid-template-columns:48px 1fr auto;background:
    radial-gradient(70% 60% at 0% 100%, rgba(16,188,213,.10), transparent 60%),
    radial-gradient(70% 60% at 100% 0%, rgba(16,188,213,.08), transparent 60%),
    #f8fbff;border:1px solid var(--tnl-line);border-radius:18px;padding:18px 20px;box-shadow:var(--tnl-shadow-1)
}
.tnl-cta-icon{width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--tnl-line);display:flex;align-items:center;justify-content:center;font-size:22px}
.tnl-cta-copy h3{margin:0 0 6px;color:var(--tnl-dark);font-size:clamp(18px,2vw,22px);font-weight:800}
.tnl-cta-copy p{margin:0;color:var(--tnl-muted)}
.tnl-cta-action .tnl-btn{white-space:nowrap}

/* =========================================================
   BODY CONTENT WRAPPER — unchanged
   =======================================================*/
.tnl-body{padding:28px 0 56px}
.tnl-body p{color:var(--tnl-text)}

/* WHY section (first .tnl-about): show bullets as one list, no borders */
.tnl-about:first-of-type .tnl-two-lists{
  grid-template-columns: 1fr;     /* single column */
  gap: 0;                          /* no gap between the two ULs */
  margin-top: 4px;
}
.tnl-about:first-of-type .tnl-list-card{
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.tnl-about:first-of-type .tnl-list-card h3{ display: none; } /* hide sub-titles if any */

/* Make sure markers appear even if theme resets them */
.tnl-about:first-of-type .tnl-list-card ul{
  margin: 0;
  padding-left: 1.2rem;
  list-style: disc;
  list-style-position: outside;
}
/* Collapse visual gap between the two ULs so it reads as one list */
.tnl-about:first-of-type .tnl-list-card + .tnl-list-card ul{ margin-top: 0; }

/* Tidy item spacing */
.tnl-about:first-of-type .tnl-list-card li{ margin: 6px 0; }
.tnl-about:first-of-type .tnl-list-card li::marker{ color: var(--tnl-primary); }

