/* CAMPAIGNFORGE_V86_PREVIEW_ADVANCED_CSS */
:root{
  --navy:#07194f;
  --blue:#2357e8;
  --accent:#f7a800;
  --bg:#f5f8fd;
  --line:#dbe4f0;
  --muted:#64748b;
  --white:#fff;
  --shadow:0 18px 45px rgba(8,23,74,.10);
}
*{box-sizing:border-box}
html,body{margin:0;max-width:100%;overflow-x:hidden;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--navy)}
a{color:inherit}
.tms-nav{height:74px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:34px;padding:0 18px;position:sticky;top:0;z-index:20}
.tms-logo{width:48px;height:48px;border:2px solid var(--navy);border-radius:999px;display:grid;place-items:center;font-weight:950;font-size:11px}
.tms-links{display:flex;gap:24px;align-items:center;font-weight:900;font-size:14px}
.tms-links a{text-decoration:none}
.tms-cta{border:2px solid var(--navy);border-radius:999px;padding:12px 18px;background:#fff;font-weight:950;text-decoration:none}
.cf86{max-width:1500px;margin:0 auto;padding:26px 14px 80px}
.hero{background:linear-gradient(135deg,#f6f9ff 0%,#fff 58%,#fff2cc 100%);border:1px solid var(--line);border-radius:30px;padding:48px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero:after{content:"";position:absolute;right:-80px;top:-80px;width:380px;height:380px;border:34px solid rgba(8,23,74,.06);border-radius:999px}
.kicker{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:950;letter-spacing:.09em;text-transform:uppercase}
.hero h1{font-size:clamp(38px,5vw,78px);line-height:.95;margin:22px 0 14px;letter-spacing:-.06em;max-width:900px}
.hero p{max-width:820px;color:var(--muted);font-size:18px;line-height:1.5;margin:0}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:18px 0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:0 8px 22px rgba(8,23,74,.06)}
.flow-pill{font-weight:950;font-size:12px;background:#eef5ff;border:1px solid #d8e7ff;border-radius:999px;padding:8px 12px}
.actions{display:flex;gap:8px;align-items:center}
.btn{border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:999px;padding:12px 16px;font-weight:950;cursor:pointer}
.btn.soft{background:#eef5ff;color:var(--navy);border-color:#cfe0ff}
.btn.gold{background:var(--accent);border-color:var(--accent);color:#07194f}
.btn.white{background:#fff;color:var(--navy)}
.app{display:grid;grid-template-columns:310px minmax(0,1fr) 370px;gap:18px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow)}
.panel h2{margin:0 0 12px;font-size:22px;letter-spacing:-.03em}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mode{font-size:11px;font-weight:950;color:var(--muted);letter-spacing:.09em;text-transform:uppercase}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.step{border:1px solid var(--line);background:#f8fbff;border-radius:16px;min-height:58px;font-weight:950;color:var(--navy);cursor:pointer}
.step.active{background:var(--navy);color:#fff}
.step span{display:block;font-size:20px}
.field{display:grid;gap:6px;margin-bottom:10px}
label{font-size:12px;font-weight:950;color:var(--navy)}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:13px;background:#f8fafc;color:#101828;padding:11px 12px;font-size:14px;outline:none}
textarea{min-height:82px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
input[type=color]{padding:3px;height:42px}
.step-pane{display:none}
.step-pane.active{display:block}
.library{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.template-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:10px;cursor:pointer;text-align:left;color:var(--navy)}
.template-card.active,.template-card:hover{border-color:var(--blue);box-shadow:0 0 0 3px rgba(35,87,232,.13)}
.template-preview{height:48px;border-radius:13px;margin-bottom:8px;background:linear-gradient(135deg,var(--navy),var(--blue));position:relative;overflow:hidden}
.template-preview:before,.template-preview:after{content:"";position:absolute;background:rgba(255,255,255,.25);border-radius:999px}
.template-preview:before{width:34px;height:34px;right:9px;top:7px}
.template-preview:after{width:52%;height:7px;left:9px;bottom:10px}
.template-card strong{display:block;font-size:14px}
.template-card small{color:var(--muted);font-weight:700}
.colourways{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.colourway{border:1px solid var(--line);border-radius:14px;background:#fff;padding:8px;cursor:pointer;display:grid;grid-template-columns:17px 17px 17px 1fr;gap:5px;align-items:center;font-size:12px;font-weight:950;color:var(--navy)}
.colourway.active,.colourway:hover{border-color:var(--blue);box-shadow:0 0 0 3px rgba(35,87,232,.12)}
.swatch{width:17px;height:17px;border-radius:999px;border:1px solid rgba(0,0,0,.12)}
.stage{min-width:0}
.stage-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}
.sizebar{display:grid;grid-template-columns:minmax(0,1fr) 90px 90px auto auto;gap:8px;align-items:end;margin-bottom:12px}
.canvas-wrap{background-image:linear-gradient(45deg,#eaf1fb 25%,transparent 25%),linear-gradient(-45deg,#eaf1fb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eaf1fb 75%),linear-gradient(-45deg,transparent 75%,#eaf1fb 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;border:1px solid var(--line);border-radius:22px;padding:22px;display:grid;place-items:center;min-height:520px;overflow:auto}
#cf86-canvas{max-width:100%;height:auto;border-radius:22px;box-shadow:0 18px 42px rgba(8,23,74,.18)}
.preview-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.benefit-builder,.advanced-box{border:1px solid var(--line);border-radius:18px;padding:12px;margin:10px 0;background:linear-gradient(180deg,#fff,#fbfdff)}
.builder-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:8px}
.builder-head h3{margin:0;font-size:18px}
.builder-head span{font-size:11px;font-weight:950;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.benefit-list{display:grid;gap:8px;margin:10px 0}
.benefit-row{display:grid;grid-template-columns:28px 1fr 36px;gap:8px;align-items:center}
.benefit-num{width:28px;height:28px;border-radius:999px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:950;font-size:12px}
.remove{width:36px;height:36px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#64748b;font-weight:950;cursor:pointer}
.advanced-box summary{cursor:pointer;font-weight:950;color:var(--navy);font-size:18px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.advanced-box summary::-webkit-details-marker{display:none}
.advanced-box summary:after{content:"Open";font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.advanced-box[open] summary:after{content:"Close"}
.adv-group{border-top:1px solid var(--line);padding-top:10px;margin-top:12px}
.adv-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.adv-control{display:grid;grid-template-columns:64px 1fr 38px;gap:6px;align-items:center;margin:7px 0}
.adv-control label{font-size:11px;color:var(--muted)}
.adv-control input[type=range]{padding:0;height:24px;background:transparent;border:0}
.adv-value{font-size:11px;font-weight:950;color:var(--navy);text-align:right}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.tab{border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);padding:8px 12px;font-weight:900;cursor:pointer}
.tab.active{background:var(--navy);color:#fff}
.output{background:var(--navy);color:#fff;border-radius:16px;padding:14px;min-height:145px;font-size:13px;line-height:1.5;white-space:pre-wrap}
.info-section{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;margin-top:18px;box-shadow:0 10px 28px rgba(8,23,74,.06)}
.info-section h2{font-size:34px;letter-spacing:-.04em;margin:0 0 10px}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.info-card{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfdff}
.info-card strong{display:block;margin-bottom:6px}
.footer{background:var(--navy);color:#fff;margin-top:42px;padding:56px 14px}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
.footer a{display:block;color:#fff;text-decoration:none;margin:10px 0;font-weight:800}
.footer input{background:#fff;border-color:#fff}
.help{font-size:12px;color:var(--muted);line-height:1.45}
.hidden{display:none!important}
@media(max-width:1200px){.app{grid-template-columns:1fr}.panel{position:relative!important}.canvas-wrap{min-height:auto}.right{order:3}}
@media(max-width:760px){
  .tms-nav{height:auto;flex-wrap:wrap;padding:12px}.tms-links{font-size:12px;gap:12px;flex-wrap:wrap;justify-content:center}
  .hero{padding:28px}.topbar,.actions,.stage-head,.sizebar,.grid2,.grid3,.grid4,.info-grid,.footer-inner{grid-template-columns:1fr;display:grid}
  .library,.colourways{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .preview-actions{display:grid}
}

/* CAMPAIGNFORGE_V88_SAFE_SCROLL_CSS_START */
@media (min-width:1201px){
  html,body{
    overflow-x:hidden;
  }

  .cf85 .app{
    align-items:start!important;
  }

  .cf85 .panel.left,
  .cf85 .panel.right{
    position:sticky!important;
    top:92px!important;
    max-height:calc(100vh - 112px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  .cf85 .panel.stage{
    position:sticky!important;
    top:92px!important;
    align-self:start!important;
  }

  .cf85 .panel.left::-webkit-scrollbar,
  .cf85 .panel.right::-webkit-scrollbar{
    width:10px;
  }

  .cf85 .panel.left::-webkit-scrollbar-track,
  .cf85 .panel.right::-webkit-scrollbar-track{
    background:#eef4fb;
    border-radius:999px;
  }

  .cf85 .panel.left::-webkit-scrollbar-thumb,
  .cf85 .panel.right::-webkit-scrollbar-thumb{
    background:#b8c7dc;
    border:2px solid #eef4fb;
    border-radius:999px;
  }

  .cf85 .panel.left,
  .cf85 .panel.right{
    scrollbar-width:thin;
    scrollbar-color:#b8c7dc #eef4fb;
  }

  .cf85 .canvas-wrap{
    min-height:0!important;
  }
}

@media (max-width:1200px){
  .cf85 .panel.left,
  .cf85 .panel.right,
  .cf85 .panel.stage{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}
/* CAMPAIGNFORGE_V88_SAFE_SCROLL_CSS_END */