/* The Job ID — modern light system with glass + orbs (+ waitlist + tools) */
:root{
  --brand:#1167d9;
  --brand-2:#5ec6ff;
  --brand-3:#0f5ac0;
  --text:#0c121a;
  --muted:#5e6773;
  --bg:#f6fbff;
  --glass:rgba(255,255,255,0.68);
  --glass-strong:rgb(255 255 255 / 18%);
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 14px 34px rgba(10,30,60,.12);
  --shadow-soft:0 8px 22px rgba(10,30,60,.08);
  --orb1:#72f4b8;
  --orb2:#fb923c;
  --orb-speed:20s;
  --font-main: 'Quicksand', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-accent: 'Yeseva One', Georgia, "Times New Roman", serif;
}

/* Base */
*{box-sizing:border-box}
html,body {
    margin:0;
    padding:0;
    color:var(--text);
    font:16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-family: var(--font-main);
}

/* Smooth scrolling + compensate sticky header */
html { scroll-behavior: smooth; }

/* Push anchored targets below the sticky nav (adjust if your nav height changes) */
[id] { scroll-margin-top: 72px; }

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
}

a {
    color:inherit;
    text-decoration:none;
}
img{max-width:100%;display:block; border-radius: 10px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.glass{background:var(--glass);backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);box-shadow:var(--shadow)}
.glass-strong{background:var(--glass-strong);backdrop-filter:blur(14px);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);box-shadow:var(--shadow)}

.muted{color:var(--muted)}
.small{font-size:12px}
.flash{max-width:1180px;margin:12px auto 0;padding:10px 14px;border-radius:12px}
.flash-ok{border:1px solid rgba(20,160,100,.25);background:rgba(35,160,110,.08)}
.flash-err{border:1px solid rgba(200,40,40,.25);background:rgba(200,40,40,.08)}

/* Header */
.tj-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-radius: 11px;
    max-width: 64%;
    margin-left: 18%;
    margin-top: 15px;
    padding: 0;
}
.nav-inner {
    margin: 0 auto;
    display: flex;
    gap: 16px;
    padding: 10px 18px;
    align-items: center;
    justify-content: space-between;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand-logo{width:auto;height:27px;object-fit:contain}
.nav-links {
    display: flex;
    gap: 36px;
    margin-left: 24px;
    justify-content: space-evenly;
}
.nav-links a{opacity:.9;transition:opacity .15s ease}
.nav-links a:hover{opacity:1}
.nav-ctas{display:flex;gap:10px}
.nav-toggle {
    display: none;
    margin-left: 8px;
    background: none;
    border: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
}
.nav-ic{display:block;width:22px;height:2px;background:var(--text);position:relative;border-radius:999px}
.nav-ic-closed::before,.nav-ic-closed::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--text);border-radius:999px}
.nav-ic-closed::before{top:-7px}.nav-ic-closed::after{top:7px}
.nav-ic-open{display:none}
body.menu-open .nav-ic-closed{display:none}
body.menu-open .nav-ic-open{display:block;transform:rotate(45deg)}
body.menu-open .nav-ic-open::after{content:"";position:absolute;left:0;top:0;width:22px;height:2px;background:var(--text);transform:rotate(90deg);border-radius:999px}

/* Main container */
.tj-main {
    display: flex;
    max-width: 1180px;
    margin: 26px auto;
    padding: 0 16px;
    gap: 30px;
    flex-direction: column;
}

/* Hero */
.hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 36px;
    align-items: center;
    /* margin-bottom: 75px; */
}
.hero-landing .hero-left{padding-block:6px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.hero h1{font-size:44px;line-height:1.08;margin:0 0 10px;letter-spacing:-.02em}
.hero-sub{color:var(--muted);margin:0 0 18px;font-size:18px}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.pill-badge {
    display: inline-flex    ;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    /* background: linear-gradient(90deg, var(--brand), var(--brand-2)); */
    color: var(--brand);
    font-weight: 600;
    border: 1px solid var(--brand);
}
.pill-soft {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .05);
    color: #111;
}
/* Beta avatars */
.wl-avatars {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 13px;
}
.wl-avatars img {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: var(--shadow-soft);
    background: #fff;
    margin-left: -12px;
}
.wl-avatars-note {
    font-size: 12px;
    margin-left: 6px;
}

/* Hero visuals */
.ui-card {
    display: flex;
    place-items: center;
    min-height: 300px;
    width: 100%;
    margin: 0;
    align-content: center;
}
.hero-illustration {
    width: 100%;
    height: 310px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: 0px 1px 16px 0px rgba(10, 30, 60, .12);
    border: 5px solid white;
    /* margin-left: 80px; */
}

/* Trust row (optional logos) */
.trust-row{display:flex;gap:18px;align-items:center;margin-top:14px;opacity:.9}
.trust-row img{height:26px;filter:grayscale(100%);opacity:.85}

/* Tri section */
.tri{margin:18px 0}
.tri {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.tri-card{padding:40px;border-radius:var(--radius);background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow-soft)}
.tri-card h3{margin:0 0 6px}
.tick{margin:10px 0 0;padding-left:18px}
.tick li{margin:6px 0}

/* Duo section */
.duo{margin:18px 0}
.duo{display:grid;}
.duo-card{padding:36px;border-radius:var(--radius);background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow-soft)}
.duo-card h3{margin:0 0 6px}
.tick{margin:10px 0 0;padding-left:18px}
.tick li{margin:6px 0}

/* Problem/Solution/Proof */
.problem-solution{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0}
.panel{padding:20px}
.panel h2{margin:0 0 8px;font-size:18px}

/* Screens showcase */
.screens{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:4px 0 22px}
.screen{padding:10px}
.screen img{border-radius:12px;box-shadow:var(--shadow-soft)}

/* Feature strip */
.mini-features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
.mini{padding:16px}
.mini h3{margin:0 0 6px;font-size:16px}

/* Profiles section */
.profiles {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 86px;
    align-items: center;
    padding: 40px;
    margin: 24px 0;
}
.profiles-left h2{margin:0 0 6px}
.profiles-right .ui-card{min-height:220px}

/* Tools */
.tools{margin:26px 0}
.tools-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tool{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:14px}
.tool-ic{display:grid;place-items:center}
.tool-ic svg{width:36px;height:36px}
.ic-placeholder{width:36px;height:36px;border-radius:10px;background:linear-gradient(180deg, #e6f1ff, #f6fbff);border:1px solid rgba(0,0,0,.06)}
.tool-body h3{margin:0 0 4px}

/* Demo */
.demo{padding:40px;margin:28px 0}
.demo-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.demo-form{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.demo-form label{display:grid;gap:6px;font-size:14px}
.demo-form input{border:1px solid #dbe3ef;border-radius:12px;padding:11px 12px;background:#fff}
.demo-actions{grid-column:1/-1;display:flex;gap:10px;margin-top:6px}
.demo .muted{font-size:13px}

/* ===== Waitlist layout/namespaced styles ===== */
.tjwl {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding: 40px;
    margin: 28px 0;
    border: 1px dashed rgba(0, 0, 0, .08);
    border-radius: 16px;
    flex-direction: column;
    align-items: stretch;
}
.tjwl-left {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    /* border-bottom: 1px solid rgba(0, 0, 0, .06); */
}
.wl-head h2, p {
    margin:0;
}

.wl-head {
    margin-bottom: 30px;
}
.tjwl-note {
    margin: 0px 0 36px 0;
}

.tjwl-card{padding:14px 0;}
.tjwl-note{margin-top:6px}

.tjwl-right{display:block}
.tjwl-form{margin-top:12px}
.tjwl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tjwl-grid .wl-span{grid-column:1/-1}

/* Toggle base (shared look) */
.tjwl-role, .tjwl-join {
    --tjwl-font-dark: #0a0a0a;
    --tjwl-font-light: #ffffff;
    --tjwl-main: #006b80e0;
    --tjwl-border: #111;
    --tjwl-hover: #006b8085;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 360px;
    height: auto;
    padding: 4px;
    border: 2px solid var(--tjwl-border);
    border-radius: 34px;
    background: #fff;
    margin: 6px 0 12px;
}
.tjwl-join{max-width:360px;margin-top:8px}

.tjwl-opt{position:relative;flex:1;height:100%;border-radius:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}
.tjwl-opt:not(:last-child){margin-right:4px}
.tjwl-opt:hover{background:var(--tjwl-hover)}
.tjwl-opt:hover .tjwl-label{color:var(--tjwl-font-light)}
.tjwl-role-input, .tjwl-join-input{position:absolute;inset:0;appearance:none;cursor:pointer}
.tjwl-btn{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:30px}
.tjwl-label{color:var(--tjwl-font-dark);font-weight:600}
.tjwl-role-input:checked + .tjwl-btn,
.tjwl-join-input:checked + .tjwl-btn{background:var(--tjwl-main);transition:0.2s cubic-bezier(0,0,0,1)}
.tjwl-role-input:checked + .tjwl-btn .tjwl-label,
.tjwl-join-input:checked + .tjwl-btn .tjwl-label{color:var(--tjwl-font-light);transition:0.25s cubic-bezier(0,0,0,1)}

/* Inputs polish */
.tjwl-form input[type="text"],
.tjwl-form input[type="email"],
.tjwl-form input[type="url"],
.tjwl-form textarea{
  width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.12);border-radius:10px;background:#fff;outline:none;
}
.tjwl-form input:focus, .tjwl-form textarea:focus{
  border-color:#1167d9; box-shadow:0 0 0 3px rgba(17,103,217,.12);
}

.align-rads {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    align-content: center;
    gap: 20px;
}

/* Errors */
.tjwl .field-error{font-size:12px;color:#b91c1c;margin-top:4px}
.tjwl .is-invalid{outline:1px solid rgba(225,29,72,.45)}

/* Responsive */
@media (max-width:980px){
  .tjwl{display:flex;flex-direction:column-reverse;gap:30px;padding:20px}
  .tjwl-grid{grid-template-columns:1fr}
}


/* Inline error styling */
.is-invalid{ border-color:#e11d48 !important; box-shadow:0 0 0 3px rgba(225,29,72,.08); }
.field-error{ font-size:12px; color:#b91c1c; margin-top:4px; }
.group-error{ font-size:12px; color:#b91c1c; margin-top:6px; }
.field-error-outline{ outline:1px solid rgba(225,29,72,.45); border-radius:10px; padding:6px; }

/* "Disabled" look but still clickable so we can show errors */
#waitlist-submit.is-disabled,
#waitlist-submit[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
}
/* Visual disable when we gate with aria-disabled (we are NOT using the disabled attr) */
.wl-actions [type="submit"][aria-disabled="true"],
#waitlist-submit[aria-disabled="true"]{
  opacity: .5;
  filter: saturate(.45);
  cursor: not-allowed;
}
/* kill fancy hovers when gated */
.wl-actions [type="submit"][aria-disabled="true"]:hover{
  box-shadow: none !important;
  transform: none !important;
}


/* Testimonials (placeholder if needed) */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:2px 0 26px}
.t-card{padding:16px;display:grid;gap:12px}
.t-body{font-size:15.5px}
.t-meta{display:flex;gap:10px;align-items:center}
.t-meta img{width:34px;height:34px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.05)}

/* FAQ */
.faq{padding:40px;margin:12px 0 28px}
.faq h2{margin:0 0 10px}
.faq details{border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.75);margin:8px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:8px 0 0}

/* Final CTA */
.cta-final{display:grid;place-items:center;margin:40px 0}
.cta-final h2{margin:0 0 6px;font-size:28px}
.cta-final .muted{margin:0 0 14px}

.tj-btn{
  display:inline-block; position:relative;
  border:1px solid transparent; padding:8px 30px;
  border-radius:10px; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  font-weight:600; letter-spacing:.2px;
}
.tj-btn-pill{border-radius:10px}
.tj-btn-pill2{border-radius:10px}
.tj-btn-lg{padding: 8px 30px; font-weight: 700;}

/* Primary: layered gradient + subtle glow */
.tj-btn-primary{
  color:#fff;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  border-color:rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(17,103,217,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.tj-btn-primary:hover{transform:translateY(-1px); box-shadow:0 16px 30px rgba(17,103,217,.32), inset 0 1px 0 rgba(255,255,255,.22)}
.tj-btn-primary:active{transform:translateY(0); filter:saturate(1.05)}

/* 3D accent edge */
/* .tj-btn-3d{box-shadow:0 6px 0 var(--brand-3), 0 18px 34px rgba(17,103,217,.22)}
.tj-btn-3d:hover{box-shadow:0 7px 0 var(--brand-3), 0 24px 40px rgba(17,103,217,.28)}
.tj-btn-3d:active{box-shadow:0 4px 0 var(--brand-3), 0 14px 28px rgba(17,103,217,.22)} */

/* Outline + modern ghost */
.tj-btn-outline{
  background:rgba(255,255,255,.65);
  border-color:rgba(17,103,217,.45);
  color:var(--brand);
}
.tj-btn-outline:hover{background:rgba(255,255,255,.9)}
.tj-btn-ghost{background:transparent;border-color:rgba(0,0,0,.08);color:var(--text)}
.tj-btn-ghost2{background:rgba(255,255,255,.6);border-color:rgba(0,0,0,.06);backdrop-filter:blur(8px)}

/* Install bar */

.install-inner{display:flex;gap:12px;align-items:center}
.install-text{font-size:14px;color:var(--muted)}

/* Footer */
.tj-footer {
    max-width: 100%;
    display: flex;
    /* margin: 40px auto 80px; */
    padding: 46px 390px;
    background: #ffffffa1;
    flex-direction: column;
    backdrop-filter: blur(12px);
    align-content: stretch;
    box-shadow: 0px 10px 34px rgba(10, 30, 60, .12);
}
.ft-grid {
    display: flex;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 18px;
    flex-direction: row;
    justify-content: space-between;
}
.ft-brand{font-size:18px}
.legal{color:var(--muted);font-size:12px;margin-top:12px}

/* Orbs */
.orb{position:fixed;filter:blur(60px);opacity:.52;z-index:-1;animation:orbFloat var(--orb-speed) ease-in-out infinite alternate}
.orb-tr {
    top: -360px;
    right: -480px;
    width: 1120px;
    height: 1220px;
    background: radial-gradient(60% 60% at 50% 50%, var(--orb1), transparent 70%);
}
.orb-bl {
    bottom: -360px;
    left: -580px;
    width: 1180px;
    height: 1180px;
    background: radial-gradient(60% 60% at 50% 50%, var(--orb2), transparent 70%);
    animation-delay: 10s;
}
@keyframes orbFloat{0%{transform:translateY(0)}100%{transform:translateY(38px)}}


/* From Uiverse.io by Ashon-G */ 
.relative {
  position: relative;
}

.inline-block {
  display: inline-block;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

:backdrop {
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}

.pointer-events-none {
  pointer-events: none;
}

.absolute {
  position: absolute;
}

.inset-0 {
  inset: 0;
}

button {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 30px 30px;
  width: auto !important;
  border: none;
}

button {
  text-transform: none;
}

button {
  cursor: pointer;
}

.inline-flex {
  display: inline-flex;
}

.justify-center {
  justify-content: center;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: #3cb0ff;
    border: 2px solid rgb(255 255 255);
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.font-medium {
  font-weight: 500;
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255);
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}


#style-AQliM.style-AQliM {
  bottom: 70%;
  left: 89%;
}
#style-WCb99.style-WCb99 {
  top: 15%;
  left: 1%;
}
#style-dBNZV.style-dBNZV {
  bottom: 73%;
  left: 23%;
}
#style-tiisO.style-tiisO {
  top: 43%;
  left: 15%;
}
#style-re9B7.style-re9B7 {
  top: 73%;
  left: 9%;
}
#style-BKG4G.style-BKG4G {
  top: 21%;
  left: 88%;
}
#style-NaoVe.style-NaoVe {
  top: 69%;
  left: 95%;
}
#style-pwIlv.style-pwIlv {
  top: 34%;
  left: 99%;
}
#style-QmcAd.style-QmcAd {
  top: 14%;
  left: 45%;
}
#style-VG2eL.style-VG2eL {
  top: 2%;
  left: 48%;
}


a.inline-flex.items-center.justify-center.bg-primary.text-sm.text-white.font-medium.rounded-lg.enabled\:hover\:bg-primary-dark.enabled\:hover\:shadow-md.enabled\:active\:bg-primary-dark.enabled\:focus\:bg-primary-dark.focus\:outline-none.px-4.py-2.w-full.py-2\.5.relative.disabled\:opacity-50.transition-all {
    padding: 7px 16px;
}


/* Keyframes for sparkle animation */
@keyframes sparkle {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Add animation to sparkle elements */
.animate-magic-sparkle {
  animation: sparkle 2s infinite;
}

.style-AQliM {
  animation-delay: 0.5s;
}
.style-WCb99 {
  animation-delay: 0.33s;
}
.style-dBNZV {
  animation-delay: 0.6s;
}
.style-tiisO {
  animation-delay: 0.9s;
}
.style-re9B7 {
  animation-delay: 1.2s;
}
.style-BKG4G {
  animation-delay: 1.5s;
}
.style-NaoVe {
  animation-delay: 1.8s;
}
.style-pwIlv {
  animation-delay: 1.9s;
}
.style-QmcAd {
  animation-delay: 1.4s;
}
.style-VG2eL {
  animation-delay: 1.7s;
}


h3.align-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.tool-body .pill-soft {
    display: inline-flex;
    padding: 8px 6px;
    border-radius: 999px;
    background: rgb(0 0 0 / 73%);
    color: #ffffff;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    align-content: center;
}

/* Theme swatches */

#theme .profiles-right .ui-card .orb-bl {
    bottom: -58px;
    left: -113px;
    width: 180px;
    height: 180px;
    animation-delay: 10s;
    overflow: hidden;
}
#theme .profiles-right .ui-card .orb-tr {
    top: -31px;
    right: -128px;
    width: 180px;
    height: 180px;
    animation-delay: 10s;
    overflow: hidden;
}

.theme-picker {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-direction: row;
    align-content: center;
    align-items: center;
}
.theme-swatch {
  width: 32px; height: 32px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform .15s ease;
}
.theme-swatch:hover { transform: scale(1.1); }


.profiles-left {
    margin-left: 40px;
}
.w-100b{width:100%; border-radius:0;}

.theme-swatch.theme-default.align-c {
    align-items: center;
    display: flex;
    justify-content: center;
}
.muted.wl-avatars-note {
    margin-left: 10px;
}


.install-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 440px;
    margin: 5px;
    padding: 11px 8px;
    justify-content: center;
    z-index: 40;
    border-radius: 11px;
    left: 50%;
    transform: translate(-50%);
}

/* Modal overlay */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none;           /* toggled by JS */
  place-items: center;
  background: rgba(3, 8, 20, .35);
  backdrop-filter: blur(4px);
  z-index: 100;
}
.modal{
  max-width: 520px;
  width: calc(100% - 32px);
  padding: 20px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.modal-title{ margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.modal-msg{ margin: 0 0 8px; }
.modal-sub{ margin: 0 0 12px; }
.modal-actions{ display: flex; justify-content: flex-end; gap: 10px; }

.modal.glass.opaque{
    background: white;
}

input:invalid, select:invalid, textarea:invalid { outline: 0; }
.wl-actions {
    margin-top: 20px;
}
.cta-final h2{
    margin-bottom:0;
}

.cta-final .muted {
    margin: 0 0 14px;
    font-size: x-large;
}
.profiles-right .card-right {
    padding: 42px;
    display: flex;
    flex-direction: column;
}


/* Default theme */
.theme-default {
  background: white;
  color: #000000;
}
.theme-default .profiles-right .ui-card {
    border: 0;
    background-color: white;
    /* box-shadow: 0 1px 2px 0 rgba(26, 31, 44, 0.25); */
    box-shadow: 0 0 7px 0px rgb(141 141 141 / 34%);
    border-radius: 16px;
    border: 1px solid white;
    backdrop-filter: blur(3px);
    color: #000000;
    overflow: hidden;
}


.theme-swatch.theme-default { background: white; box-shadow: var(--shadow); }

/* Ocean theme */
.theme-ocean {
    background-color: #1eb8d00d;
    border: 1px solid white;
    backdrop-filter: blur(3px);
    color: #000000;
    overflow: hidden;
}

.theme-ocean .profiles {
    background-color: #1eb8d00d;
    border: 1px solid white;
    backdrop-filter: blur(3px);
    color: #000000;
    overflow: hidden;
}

.theme-ocean .orb-bl{
    background: linear-gradient(135deg, #10b981, #8b5cf6);
}
.theme-ocean .orb-tr{
    background: linear-gradient(135deg, #10b981, #8b5cf6);
}

.theme-ocean .profiles-right .ui-card {
    border: 0;
    background-color: #1eb8d00d;
    /* box-shadow: 0 1px 2px 0 rgba(26, 31, 44, 0.25); */
    box-shadow: 0 0 7px 0px rgb(141 141 141 / 34%);
    border-radius: 16px;
    border: 1px solid white;
    backdrop-filter: blur(3px);
    color: #005764;
    overflow: hidden;
}


.theme-swatch.theme-ocean { background: #1eb8d00d; }

/* Sunset theme */
.theme-sunset {
  background: #fff3e64a;
  color: #333333;
  box-shadow: 0 0 8px 0 rgb(245 158 11 / 26%);
}

.theme-sunset .profiles-right .ui-card {
    border: 0;
    background-color: #fff3e64a;
    /* box-shadow: 0 1px 2px 0 rgba(26, 31, 44, 0.25); */
    box-shadow: 0 0 8px 0 rgb(245 158 11 / 26%);
    border-radius: 16px;
    border: 1px solid white;
    backdrop-filter: blur(3px);
    color: #333333;
    overflow: hidden;
}
.theme-sunset .orb-bl{
    background: linear-gradient(135deg, #ef4444, #f59e0b);
}
.theme-sunset .orb-tr{
    background: linear-gradient(135deg, #ef4444, #f59e0b);
}
.theme-swatch.theme-sunset { background: #fff3e64a; box-shadow: 0 0 8px 0 rgb(245 158 11 / 26%); }

/* Forest theme */
.theme-forest {
  background-color: #e8fff44a;
  color: #1c1c1c;
}

.theme-forest .profiles-right .ui-card {
    border: 0;
    background-color: #e8fff44a;
    /* box-shadow: 0 1px 2px 0 rgba(26, 31, 44, 0.25); */
    box-shadow: 0 0 8px 0 #afafaf4a;;
    border-radius: 16px;
    /* border: 1px solid white; */
    backdrop-filter: blur(3px);
    color: #333333;
    overflow: hidden;
}

.theme-forest .orb-bl{
    background: linear-gradient(135deg, #14b8a6, #84cc16);
}
.theme-forest .orb-tr{
    background: linear-gradient(135deg, #14b8a6, #84cc16);
}
.theme-swatch.theme-forest { background-color: #e8fff44a; }

/* Neon theme */
.theme-midnight {
  background-color: #0f172ae6;
  color: #eafff7;
 box-shadow: 0 1px 10px 0 rgb(0 0 0 / 36%);
}
.theme-midnight .profiles-right .ui-card {
    border: 0;
    background-color: #0f172ae6;
    /* box-shadow: 0 1px 2px 0 rgba(26, 31, 44, 0.25); */
    box-shadow: 0 0 8px 0 #ffffff4a;;
    border-radius: 16px;
    /* border: 1px solid white; */
    backdrop-filter: blur(3px);
    color: #eafff7;
    overflow: hidden;
}
.theme-midnight .orb-bl{
    background: linear-gradient(135deg, #93c5fd, #ffffff);
}
.theme-midnight .orb-tr{
    background: linear-gradient(135deg, #93c5fd, #ffffff);
}
.theme-swatch.theme-midnight { background: #0f172ae6; }

/* Minimal theme */
.theme-minimal {
  background: #fff;
  color: #222;
  box-shadow: inset 1px -6px 2px rgb(81 126 241 / 25%);
}

.theme-minimal .profiles-right .ui-card {
    border: 0;
    background: #fff;
    /* box-shadow: 0 1px 2px 0 rgba(26, 31, 44, 0.25); */
    box-shadow: inset 1px -6px 2px rgb(81 126 241 / 25%);
    border-radius: 16px;
    /* border: 1px solid white; */
    backdrop-filter: blur(3px);
    color: #135e84;
    overflow: hidden;
}
.theme-minimal .orb-bl{
    background: linear-gradient(135deg, #f472b6, #fb923c);
}
.theme-minimal .orb-tr{
    background: linear-gradient(135deg, #f472b6, #fb923c);
}
.theme-swatch.theme-minimal { background: #f5f5f5; box-shadow: inset 1px -6px 2px rgb(81 126 241 / 25%);}


@media (max-width:1199px){
.tj-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-radius: 0;
    max-width: 100%;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
}

.tj-footer {
    max-width: 100%;
    display: flex;
    /* margin: 40px auto 80px; */
    padding: 46px 90px;
    background: #ffffffa1;
    flex-direction: column;
    backdrop-filter: blur(12px);
    align-content: stretch;
    /* box-shadow: 0px 10px 34px rgba(10, 30, 60, .12); */
}
}
/* Responsive */
@media (max-width:980px){
    .tj-main {
        margin: 26px auto;
    }
    .profiles-left {
    margin-left: 0;
    }
  .hero{grid-template-columns:1fr; margin-bottom:0;}
  .profiles{grid-template-columns:1fr}
  .screens{grid-template-columns:1fr}
  .problem-solution{grid-template-columns:1fr}
  .mini-features{grid-template-columns:1fr 1fr}
  .tools-grid{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .demo-form{grid-template-columns:1fr}
  .wl-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-ctas{display:none}
  .nav-toggle{display:block}
  .menu-open .nav-links {
        display: flex;
        position: fixed;
        inset: 60px 1px auto -1px;
        flex-direction: column;
        gap: 18px;
        padding: 17px 30px 25px 30px;
        margin: 0;
        background: rgb(255 255 255);
        backdrop-filter: blur(14px);
        border-radius: 16px;
        box-shadow: var(--shadow);
        width: 100%;
        border-radius: 0;
    }
    .nav-links a {
        padding: 2px;
        border-bottom: 1px solid #8080802b;
    }
  .profiles-right .ui-card {
    min-height: 100%;
    margin: 0;
    width: 100%;
    padding: 20px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
}

.tri {
    grid-template-columns: repeat(1, 1fr);
}
.tri-card {
    padding: 16px;
    border-radius: 10px;
    background: #ffffff87;
    backdrop-filter: blur(10px);
    border: 1px solid rgb(225 218 255 / 43%);
    /* box-shadow: var(--shadow-soft); */
}
#theme .profiles-right .ui-card .orb-bl {
    bottom: -58px;
    left: -113px;
    width: 155px;
    height: 155px;
    animation-delay: 10s;
    overflow: hidden;
}
#theme .profiles-right .ui-card .orb-tr {
    top: -31px;
    right: -128px;
    width: 155px;
    height: 155px;
    animation-delay: 10s;
    overflow: hidden;
}
 .profiles-right .ui-card {
    border-radius: 6px;
}
.orb-tr {
    top: -360px;
    right: -480px;
    width: 720px;
    height: 720px;
    background: radial-gradient(60% 60% at 50% 50%, var(--orb1), transparent 70%);
}
.orb-bl {
    bottom: -360px;
    left: -580px;
    width: 880px;
    height: 880px;
    background: radial-gradient(60% 60% at 50% 50%, var(--orb2), transparent 70%);
    animation-delay: 10s;
}
figure.ui-card.glass {
    display: none;
}
.muted {
    margin: 0;
    color: var(--muted);
}
 h2 {
    margin: 0;
    padding: 0;
}
.tools-head {
    display: flex;
    align-items: baseline;
    gap: 13px;
    margin: 40px 0 19px;
    flex-direction: column;
    align-content: flex-start;
    justify-content: space-evenly;
    flex-wrap: nowrap;
}
.install-text {
    font-size: 11px;
    color: var(--muted);
}
.demo-head {
    display: flex;
    align-items: baseline;
    gap: 0;
    margin-bottom: 24px;
    flex-direction: column;
}
.demo-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-direction: column;
}
.theme-picker {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.tj-btn {
    padding: 5px 16px;
}
.waitlist, .faq {
    padding: 20px;
}
.tj-footer {
    max-width: 100%;
    /* display: none; */
    margin: 40px auto -10px;
    padding: 26px 11px;
    background: #ffffffa1;
    backdrop-filter: blur(12px);
    align-content: stretch;
    box-shadow: 0px 10px 34px rgba(10, 30, 60, .12);
    flex-direction: column;
    flex-wrap: wrap;
}
.ft-grid {
    display: none;
}
.wl-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 10px;
    flex-direction: column;
}
.tj-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-radius: 0.85em;
    max-width: 94%;
    margin-left: 10px;
    margin-top: 14px;
    padding: 0px;
}
.tj-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-radius: 0;
    max-width: 100%;
    margin-left: 0;
    margin-top: 0;
    padding: 0px;
}
.tool-body {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: space-evenly;
    }
.tool {
    box-shadow: none;
    /* display: flex;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    padding: 14px;
    align-content: center;
    justify-content: center;
    justify-items: stretch;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-wrap: wrap; */
}
.waitlist {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 30px;
}
.align-rads {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-evenly;
    align-items: flex-start;
    align-content: center;
    gap: 0;
}
.wl-actions {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 10px;
    flex-direction: column;
}
.wl-safe.muted {
    margin-bottom: 20px;
}
/* .install-bar {
    position: fixed;
    inset: auto 0 0 0;
    max-width: 480px;
    margin: 0;
    padding: 19px 8px;
    display: flex;
    justify-content: center;
    z-index: 40;
    border-radius: 0;
} */
}
@media (prefers-reduced-motion:reduce){
  .orb{animation:none}
}


/* ---------- Desktop / default grid ---------- */
.tools .tools-grid {
  display: grid;
  /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
  gap: 16px;
}


/* ---------- Mobile: turn grid into a carousel ---------- */
@media (max-width: 720px) {
.demo, #plugin, a.tj-btn.tj-btn-outline.tj-btn-pill.tj-btn-ghost2 {
    display: none;
}
  .tools .tools-grid {
    display: grid;                 /* keep grid so existing styles stay sane */
    grid-auto-flow: column;        /* lay items horizontally */
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory; /* enable snap */
    padding: 2px 8px 12px;         /* breathing room + drag space */
  }

    .tools .tool {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 220px;
        height: 220px;
        align-content: center;
        text-align: center;
    }

  /* Hide scrollbar for a cleaner, app-like feel */
  .tools .tools-grid::-webkit-scrollbar { display: none; }
  .tools .tools-grid { scrollbar-width: none; -ms-overflow-style: none; }

  /* Optional: subtle edge fade to imply more content */
  .tools {
    --edge-fade: linear-gradient(90deg, rgba(0,0,0,0.06), transparent 30%, transparent 70%, rgba(0,0,0,0.06));
    position: relative;
  }
}