:root{
  --bg:#F0F9FE;
  --purple:#B43DC5;
  --magenta:#DD00FF;
  --deep:#8200FF;
  --cyan:#1EC3FA;
  --lav:#D7B8F1;
  --lav-bg:#E9D9F8;
  --white:#FFFFFF;
  --ink:#3C4145;
  --ink-soft:#5d6469;
  --coral:#FF5A5F;
  --coral-dk:#e84a4f;
  --grad:linear-gradient(135deg,#1EC3FA 0%,#B43DC5 50%,#DD00FF 100%);
  --radius:18px;
  --shadow:0 18px 50px rgba(130,0,255,.10);
  --shadow-sm:0 8px 24px rgba(130,0,255,.08);
  --shadow-ui:0 14px 40px rgba(40,20,60,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;color:#241a2b;line-height:1.12;letter-spacing:-.01em}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.btn{display:inline-block;font-weight:600;font-size:15px;padding:14px 28px;border-radius:999px;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;border:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(180,61,197,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(180,61,197,.45)}
.btn-ghost{background:#fff;color:var(--purple);border:1.5px solid var(--lav)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--purple)}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);background:var(--lav-bg);padding:7px 16px;border-radius:999px;margin-bottom:18px}

/* NAV */
header.nav{position:sticky;top:0;z-index:50;background:rgba(240,249,254,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(180,61,197,.10)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav img{height:34px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-weight:500;font-size:15px;color:var(--ink)}
.nav-links a:hover{color:var(--purple)}
.nav-links a.active{color:var(--purple);font-weight:600}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-login{font-weight:600;color:var(--purple)}
/* ---- Logged-in account dropdown (replaces My Account + Dashboard links) ---- */
.nav-account{position:relative}
.nav-account-toggle{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-weight:600;font-size:15px;color:var(--purple) !important;background:#fff !important;border:1.5px solid var(--lav);border-radius:999px;padding:11px 20px;cursor:pointer;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.nav-account-toggle:hover{background:#fff !important;color:var(--purple) !important;border-color:var(--purple);transform:translateY(-1px)}
.nav-account-caret{transition:transform .2s ease}
.nav-account.is-open .nav-account-caret{transform:rotate(180deg)}
.nav-account-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:200px;background:#fff;border:1px solid var(--lav);border-radius:14px;box-shadow:0 16px 40px rgba(40,20,60,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:1000}
.nav-account.is-open .nav-account-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-account-menu a{display:block;padding:11px 14px;border-radius:9px;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.nav-account-menu a:hover{background:var(--lav-bg);color:var(--purple)}
.nav-account-menu .nav-account-logout{border-top:1px solid rgba(40,20,60,.08);margin-top:4px;color:var(--ink-soft);font-weight:500}
.nav-account-menu .nav-account-logout:hover{color:var(--coral,#e0457b);background:transparent}
/* ---- Products dropdown (injected by functions.php into .nav-links) ---- */
.nav-dd{position:relative}
.nav-dd-toggle{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-weight:500;font-size:15px;line-height:1;color:var(--ink);background:transparent;background-color:transparent;border:0;padding:0;margin:0;cursor:pointer;transition:color .15s ease;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;outline:none}
.nav-dd-toggle:hover,.nav-dd-toggle:focus,.nav-dd-toggle:active{color:var(--purple);background:transparent;background-color:transparent;box-shadow:none;outline:none}
.nav-dd-toggle:focus-visible{color:var(--purple)}
.nav-dd-toggle.is-active{color:var(--purple);font-weight:600}
.nav-dd-caret{transition:transform .2s ease}
.nav-dd.is-open .nav-dd-caret,.nav-dd:hover .nav-dd-caret{transform:rotate(180deg)}
/* invisible hover bridge so moving from toggle to menu across the gap doesn't close it */
.nav-dd::after{content:"";position:absolute;top:100%;left:0;width:100%;height:16px}
.nav-dd-menu{position:absolute;top:calc(100% + 14px);left:0;min-width:210px;background:#fff;border:1px solid var(--lav);border-radius:14px;box-shadow:0 16px 40px rgba(40,20,60,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:1000}
.nav-dd.is-open .nav-dd-menu,.nav-dd:hover .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd-menu a{display:block;padding:11px 14px;border-radius:9px;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.nav-dd-menu a:hover,.nav-dd-menu a.active{background:var(--lav-bg);color:var(--purple)}
/* ---- Mobile nav / hamburger (injected by functions.php on every page) ---- */
.nav-hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:8px;color:var(--ink)}
.nav-hamburger span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-hamburger span+span{margin-top:5px}
.nav-hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.is-open span:nth-child(2){opacity:0}
.nav-hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;top:0;right:0;height:100%;width:min(82vw,320px);background:#fff;box-shadow:-8px 0 40px rgba(40,20,60,.18);z-index:1000;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;padding:78px 24px 28px;overflow-y:auto}
.mobile-menu.is-open{transform:translateX(0)}
.mobile-menu a{display:block;font-size:17px;font-weight:600;color:var(--ink);padding:13px 0;border-bottom:1px solid rgba(40,20,60,.07)}
.mobile-menu a:hover{color:var(--purple)}
.mobile-menu .btn{margin-top:18px;text-align:center;border-bottom:0;color:#fff}
.mobile-menu .nav-login{color:var(--purple)}
.mobile-menu-backdrop{position:fixed;inset:0;background:rgba(20,12,28,.5);z-index:999;opacity:0;pointer-events:none;transition:opacity .25s ease}
.mobile-menu-backdrop.is-open{opacity:1;pointer-events:auto}
body.mobile-menu-active{overflow:hidden}
@media(max-width:880px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-hamburger{display:block}
  /* Keep the logo + hamburger bar pinned to the top while scrolling on mobile.
     Slightly more opaque background so page content stays legible underneath
     even where backdrop-filter is unsupported (e.g. some iOS versions). */
  header.nav{position:-webkit-sticky;position:sticky;top:0;z-index:60;background:rgba(240,249,254,.94)}
  /* The slide-out menu sits off-screen at translateX(100%); clip page-level
     horizontal overflow so it never creates a stray horizontal scrollbar.
     Use overflow-x:clip (not hidden) — `hidden` makes html/body a scroll
     container, which breaks `position:sticky` on the header on mobile. `clip`
     prevents horizontal scroll without establishing a scroll container, so the
     sticky navbar keeps sticking. */
  html,body{overflow-x:clip}
}
@media(min-width:881px){
  .mobile-menu,.mobile-menu-backdrop{display:none !important}
}

/* HERO (home) */
.hero{position:relative;overflow:hidden;padding:70px 0 36px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center}
.hero h1{font-size:clamp(38px,5vw,58px);font-weight:700}
.hero p.sub{font-size:19px;color:var(--ink-soft);margin:22px 0 28px;max-width:560px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:20px;font-size:14px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-note b{color:var(--purple)}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}.floaty{display:none}}

/* PAGE HERO (interior pages) */
.phero{text-align:center;padding:62px 0 30px}
.phero h1{font-size:clamp(34px,4.6vw,52px);font-weight:700;max-width:880px;margin:0 auto}
.phero p{font-size:19px;color:var(--ink-soft);margin:20px auto 28px;max-width:620px}
.phero .hero-cta{justify-content:center}
.phero .hero-note{justify-content:center}

/* PRODUCT UI MOCKS */
.browser{background:#fff;border-radius:16px;box-shadow:var(--shadow-ui);overflow:hidden;border:1px solid rgba(40,20,60,.08)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#f3f4f6;border-bottom:1px solid #e7e8ec}
.dot{width:11px;height:11px;border-radius:50%}
.browser-url{margin-left:12px;font-size:11.5px;color:#8b8f98;background:#fff;border-radius:7px;padding:5px 12px;flex:1}
.uib-search{display:flex;gap:8px;padding:11px;background:#fff;border-bottom:1px solid #eef0f2}
.uib-field{flex:1;border:1px solid #e3e5e9;border-radius:9px;padding:8px 11px;font-size:11.5px;color:#6b7077;display:flex;align-items:center;gap:6px}
.uib-field .ph{color:#9aa0a8}
.uib-btn{background:var(--coral);color:#fff;border-radius:9px;padding:8px 15px;font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:5px}
.uib-btn.gray{background:#9aa0a8}
.uib-banner{background:var(--coral);color:#fff;text-align:center;font-size:11px;font-weight:700;padding:8px 10px;letter-spacing:.01em}
.uib-row{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;font-size:11.5px;color:#4b5158}
.uib-row .chip{border:1px solid #e3e5e9;border-radius:8px;padding:5px 10px;font-size:11px;color:#5a6068}
.uib-split{display:grid;grid-template-columns:1.35fr 1fr;gap:0}
.uib-list{padding:0 14px 12px}
.uic{display:flex;gap:11px;padding:11px 0;border-top:1px solid #f0f1f3}
.uic .img{width:92px;height:70px;border-radius:9px;flex-shrink:0;position:relative;overflow:hidden;background:#eceef0}
.uic .img img{width:100%;height:100%;object-fit:cover;display:block}
.uic .txt .t{font-size:12px;font-weight:700;color:#2a2e33;line-height:1.25}
.uic .txt .loc{font-size:10.5px;color:#8b8f98;margin:2px 0 5px}
.uic .txt .specs{font-size:10px;color:#7a8087;margin-bottom:4px}
.uic .txt .pr{font-size:11px;color:#2a2e33}
.uic .txt .pr .star{color:var(--coral);font-weight:700}
.uic .txt .pr b{font-weight:700}
.uib-map{position:relative;background:#e9efe6;min-height:250px;height:100%;z-index:0}
.uib-map .leaflet-container{position:absolute;inset:0;height:100%;width:100%;font:inherit;background:#e9efe6}
.leaflet-control-zoom a{color:#3c4145 !important}

/* TRUST */
.trust{padding:16px 0 6px}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft);font-weight:500}
.trust-inner b{color:var(--ink)}
.trust-dot{width:5px;height:5px;border-radius:50%;background:var(--lav)}

/* SECTION SHELL */
section{padding:60px 0}
.sec-head{text-align:center;max-width:700px;margin:0 auto 42px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:700}
.sec-head p{font-size:17px;color:var(--ink-soft);margin-top:14px}

/* PAIN / STATS */
.pain{background:#fff;border-radius:28px;box-shadow:var(--shadow-sm);padding:48px 40px;margin:0 24px}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.stat .n{font-family:'Space Grotesk';font-size:46px;font-weight:700;line-height:1}
.stat .l{font-size:14.5px;color:var(--ink-soft);margin-top:10px}

/* FEATURE GRID */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fcard{background:#fff;border-radius:var(--radius);padding:28px 26px;border:1px solid rgba(130,0,255,.06);box-shadow:var(--shadow-sm);transition:transform .15s ease}
.fcard:hover{transform:translateY(-4px)}
.fcard .ic{width:46px;height:46px;border-radius:13px;background:var(--lav-bg);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.fcard .ic svg{width:23px;height:23px;stroke:var(--purple)}
.fcard h3{font-size:18px;margin-bottom:8px}
.fcard p{font-size:14.5px;color:var(--ink-soft)}
@media(max-width:780px){.fgrid{grid-template-columns:1fr}.pain-grid{grid-template-columns:1fr;gap:24px}}

/* SHOWCASE */
.show{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin-bottom:50px}
.show:last-child{margin-bottom:0}
.show.flip .copy{order:2}
.show .copy h3{font-size:24px;margin-bottom:12px}
.show .copy p{font-size:15.5px;color:var(--ink-soft)}
.show .copy .tag{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
@media(max-width:780px){.show{grid-template-columns:1fr;gap:24px}.show.flip .copy{order:0}}

/* checkout widget mock */
.co{max-width:320px;margin:0 auto;background:#fff;border:1px solid #e7e8ec;border-radius:14px;padding:20px;box-shadow:var(--shadow-ui)}
.co .price{display:flex;align-items:baseline;gap:9px}
.co .price .was{color:#9aa0a8;text-decoration:line-through;font-size:17px}
.co .price .now{font-family:'Space Grotesk';font-weight:700;font-size:26px;color:#2a2e33}
.co .save{color:var(--coral);font-weight:600;font-size:12.5px;margin:3px 0 12px}
.co .lbl{font-size:11px;color:#8b8f98;text-transform:uppercase;letter-spacing:.06em;margin:9px 0 4px}
.co .ipt{border:1px solid #e3e5e9;border-radius:8px;padding:9px 11px;font-size:12px;color:#4b5158;display:flex;justify-content:space-between;align-items:center}
.co .ipts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.co .rsv{background:var(--coral);color:#fff;text-align:center;font-weight:700;padding:11px;border-radius:9px;font-size:13.5px;margin-top:13px}
.co .nocharge{text-align:center;font-size:10.5px;color:#9aa0a8;margin-top:7px}
.co .brk{border-top:1px solid #eef0f2;margin-top:13px;padding-top:11px;font-size:12px;color:#4b5158}
.co .brk .li{display:flex;justify-content:space-between;margin-bottom:6px}
.co .brk .tot{display:flex;justify-content:space-between;font-weight:700;color:#2a2e33;border-top:1px solid #eef0f2;padding-top:9px;margin-top:3px}

/* filters mock */
.flt{max-width:330px;margin:0 auto;background:#fff;border-radius:14px;padding:20px;box-shadow:var(--shadow-ui);border:1px solid #e7e8ec}
.flt h4{font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.flt h4 .ct{font-size:11px;color:#2bb673;font-weight:600}
.flt .slbl{font-size:12px;font-weight:600;color:#4b5158;margin:14px 0 8px}
.flt .track{height:5px;background:#eceef0;border-radius:5px;position:relative;margin:0 4px 6px}
.flt .track .fill{position:absolute;left:6%;right:64%;top:0;bottom:0;background:#2bb673;border-radius:5px}
.flt .track .kn{position:absolute;top:-4px;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #2bb673}
.flt .mm{display:flex;justify-content:space-between;font-size:11px;color:#8b8f98}
.flt .beds{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.flt .beds span{border:1px solid #e3e5e9;border-radius:7px;padding:5px 9px;font-size:11px;color:#5a6068}
.flt .beds span.on{background:#1d1d1f;color:#fff;border-color:#1d1d1f}

/* HOW IT WORKS */
.how{background:var(--lav-bg);border-radius:28px;padding:52px 40px;margin:0 24px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:10px}
.step{background:#fff;border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow-sm)}
.step .num{font-family:'Space Grotesk';font-weight:700;font-size:15px;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h4{font-size:16px;margin-bottom:6px}
.step p{font-size:13.5px;color:var(--ink-soft)}
@media(max-width:780px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* PRICING */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.pgrid-4{grid-template-columns:repeat(4,1fr)}
.pgrid-4 .pcard{padding:28px 22px}
.pgrid-4 .pcard .pprice{font-size:38px}
.pcard{background:#fff;border-radius:var(--radius);padding:30px 26px;border:1px solid rgba(130,0,255,.08);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:relative}
.pcard.pop{border:2px solid var(--purple);box-shadow:var(--shadow)}
.pcard .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:999px;white-space:nowrap}
.pcard .pname{font-family:'Space Grotesk';font-weight:600;font-size:15px;color:var(--purple);letter-spacing:.04em;text-transform:uppercase}
.pcard .pcount{font-size:13px;color:var(--ink-soft);margin-top:3px}
.pcard .pprice{font-family:'Space Grotesk';font-weight:700;font-size:44px;color:#241a2b;margin:16px 0 2px;line-height:1}
.pcard .pprice span{font-size:15px;font-weight:500;color:var(--ink-soft)}
.pcard .pper{font-size:13px;color:var(--ink-soft);margin-bottom:18px}
.pcard ul{list-style:none;margin-bottom:24px;flex:1}
.pcard li{font-size:14px;display:flex;gap:9px;align-items:flex-start;margin-bottom:11px;color:var(--ink)}
.pcard li .ck{color:var(--purple);font-weight:700;flex-shrink:0}
.pcard .pbtn{text-align:center}
.price-note{text-align:center;font-size:14px;color:var(--ink-soft);margin-top:26px}
/* horizontal free box above the 3 paid tiers — same card design, laid out horizontally */
.pfree{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:34px;background:#fff;border-radius:var(--radius);padding:28px 32px;border:1px solid rgba(130,0,255,.08);box-shadow:var(--shadow-sm);position:relative;margin-bottom:22px}
.pfree .pfree-head{flex-shrink:0;min-width:170px}
.pfree .pname{font-family:'Space Grotesk';font-weight:600;font-size:15px;color:var(--purple);letter-spacing:.04em;text-transform:uppercase}
.pfree .pcount{font-size:13px;color:var(--ink-soft);margin-top:3px}
.pfree .pprice{font-family:'Space Grotesk';font-weight:700;font-size:38px;color:#241a2b;margin:10px 0 0;line-height:1}
.pfree .pprice span{font-size:14px;font-weight:500;color:var(--ink-soft)}
.pfree ul{list-style:none;display:flex;gap:10px 28px;flex-wrap:wrap;flex:1;margin:0}
.pfree li{font-size:14px;display:flex;gap:9px;align-items:center;color:var(--ink)}
.pfree li .ck{color:var(--purple);font-weight:700;flex-shrink:0}
.pfree .pbtn{flex-shrink:0}
@media(max-width:980px){.pgrid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.pgrid{grid-template-columns:1fr}.pfree{flex-direction:column;align-items:flex-start;gap:20px}.pfree .pbtn{width:100%}.pfree .pbtn .btn{width:100%}}
@media(max-width:560px){.pgrid-4{grid-template-columns:1fr}}

/* PRODUCT TWO (automation) */
.prod2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.prod2 .visual{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:26px;border:1px solid rgba(130,0,255,.07)}
.sms{max-width:330px;margin:0 auto}
.bubble{padding:12px 16px;border-radius:16px;font-size:13.5px;margin-bottom:10px;max-width:80%}
.bubble.in{background:#f1eafa;color:#3c2f48;border-bottom-left-radius:5px}
.bubble.out{background:var(--grad);color:#fff;margin-left:auto;border-bottom-right-radius:5px}
.prod2 ul{list-style:none;margin:22px 0 28px}
.prod2 li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:15.5px}
.prod2 li .ck{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--lav-bg);display:flex;align-items:center;justify-content:center;color:var(--purple);font-weight:700;font-size:13px;margin-top:1px}
@media(max-width:780px){.prod2{grid-template-columns:1fr}}

/* PLATFORM BAND */
.band{background:var(--grad);border-radius:28px;margin:0 24px;padding:54px 40px;text-align:center;color:#fff}
.band h2{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.band p{color:rgba(255,255,255,.92);max-width:620px;margin:16px auto 0;font-size:17px}
.band .two{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:34px auto 0}
.band .pc2{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:24px;text-align:left;backdrop-filter:blur(4px)}
.band .pc2 h4{color:#fff;font-size:18px;margin-bottom:7px}
.band .pc2 p{color:rgba(255,255,255,.9);font-size:14px;margin:0}
.band .hero-cta{justify-content:center;margin-top:28px}
.band .btn-ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
@media(max-width:640px){.band .two{grid-template-columns:1fr}}
/* Two-product band on light sections (homepage) */
/* Booking mockup: collapse the list/map split on mobile; full-width variant when there's no map */
.uib-split.uib-nomap{grid-template-columns:1fr}
@media(max-width:640px){.uib-split{grid-template-columns:1fr}.uib-map{min-height:180px}}
.two-products{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.two-products .pc2{background:#fff;border:1px solid var(--lav);border-radius:18px;padding:30px;text-align:left;box-shadow:0 8px 30px rgba(40,20,60,.06);display:flex;flex-direction:column}
.two-products .pc2 h4{font-size:20px;margin:8px 0 10px;color:var(--ink)}
.two-products .pc2 p{color:var(--ink-soft);font-size:15px;margin:0;flex:1}
@media(max-width:760px){.two-products{grid-template-columns:1fr}}

/* TESTIMONIALS */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:#fff;border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-sm);border:1px solid rgba(130,0,255,.06)}
.tcard .stars{color:var(--magenta);font-size:15px;letter-spacing:2px;margin-bottom:12px}
.tcard p{font-size:14.5px;color:var(--ink);margin-bottom:18px}
.tcard .who{display:flex;align-items:center;gap:12px}
.tcard .av{width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Space Grotesk'}
.tcard .who .nm{font-weight:600;font-size:14px}
.tcard .who .ro{font-size:12.5px;color:var(--ink-soft)}
@media(max-width:780px){.tgrid{grid-template-columns:1fr}}

/* INTEGRATIONS */
.ints{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:10px}
.ichip{background:#fff;border:1px solid rgba(130,0,255,.10);border-radius:14px;padding:14px 26px;font-family:'Space Grotesk';font-weight:600;font-size:16px;color:#5a4a68;box-shadow:var(--shadow-sm)}
.ichip.on{color:var(--purple);border-color:var(--lav)}
.intgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.intcard{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);border:1px solid rgba(130,0,255,.06)}
.intcard .logo{font-family:'Space Grotesk';font-weight:700;font-size:20px;color:var(--purple);margin-bottom:8px}
.intcard .tagn{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2bb673;margin-bottom:10px;display:inline-block}
.intcard .tagn.soon{color:#b08400}
.intcard p{font-size:14px;color:var(--ink-soft)}
@media(max-width:780px){.intgrid{grid-template-columns:1fr}}

/* DOWNLOAD / GET BOX */
.getbox{background:#fff;border-radius:28px;box-shadow:var(--shadow);margin:0 24px;padding:50px 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.getbox h2{font-size:clamp(26px,3.2vw,36px)}
.getbox p{font-size:16px;color:var(--ink-soft);margin:14px 0 24px}
.getbox .platforms{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink-soft)}
.getsteps{background:var(--lav-bg);border-radius:18px;padding:28px}
.getsteps .gs{display:flex;gap:13px;margin-bottom:16px}
.getsteps .gs:last-child{margin-bottom:0}
.getsteps .gs .n{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.getsteps .gs .d{font-size:14px}
.getsteps .gs .d b{color:#241a2b}
@media(max-width:780px){.getbox{grid-template-columns:1fr;gap:28px}}

/* VIDEO EMBED */
.video-embed{max-width:880px;margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(130,0,255,.08);background:#000}
.video-embed .ratio{position:relative;width:100%;padding-top:56.25%}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* FAQ */
.faq{max-width:780px;margin:0 auto}
.faq .q{background:#fff;border:1px solid rgba(130,0,255,.08);border-radius:14px;padding:22px 24px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.faq .q h4{font-size:17px;margin-bottom:8px}
.faq .q p{font-size:14.5px;color:var(--ink-soft)}

/* FINAL CTA */
.final{text-align:center;background:#fff;border-radius:28px;margin:0 24px;padding:58px 30px;box-shadow:var(--shadow-sm)}
.final h2{font-size:clamp(28px,3.6vw,42px)}
.final p{font-size:17px;color:var(--ink-soft);margin:14px auto 28px;max-width:540px}

/* FOOTER */
footer{background:#1c1322;color:#cdbfd8;margin-top:64px;padding:54px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer img{height:30px;margin-bottom:16px}
footer h5{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
footer a{display:block;color:#bcaecb;font-size:14.5px;margin-bottom:10px}
footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;font-size:13px;color:#8d7e9c;text-align:center}
.foot-tag{font-size:14px;color:#a394b2;max-width:300px;margin-top:4px}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){footer{padding:40px 0 26px;margin-top:40px}.foot-grid{grid-template-columns:1fr;gap:26px}.foot-tag{max-width:none}.foot-bottom{margin-top:30px}}

/* LEGAL PAGES (privacy, terms) */
.legal{max-width:820px;margin:0 auto;padding:10px 0 20px}
.legal .eff{font-size:14px;color:var(--ink-soft);margin-bottom:30px}
.legal .eff b{color:var(--ink)}
.legal h2{font-family:'Space Grotesk';font-size:22px;color:#241a2b;margin:34px 0 12px;line-height:1.3}
.legal h3{font-family:'Space Grotesk';font-size:16px;color:var(--purple);margin:22px 0 8px}
.legal p{font-size:15.5px;color:var(--ink);line-height:1.7;margin-bottom:14px}
.legal ul{margin:0 0 16px 0;padding-left:22px}
.legal li{font-size:15.5px;color:var(--ink);line-height:1.7;margin-bottom:8px}
.legal a{color:var(--purple);font-weight:500}
.legal .lead{font-size:17px;color:var(--ink-soft);line-height:1.7;margin-bottom:10px}

/* REQUEST DEMO PAGE */
.demo-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.demo-points{list-style:none;margin:26px 0 0}
.demo-points li{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px;font-size:16px;color:var(--ink);line-height:1.55}
.demo-points li .ck{color:var(--purple);font-weight:700;flex-shrink:0;margin-top:2px;font-size:18px}
.demo-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(130,0,255,.08);padding:34px 32px}
.demo-card h3{font-family:'Space Grotesk';font-size:22px;color:#241a2b;margin-bottom:4px}
.demo-card .sub2{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px}
/* style the embedded Formidable form to match the brand */
.demo-card .frm_forms{max-width:100%}
.demo-card .frm_form_field{margin-bottom:16px}
.demo-card label,.demo-card .frm_primary_label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.demo-card .frm_required{color:var(--coral)}
.demo-card input[type=text],.demo-card input[type=email],.demo-card input[type=tel],
.demo-card input[type=number],.demo-card select,.demo-card textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--lav);border-radius:12px;
  font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);background:#fff;box-sizing:border-box}
.demo-card input:focus,.demo-card select:focus,.demo-card textarea:focus{outline:none;border-color:var(--purple)}
.demo-card textarea{min-height:96px;resize:vertical}
.demo-card .frm_submit{margin-top:6px}
.demo-card .frm_submit button,.demo-card input[type=submit]{
  width:100%;background:var(--grad);color:#fff;border:none;border-radius:999px;
  padding:14px 26px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;
  cursor:pointer;transition:transform .15s ease}
.demo-card .frm_submit button:hover,.demo-card input[type=submit]:hover{transform:translateY(-2px)}
.demo-card .frm_description,.demo-card .frm_error{font-size:12.5px}
.demo-card .frm_error{color:var(--coral)}
@media(max-width:880px){.demo-grid{grid-template-columns:1fr;gap:34px}}

/* Footer social icons */
.foot-social{display:flex;gap:14px;margin-top:16px}
.foot-social a{display:inline-flex !important;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);color:#cdbfd8 !important;margin:0 !important;transition:background .15s ease,color .15s ease}
.foot-social a:hover{background:var(--purple,#B43DC5);color:#fff !important}
.foot-social svg{display:block}

/* ============================================================ Knowledge Base
   Public /knowledge-base/ page. Static HTML shell (in page content) +
   assets/knowledge-base.js render into #kb-app. Uses the brand tokens above. */
.kb-hero .kb-search{position:relative;max-width:640px;margin:22px auto 0;text-align:left}
.kb-q{width:100%;padding:16px 18px;border:1px solid #e3e5e9;border-radius:14px;font-size:17px;font-family:inherit;box-sizing:border-box;box-shadow:var(--shadow-sm);background:#fff}
.kb-q:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(130,0,255,.12)}
.kb-results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #eef0f2;border-radius:14px;box-shadow:var(--shadow);z-index:40;overflow:hidden;text-align:left}
.kb-results a{display:block;padding:12px 16px;border-bottom:1px solid #f2f3f5;color:var(--ink)}
.kb-results a:last-child{border-bottom:0}
.kb-results a:hover,.kb-results a.active{background:var(--lav-bg)}
.kb-r-t{font-weight:600;display:block}
.kb-r-x{font-size:13px;color:var(--ink-soft);display:block;margin-top:2px}
.kb-r-cat{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--purple);font-weight:700}
.kb-r-none{padding:14px 16px;color:var(--ink-soft)}
.kb-section{padding-top:24px}
.kb-app{max-width:920px;margin:0 auto}
.kb-loading{color:var(--ink-soft);padding:30px 0}
.kb-err{color:var(--ink-soft)}
.kb-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:42px}
.kb-cat{display:flex;flex-direction:column;gap:6px;padding:20px;background:#fff;border:1px solid rgba(130,0,255,.08);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s}
.kb-cat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kb-cat-ico{font-size:26px}
.kb-cat-name{font-weight:700;font-size:16px;color:var(--ink)}
.kb-cat-count{font-size:13px;color:var(--ink-soft)}
.kb-group{margin-bottom:34px}
.kb-group h2{font-size:22px;margin:0 0 14px;scroll-margin-top:90px}
.kb-list{list-style:none;margin:0;padding:0}
.kb-list li{border-bottom:1px solid #eef0f2}
.kb-list a{display:block;padding:13px 4px;color:var(--ink)}
.kb-list a:hover .kb-list-t{color:var(--purple)}
.kb-list-t{font-weight:600;display:block}
.kb-list-x{font-size:13.5px;color:var(--ink-soft);display:block;margin-top:3px}
.kb-list-lg a{padding:16px 4px}
.kb-crumb{font-size:13.5px;color:var(--ink-soft);margin-bottom:6px}
.kb-crumb a{color:var(--purple)}
.kb-cat-title{margin:0 0 20px}
.kb-article .kb-body{max-width:760px}
.kb-body h2{font-size:24px;margin:34px 0 12px}
.kb-body h3{font-size:19px;margin:26px 0 10px}
.kb-body p{color:var(--ink);margin-bottom:15px;line-height:1.7}
.kb-body ul,.kb-body ol{margin:0 0 18px;padding-left:22px;color:var(--ink);line-height:1.7}
.kb-body li{margin-bottom:8px}
.kb-body a{color:var(--purple);text-decoration:underline}
.kb-body code{background:#f6f0fb;border-radius:6px;padding:2px 7px;font-size:.92em;color:#6b21a8}
.kb-article h1{font-size:32px;margin:6px 0 20px;line-height:1.2}
.kb-helpful{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:36px 0 0;padding:18px 20px;background:var(--lav-bg);border-radius:14px;font-weight:600;max-width:760px}
.kb-helpful .btn{padding:7px 18px}
.kb-vote-msg{color:#15803d;font-weight:600}
.kb-related{margin-top:40px;max-width:760px}
.kb-related h3{font-size:18px;margin:0 0 8px}
.kb-cta{margin:48px auto 0;max-width:760px;text-align:center;padding:32px;background:#fff;border:1px solid rgba(130,0,255,.08);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.kb-cta h3{margin:0 0 8px;font-size:20px}
.kb-cta p{color:var(--ink-soft);margin:0 auto 16px;max-width:520px}
@media(max-width:560px){.kb-article h1{font-size:26px}.kb-cats{grid-template-columns:1fr 1fr}}

/* ============================================================ DARK THEME
   Bold-Signature dark theme for the public MARKETING pages only.
   Scoped to body.page-template-template-blank so functional pages
   (account, checkout, my-stay, purchase-success) stay on the light theme
   until a later phase. Layered AFTER the light rules above; overrides win
   by being later + equally/more specific. Palette mirrors the homepage
   mockup: gradient stays the star, dark surfaces, white text.
   ------------------------------------------------------------ */
body.page-template-template-blank{
  /* Re-point the shared brand tokens to their dark-theme values.
     The gradient + accent hues are unchanged (they already match the
     new brand); only surfaces, ink, borders, and shadows go dark. */
  --bg:#0f0818;
  --bg2:#160b24;
  --ink:#f4eefb;
  --ink-soft:#c3b3d6;
  --lav:#D7B8F1;
  --lav-bg:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.085);
  --shadow:0 30px 80px rgba(130,0,255,.40);
  --shadow-sm:0 12px 34px rgba(130,0,255,.22);
  --shadow-ui:0 24px 60px rgba(130,0,255,.35);
  background:var(--bg);
  color:var(--ink);
}
/* Ambient background glows behind the whole page */
body.page-template-template-blank::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 520px at -6% -12%, rgba(130,0,255,.38), transparent 62%),
    radial-gradient(460px 460px at 106% 16%, rgba(30,195,250,.20), transparent 60%),
    radial-gradient(560px 560px at -8% 92%, rgba(221,0,255,.16), transparent 62%);
  filter:blur(20px);
}

/* Headings + body text --------------------------------------------------- */
body.page-template-template-blank h1,
body.page-template-template-blank h2,
body.page-template-template-blank h3,
body.page-template-template-blank h4{color:#fff}
body.page-template-template-blank .hero p.sub,
body.page-template-template-blank .phero p,
body.page-template-template-blank .sec-head p,
body.page-template-template-blank .fcard p,
body.page-template-template-blank .show .copy p,
body.page-template-template-blank .prod2 li,
body.page-template-template-blank .step p,
body.page-template-template-blank .pcard li,
body.page-template-template-blank .pfree li,
body.page-template-template-blank .tcard p,
body.page-template-template-blank .faq .q p,
body.page-template-template-blank .final p,
body.page-template-template-blank .intcard p,
body.page-template-template-blank .demo-points li,
body.page-template-template-blank .legal p,
body.page-template-template-blank .legal li{color:var(--ink)}

/* Eyebrow chip ----------------------------------------------------------- */
body.page-template-template-blank .eyebrow{
  color:var(--lav);background:var(--surface);border:1px solid var(--line)}

/* Buttons ---------------------------------------------------------------- */
body.page-template-template-blank .btn-ghost{
  background:var(--surface-2);color:#fff;border:1.5px solid var(--line)}
body.page-template-template-blank .btn-ghost:hover{
  border-color:rgba(255,255,255,.42);color:#fff}

/* NAV -------------------------------------------------------------------- */
body.page-template-template-blank header.nav{
  background:rgba(15,8,24,.72);border-bottom:1px solid var(--line)}
body.page-template-template-blank .nav img{filter:brightness(0) invert(1)}
body.page-template-template-blank .nav-links a,
body.page-template-template-blank .nav-dd-toggle{color:var(--ink-soft)}
body.page-template-template-blank .nav-links a:hover,
body.page-template-template-blank .nav-links a.active,
body.page-template-template-blank .nav-dd-toggle:hover,
body.page-template-template-blank .nav-dd-toggle:focus,
body.page-template-template-blank .nav-dd-toggle.is-active{color:#fff}
body.page-template-template-blank .nav-login{color:#fff}
/* account + products dropdown menus */
body.page-template-template-blank .nav-account-toggle{
  color:#fff !important;background:var(--surface-2) !important;border-color:var(--line)}
body.page-template-template-blank .nav-account-toggle:hover{
  background:var(--surface-2) !important;color:#fff !important;border-color:rgba(255,255,255,.4)}
body.page-template-template-blank .nav-account-menu,
body.page-template-template-blank .nav-dd-menu{
  background:#1b1130;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.5)}
body.page-template-template-blank .nav-account-menu a,
body.page-template-template-blank .nav-dd-menu a{color:var(--ink)}
body.page-template-template-blank .nav-account-menu a:hover,
body.page-template-template-blank .nav-dd-menu a:hover,
body.page-template-template-blank .nav-dd-menu a.active{background:var(--surface-2);color:#fff}
body.page-template-template-blank .nav-account-menu .nav-account-logout{
  border-top:1px solid var(--line);color:var(--ink-soft)}
/* mobile nav */
body.page-template-template-blank .nav-hamburger{color:#fff}
body.page-template-template-blank .mobile-menu{background:#160b24}
body.page-template-template-blank .mobile-menu a{color:var(--ink);border-bottom:1px solid var(--line)}
body.page-template-template-blank .mobile-menu a:hover,
body.page-template-template-blank .mobile-menu .nav-login{color:#fff}
@media(max-width:880px){
  body.page-template-template-blank header.nav{background:rgba(15,8,24,.94)}
}

/* Trust strip ------------------------------------------------------------ */
body.page-template-template-blank .trust-inner{color:var(--ink-soft)}
body.page-template-template-blank .trust-inner b{color:#fff}
body.page-template-template-blank .trust-dot{background:var(--purple)}

/* Generic card surfaces (was #fff) --------------------------------------- */
body.page-template-template-blank .pain,
body.page-template-template-blank .fcard,
body.page-template-template-blank .step,
body.page-template-template-blank .pcard,
body.page-template-template-blank .pfree,
body.page-template-template-blank .prod2 .visual,
body.page-template-template-blank .two-products .pc2,
body.page-template-template-blank .tcard,
body.page-template-template-blank .ichip,
body.page-template-template-blank .intcard,
body.page-template-template-blank .getbox,
body.page-template-template-blank .final,
body.page-template-template-blank .faq .q,
body.page-template-template-blank .demo-card,
body.page-template-template-blank .kb-cat,
body.page-template-template-blank .kb-cta{
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
body.page-template-template-blank .pcard.pop{border:2px solid var(--purple);box-shadow:var(--shadow)}
body.page-template-template-blank .fcard:hover,
body.page-template-template-blank .kb-cat:hover{box-shadow:var(--shadow)}

/* stat numbers become gradient */
body.page-template-template-blank .stat .n{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.page-template-template-blank .stat .l{color:var(--ink-soft)}

/* feature-card icon tile */
body.page-template-template-blank .fcard .ic{background:var(--surface-2);border:1px solid var(--line)}
body.page-template-template-blank .fcard .ic svg{stroke:var(--lav)}

/* pricing details */
body.page-template-template-blank .pcard .pprice,
body.page-template-template-blank .pfree .pprice{color:#fff}
body.page-template-template-blank .pcard .pcount,
body.page-template-template-blank .pcard .pper,
body.page-template-template-blank .pcard .pprice span,
body.page-template-template-blank .pfree .pcount,
body.page-template-template-blank .pfree .pprice span,
body.page-template-template-blank .price-note{color:var(--ink-soft)}
body.page-template-template-blank .pcard li .ck,
body.page-template-template-blank .pfree li .ck{color:var(--magenta)}
body.page-template-template-blank .pcard li,
body.page-template-template-blank .pfree li{color:var(--ink)}

/* HOW IT WORKS band -> glass instead of pale lavender */
body.page-template-template-blank .how{background:var(--surface);border:1px solid var(--line)}

/* SHOWCASE tags */
body.page-template-template-blank .show .copy .tag{color:var(--lav)}

/* PRODUCT TWO (automation) sms mock */
body.page-template-template-blank .bubble.in{background:var(--surface-2);color:var(--ink)}
body.page-template-template-blank .prod2 li .ck{background:var(--surface-2);color:var(--lav)}

/* GET / DOWNLOAD steps panel */
body.page-template-template-blank .getbox p,
body.page-template-template-blank .getbox .platforms{color:var(--ink-soft)}
body.page-template-template-blank .getsteps{background:var(--surface-2);border:1px solid var(--line)}
body.page-template-template-blank .getsteps .gs .d b{color:#fff}

/* Integrations chips */
body.page-template-template-blank .ichip{color:var(--ink-soft)}
body.page-template-template-blank .ichip.on{color:#fff;border-color:rgba(221,0,255,.4)}
body.page-template-template-blank .intcard .logo{color:var(--lav)}

/* TESTIMONIALS */
body.page-template-template-blank .tcard p{color:var(--ink)}
body.page-template-template-blank .tcard .who .ro{color:var(--ink-soft)}

/* FAQ / legal / demo accents */
body.page-template-template-blank .faq .q h4{color:#fff}
body.page-template-template-blank .legal h2{color:#fff}
body.page-template-template-blank .legal h3,
body.page-template-template-blank .legal a,
body.page-template-template-blank .kb-crumb a,
body.page-template-template-blank .kb-r-cat,
body.page-template-template-blank .kb-body a{color:var(--lav)}
body.page-template-template-blank .legal .eff b,
body.page-template-template-blank .legal .eff{color:var(--ink-soft)}
body.page-template-template-blank .demo-points li .ck{color:var(--lav)}
body.page-template-template-blank .demo-card h3{color:#fff}
body.page-template-template-blank .demo-card .sub2{color:var(--ink-soft)}
body.page-template-template-blank .demo-card label,
body.page-template-template-blank .demo-card .frm_primary_label{color:var(--ink)}
body.page-template-template-blank .demo-card input[type=text],
body.page-template-template-blank .demo-card input[type=email],
body.page-template-template-blank .demo-card input[type=tel],
body.page-template-template-blank .demo-card input[type=number],
body.page-template-template-blank .demo-card select,
body.page-template-template-blank .demo-card textarea{
  background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink)}
body.page-template-template-blank .demo-card input:focus,
body.page-template-template-blank .demo-card select:focus,
body.page-template-template-blank .demo-card textarea:focus{border-color:var(--purple)}

/* KNOWLEDGE BASE dark surfaces */
body.page-template-template-blank .kb-q,
body.page-template-template-blank .kb-results{
  background:#1b1130;border:1px solid var(--line);color:var(--ink)}
body.page-template-template-blank .kb-q:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(180,61,197,.25)}
body.page-template-template-blank .kb-results a{color:var(--ink);border-bottom:1px solid var(--line)}
body.page-template-template-blank .kb-results a:hover,
body.page-template-template-blank .kb-results a.active{background:var(--surface-2)}
body.page-template-template-blank .kb-cat-name,
body.page-template-template-blank .kb-list-t{color:var(--ink)}
body.page-template-template-blank .kb-cat-count,
body.page-template-template-blank .kb-list-x,
body.page-template-template-blank .kb-loading,
body.page-template-template-blank .kb-r-x,
body.page-template-template-blank .kb-cta p{color:var(--ink-soft)}
body.page-template-template-blank .kb-list li,
body.page-template-template-blank .kb-list a{border-bottom-color:var(--line)}
body.page-template-template-blank .kb-list a:hover .kb-list-t{color:var(--lav)}
body.page-template-template-blank .kb-body p,
body.page-template-template-blank .kb-body ul,
body.page-template-template-blank .kb-body ol{color:var(--ink)}
body.page-template-template-blank .kb-body code{background:var(--surface-2);color:var(--lav)}
body.page-template-template-blank .kb-helpful{background:var(--surface-2)}

/* The product UI mockups (browser / checkout / filters) stay light on
   purpose — they represent a guest's own booking site, which is a light
   product. Only lift them off the dark bg with a soft frame + glow so they
   read as inset screenshots rather than clashing white blocks. */
body.page-template-template-blank .browser{
  box-shadow:0 30px 80px rgba(130,0,255,.45);border:1px solid var(--line)}

/* Footer already dark (#1c1322); nudge it to match the new bg family */
body.page-template-template-blank footer{background:#160b24}

/* ---- Dark-theme refinements (round 2) ------------------------------------
   Feedback: the eyebrow chips inside the two-product section read too heavy,
   and the full-gradient .band blocks are too loud. Soften both. */

/* Eyebrow labels that sit INSIDE product cards -> plain lavender text
   (no pill/border), matching the reference .pcard2 .tag treatment. */
body.page-template-template-blank .two-products .pc2 > .eyebrow{
  background:transparent;border:0;padding:0;margin-bottom:12px;color:var(--lav)}

/* Full-gradient bands -> dark glass panel with a thin gradient edge + soft
   inner glow, so the gradient stays an accent instead of a saturated block.
   (.band = "Own the whole stay." on pricing, platform band on home.) */
body.page-template-template-blank .band{
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(221,0,255,.18), transparent 62%),
    #160b24;
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:var(--shadow);
}
body.page-template-template-blank .band h2{color:#fff}
body.page-template-template-blank .band p{color:var(--ink)}
/* nested product cards inside the band */
body.page-template-template-blank .band .pc2{
  background:var(--surface-2);border:1px solid var(--line)}
body.page-template-template-blank .band .pc2 h4{color:#fff}
body.page-template-template-blank .band .pc2 p{color:var(--ink)}
/* the band's ghost button was tuned for a gradient bg; retune for dark glass */
body.page-template-template-blank .band .btn-ghost{
  background:var(--surface-2);color:#fff;border-color:var(--line)}

/* ---- Dark-theme refinements (round 3) ------------------------------------
   The product UI mockups (.browser) stay light on purpose, but text inside
   them that relies on inherited color was picking up the dark-theme's light
   --ink, turning dark labels invisible on the white mock (e.g. the "Connect
   your PMS" rows on /integrations/). Force a dark default ink inside light
   mocks; elements that set their own color (status text, gradients) keep it. */
body.page-template-template-blank .browser{color:#3c4145}
body.page-template-template-blank .browser b,
body.page-template-template-blank .browser strong{color:#241a2b}

/* ============================================================ DARK THEME — PHASE 2
   Member area: account dashboard + login / register / forgot / reset.
   These use the shared marketing chrome (.nav/.btn/.phero) plus the
   .gls-dash-* dashboard classes, under body.page-template-page-member-*.
   Re-point tokens + dark surfaces, mirroring the marketing layer. */
body.page-template-page-member-account,
body.page-template-page-member-login,
body.page-template-page-member-register,
body.page-template-page-member-forgot,
body.page-template-page-member-reset,
body.page-template-page-purchase-success{
  --bg:#0f0818;
  --bg2:#160b24;
  --ink:#f4eefb;
  --ink-soft:#c3b3d6;
  --lav:#D7B8F1;
  --lav-bg:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.085);
  --shadow:0 30px 80px rgba(130,0,255,.40);
  --shadow-sm:0 12px 34px rgba(130,0,255,.22);
  background:var(--bg);
  color:var(--ink);
}
/* ambient glows */
body.page-template-page-member-account::before,
body.page-template-page-member-login::before,
body.page-template-page-member-register::before,
body.page-template-page-member-forgot::before,
body.page-template-page-member-reset::before,
body.page-template-page-purchase-success::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 520px at -6% -12%, rgba(130,0,255,.35), transparent 62%),
    radial-gradient(460px 460px at 106% 16%, rgba(30,195,250,.18), transparent 60%);
  filter:blur(20px);
}
/* Scope everything below to the member templates via a shared prefix list. */
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) h1,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) h2,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) h3,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) h4{color:#fff}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .phero p,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-hint,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-stat-label{color:var(--ink-soft)}

/* Nav (identical to marketing) */
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) header.nav{
  background:rgba(15,8,24,.72);border-bottom:1px solid var(--line)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav img{filter:brightness(0) invert(1)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-links a{color:var(--ink-soft)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-links a:hover{color:#fff}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-login{color:#fff}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-account-toggle{
  color:#fff !important;background:var(--surface-2) !important;border-color:var(--line)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-account-toggle:hover{
  background:var(--surface-2) !important;color:#fff !important;border-color:rgba(255,255,255,.4)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-account-menu{
  background:#1b1130;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.5)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-account-menu a{color:var(--ink)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-account-menu a:hover{background:var(--surface-2);color:#fff}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-account-menu .nav-account-logout{
  border-top:1px solid var(--line);color:var(--ink-soft)}
/* Products dropdown. Built by JS (functions.php) and added after this dark layer
   was written, so it was never included here and fell through to the base
   .nav-dd-menu{background:#fff} — a white card with pale-lavender links on the
   dark member pages. Mirrors the .nav-account-menu treatment above. */
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-dd-toggle{color:var(--ink-soft)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-dd-toggle:hover,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-dd-toggle:focus,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-dd-toggle.is-active{color:#fff}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-dd-menu{
  background:#1b1130;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.5)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-dd-menu a{color:var(--ink)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-dd-menu a:hover,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-dd-menu a.active{
  background:var(--surface-2);color:#fff}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .btn-ghost{
  background:var(--surface-2);color:#fff;border:1.5px solid var(--line)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .btn-ghost:hover{border-color:rgba(255,255,255,.42)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .mobile-menu{background:#160b24}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .mobile-menu a{color:var(--ink);border-bottom:1px solid var(--line)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .nav-hamburger{color:#fff}
@media(max-width:880px){
  body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) header.nav{background:rgba(15,8,24,.94)}
}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .eyebrow{
  color:var(--lav);background:var(--surface);border:1px solid var(--line)}

/* ---- Dashboard body (.gls-dash-*) — override the hardcoded light values --- */
/* side nav links */
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-dash-nav nav a{color:var(--ink)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-dash-nav nav a.active,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-dash-nav nav a:hover{
  background:var(--surface-2);color:#fff}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-logout{color:var(--ink-soft)}
/* main panel (was #fff) */
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-dash-main{
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
/* stat cards */
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-stat{
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-stat-value{color:#fff}
/* labels + inputs */
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-label{color:var(--ink)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-input,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-inline input,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-inline select{
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-input:focus,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-inline input:focus,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-inline select:focus{
  outline:none;border-color:var(--purple)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-input::placeholder{color:var(--ink-soft)}
/* tables */
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-table th,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-table td{
  border-bottom:1px solid var(--line);color:var(--ink)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-table code{
  background:var(--surface-2);color:var(--lav)}
/* messages already use var(--coral-dk)/green which read fine on dark */

/* ============================================================ DARK THEME — SUPPORT
   The Support page (page-support.php) and the Support TAB inside the account
   dashboard both render GLS_Support::render_body() with hardcoded light inputs
   /tables. The dashboard tab is already covered by the member selector; the
   standalone /support/ page needs the token remap + chrome too. */
body.page-template-page-support{
  --bg:#0f0818;--bg2:#160b24;--ink:#f4eefb;--ink-soft:#c3b3d6;--lav:#D7B8F1;
  --lav-bg:rgba(255,255,255,.06);--line:rgba(255,255,255,.12);
  --surface:rgba(255,255,255,.05);--surface-2:rgba(255,255,255,.085);
  --shadow:0 30px 80px rgba(130,0,255,.40);--shadow-sm:0 12px 34px rgba(130,0,255,.22);
  background:var(--bg);color:var(--ink);
}
body.page-template-page-support::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px 520px at -6% -12%, rgba(130,0,255,.35), transparent 62%),
            radial-gradient(460px 460px at 106% 16%, rgba(30,195,250,.18), transparent 60%);
  filter:blur(20px);
}
body.page-template-page-support h1,
body.page-template-page-support h2,
body.page-template-page-support h3,
body.page-template-page-support h4{color:#fff}
body.page-template-page-support .phero p{color:var(--ink-soft)}
body.page-template-page-support header.nav{background:rgba(15,8,24,.72);border-bottom:1px solid var(--line)}
body.page-template-page-support .nav img{filter:brightness(0) invert(1)}
body.page-template-page-support .nav-links a{color:var(--ink-soft)}
body.page-template-page-support .nav-links a:hover{color:#fff}
body.page-template-page-support .nav-login{color:#fff}
body.page-template-page-support .btn-ghost{background:var(--surface-2);color:#fff;border:1.5px solid var(--line)}
body.page-template-page-support .eyebrow{color:var(--lav);background:var(--surface);border:1px solid var(--line)}

/* ---- Support form + ticket list (.gls-support) — dark overrides ---------
   Scoped to both the standalone support page AND the member dashboard tab. */
body.page-template-page-support .gls-support .gls-kb-deflect,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .gls-kb-deflect{
  background:var(--surface-2);border:1px solid var(--line)}
body.page-template-page-support .gls-support .gls-label,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .gls-label{color:var(--ink)}
/* inputs + textarea + select (was #fff / #e3e5e9) */
body.page-template-page-support .gls-support .gls-input,
body.page-template-page-support .gls-support textarea,
body.page-template-page-support .gls-support select,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .gls-input,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support textarea,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support select{
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
body.page-template-page-support .gls-support .gls-input:focus,
body.page-template-page-support .gls-support textarea:focus,
body.page-template-page-support .gls-support select:focus,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .gls-input:focus,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support textarea:focus,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support select:focus{
  outline:none;border-color:var(--purple)}
body.page-template-page-support .gls-support .gls-input::placeholder,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .gls-input::placeholder{color:var(--ink-soft)}
/* file input label text */
body.page-template-page-support .gls-support input[type=file],
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support input[type=file]{color:var(--ink-soft)}
/* tables + ticket reply rows (was #eef0f2 borders / #f8fafc bg) */
body.page-template-page-support .gls-support .gls-table th,
body.page-template-page-support .gls-support .gls-table td,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .gls-table th,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .gls-table td{
  border-bottom:1px solid var(--line);color:var(--ink)}
body.page-template-page-support .gls-support .gls-ticket-reply td,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .gls-ticket-reply td{
  background:var(--surface);color:var(--ink-soft)}
body.page-template-page-support .gls-support .gls-hint,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .gls-hint{color:var(--ink-soft)}

/* The support ticket form is wrapped in a .pcard (white by default). The
   marketing dark layer only darkened .pcard on blank-template pages, so on
   the support page / account tab it stayed white. Darken it here. Also covers
   any other .pcard used inside the member/support chrome (e.g. stat cards use
   .pcard gls-stat — already handled, but this keeps generic .pcard consistent). */
body.page-template-page-support .pcard,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .pcard,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-dash-main .pcard{
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
body.page-template-page-support .pcard h3,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support .pcard h3{color:#fff}
/* file input button chrome reads OK, but tint its text label */
body.page-template-page-support .gls-support input[type=file]::-webkit-file-upload-button,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-support input[type=file]::-webkit-file-upload-button{
  background:var(--surface-2);color:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}

/* Member auth pages (login/register/forgot/reset) wrap their form in a bare
   .pcard (white by default). The marketing dark layer only darkened .pcard on
   blank-template pages, so the auth card stayed white. Darken it + the auth
   form fields/labels/links here. Scoped to the member templates. */
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .pcard{
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}

/* license key value + plan line on the branded purchase-success card were
   left with the light-theme near-black .pprice color (#241a2b), so on the
   dark card the key rendered dark-on-dark and unreadable. Mirror the blank-
   template dark pricing treatment for the purchase-success AND member
   account pages (e.g. the "from $8" Pro upsell card). */
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .pcard .pprice{color:#fff}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .pcard .pprice span,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .pcard .pper,
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .pcard .pcount{color:var(--ink-soft)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .pcard li{color:var(--ink)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .pcard li .ck{color:var(--magenta)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .pcard strong{color:#fff}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-auth-form .gls-label{color:var(--ink)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-auth-form .gls-input{
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-auth-form .gls-input:focus{
  outline:none;border-color:var(--purple)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-auth-form .gls-input::placeholder{color:var(--ink-soft)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-auth-links a{color:var(--lav)}
body:is([class*="page-template-page-member-"],.page-template-page-purchase-success) .gls-auth-links span{color:var(--ink-soft)}

/* ============================================================ DARK THEME — CLEANER INVITE
   The ECA cleaner/vendor invite page (/cleaner-invite/{uuid}/{token}/). It is
   rendered by the plugin, not by a page template, so it opts into the marketing
   chrome via the `ghc_is_marketing_page` filter and carries body.cleaner-form-page.
   Markup reuses the marketing vocabulary (header.nav / .wrap / .btn / footer);
   the rules below dress the form itself in the Bold-Signature dark palette.
   The plugin's own admin/css/cleaner-invite-form.css no longer loads on this
   page — everything the public invite needs lives here.
   ------------------------------------------------------------ */
body.cleaner-form-page{
  --bg:#0f0818;
  --bg2:#160b24;
  --ink:#f4eefb;
  --ink-soft:#c3b3d6;
  --lav:#D7B8F1;
  --lav-bg:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.085);
  --shadow:0 30px 80px rgba(130,0,255,.40);
  --shadow-sm:0 12px 34px rgba(130,0,255,.22);
  background:var(--bg);
  color:var(--ink);
  /* Deliberately NOT display:flex/grid. Turning the body into a flex or grid
     container re-parents header.nav's position:sticky containment to that box,
     so the header scrolls away with the content and strands itself mid-page.
     Body stays in normal flow; .ci-page's min-height pushes the footer down
     on short viewports instead. */
}
/* 100vh minus the 74px nav, so the footer sits at the bottom of the fold even
   when the form is short (e.g. the success state) — without touching sticky. */
body.cleaner-form-page .ci-page{min-height:calc(100vh - 74px)}
body.cleaner-form-page::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 520px at -6% -12%, rgba(130,0,255,.35), transparent 62%),
    radial-gradient(460px 460px at 106% 16%, rgba(30,195,250,.18), transparent 60%);
  filter:blur(20px);
}
body.cleaner-form-page h1,
body.cleaner-form-page h2,
body.cleaner-form-page h3,
body.cleaner-form-page h4{color:#fff}

/* Nav — mirrors the member/marketing treatment ---------------------------- */
body.cleaner-form-page header.nav{
  background:rgba(15,8,24,.72);border-bottom:1px solid var(--line)}
body.cleaner-form-page .nav img{filter:brightness(0) invert(1)}
body.cleaner-form-page .nav-links a{color:var(--ink-soft)}
body.cleaner-form-page .nav-links a:hover{color:#fff}
body.cleaner-form-page .nav-login{color:#fff}
body.cleaner-form-page .nav-dd-toggle{color:var(--ink-soft)}
body.cleaner-form-page .nav-dd-toggle:hover,
body.cleaner-form-page .nav-dd-toggle:focus,
body.cleaner-form-page .nav-dd-toggle.is-active{color:#fff}
body.cleaner-form-page .nav-dd-menu{
  background:#1b1130;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.5)}
body.cleaner-form-page .nav-dd-menu a{color:var(--ink)}
body.cleaner-form-page .nav-dd-menu a:hover{background:var(--surface-2);color:#fff}
body.cleaner-form-page .nav-account-toggle{
  color:#fff !important;background:var(--surface-2) !important;border-color:var(--line)}
body.cleaner-form-page .nav-account-menu{
  background:#1b1130;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.5)}
body.cleaner-form-page .nav-account-menu a{color:var(--ink)}
body.cleaner-form-page .nav-account-menu a:hover{background:var(--surface-2);color:#fff}
body.cleaner-form-page .nav-hamburger{color:#fff}
body.cleaner-form-page .mobile-menu{background:#160b24;border-top:1px solid var(--line)}
body.cleaner-form-page .mobile-menu a{color:var(--ink);border-bottom:1px solid var(--line)}

/* Page shell -------------------------------------------------------------- */
.ci-page{padding:38px 0 72px}
.ci-shell{max-width:760px;margin:0 auto;padding:0 24px}

/* Hero: property image with a dark scrim + the invite context ------------- */
.ci-hero{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);margin-bottom:26px;
  background:var(--bg2);
}
.ci-hero-img{width:100%;height:230px;object-fit:cover;display:block;opacity:.55}
.ci-hero-noimg{height:130px}
.ci-hero-body{
  position:absolute;inset:auto 0 0 0;padding:26px 28px;
  background:linear-gradient(180deg,rgba(15,8,24,0) 0%,rgba(15,8,24,.86) 58%,rgba(15,8,24,.96) 100%);
}
.ci-hero-noimg .ci-hero-body{position:static;background:none;padding:26px 28px}
.ci-hero h1{font-size:clamp(24px,3.2vw,32px);margin:0;color:#fff}
.ci-hero .ci-addr{font-size:14.5px;color:var(--ink-soft);margin-top:6px}

.ci-head{text-align:center;margin-bottom:30px}
.ci-head h2{font-size:clamp(26px,3.4vw,36px);margin:0}
.ci-head p{font-size:16.5px;color:var(--ink-soft);margin-top:10px}

/* Cards ------------------------------------------------------------------- */
.ci-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;margin-bottom:20px;backdrop-filter:blur(8px);
}
.ci-card-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.ci-card-head h3{font-size:18px;margin:0}
.ci-ico{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;
}
.ci-note{font-size:14.5px;color:var(--ink-soft);margin-bottom:14px}
.ci-note strong{color:#fff}

/* Fields ------------------------------------------------------------------ */
.ci-field{margin-bottom:18px}
.ci-field:last-child{margin-bottom:0}
.ci-label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:7px}
.ci-label .req{color:var(--coral)}
.ci-input{
  width:100%;padding:13px 15px;border-radius:12px;font-size:15px;font-family:inherit;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);
  transition:border-color .15s ease,background .15s ease;
}
.ci-input:focus{outline:none;border-color:var(--purple);background:rgba(255,255,255,.07)}
.ci-input::placeholder{color:#8d7fa2}
.ci-input:read-only{background:rgba(255,255,255,.02);color:var(--ink-soft);cursor:not-allowed}
.ci-help{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.ci-err{display:block;font-size:12.5px;color:var(--coral);margin-top:6px}

/* Consent + radio choices -------------------------------------------------- */
.ci-check{
  display:flex;gap:12px;align-items:flex-start;padding:15px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);cursor:pointer;
}
.ci-check:hover{border-color:rgba(255,255,255,.24)}
.ci-check input[type=checkbox]{
  width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--purple);cursor:pointer}
.ci-check-text{font-size:13.5px;color:var(--ink-soft);line-height:1.55}

.ci-opt{display:block;position:relative;margin-bottom:10px;cursor:pointer}
.ci-opt:last-child{margin-bottom:0}
.ci-opt input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.ci-opt-body{
  display:block;
  padding:15px 16px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);transition:border-color .15s ease,background .15s ease;
}
.ci-opt:hover .ci-opt-body{border-color:rgba(255,255,255,.26)}
.ci-opt input[type=radio]:checked + .ci-opt-body{
  border-color:var(--purple);background:rgba(180,61,197,.13);box-shadow:0 0 0 1px var(--purple) inset}
.ci-opt input[type=radio]:focus-visible + .ci-opt-body{outline:2px solid var(--cyan);outline-offset:2px}
/* title/desc are <span>s — force block so they stack instead of running together
   on one line (which also collapsed the option boxes into an overlap). */
.ci-opt-title{display:block;font-weight:600;font-size:15px;color:#fff}
.ci-opt-desc{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:3px}

/* Legal + info list -------------------------------------------------------- */
.ci-legal{margin-top:12px;font-size:13px;color:var(--ink-soft);text-align:center}
.ci-legal a{color:var(--lav);text-decoration:underline}
.ci-steps{list-style:none;counter-reset:s;margin:0;padding:0}
.ci-steps li{
  counter-increment:s;position:relative;padding-left:34px;margin-bottom:11px;
  font-size:14.5px;color:var(--ink-soft)}
.ci-steps li:last-child{margin-bottom:0}
.ci-steps li::before{
  content:counter(s);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);color:var(--lav);
  font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Stripe sub-panel --------------------------------------------------------- */
.ci-stripe-detail{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.ci-stripe-detail h5{font-size:14px;color:#fff;margin-bottom:9px;font-family:'Space Grotesk',sans-serif}
.ci-stripe-detail ul{list-style:none;margin:0 0 14px;padding:0}
.ci-stripe-detail li{font-size:13.5px;color:var(--ink-soft);padding-left:18px;position:relative;margin-bottom:6px}
.ci-stripe-detail li::before{content:"·";position:absolute;left:6px;color:var(--lav);font-weight:700}
.ci-status{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft);margin-top:12px}
.ci-status .ci-status-ico{font-size:18px}

/* Actions ------------------------------------------------------------------ */
.ci-actions{text-align:center;margin-top:26px}
.ci-actions .btn{width:100%;max-width:340px}
.ci-actions .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.ci-fine{margin-top:14px;font-size:13px;color:var(--ink-soft)}

/* Loading / success / error states ----------------------------------------- */
.ci-loading{text-align:center;padding:56px 0;color:var(--ink-soft)}
.ci-spinner{
  width:34px;height:34px;margin:0 auto 14px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--purple);animation:ci-spin .8s linear infinite}
@keyframes ci-spin{to{transform:rotate(360deg)}}
.ci-state{text-align:center;padding:40px 24px}
.ci-state-ico{font-size:44px;margin-bottom:14px}
.ci-state h3{font-size:24px;margin-bottom:10px}
.ci-state p{color:var(--ink-soft);font-size:15.5px}
.ci-state-detail{
  text-align:left;margin-top:22px;padding:20px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line)}
.ci-state-detail h4{font-size:15px;margin-bottom:12px}
.ci-state-detail ul{list-style:none;margin:0;padding:0}
.ci-state-detail li{
  font-size:14px;color:var(--ink-soft);padding-left:20px;position:relative;margin-bottom:8px}
.ci-state-detail li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:700}

@media(max-width:640px){
  .ci-page{padding:24px 0 48px}
  .ci-shell{padding:0 16px}
  .ci-card{padding:20px 17px}
  .ci-hero-img{height:170px}
  .ci-hero-body{padding:20px}
  .ci-actions .btn{max-width:none}
}

/* GeneratePress prints an inline <style> with
   input[type="text"],input[type="email"],…{background-color:var(--base-2);color:var(--contrast)}
   — specificity (0,1,1), which outranks a bare .ci-input (0,1,0) no matter the
   source order, repainting our dark fields white. Match its shape so we win on
   the same footing instead of reaching for !important. */
body.cleaner-form-page input[type="text"].ci-input,
body.cleaner-form-page input[type="email"].ci-input,
body.cleaner-form-page input[type="tel"].ci-input{
  background-color:rgba(255,255,255,.04);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 15px;
}
body.cleaner-form-page input[type="text"].ci-input:focus,
body.cleaner-form-page input[type="email"].ci-input:focus,
body.cleaner-form-page input[type="tel"].ci-input:focus,
/* textarea.ci-input needs its own focus rule: GeneratePress prints
   `textarea:focus{color:var(--contrast)}` (dark) which, unlike the typed input
   selectors above, the bare `.ci-input:focus` can't out-specify — so the note
   field's text went dark-on-dark (invisible) only while focused. */
body.cleaner-form-page textarea.ci-input:focus{
  background-color:rgba(255,255,255,.07);
  color:var(--ink);
  border-color:var(--purple);
}
body.cleaner-form-page input[type="email"].ci-input:read-only{
  background-color:rgba(255,255,255,.02);
  color:var(--ink-soft);
}

/* Multi-property invite: the list of every property the invite covers. One
   invite carries a primary property_id + additional_property_ids, and
   registration assigns the cleaner to all of them — so show all of them. */
body.cleaner-form-page .ci-head-multi{margin-bottom:24px}
body.cleaner-form-page .ci-prop-list{list-style:none;margin:0;padding:0}
/* A host with a big portfolio can invite a cleaner to dozens of properties (the
   largest today is 32), which would otherwise push the form itself thousands of
   pixels down the page. Past a threshold the list becomes its own scroll area
   — ~6 rows tall — so the page length stays constant no matter the count.
   .is-scrollable is added by the template only when it's actually needed, so
   short lists render with no scrollbar and no fade. */
body.cleaner-form-page .ci-prop-list.is-scrollable{
  max-height:460px;
  overflow-y:auto;
  overscroll-behavior:contain;      /* don't chain the scroll to the page at the ends */
  -webkit-overflow-scrolling:touch;
  padding-right:10px;               /* keep rows clear of the scrollbar */
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
body.cleaner-form-page .ci-prop-list.is-scrollable::-webkit-scrollbar{width:8px}
body.cleaner-form-page .ci-prop-list.is-scrollable::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);border-radius:99px}
body.cleaner-form-page .ci-prop-list.is-scrollable::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);border-radius:99px}
body.cleaner-form-page .ci-prop-list.is-scrollable::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.34)}
/* Fade the bottom edge so it reads as "there's more below". The wrapper is
   position:relative and the fade sits above the list but ignores pointer
   events, so it never blocks scrolling. It hides itself once you reach the
   end (JS toggles .is-at-end). */
body.cleaner-form-page .ci-prop-scroll{position:relative}
body.cleaner-form-page .ci-prop-scroll::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:56px;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,11,36,0) 0%,rgba(22,11,36,.92) 100%);
  border-radius:0 0 12px 12px;
  opacity:1;transition:opacity .18s ease}
body.cleaner-form-page .ci-prop-scroll.is-at-end::after{opacity:0}
body.cleaner-form-page .ci-prop-count{
  margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-soft);
  background:var(--surface-2);border:1px solid var(--line);
  padding:4px 11px;border-radius:999px;white-space:nowrap}
@media(max-width:640px){
  body.cleaner-form-page .ci-prop-list.is-scrollable{max-height:360px}
}
body.cleaner-form-page .ci-prop{
  display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line)}
body.cleaner-form-page .ci-prop:last-child{border-bottom:0;padding-bottom:0}
body.cleaner-form-page .ci-prop:first-child{padding-top:0}
body.cleaner-form-page .ci-prop-thumb{
  width:56px;height:56px;flex:0 0 56px;border-radius:11px;object-fit:cover;
  border:1px solid var(--line);background:var(--surface-2)}
body.cleaner-form-page .ci-prop-thumb-empty{
  display:flex;align-items:center;justify-content:center;font-size:22px}
body.cleaner-form-page .ci-prop-text{display:flex;flex-direction:column;min-width:0;flex:1}
body.cleaner-form-page .ci-prop-name{
  font-weight:600;font-size:15.5px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.cleaner-form-page .ci-prop-addr{
  font-size:13px;color:var(--ink-soft);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Badge marking a property that shares request fees with its cleaners. */
body.cleaner-form-page .ci-prop-pay{
  flex:0 0 auto;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;
  color:#fff;background:var(--grad);letter-spacing:.02em}
/* Caption under the property list explaining the % badge. */
body.cleaner-form-page .ci-prop-legend{
  display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);line-height:1.5}
body.cleaner-form-page .ci-prop-legend .ci-prop-pay{font-size:11.5px;padding:3px 9px}
@media(max-width:640px){
  body.cleaner-form-page .ci-prop-thumb{width:46px;height:46px;flex-basis:46px}
  body.cleaner-form-page .ci-prop-name{font-size:14.5px}
}

/* ========================================================================
   Stripe-completion page + referral box/modal (dark)
   ===================================================================== */
body.cleaner-form-page .ci-shell-narrow{max-width:560px}

/* Shared buttons for completion + referral. */
body.cleaner-form-page .ci-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:600;font-size:15px;line-height:1;cursor:pointer;
  padding:13px 22px;border-radius:12px;border:1px solid transparent;text-decoration:none;
  transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease}
body.cleaner-form-page .ci-btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px rgba(180,61,197,.30)}
body.cleaner-form-page .ci-btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 38px rgba(180,61,197,.42)}
body.cleaner-form-page .ci-btn-primary:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
body.cleaner-form-page .ci-btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line)}
body.cleaner-form-page .ci-btn-ghost:hover{border-color:rgba(255,255,255,.30);color:#fff}
body.cleaner-form-page .ci-actions-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* Step indicator + progress bar */
body.cleaner-form-page .ci-steps-top{text-align:center;margin-bottom:22px}
body.cleaner-form-page .step-indicator{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lav);margin-bottom:12px}
body.cleaner-form-page .progress-bar{
  height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
body.cleaner-form-page .progress-fill{
  height:100%;width:66%;border-radius:999px;background:var(--grad);transition:width .5s ease}

/* Completion states */
body.cleaner-form-page .ci-completion{text-align:center}
body.cleaner-form-page .ci-state{padding:8px 0 4px}
body.cleaner-form-page .ci-state h3{font-size:20px;margin:14px 0 8px}
body.cleaner-form-page .ci-state p{color:var(--ink-soft);font-size:15px;line-height:1.55;margin:0 auto;max-width:420px}
body.cleaner-form-page .ci-state p strong{color:#fff}
body.cleaner-form-page .ci-state-icon{font-size:44px;line-height:1}
body.cleaner-form-page .ci-spinner{
  width:42px;height:42px;margin:6px auto 16px;border-radius:50%;
  border:3px solid rgba(255,255,255,.15);border-top-color:var(--purple);
  animation:ci-spin .8s linear infinite}
@keyframes ci-spin{to{transform:rotate(360deg)}}
body.cleaner-form-page .ci-detail-box{
  text-align:left;margin:22px auto 0;max-width:420px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
body.cleaner-form-page .ci-detail-box h4{font-size:14px;margin:0 0 12px;color:#fff}
body.cleaner-form-page .ci-detail-box ul{list-style:none;margin:0;padding:0}
body.cleaner-form-page .ci-detail-box li{
  position:relative;padding-left:26px;margin-bottom:9px;font-size:14px;color:var(--ink-soft);line-height:1.45}
body.cleaner-form-page .ci-detail-box li:last-child{margin-bottom:0}
body.cleaner-form-page .ci-detail-box li::before{
  content:"✓";position:absolute;left:0;top:0;color:#3ddc84;font-weight:700}

/* Referral box */
body.cleaner-form-page .ci-referral{
  display:flex;align-items:center;gap:18px;text-align:left;
  /* Solid dark interior (NOT --surface, which is 5% white so the gradient bled
     through the whole card and killed text contrast). Gradient shows only as
     the 1.5px border via border-box. Subtle tinted glow behind sits under the
     opaque fill so the copy stays readable. */
  background:
    linear-gradient(#1a1030,#1a1030) padding-box,
    linear-gradient(135deg,#1EC3FA,#B43DC5 55%,#FF5A5F) border-box;
  border:1.5px solid transparent;
  box-shadow:0 14px 40px rgba(180,61,197,.18)}
body.cleaner-form-page .ci-referral-copy{flex:1;min-width:0}
body.cleaner-form-page .ci-referral-copy h3{font-size:18px;margin:0 0 6px;color:#fff}
body.cleaner-form-page .ci-referral-copy p{font-size:13.5px;color:#d9cceb;margin:0;line-height:1.55}
body.cleaner-form-page .ci-referral-copy strong{color:#fff}
body.cleaner-form-page .ci-referral-badge{
  flex:0 0 auto;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:#fff;
  width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--grad);box-shadow:0 10px 26px rgba(180,61,197,.35)}
body.cleaner-form-page .ci-referral-badge-lg{width:72px;height:72px;font-size:24px;margin:0 auto 14px}
@media(max-width:560px){
  body.cleaner-form-page .ci-referral{flex-direction:column;text-align:center}
  body.cleaner-form-page .ci-referral .ci-btn{width:100%}
}

/* Referral modal */
body.cleaner-form-page .ci-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
body.cleaner-form-page .ci-modal[hidden]{display:none}
body.cleaner-form-page .ci-modal-backdrop{position:absolute;inset:0;background:rgba(6,3,12,.72);backdrop-filter:blur(3px)}
body.cleaner-form-page .ci-modal-card{
  position:relative;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;
  background:#160b24;border:1px solid var(--line);border-radius:20px;
  padding:30px 28px;box-shadow:0 40px 100px rgba(0,0,0,.6);text-align:center}
body.cleaner-form-page .ci-modal-card h3{font-size:22px;margin:0 0 8px}
body.cleaner-form-page .ci-modal-lead{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0 0 22px}
body.cleaner-form-page .ci-modal-x{
  position:absolute;top:14px;right:16px;background:none;border:none;color:var(--ink-soft);
  font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px}
body.cleaner-form-page .ci-modal-x:hover{color:#fff;background:rgba(255,255,255,.08)}
body.cleaner-form-page .ci-modal-card form{text-align:left}
body.cleaner-form-page .ci-field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
body.cleaner-form-page .ci-field-row{display:flex;gap:14px}
body.cleaner-form-page .ci-field-row .ci-field{flex:1;min-width:0}
body.cleaner-form-page textarea.ci-input{resize:vertical;min-height:52px}
/* Referral fields are plain text — never masked. Some password managers grab
   generic name/note fields and render input as dots; force visible text and a
   normal system font so glyphs can't fall back to a mask. */
body.cleaner-form-page #referral-form .ci-input{
  -webkit-text-security:none;text-security:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body.cleaner-form-page .ci-opt-tag{font-weight:400;color:var(--ink-soft);font-size:12px}
body.cleaner-form-page .ci-referral-section-label{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lav);
  margin:20px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
body.cleaner-form-page .ci-referral-section-label:first-child{margin-top:0;padding-top:0;border-top:none}
body.cleaner-form-page .ci-referral-error{
  color:#ff8a8a;font-size:13.5px;margin:14px 0 0;background:rgba(255,90,95,.10);
  border:1px solid rgba(255,90,95,.3);border-radius:10px;padding:10px 14px}
body.cleaner-form-page .ci-referral-done{
  color:#bff0d0;font-size:14px;margin:6px 0 0;background:rgba(61,220,132,.10);
  border:1px solid rgba(61,220,132,.3);border-radius:10px;padding:14px 16px;text-align:center;line-height:1.5}
@media(max-width:520px){
  body.cleaner-form-page .ci-field-row{flex-direction:column;gap:0}
}

/* =========================================================================
   AUTOMATION PAGE v2 — varied section layouts (added 2026-07-22)
   All rules scoped to the marketing blank template so nothing else is touched.
   Prefix: .auto-*  |  Reuses existing tokens (--surface,--line,--grad,--lav …)
   ========================================================================= */

/* --- BENTO GRID (breadth-forward feature mosaic) --- */
body.page-template-template-blank .auto-bento{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:18px}
body.page-template-template-blank .auto-bento .bcard{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:24px 22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease}
body.page-template-template-blank .auto-bento .bcard:hover{
  transform:translateY(-4px);box-shadow:var(--shadow)}
body.page-template-template-blank .auto-bento .bcard.wide{grid-column:span 2}
body.page-template-template-blank .auto-bento .bcard.tall{grid-row:span 2}
body.page-template-template-blank .auto-bento .bcard .ic{
  width:44px;height:44px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
body.page-template-template-blank .auto-bento .bcard .ic svg{width:22px;height:22px;stroke:var(--lav)}
body.page-template-template-blank .auto-bento .bcard h3{font-size:17px;margin-bottom:7px;color:var(--ink)}
body.page-template-template-blank .auto-bento .bcard p{font-size:14px;color:var(--ink-soft);margin:0}
body.page-template-template-blank .auto-bento .bcard.feat{
  background:linear-gradient(150deg,rgba(30,195,250,.14),rgba(221,0,255,.14));
  border:1px solid rgba(215,184,241,.35)}
body.page-template-template-blank .auto-bento .bcard.feat h3{font-size:20px}
body.page-template-template-blank .auto-bento .bcard .mini{
  margin-top:auto;padding-top:16px;font-size:12.5px;color:var(--lav);font-weight:600;
  display:flex;align-items:center;gap:7px}

/* --- SPOTLIGHT SPLIT (one big feature + compact list) --- */
body.page-template-template-blank .auto-split{
  display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:stretch}
body.page-template-template-blank .auto-spot{
  background:linear-gradient(155deg,rgba(130,0,255,.16),rgba(30,195,250,.10));
  border:1px solid rgba(215,184,241,.35);border-radius:22px;padding:34px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:center}
body.page-template-template-blank .auto-spot .eyebrow{margin-bottom:14px}
body.page-template-template-blank .auto-spot h3{font-size:24px;margin-bottom:12px;color:var(--ink)}
body.page-template-template-blank .auto-spot p{font-size:15px;color:var(--ink-soft);margin:0 0 20px}
body.page-template-template-blank .auto-chan{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
body.page-template-template-blank .auto-chan .pill{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;
  font-weight:600;color:var(--ink)}
body.page-template-template-blank .auto-chan .pill img{height:18px;width:auto;display:block}
body.page-template-template-blank .auto-chan .arr{color:var(--lav);font-weight:700;font-size:18px}
body.page-template-template-blank .auto-oplist{display:flex;flex-direction:column;gap:14px}
body.page-template-template-blank .auto-op{
  display:flex;gap:16px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  box-shadow:var(--shadow-sm);transition:transform .15s ease}
body.page-template-template-blank .auto-op:hover{transform:translateX(4px)}
body.page-template-template-blank .auto-op .ic{
  flex-shrink:0;width:40px;height:40px;border-radius:11px;background:var(--surface-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
body.page-template-template-blank .auto-op .ic svg{width:20px;height:20px;stroke:var(--lav)}
body.page-template-template-blank .auto-op h4{font-size:16px;margin:0 0 4px;color:var(--ink)}
body.page-template-template-blank .auto-op p{font-size:13.5px;color:var(--ink-soft);margin:0}

/* --- PARTNER STRIP ("connects with") --- */
body.page-template-template-blank .auto-strip{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:30px 34px;box-shadow:var(--shadow-sm);display:flex;align-items:center;
  justify-content:space-between;gap:30px;flex-wrap:wrap;margin:0 24px}
body.page-template-template-blank .auto-strip .lede{max-width:340px}
body.page-template-template-blank .auto-strip .lede h3{font-size:20px;margin:0 0 6px;color:var(--ink)}
body.page-template-template-blank .auto-strip .lede p{font-size:14px;color:var(--ink-soft);margin:0}
body.page-template-template-blank .auto-logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
body.page-template-template-blank .auto-logo{
  display:inline-flex;align-items:center;gap:10px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:14px;padding:12px 18px;
  font-family:'Space Grotesk';font-weight:700;font-size:15px;color:var(--ink)}
body.page-template-template-blank .auto-logo img{height:24px;width:auto;display:block}

/* --- HORIZONTAL FLOW (booking -> sync -> automation) --- */
body.page-template-template-blank .auto-flow{
  display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin-top:8px}
body.page-template-template-blank .auto-flow .node{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:28px 26px;box-shadow:var(--shadow-sm)}
body.page-template-template-blank .auto-flow .node h4{font-size:17px;margin:0 0 6px;color:var(--ink)}
body.page-template-template-blank .auto-flow .node p{font-size:14px;color:var(--ink-soft);margin:0}
body.page-template-template-blank .auto-flow .node .tag{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lav);margin-bottom:10px;display:block}
body.page-template-template-blank .auto-flow .conn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 22px;position:relative}
body.page-template-template-blank .auto-flow .conn .dot{
  width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 10px 26px rgba(180,61,197,.4);z-index:1}
body.page-template-template-blank .auto-flow .conn .ln{
  position:absolute;top:50%;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--lav),transparent)}
body.page-template-template-blank .auto-flowcard{
  background:linear-gradient(150deg,rgba(30,195,250,.10),rgba(221,0,255,.10));
  border:1px solid rgba(215,184,241,.30);border-radius:20px;padding:20px 24px;
  margin-top:22px;display:flex;gap:24px;flex-wrap:wrap;justify-content:center;text-align:center}
body.page-template-template-blank .auto-flowcard .fx{font-size:14px;color:var(--ink-soft)}
body.page-template-template-blank .auto-flowcard .fx b{color:var(--ink)}

/* --- VS COMPARISON (Turno vs Gnarly) --- */
body.page-template-template-blank .auto-vs{
  display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin-top:8px}
body.page-template-template-blank .auto-col{
  border-radius:22px;padding:32px 30px;box-shadow:var(--shadow-sm)}
body.page-template-template-blank .auto-col.them{
  background:var(--surface);border:1px solid var(--line)}
body.page-template-template-blank .auto-col.us{
  background:linear-gradient(155deg,rgba(130,0,255,.18),rgba(30,195,250,.10));
  border:1px solid rgba(215,184,241,.4)}
body.page-template-template-blank .auto-col .lbl{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
body.page-template-template-blank .auto-col.them .lbl{color:var(--ink-soft)}
body.page-template-template-blank .auto-col.us .lbl{color:var(--lav)}
body.page-template-template-blank .auto-col h3{font-size:20px;margin:0 0 18px;color:var(--ink)}
body.page-template-template-blank .auto-col .row{
  display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:14.5px;color:var(--ink-soft)}
body.page-template-template-blank .auto-col .row:last-child{margin-bottom:0}
body.page-template-template-blank .auto-col .mk{flex-shrink:0;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:1px}
body.page-template-template-blank .auto-col.them .mk{background:rgba(255,90,95,.16);color:#ff8a8a}
body.page-template-template-blank .auto-col.us .mk{background:rgba(61,220,132,.16);color:#7fe3a6}
body.page-template-template-blank .auto-vs .vsdot{
  display:flex;align-items:center;justify-content:center;padding:0 20px}
body.page-template-template-blank .auto-vs .vsdot span{
  width:52px;height:52px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';
  font-weight:700;font-size:15px;color:var(--lav)}

/* --- OWNER PORTAL DASHBOARD MOCK --- */
body.page-template-template-blank .auto-dash{
  background:var(--bg2);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow)}
body.page-template-template-blank .auto-dash .dbar{
  display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:var(--surface)}
body.page-template-template-blank .auto-dash .dbar .who{
  font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--ink);margin-left:2px}
body.page-template-template-blank .auto-dash .dbar .av{
  width:26px;height:26px;border-radius:50%;background:var(--grad);display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
body.page-template-template-blank .auto-dash .dtabs{
  display:flex;gap:6px;padding:12px 18px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
body.page-template-template-blank .auto-dash .dtab{
  font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:8px 14px;border-radius:9px 9px 0 0}
body.page-template-template-blank .auto-dash .dtab.on{
  color:#fff;background:var(--surface-2);border:1px solid var(--line);border-bottom:none}
body.page-template-template-blank .auto-dash .dbody{padding:18px}
body.page-template-template-blank .auto-dash .drow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;margin-bottom:10px}
body.page-template-template-blank .auto-dash .drow:last-child{margin-bottom:0}
body.page-template-template-blank .auto-dash .drow .t{font-size:13px;color:var(--ink);font-weight:600}
body.page-template-template-blank .auto-dash .drow .s{font-size:11px;color:var(--ink-soft);margin-top:2px}
body.page-template-template-blank .auto-dash .pri{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;white-space:nowrap}
body.page-template-template-blank .auto-dash .pri.high{background:rgba(255,90,95,.16);color:#ff8a8a}
body.page-template-template-blank .auto-dash .pri.done{background:rgba(61,220,132,.16);color:#7fe3a6}
body.page-template-template-blank .auto-dash .pri.prog{background:rgba(30,195,250,.16);color:#7fd6f5}

/* --- responsive collapses for the v2 blocks --- */
@media(max-width:900px){
  body.page-template-template-blank .auto-bento{grid-template-columns:repeat(2,1fr)}
  body.page-template-template-blank .auto-bento .bcard.wide{grid-column:span 2}
  body.page-template-template-blank .auto-bento .bcard.tall{grid-row:span 1}
}
@media(max-width:820px){
  body.page-template-template-blank .auto-split{grid-template-columns:1fr}
  body.page-template-template-blank .auto-flow,
  body.page-template-template-blank .auto-vs{grid-template-columns:1fr}
  body.page-template-template-blank .auto-flow .conn,
  body.page-template-template-blank .auto-vs .vsdot{padding:16px 0}
  body.page-template-template-blank .auto-flow .conn .ln{
    top:0;bottom:0;left:50%;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,transparent,var(--lav),transparent)}
  body.page-template-template-blank .auto-strip{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  body.page-template-template-blank .auto-bento{grid-template-columns:1fr}
  body.page-template-template-blank .auto-bento .bcard.wide{grid-column:span 1}
}

/* =========================================================================
   AUTOMATION PAGE v3 — partner logo chips, Issues board mock, guidebook mock
   (added 2026-07-22) — scoped to the marketing blank template.
   ========================================================================= */

/* --- white logo chip for dark-text wordmark logos (Hospitable / Guesty) --- */
body.page-template-template-blank .auto-logo.lite,
body.page-template-template-blank .auto-chan .pill.lite{
  background:#fff;border:1px solid rgba(255,255,255,.6)}
body.page-template-template-blank .auto-logo.lite img{height:22px}
body.page-template-template-blank .auto-chan .pill.lite{padding:7px 14px}
body.page-template-template-blank .auto-chan .pill.lite img{height:16px}

/* --- ISSUES BOARD (kanban mock) --- */
body.page-template-template-blank .auto-board{
  background:var(--bg2);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);overflow:hidden}
body.page-template-template-blank .auto-board .bbar{
  display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
body.page-template-template-blank .auto-board .bbar .who{
  font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--ink);margin-left:2px}
body.page-template-template-blank .auto-board .bbar .seg{
  margin-left:auto;display:flex;gap:4px;background:var(--bg2);border:1px solid var(--line);
  border-radius:9px;padding:3px}
body.page-template-template-blank .auto-board .bbar .seg span{
  font-size:11px;font-weight:600;color:var(--ink-soft);padding:4px 11px;border-radius:6px}
body.page-template-template-blank .auto-board .bbar .seg span.on{background:var(--surface-2);color:#fff}
body.page-template-template-blank .auto-board .cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px}
body.page-template-template-blank .auto-board .col .ch{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:10px;display:flex;align-items:center;gap:6px}
body.page-template-template-blank .auto-board .col .ch .ct{
  background:var(--surface-2);border-radius:999px;padding:1px 7px;font-size:10px;color:var(--lav)}
body.page-template-template-blank .auto-board .tk{
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:11px 12px;margin-bottom:9px;box-shadow:var(--shadow-sm)}
body.page-template-template-blank .auto-board .tk .tt{font-size:12px;color:var(--ink);font-weight:600;line-height:1.35}
body.page-template-template-blank .auto-board .tk .mt{
  display:flex;align-items:center;gap:6px;margin-top:8px}
body.page-template-template-blank .auto-board .tk .pr{
  font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
body.page-template-template-blank .auto-board .tk .pr.urgent{background:rgba(255,90,95,.16);color:#ff8a8a}
body.page-template-template-blank .auto-board .tk .pr.high{background:rgba(255,150,60,.16);color:#ffb877}
body.page-template-template-blank .auto-board .tk .pr.med{background:rgba(30,195,250,.16);color:#7fd6f5}
body.page-template-template-blank .auto-board .tk .av{
  width:18px;height:18px;border-radius:50%;background:var(--grad);color:#fff;
  font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-left:auto}
body.page-template-template-blank .auto-board .tk .dl{font-size:10px;color:var(--ink-soft)}
body.page-template-template-blank .auto-board .tk.flag{border-color:rgba(255,90,95,.4)}

/* --- BRANDED GUIDEBOOK (Gnarly-theme phone mock) --- */
body.page-template-template-blank .auto-gb{
  width:300px;margin:0 auto;border-radius:34px;padding:12px;
  background:#0c0713;border:1px solid var(--line);box-shadow:var(--shadow)}
body.page-template-template-blank .auto-gb .scr{
  border-radius:24px;overflow:hidden;background:#fff}
body.page-template-template-blank .auto-gb .cover{
  position:relative;height:172px;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(160deg,#1EC3FA 0%,#B43DC5 52%,#DD00FF 100%)}
body.page-template-template-blank .auto-gb .cover .brand{
  position:absolute;top:16px;left:18px;font-family:'Space Grotesk';font-weight:700;font-size:13px;
  letter-spacing:.02em;display:flex;align-items:center;gap:7px}
body.page-template-template-blank .auto-gb .cover .brand .lg{
  width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:12px}
body.page-template-template-blank .auto-gb .cover .eb{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.9;margin-bottom:4px}
body.page-template-template-blank .auto-gb .cover h4{
  font-family:'Space Grotesk';font-weight:700;font-size:21px;line-height:1.1;margin:0}
body.page-template-template-blank .auto-gb .cover .sub2{font-size:11px;opacity:.9;margin-top:3px}
body.page-template-template-blank .auto-gb .gbody{padding:14px}
body.page-template-template-blank .auto-gb .qr{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
body.page-template-template-blank .auto-gb .qr .qi{
  border:1px solid #ececf2;border-radius:12px;padding:10px 11px;background:#fbfaff}
body.page-template-template-blank .auto-gb .qr .qi .k{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9b8fb0}
body.page-template-template-blank .auto-gb .qr .qi .v{font-size:12.5px;font-weight:700;color:#2a2233;margin-top:3px}
body.page-template-template-blank .auto-gb .sec-t{
  font-family:'Space Grotesk';font-weight:700;font-size:12px;color:#2a2233;margin:12px 0 8px;display:flex;align-items:center;gap:7px}
body.page-template-template-blank .auto-gb .sec-t .bar{width:4px;height:14px;border-radius:2px;background:linear-gradient(180deg,#1EC3FA,#DD00FF)}
body.page-template-template-blank .auto-gb .ups{
  display:flex;align-items:center;gap:10px;border:1px solid #ececf2;border-radius:12px;padding:9px 11px;margin-bottom:8px}
body.page-template-template-blank .auto-gb .ups .ph{
  width:38px;height:38px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,#1EC3FA,#B43DC5)}
body.page-template-template-blank .auto-gb .ups .info .nm{font-size:11.5px;font-weight:700;color:#2a2233}
body.page-template-template-blank .auto-gb .ups .info .ds{font-size:9.5px;color:#8b8296;margin-top:1px}
body.page-template-template-blank .auto-gb .ups .pr{
  margin-left:auto;font-family:'Space Grotesk';font-weight:700;font-size:12px;color:#B43DC5}
body.page-template-template-blank .auto-gb .gbtn{
  background:linear-gradient(135deg,#1EC3FA,#B43DC5,#DD00FF);color:#fff;text-align:center;
  border-radius:11px;padding:10px;font-size:11.5px;font-weight:700;margin-top:4px}

@media(max-width:820px){
  body.page-template-template-blank .auto-board .cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  body.page-template-template-blank .auto-board .cols{grid-template-columns:1fr}
}

/* --- Guidebook mock: correct to the REAL "Gnarly" style = DARK (override) --- */
body.page-template-template-blank .auto-gb .scr{background:#120a1c}
body.page-template-template-blank .auto-gb .gbody{padding:14px;background:#120a1c}
body.page-template-template-blank .auto-gb .qr .qi{
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055)}
body.page-template-template-blank .auto-gb .qr .qi .k{color:#9484a8}
body.page-template-template-blank .auto-gb .qr .qi .v{color:#fff}
body.page-template-template-blank .auto-gb .sec-t{color:#fff}
body.page-template-template-blank .auto-gb .ups{
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055)}
body.page-template-template-blank .auto-gb .ups .info .nm{color:#f4eefb}
body.page-template-template-blank .auto-gb .ups .info .ds{color:#c3b3d6}
body.page-template-template-blank .auto-gb .ups .pr{color:#D7B8F1}
body.page-template-template-blank .auto-gb .gbrow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);
  border-radius:12px;padding:10px 12px;margin-bottom:8px}
body.page-template-template-blank .auto-gb .gbrow .k{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9484a8}
body.page-template-template-blank .auto-gb .gbrow .v{font-size:12px;font-weight:700;color:#f4eefb;font-family:'Space Grotesk'}
body.page-template-template-blank .auto-gb .gbrow .cp{
  font-size:9.5px;font-weight:700;color:#D7B8F1;border:1px solid rgba(255,255,255,.18);
  border-radius:8px;padding:5px 9px}
body.page-template-template-blank .auto-gb .foot{
  text-align:center;padding:12px 0 4px;font-size:9.5px;font-weight:700;font-family:'Space Grotesk';
  background:linear-gradient(135deg,#1EC3FA,#DD00FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ===== STYLE SWITCHER (.sd-*/.demo-*) — moved from See-It page to shared, scoped to marketing template (2026-07-22) ===== */
body.page-template-template-blank .sd-hero{text-align:center;padding:30px 0 6px}
body.page-template-template-blank .sd-switch{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:24px 0 26px}
body.page-template-template-blank .sd-pill{font-family:inherit;font-size:14px;font-weight:600;color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 20px;cursor:pointer;transition:all .15s ease;-webkit-appearance:none;appearance:none}
body.page-template-template-blank .sd-pill:hover{border-color:var(--lav);color:#fff;background:rgba(255,255,255,.10)}
body.page-template-template-blank .sd-pill.on{background:var(--grad);color:#fff;border-color:transparent}
body.page-template-template-blank .sd-frame{position:relative;max-width:430px;margin:0 auto;border-radius:30px;overflow:hidden;box-shadow:0 30px 70px rgba(40,20,60,.22);border:9px solid #14101c;background:#fff;height:640px}
body.page-template-template-blank .sd-frame .sd-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(180,61,197,.55) transparent}
body.page-template-template-blank .sd-frame .sd-scroll::-webkit-scrollbar{width:6px}
body.page-template-template-blank .sd-frame .sd-scroll::-webkit-scrollbar-track{background:transparent}
body.page-template-template-blank .sd-frame .sd-scroll::-webkit-scrollbar-thumb{background:rgba(180,61,197,.55);border-radius:999px}
body.page-template-template-blank .sd-frame .sd-scroll::-webkit-scrollbar-thumb:hover{background:rgba(180,61,197,.8)}
body.page-template-template-blank .sd-panel{display:none}
body.page-template-template-blank .sd-panel.on{display:block}
body.page-template-template-blank .sd-cap{text-align:center;font-size:14px;color:var(--ink-soft);margin-top:16px;max-width:430px;margin-left:auto;margin-right:auto}
body.page-template-template-blank .sd-cap b{color:var(--ink)}
body.page-template-template-blank .dm{font-family:'Inter',system-ui,sans-serif;min-height:100%}
body.page-template-template-blank .dm-top{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
body.page-template-template-blank .dm-body{padding:16px}
body.page-template-template-blank .dm h1{font-size:26px;margin:0 0 4px;line-height:1.12}
body.page-template-template-blank .dm h3{font-size:17px;margin:0}
body.page-template-template-blank .dm .loc{font-size:12px;opacity:.7}
body.page-template-template-blank .dm .intro{font-size:13.5px;margin:14px 0;opacity:.85}
body.page-template-template-blank .dm-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;margin-bottom:11px}
body.page-template-template-blank .dm-item .ph{width:50px;height:50px;border-radius:11px;object-fit:cover;flex-shrink:0}
body.page-template-template-blank .dm-item .nm{font-weight:600;font-size:14.5px}
body.page-template-template-blank .dm-item .ds{font-size:12px;opacity:.7;margin-top:2px}
body.page-template-template-blank .dm-item .pr{font-weight:700;font-size:15px;white-space:nowrap;font-family:'Space Grotesk',sans-serif}
body.page-template-template-blank .dm-btn{display:block;text-align:center;padding:14px;border-radius:13px;font-weight:700;font-size:15px;color:#fff;margin-top:8px}
body.page-template-template-blank .demo-classic .dm{background:#f8f9fa;color:#3c4145}
body.page-template-template-blank .demo-classic .dm-top{background:#fff;border-bottom:1px solid #eceff2;color:#8a9199}
body.page-template-template-blank .demo-classic h1, body.page-template-template-blank .demo-classic h3{font-family:'Inter',sans-serif;color:#1f2430;font-weight:700}
body.page-template-template-blank .demo-classic .dm-hero-band{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:16px;padding:20px;margin-bottom:14px}
body.page-template-template-blank .demo-classic .dm-hero-band h1{color:#fff}
body.page-template-template-blank .demo-classic .dm-item{background:#fff;border:1px solid #eceff2}
body.page-template-template-blank .demo-classic .dm-item .pr{color:#667eea}
body.page-template-template-blank .demo-classic .dm-btn{background:#667eea}
body.page-template-template-blank .demo-classic .dm-badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:#eef0fb;color:#667eea;padding:4px 10px;border-radius:6px;margin-bottom:10px}
body.page-template-template-blank .demo-concierge .dm{background:#FBF7FD;color:#3C4145}
body.page-template-template-blank .demo-concierge .dm-top{background:rgba(251,247,253,.9);border-bottom:1px solid rgba(90,60,120,.13);color:#5D6469}
body.page-template-template-blank .demo-concierge h1, body.page-template-template-blank .demo-concierge h3{font-family:'Space Grotesk',sans-serif;color:#241a2b;letter-spacing:-.012em}
body.page-template-template-blank .demo-concierge .hi{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#B43DC5;font-weight:700}
body.page-template-template-blank .demo-concierge .dm-greet{display:flex;gap:14px;align-items:center;margin-bottom:6px}
body.page-template-template-blank .demo-concierge .dm-greet .av{width:78px;height:78px;border-radius:18px;padding:2px;background:linear-gradient(135deg,#1EC3FA,#B43DC5 50%,#DD00FF);flex-shrink:0}
body.page-template-template-blank .demo-concierge .dm-greet .av img{width:100%;height:100%;border-radius:16px;object-fit:cover}
body.page-template-template-blank .demo-concierge .dm-timeline{position:relative;padding-left:38px;margin-top:20px}
body.page-template-template-blank .demo-concierge .dm-timeline::before{content:"";position:absolute;left:14px;top:8px;bottom:10px;width:2px;background:linear-gradient(180deg,#1EC3FA,#B43DC5 55%,#DD00FF);border-radius:2px;opacity:.55}
body.page-template-template-blank .demo-concierge .dm-sec{position:relative;margin-bottom:22px}
body.page-template-template-blank .demo-concierge .dm-sec .mk{position:absolute;left:-31px;top:1px;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #B43DC5;box-shadow:0 0 0 4px #FBF7FD}
body.page-template-template-blank .demo-concierge .dm-item{background:#fff;border:1px solid rgba(90,60,120,.13);box-shadow:0 7px 20px rgba(120,60,160,.09)}
body.page-template-template-blank .demo-concierge .dm-item .pr{color:#B43DC5}
body.page-template-template-blank .demo-concierge .dm-btn{background:#FF5A5F}
body.page-template-template-blank .demo-editorial .dm{background:#F7F4FB;color:#3C4145;counter-reset:ds}
body.page-template-template-blank .demo-editorial .dm-top{background:#F7F4FB;border-bottom:1px solid rgba(90,60,120,.12);color:#5D6469}
body.page-template-template-blank .demo-editorial h1, body.page-template-template-blank .demo-editorial h3{font-family:'Space Grotesk',sans-serif;color:#241a2b;letter-spacing:-.015em}
body.page-template-template-blank .demo-editorial h1{font-size:30px}
body.page-template-template-blank .demo-editorial .kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#B43DC5;font-weight:700}
body.page-template-template-blank .demo-editorial .dm-rule{height:1px;background:rgba(90,60,120,.16);margin:18px 0}
body.page-template-template-blank .demo-editorial .dm-sec{margin-bottom:22px}
body.page-template-template-blank .demo-editorial .dm-sec .sh{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
body.page-template-template-blank .demo-editorial .dm-sec .sh::before{counter-increment:ds;content:"0" counter(ds);font-family:'Space Grotesk';font-weight:700;font-size:13px;color:#B43DC5;letter-spacing:.12em}
body.page-template-template-blank .demo-editorial .dm-item{background:#fff;border:1px solid rgba(90,60,120,.12)}
body.page-template-template-blank .demo-editorial .dm-item .pr{color:#B43DC5;font-size:18px}
body.page-template-template-blank .demo-editorial .dm-btn{background:#B43DC5}
body.page-template-template-blank .demo-bold .dm{background:#120a1c;color:#c9c2d6;position:relative;overflow:hidden}
body.page-template-template-blank .demo-bold .bgfx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
body.page-template-template-blank .demo-bold .bgfx span{position:absolute;border-radius:50%;filter:blur(60px)}
body.page-template-template-blank .demo-bold .bgfx .g1{width:240px;height:240px;background:#B43DC5;top:-70px;left:-70px;opacity:.5}
body.page-template-template-blank .demo-bold .bgfx .g2{width:220px;height:220px;background:#1EC3FA;top:120px;right:-90px;opacity:.3}
body.page-template-template-blank .demo-bold .bgfx .g3{width:260px;height:260px;background:#DD00FF;bottom:-100px;left:-40px;opacity:.28}
body.page-template-template-blank .demo-bold .dm-body, body.page-template-template-blank .demo-bold .dm-top{position:relative;z-index:1}
body.page-template-template-blank .demo-bold .dm-top{background:rgba(18,10,28,.72);border-bottom:1px solid rgba(255,255,255,.1);color:#c9c2d6}
body.page-template-template-blank .demo-bold h1, body.page-template-template-blank .demo-bold h3{font-family:'Space Grotesk',sans-serif;color:#fff;letter-spacing:-.01em}
body.page-template-template-blank .demo-bold .dm-hero{text-align:center;margin-top:8px}
body.page-template-template-blank .demo-bold .eyebrow2{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;background:linear-gradient(135deg,#1EC3FA,#B43DC5 50%,#DD00FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.page-template-template-blank .demo-bold h1{font-size:32px}
body.page-template-template-blank .demo-bold .dm-photo{margin-top:14px;border-radius:18px;padding:2px;background:linear-gradient(135deg,#1EC3FA,#B43DC5 50%,#DD00FF);box-shadow:0 24px 60px rgba(130,0,255,.35)}
body.page-template-template-blank .demo-bold .dm-photo img{width:100%;height:130px;object-fit:cover;border-radius:16px;display:block}
body.page-template-template-blank .demo-bold .dm-sec{margin-top:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px}
body.page-template-template-blank .demo-bold .dm-sec .mk{display:inline-block;width:8px;height:22px;border-radius:5px;background:linear-gradient(135deg,#1EC3FA,#B43DC5 50%,#DD00FF);box-shadow:0 0 14px rgba(180,61,197,.6);vertical-align:middle;margin-right:8px}
body.page-template-template-blank .demo-bold .dm-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
body.page-template-template-blank .demo-bold .dm-item .nm{color:#fff}
body.page-template-template-blank .demo-bold .dm-item .pr{color:#fff}
body.page-template-template-blank .demo-bold .dm-btn{background:linear-gradient(135deg,#1EC3FA,#B43DC5 50%,#DD00FF);box-shadow:0 12px 30px rgba(130,0,255,.35)}
@media(max-width:480px){
body.page-template-template-blank .sd-frame{height:560px}
}

/* ===== SEE-IT-IN-ACTION demos: Issues board + SOPs (2026-07-22, scoped) ===== */

/* generic demo-tab frame (wider than the phone .sd-frame, for dashboards) */
body.page-template-template-blank .sd-wide{
  max-width:960px;margin:0 auto;position:relative}
body.page-template-template-blank .sd-wide .sd-panel{display:none}
body.page-template-template-blank .sd-wide .sd-panel.on{display:block}

/* ---- Issues board demo (reuses .auto-board look; List + Owner variants) ---- */
body.page-template-template-blank .ib-list{
  background:var(--bg2);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
body.page-template-template-blank .ib-list .lrow{
  display:grid;grid-template-columns:1.7fr .8fr .7fr .8fr;gap:10px;align-items:center;
  padding:13px 18px;border-bottom:1px solid var(--line);font-size:13px}
body.page-template-template-blank .ib-list .lrow.hd{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);background:var(--surface)}
body.page-template-template-blank .ib-list .lrow:last-child{border-bottom:none}
body.page-template-template-blank .ib-list .lrow .tt{color:var(--ink);font-weight:600}
body.page-template-template-blank .ib-list .lrow .mut{color:var(--ink-soft)}
body.page-template-template-blank .ib-list .st{
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;width:fit-content}
body.page-template-template-blank .ib-list .st.active{background:rgba(30,195,250,.16);color:#7fd6f5}
body.page-template-template-blank .ib-list .st.review{background:rgba(255,150,60,.16);color:#ffb877}
body.page-template-template-blank .ib-list .st.done{background:rgba(61,220,132,.16);color:#7fe3a6}
body.page-template-template-blank .ib-list .st.backlog{background:var(--surface-2);color:var(--lav)}

/* ---- SOPs demo ---- */
body.page-template-template-blank .sops-demo{
  background:var(--bg2);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  overflow:hidden;max-width:760px;margin:0 auto}
body.page-template-template-blank .sops-demo .sbar{
  display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
body.page-template-template-blank .sops-demo .sbar .who{font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--ink)}
body.page-template-template-blank .sops-search{
  margin:16px 18px 6px;display:flex;align-items:center;gap:10px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:12px;padding:12px 15px;color:var(--ink)}
body.page-template-template-blank .sops-search svg{width:17px;height:17px;stroke:var(--lav);flex-shrink:0}
body.page-template-template-blank .sops-search .q{font-size:13.5px;font-weight:600;color:var(--ink)}
body.page-template-template-blank .sops-search .cur{width:1.5px;height:16px;background:var(--lav);display:inline-block;margin-left:2px;animation:sopblink 1s step-end infinite}
@keyframes sopblink{50%{opacity:0}}
body.page-template-template-blank .sops-res{padding:6px 18px 18px}
body.page-template-template-blank .sops-hit{
  display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;margin-top:10px}
body.page-template-template-blank .sops-hit .ic{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}
body.page-template-template-blank .sops-hit .ic svg{width:19px;height:19px;stroke:var(--lav)}
body.page-template-template-blank .sops-hit .tt{font-size:14px;font-weight:700;color:var(--ink)}
body.page-template-template-blank .sops-hit .sn{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.5}
body.page-template-template-blank .sops-hit .tags{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
body.page-template-template-blank .sops-hit .tag{
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface-2);border:1px solid var(--line);color:var(--lav);padding:3px 9px;border-radius:999px}
body.page-template-template-blank .sops-hit .tag.src{color:#7fd6f5}
body.page-template-template-blank .sops-hit .tag.global{color:#7fe3a6}

/* SOPs feature strip (three little value cards under the demo) */
body.page-template-template-blank .sops-feats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;max-width:760px;margin-left:auto;margin-right:auto}
body.page-template-template-blank .sops-feats .sf{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
body.page-template-template-blank .sops-feats .sf .ic{
  width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:11px}
body.page-template-template-blank .sops-feats .sf .ic svg{width:19px;height:19px;stroke:var(--lav)}
body.page-template-template-blank .sops-feats .sf h4{font-size:14.5px;margin:0 0 5px;color:var(--ink)}
body.page-template-template-blank .sops-feats .sf p{font-size:12.5px;color:var(--ink-soft);margin:0}

@media(max-width:820px){
  body.page-template-template-blank .ib-list .lrow{grid-template-columns:1.4fr 1fr;row-gap:4px}
  body.page-template-template-blank .ib-list .lrow .hide-sm{display:none}
  body.page-template-template-blank .sops-feats{grid-template-columns:1fr}
}

/* ===== GUEST REVIEWS → ACTION ITEMS demo (2026-07-22, scoped) ===== */
body.page-template-template-blank .rev-demo{
  background:var(--bg2);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  overflow:hidden;max-width:820px;margin:0 auto}
body.page-template-template-blank .rev-demo .rbar{
  display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
body.page-template-template-blank .rev-demo .rbar .who{font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--ink)}
body.page-template-template-blank .rev-demo .rbar .filt{
  margin-left:auto;font-size:11px;font-weight:600;color:var(--lav);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px}
body.page-template-template-blank .rev-row{padding:16px 18px;border-bottom:1px solid var(--line)}
body.page-template-template-blank .rev-row:last-child{border-bottom:none}
body.page-template-template-blank .rev-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.page-template-template-blank .rev-head .av{
  width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
body.page-template-template-blank .rev-head .nm{font-size:13.5px;font-weight:700;color:var(--ink)}
body.page-template-template-blank .rev-head .meta{font-size:11.5px;color:var(--ink-soft)}
body.page-template-template-blank .rev-head .stars{color:#ffc857;font-size:13px;letter-spacing:1px;margin-left:2px}
body.page-template-template-blank .rev-head .pvt{
  font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(30,195,250,.16);color:#7fd6f5;border-radius:999px;padding:3px 9px}
body.page-template-template-blank .rev-quote{
  font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:10px 0 0;font-style:italic}
body.page-template-template-blank .rev-quote .hl{color:#ffb877;font-style:normal;font-weight:600;
  background:rgba(255,150,60,.10);border-radius:3px;padding:0 3px}
body.page-template-template-blank .rev-extract{
  margin-top:12px;background:linear-gradient(150deg,rgba(130,0,255,.12),rgba(30,195,250,.08));
  border:1px solid rgba(215,184,241,.28);border-radius:13px;padding:13px 15px}
body.page-template-template-blank .rev-extract .lbl{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(135deg,#1EC3FA,#B43DC5 50%,#DD00FF);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:9px;display:flex;align-items:center;gap:6px}
body.page-template-template-blank .rev-extract .lbl svg{width:14px;height:14px;stroke:var(--lav);-webkit-text-fill-color:initial}
body.page-template-template-blank .rev-prob{
  display:flex;align-items:center;gap:10px;padding:8px 0}
body.page-template-template-blank .rev-prob + .rev-prob{border-top:1px solid var(--line)}
body.page-template-template-blank .rev-prob .cat{
  font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;flex-shrink:0}
body.page-template-template-blank .rev-prob .cat.pest{background:rgba(255,90,95,.16);color:#ff9b9e}
body.page-template-template-blank .rev-prob .cat.clean{background:rgba(30,195,250,.16);color:#7fd6f5}
body.page-template-template-blank .rev-prob .cat.maint{background:rgba(255,150,60,.16);color:#ffb877}
body.page-template-template-blank .rev-prob .cat.safety{background:rgba(221,0,255,.16);color:#e79bff}
body.page-template-template-blank .rev-prob .txt{font-size:12.5px;color:var(--ink);flex:1}
body.page-template-template-blank .rev-prob .queue{
  font-size:11px;font-weight:700;color:#fff;background:var(--grad);border-radius:999px;
  padding:5px 12px;white-space:nowrap;flex-shrink:0}
body.page-template-template-blank .rev-prob .queued{
  font-size:11px;font-weight:600;color:#7fe3a6;white-space:nowrap;flex-shrink:0}

/* three value cards under the reviews demo */
body.page-template-template-blank .rev-feats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;max-width:820px;margin-left:auto;margin-right:auto}
body.page-template-template-blank .rev-feats .rf{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
body.page-template-template-blank .rev-feats .rf .ic{
  width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:11px}
body.page-template-template-blank .rev-feats .rf .ic svg{width:19px;height:19px;stroke:var(--lav)}
body.page-template-template-blank .rev-feats .rf h4{font-size:14.5px;margin:0 0 5px;color:var(--ink)}
body.page-template-template-blank .rev-feats .rf p{font-size:12.5px;color:var(--ink-soft);margin:0}

@media(max-width:820px){
  body.page-template-template-blank .rev-feats{grid-template-columns:1fr}
  body.page-template-template-blank .rev-prob{flex-wrap:wrap}
}

/* ===== "What makes it different" — hero differentiator + compact capability layer (2026-07-22) ===== */

/* --- HERO DIFFERENTIATOR (one big idea, room to breathe) --- */
body.page-template-template-blank .diff-hero{
  background:linear-gradient(150deg,rgba(130,0,255,.18),rgba(30,195,250,.10));
  border:1px solid rgba(215,184,241,.32);border-radius:24px;padding:38px 40px;
  box-shadow:var(--shadow-sm)}
body.page-template-template-blank .diff-hero .dh-ey{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lav);margin-bottom:12px}
body.page-template-template-blank .diff-hero h3{
  font-size:clamp(22px,2.6vw,30px);color:var(--ink);margin:0 0 22px;max-width:640px;line-height:1.2}
body.page-template-template-blank .diff-flow{
  display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
body.page-template-template-blank .diff-step{
  flex:1;min-width:150px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;position:relative}
body.page-template-template-blank .diff-step .n{
  font-family:'Space Grotesk';font-weight:700;font-size:12px;color:var(--lav);opacity:.8}
body.page-template-template-blank .diff-step h4{font-size:15px;margin:6px 0 3px;color:var(--ink)}
body.page-template-template-blank .diff-step p{font-size:12.5px;color:var(--ink-soft);margin:0}
body.page-template-template-blank .diff-step .ar{
  position:absolute;right:-13px;top:50%;transform:translateY(-50%);z-index:2;
  color:var(--lav);font-weight:700;font-size:16px;background:var(--bg2);border-radius:50%;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
body.page-template-template-blank .diff-step:last-child .ar{display:none}
body.page-template-template-blank .diff-hero .dh-foot{
  margin-top:22px;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.page-template-template-blank .diff-hero .dh-foot .badge{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--grad);color:#fff;border-radius:999px;padding:5px 13px}

/* --- COMPACT CAPABILITY LAYER (grouped, scannable, small) --- */
body.page-template-template-blank .cap-head{
  text-align:center;margin:44px auto 24px;max-width:640px}
body.page-template-template-blank .cap-head h3{font-size:clamp(19px,2.2vw,24px);color:var(--ink);margin:0 0 8px}
body.page-template-template-blank .cap-head p{font-size:15px;color:var(--ink-soft);margin:0}
body.page-template-template-blank .cap-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body.page-template-template-blank .cap-col{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 22px 8px;box-shadow:var(--shadow-sm)}
body.page-template-template-blank .cap-col .ct{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
body.page-template-template-blank .cap-col .ct .ic{
  width:34px;height:34px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
body.page-template-template-blank .cap-col .ct .ic svg{width:18px;height:18px;stroke:var(--lav)}
body.page-template-template-blank .cap-col .ct h4{font-size:15px;margin:0;color:var(--ink)}
body.page-template-template-blank .cap-item{
  display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)}
body.page-template-template-blank .cap-col .cap-item:last-child{border-bottom:none}
body.page-template-template-blank .cap-item .ck{
  color:var(--lav);font-weight:700;font-size:13px;margin-top:1px;flex-shrink:0}
body.page-template-template-blank .cap-item .cx b{color:var(--ink);font-weight:600;font-size:14px;display:block}
body.page-template-template-blank .cap-item .cx span{color:var(--ink-soft);font-size:12.5px}
body.page-template-template-blank .cap-item .cx a{color:var(--lav);font-weight:600}

@media(max-width:820px){
  body.page-template-template-blank .cap-cols{grid-template-columns:1fr}
  body.page-template-template-blank .diff-step .ar{
    right:50%;top:auto;bottom:-13px;transform:translateX(50%)}
}

/* ===== Mobile CTA button spacing (2026-07-22) =====
   Inline-block .btn pairs (Start Automating + a ghost button) sit on one line on
   desktop but WRAP on narrow screens with no vertical gap between them. Give any
   wrapped .btn a top margin on mobile. .hero-cta is flex with its own gap, so it
   is handled separately (just allow wrap). Scoped to the marketing template. */
@media(max-width:600px){
  /* inline-block button rows (plain <div> wrappers): space the 2nd button */
  body.page-template-template-blank .btn + .btn{margin-top:12px}
  /* flex CTA rows already have a gap — cancel the margin, just let them wrap */
  body.page-template-template-blank .hero-cta{flex-wrap:wrap}
  body.page-template-template-blank .hero-cta .btn + .btn{margin-top:0}
}