:root{
      --orange:#fc6c1a;
      --orange-2:#ff9b62;
      --ink:#111111;
      --muted:#6e6b67;
      --line:rgba(17,17,17,.10);
      --paper:#fffdf9;
      --cream:#f8f4ed;
      --white:#ffffff;
      --shadow:0 25px 80px rgba(37,22,10,.10);
      --shadow-soft:0 14px 40px rgba(44,28,14,.08);
      --radius-xl:40px;
      --radius-lg:28px;
      --radius-md:20px;
      --max:1240px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        radial-gradient(circle at 10% 8%, rgba(252,108,26,.10), transparent 26%),
        radial-gradient(circle at 92% 18%, rgba(255,188,148,.18), transparent 30%),
        linear-gradient(180deg,#fffefb 0%,#fbf7f0 55%,#fffdf9 100%);
      color:var(--ink);
      font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing:-.015em;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    .wrap{width:min(calc(100% - 40px),var(--max));margin:auto}
    .section{padding:120px 0;position:relative}
    .section-tight{padding:82px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
      color:#5d554e;
    }
    .eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);border-radius:99px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(54px,7.1vw,106px);line-height:.94;letter-spacing:-.068em;margin-bottom:28px}
    h2{font-size:clamp(38px,5vw,72px);line-height:1;letter-spacing:-.055em;margin-bottom:24px}
    h3{font-size:24px;line-height:1.1;letter-spacing:-.035em}
    .lead{font-size:clamp(19px,2vw,27px);line-height:1.5;color:#4f4a45;max-width:880px}
    .body{font-size:18px;line-height:1.65;color:#57514b}
    .muted{color:var(--muted)}
    .orange{color:var(--orange)}
    .glass{
      background:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.88);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }

    /* Header */
    .header-shell{position:fixed;top:18px;left:0;right:0;z-index:50;pointer-events:none}
    .header{
      pointer-events:auto;
      width:min(calc(100% - 32px),1320px);margin:auto;
      min-height:78px;padding:12px 14px 12px 22px;
      border-radius:999px;
      display:grid;grid-template-columns:190px 1fr 220px;align-items:center;
      background:rgba(255,255,255,.92);border:1px solid rgba(17,17,17,.07);
      box-shadow:0 14px 50px rgba(42,26,14,.10);
      backdrop-filter:blur(20px);
    }
    .brand img{display:block;width:135px;height:auto}
    .nav{display:flex;align-items:center;justify-content:center;gap:34px;font-size:15px;font-weight:650}
    .nav a{position:relative;padding:10px 2px}
    .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;background:var(--orange);transition:.25s}
    .nav a:hover::after{right:0}
    .button{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      min-height:52px;padding:0 24px;border-radius:999px;border:1px solid transparent;
      font-weight:800;letter-spacing:-.02em;cursor:pointer;transition:.28s ease;
    }
    .button-primary{background:var(--ink);color:white;box-shadow:0 10px 30px rgba(17,17,17,.18)}
    .button-primary:hover{transform:translateY(-2px);background:var(--orange)}
    .button-secondary{background:transparent;border-color:rgba(17,17,17,.16);color:var(--ink)}
    .button-secondary:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
    .header .button{justify-self:end}
    .menu-toggle{display:none;border:0;background:transparent;width:44px;height:44px;border-radius:50%;font-size:22px}

    /* Hero */
    .hero{padding:178px 0 80px;min-height:100vh;display:flex;align-items:center}
    .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center}
    .hero-copy{position:relative;z-index:2}
    .platform-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
    .platform-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:rgba(255,255,255,.72);padding:10px 14px;border-radius:999px;font-size:13px;font-weight:750}
    .platform-dot{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(252,108,26,.10)}
    .platform-dot.soon{background:#111;box-shadow:0 0 0 5px rgba(17,17,17,.08)}
    .hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin:34px 0 22px}
    .trust-note{font-size:14px;color:#6b645e;display:flex;align-items:center;gap:10px}
    .trust-note::before{content:"✓";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(252,108,26,.12);color:var(--orange);font-weight:900}
    .hero-visual{position:relative;min-height:640px}
    .halo{position:absolute;inset:4% -12% auto auto;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(252,108,26,.32),rgba(252,108,26,.09) 42%,transparent 70%);filter:blur(8px)}
    .slack-window{
      position:absolute;inset:30px 0 auto auto;width:100%;max-width:620px;min-height:570px;
      border-radius:34px;overflow:hidden;background:rgba(255,255,255,.96);border:1px solid rgba(17,17,17,.08);box-shadow:0 32px 100px rgba(56,30,10,.18);
      transform:perspective(1200px) rotateY(-5deg) rotateX(2deg);
    }
    .slack-top{height:60px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:#fffdfa}
    .dots{display:flex;gap:7px}.dots i{width:10px;height:10px;border-radius:50%;background:#e6dfd7}.dots i:first-child{background:#ffb08a}
    .slack-brand{font-size:13px;font-weight:800;display:flex;gap:8px;align-items:center}
    .slack-brand b{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:linear-gradient(145deg,var(--orange),#ffad7d);color:white}
    .slack-body{display:grid;grid-template-columns:154px 1fr;min-height:510px}
    .sidebar{padding:22px 14px;border-right:1px solid var(--line);background:#fbf8f3}
    .sidebar-title{font-weight:850;margin-bottom:20px}.channel{padding:9px 11px;border-radius:10px;color:#77716b;font-size:14px}.channel.active{background:#fff;color:#111;font-weight:800;box-shadow:0 5px 15px rgba(17,17,17,.05)}
    .messages{padding:24px 22px 28px;background:linear-gradient(180deg,#fff 0%,#fffdfa 100%)}
    .msg{display:grid;grid-template-columns:42px 1fr;gap:12px;margin-bottom:19px}
    .avatar{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:12px;font-weight:900;background:#f0ebe5;color:#111}
    .avatar.ziroo{background:linear-gradient(145deg,#111,#343434);color:white;position:relative;overflow:hidden}
    .avatar.ziroo::after{content:"∞";font-size:21px;color:var(--orange)}
    .msg-head{font-size:14px;font-weight:850;margin:2px 0 5px}.msg-time{font-weight:500;color:#96908a;margin-left:7px}.msg-text{font-size:15px;line-height:1.5;color:#2f2d2b}
    .action-card{margin-top:12px;border:1px solid rgba(252,108,26,.18);background:linear-gradient(145deg,#fff6ef,#ffffff);padding:16px;border-radius:18px}
    .action-card strong{display:block;margin-bottom:7px}.action-list{display:grid;gap:8px;font-size:13px;color:#5c5650}.action-list span::before{content:"✓";color:var(--orange);font-weight:900;margin-right:8px}
    .status-strip{margin-top:18px;padding:12px 14px;border-radius:14px;background:#111;color:white;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:14px}.status-strip b{color:#ff9960}
    .float-card{position:absolute;border-radius:22px;padding:15px 18px;background:#fff;border:1px solid rgba(17,17,17,.08);box-shadow:var(--shadow-soft);font-size:13px;font-weight:800;z-index:4}
    .float-card.one{left:-22px;bottom:78px}.float-card.two{right:-20px;bottom:0}.float-card i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--orange);margin-right:8px}

    /* New way */
    .statement-card{
      border-radius:var(--radius-xl);padding:78px;
      background:linear-gradient(135deg,#111 0%,#191512 55%,#3a1d0d 100%);color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow);
    }
    .statement-card::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;right:-220px;top:-250px;background:radial-gradient(circle,rgba(252,108,26,.72),rgba(252,108,26,.08) 55%,transparent 70%)}
    .statement-card::after{content:"∞";position:absolute;right:58px;bottom:-56px;font-size:280px;line-height:1;color:rgba(255,255,255,.045);font-weight:700}
    .statement-card h2{max-width:980px;position:relative;z-index:2}
    .statement-card p{max-width:760px;position:relative;z-index:2;color:rgba(255,255,255,.72)}

    /* Departments */
    .section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:52px}
    .section-head p{max-width:570px;margin-bottom:0}
    .department-shell{display:grid;grid-template-columns:280px 1fr;gap:22px}
    .dept-tabs{display:grid;gap:10px}
    .dept-tab{border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:17px;padding:18px 20px;text-align:left;font-weight:850;cursor:pointer;transition:.25s;color:#5e5751}
    .dept-tab.active{background:#111;color:#fff;border-color:#111;transform:translateX(6px)}
    .dept-panel{display:none;border-radius:30px;padding:38px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);min-height:380px;position:relative;overflow:hidden}
    .dept-panel.active{display:block;animation:fade .35s ease}
    @keyframes fade{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
    .dept-panel::after{content:"";position:absolute;right:-90px;bottom:-110px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(252,108,26,.18),transparent 68%)}
    .dept-label{font-size:13px;text-transform:uppercase;letter-spacing:.14em;font-weight:850;color:var(--orange)}
    .prompt-box{margin:28px 0 20px;padding:22px;border-radius:20px;background:#f8f4ed;border:1px solid rgba(17,17,17,.07);font-size:23px;line-height:1.35;font-weight:750}
    .outcome{padding:24px;border-radius:20px;background:linear-gradient(135deg,#fff8f3,#fff);border:1px solid rgba(252,108,26,.18);font-size:18px;line-height:1.6;color:#45413d;position:relative;z-index:2}
    .outcome::before{content:"Outcome";display:block;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--orange);font-weight:900;margin-bottom:9px}

    /* Deep demo */
    .demo-wrap{border-radius:44px;padding:26px;background:linear-gradient(135deg,#ffd9c3 0%,#fff 43%,#f8eee6 100%);box-shadow:var(--shadow);border:1px solid rgba(252,108,26,.13)}
    .demo-window{border-radius:30px;overflow:hidden;background:white;border:1px solid rgba(17,17,17,.08);display:grid;grid-template-columns:235px 1fr;min-height:660px}
    .demo-side{background:#f8f4ee;border-right:1px solid var(--line);padding:28px 20px}
    .workspace{font-size:18px;font-weight:900;margin-bottom:28px}.demo-side .channel{margin-bottom:4px}.demo-side .active{background:#fff;border:1px solid var(--line)}
    .demo-main{padding:32px 34px}
    .demo-channel-head{font-size:19px;font-weight:900;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:26px}
    .demo-process{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:26px 0}
    .process-step{padding:14px 8px;text-align:center;border-radius:14px;background:#f7f3ee;font-size:12px;font-weight:850;color:#6b635c;border:1px solid transparent}
    .process-step.on{background:#111;color:white}.process-step.on:last-child{background:var(--orange)}
    .demo-recap{margin-top:18px;padding:20px;border-radius:20px;background:#111;color:white;line-height:1.55;font-size:15px}.demo-recap b{color:#ff9a62}
    .continue{margin-top:15px;padding:17px 19px;border-radius:17px;background:#fff5ee;border:1px solid rgba(252,108,26,.20);font-weight:800;color:#3a302a}

    /* Traits */
    .traits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .trait-card{min-height:270px;padding:28px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);position:relative;overflow:hidden;transition:.28s}
    .trait-card:hover{transform:translateY(-7px)}
    .trait-index{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff2e9;color:var(--orange);font-size:13px;font-weight:900;margin-bottom:42px}
    .trait-card p{font-size:16px;line-height:1.65;color:#68615b;margin-bottom:0}
    .trait-card::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-70px;bottom:-75px;background:rgba(252,108,26,.08)}
    .copy-note{margin-top:26px;padding:18px 22px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.72);color:#625b55;font-size:15px}

    /* Funnel */
    .funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch;position:relative}
    .funnel::before{content:"";position:absolute;left:8%;right:8%;top:31px;height:1px;background:linear-gradient(90deg,rgba(17,17,17,.08),rgba(252,108,26,.45),rgba(17,17,17,.08));z-index:0}
    .funnel-step{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:23px;padding:22px;min-height:230px;box-shadow:var(--shadow-soft)}
    .funnel-number{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;font-weight:900;margin-bottom:28px;border:7px solid #fff;box-sizing:content-box}
    .funnel-step:nth-child(3) .funnel-number,.funnel-step:nth-child(4) .funnel-number{background:var(--orange)}
    .funnel-step h3{font-size:20px;margin-bottom:13px}.funnel-step p{font-size:15px;line-height:1.55;color:#6a635d;margin-bottom:0}

    /* Form */
    .form-shell{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;border-radius:42px;padding:48px;background:#111;color:white;box-shadow:var(--shadow);position:relative;overflow:hidden}
    .form-shell::before{content:"";position:absolute;left:-180px;bottom:-220px;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(252,108,26,.48),transparent 70%)}
    .form-copy{position:relative;z-index:1;padding:18px}.form-copy p{color:rgba(255,255,255,.68)}
    .form-card{position:relative;z-index:2;background:white;color:#111;border-radius:28px;padding:28px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
    .field{display:grid;gap:8px}.field.full{grid-column:1/-1}.field label{font-size:13px;font-weight:850;color:#3e3935}.field input,.field select,.field textarea{width:100%;border:1px solid rgba(17,17,17,.12);border-radius:14px;padding:14px 15px;background:#fffdf9;outline:none;transition:.2s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(252,108,26,.09)}.field textarea{min-height:108px;resize:vertical}
    .checks{display:flex;flex-wrap:wrap;gap:8px}.check-pill{position:relative}.check-pill input{position:absolute;opacity:0}.check-pill label{display:block;padding:10px 13px;border-radius:999px;border:1px solid rgba(17,17,17,.12);background:#fff;cursor:pointer;font-size:13px}.check-pill input:checked+label{background:#111;color:white;border-color:#111}
    .consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.45;color:#625b55;margin:5px 0 3px}.consent input{margin-top:2px;accent-color:var(--orange)}
    .form-card .button{width:100%;margin-top:7px;border:0}

    /* Security */
    .security-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
    .security-main{border-radius:32px;padding:48px;background:linear-gradient(145deg,#fff,#fbf3ec);border:1px solid rgba(252,108,26,.14);box-shadow:var(--shadow-soft)}
    .security-stack{display:grid;gap:16px}
    .security-card{border-radius:24px;padding:26px;background:white;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
    .security-card h3{font-size:20px;margin-bottom:10px}.security-card p{margin:0;color:#69625c;line-height:1.6}
    .security-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#111;color:white;font-size:20px;margin-bottom:18px}

    /* FAQ */
    .faq{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:start}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-q{width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;border:0;background:transparent;padding:24px 0;font-size:18px;font-weight:850;cursor:pointer;color:#111}
    .faq-q span:last-child{color:var(--orange);font-size:24px;transition:.25s}.faq-item.open .faq-q span:last-child{transform:rotate(45deg)}
    .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}.faq-a p{padding:0 0 24px;margin:0;color:#68615b;line-height:1.7}
    .faq-item.open .faq-a{max-height:220px}

    /* Final CTA */
    .final-card{border-radius:46px;padding:86px 60px;text-align:center;background:linear-gradient(135deg,#fff 0%,#fff4ec 48%,#ffe1cf 100%);border:1px solid rgba(252,108,26,.18);box-shadow:var(--shadow);position:relative;overflow:hidden}
    .final-card::before,.final-card::after{content:"";position:absolute;border-radius:50%;filter:blur(4px)}
    .final-card::before{width:270px;height:270px;left:-110px;top:-120px;background:rgba(252,108,26,.14)}
    .final-card::after{width:220px;height:220px;right:-90px;bottom:-100px;background:rgba(17,17,17,.06)}
    .final-card h2{max-width:900px;margin:0 auto 24px}.final-card .trust-note{justify-content:center;margin-top:18px}
    footer{padding:34px 0 48px}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:25px;color:#77716b;font-size:13px}.footer-inner img{width:110px}

    /* Reveal */
    .ziroo-js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
    .ziroo-js [data-reveal].visible{opacity:1;transform:none}

    @media (max-width:1080px){
      .header{grid-template-columns:160px 1fr 190px}.nav{gap:20px}
      .hero-grid{grid-template-columns:1fr;gap:36px}.hero{padding-top:150px}.hero-visual{min-height:610px}.slack-window{left:50%;right:auto;transform:translateX(-50%)}
      .traits-grid{grid-template-columns:repeat(2,1fr)}
      .funnel{grid-template-columns:repeat(2,1fr)}.funnel::before{display:none}.funnel-step:last-child{grid-column:1/-1}
      .form-shell,.security-grid,.faq{grid-template-columns:1fr}
    }
    @media (max-width:820px){
      .section{padding:86px 0}.header{grid-template-columns:1fr auto;padding-left:18px}.header .button,.nav{display:none}.menu-toggle{display:block}.nav.open{display:flex;position:absolute;top:88px;left:16px;right:16px;flex-direction:column;align-items:flex-start;background:white;border-radius:24px;padding:20px;box-shadow:var(--shadow)}
      h1{font-size:clamp(52px,13vw,78px)}
      .statement-card{padding:48px 28px}.section-head{display:block}.section-head p{margin-top:18px}
      .department-shell{grid-template-columns:1fr}.dept-tabs{grid-template-columns:repeat(5,1fr);overflow-x:auto}.dept-tab{min-width:120px}.dept-tab.active{transform:none}
      .demo-window{grid-template-columns:1fr}.demo-side{display:none}.demo-main{padding:24px 18px}.demo-process{grid-template-columns:repeat(5,120px);overflow-x:auto}
      .form-shell{padding:24px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
      .final-card{padding:60px 24px}
      .footer-inner{flex-direction:column;align-items:flex-start}
    }
    @media (max-width:620px){
      .wrap{width:min(calc(100% - 24px),var(--max))}.header{width:calc(100% - 18px);top:9px;min-height:66px}.brand img{width:108px}.hero{padding-top:120px}.hero-actions{flex-direction:column}.button{width:100%}
      .hero-visual{min-height:620px}.slack-window{width:104%;min-height:580px;transform:translateX(-50%) scale(.93)}.slack-body{grid-template-columns:100px 1fr}.sidebar{padding:18px 8px}.channel{font-size:12px;padding:7px}.messages{padding:18px 12px}.msg{grid-template-columns:34px 1fr}.avatar{width:34px;height:34px}.msg-text{font-size:13px}.float-card{display:none}
      .traits-grid,.funnel{grid-template-columns:1fr}.funnel-step:last-child{grid-column:auto}.dept-tabs{grid-template-columns:repeat(5,130px)}
      .prompt-box{font-size:19px}.department-shell{gap:14px}.dept-panel{padding:24px}
      .security-main{padding:28px}.faq{gap:30px}
    }

/* WordPress integration and accessibility */
html{scroll-padding-top:110px}
html.ziroo-js{scroll-behavior:smooth}
body.ziroo-site{min-height:100vh}
body.admin-bar .header-shell{top:50px}
.brand>span,.footer-logo{display:block}
.brand img,.footer-logo img{max-width:100%;height:auto}
.header.scrolled{box-shadow:0 18px 58px rgba(42,26,14,.15);background:rgba(255,255,255,.97)}
.eyebrow-light{color:#f4c3a6}
.eyebrow-orange-light{color:#f7b28d}
.form-platform-row{margin-top:28px}
.platform-pill-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.platform-dot-white{background:#fff!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{clip:auto!important;width:auto;height:auto;top:8px;left:8px;padding:12px 18px;background:#fff;color:#111;z-index:99999;border-radius:10px;box-shadow:var(--shadow-soft)}
.menu-toggle{align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-toggle span{width:21px;height:2px;background:#111;border-radius:99px;transition:transform .25s ease,opacity .25s ease}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.dept-panel[hidden]{display:none!important}
.departments-field{border:0;padding:0;margin:0;min-width:0}
.departments-field legend{font-size:13px;font-weight:850;color:#3e3935;margin-bottom:8px}
.ziroo-honeypot{position:absolute!important;left:-9999px!important;opacity:0!important;height:0!important;overflow:hidden!important}
.form-notice{grid-column:1/-1;margin-bottom:15px;padding:14px 16px;border-radius:14px;font-size:14px;font-weight:750}
.form-notice.success{background:#effaf2;border:1px solid #bfe5c8;color:#174d25}
.form-notice.error{background:#fff1ed;border:1px solid #ffcbbb;color:#7b2710}
.form-card button[disabled]{cursor:wait;opacity:.72;transform:none}
.generic-page{padding:170px 0 100px;min-height:75vh}
.generic-page-inner{max-width:900px}
.generic-page .entry-content,.generic-page article{font-size:18px;line-height:1.75;color:#4f4a45}
.generic-page img{max-width:100%;height:auto}

@media (max-width:782px){body.admin-bar .header-shell{top:55px}}
@media (max-width:820px){.menu-toggle{display:flex}}

@media (prefers-reduced-motion:reduce){
  html,html.ziroo-js{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ziroo-js [data-reveal]{opacity:1;transform:none}
}

/* ==========================================================
   Ziroo Motion & Responsive Upgrade — v1.1.0
   ========================================================== */
:root{
  --paper:#ffffff;
  --cream:#f7f7f7;
  --surface:#ffffff;
  --surface-soft:#f7f7f8;
  --slack-plum:#3f0e40;
  --slack-plum-2:#4a154b;
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --ease-smooth:cubic-bezier(.22,1,.36,1);
}

html{background:#fff}
body,
body.ziroo-site{
  background:#fff;
  font-size:16px;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  background:
    radial-gradient(circle at 12% 12%,rgba(252,108,26,.055),transparent 23%),
    radial-gradient(circle at 88% 22%,rgba(252,108,26,.035),transparent 22%),
    #fff;
}

/* Fluid typography tuned for desktop, tablet and mobile */
h1{font-size:clamp(48px,6vw,88px);line-height:.98;letter-spacing:-.062em}
h2{font-size:clamp(36px,4.15vw,62px);line-height:1.02;letter-spacing:-.05em}
h3{font-size:clamp(20px,1.65vw,24px)}
.lead{font-size:clamp(18px,1.55vw,23px);line-height:1.55}
.section{padding:104px 0}
.section-tight{padding:72px 0}

/* Page motion layers */
.ziroo-scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:3px;
  z-index:9999;
  background:linear-gradient(90deg,var(--orange),#ff9b62);
  box-shadow:0 0 18px rgba(252,108,26,.6);
  pointer-events:none;
}
.ziroo-cursor-glow{
  position:fixed;
  left:0;
  top:0;
  width:320px;
  height:320px;
  border-radius:50%;
  transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle,rgba(252,108,26,.11),rgba(252,108,26,.04) 38%,transparent 70%);
  filter:blur(8px);
  pointer-events:none;
  z-index:-1;
  opacity:0;
  transition:opacity .35s ease;
}
body:hover .ziroo-cursor-glow{opacity:1}

/* Liquid glass header */
.header-shell{top:16px;perspective:1000px}
.header{
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.26));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:
    0 18px 55px rgba(22,22,22,.10),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(255,255,255,.28);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  transition:transform .45s var(--ease-spring),background .35s ease,box-shadow .35s ease;
}
.header::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  background:
    radial-gradient(180px circle at var(--glass-x,50%) var(--glass-y,50%),rgba(255,255,255,.95),transparent 56%),
    linear-gradient(110deg,transparent 16%,rgba(255,255,255,.42) 35%,transparent 54%);
  opacity:.75;
  transform:translateX(-6%);
  transition:opacity .3s ease;
}
.header::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(252,108,26,.32),transparent);
  opacity:.75;
}
.header.scrolled{
  background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,255,255,.48));
  box-shadow:0 20px 60px rgba(20,20,20,.13),inset 0 1px 0 rgba(255,255,255,.98);
  transform:translateY(-2px) scale(.992);
}
.header .brand,.header .nav,.header .header-cta,.header .menu-toggle{position:relative;z-index:2}
.header-cta{overflow:hidden}
.header-cta::after,.button-primary::after{
  content:"";
  position:absolute;
  inset:-80% auto -80% -45%;
  width:38%;
  transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  transition:transform .7s var(--ease-smooth);
}
.header-cta:hover::after,.button-primary:hover::after{transform:translateX(470%) rotate(16deg)}
.button{position:relative;overflow:hidden;will-change:transform}

/* Hero creative motion */
.hero{padding:158px 0 76px}
.hero-copy .platform-pill{animation:softFloat 5s ease-in-out infinite}
.hero-copy .platform-pill:nth-child(2){animation-delay:-2.2s}
.hero-visual{perspective:1400px}
.halo{animation:haloBreathe 7s ease-in-out infinite;will-change:transform,opacity}
.slack-window{
  transform:perspective(1200px) rotateY(-4deg) rotateX(1.5deg);
  transition:transform .55s var(--ease-spring),box-shadow .45s ease;
  animation:heroWindowFloat 8s ease-in-out infinite;
}
.slack-window::after{
  content:"";
  position:absolute;
  inset:-40% -20%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.48) 48%,transparent 62%);
  transform:translateX(-90%);
  animation:windowShine 7.5s ease-in-out infinite;
  pointer-events:none;
}
.float-card{animation:cardOrbit 6s ease-in-out infinite;will-change:transform}
.float-card.two{animation-delay:-2.8s}
.action-list span{display:block;opacity:0;animation:checkIn .48s var(--ease-spring) forwards}
.action-list span:nth-child(1){animation-delay:.9s}.action-list span:nth-child(2){animation-delay:1.12s}.action-list span:nth-child(3){animation-delay:1.34s}

/* Motion-rich cards without changing content */
.statement-card,.department-shell,.trait-card,.funnel-step,.security-card,.security-main,.final-card,.form-shell{
  transform-style:preserve-3d;
}
.statement-card::before{animation:orbDrift 10s ease-in-out infinite alternate}
.statement-card::after{animation:infinityDrift 12s ease-in-out infinite}
.dept-tab{position:relative;overflow:hidden}
.dept-tab::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 10%,rgba(252,108,26,.10),transparent 85%);
  transform:translateX(-110%);
  transition:transform .6s var(--ease-smooth);
}
.dept-tab:hover::after{transform:translateX(110%)}
.dept-panel.active{animation:panelEnter .62s var(--ease-spring)}
.trait-card,.funnel-step,.security-card{transition:transform .55s var(--ease-spring),box-shadow .45s ease,border-color .35s ease}
.trait-card:hover,.security-card:hover{transform:translateY(-10px) rotateX(2deg);box-shadow:0 28px 65px rgba(20,20,20,.11);border-color:rgba(252,108,26,.25)}
.trait-card::before,.funnel-step::after,.security-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(250px circle at var(--card-x,50%) var(--card-y,50%),rgba(252,108,26,.12),transparent 62%);
  opacity:0;
  transition:opacity .35s ease;
}
.trait-card:hover::before,.funnel-step:hover::after,.security-card:hover::after{opacity:1}

/* Pure white surfaces */
.sidebar,.prompt-box,.demo-side,.field input,.field select,.field textarea,.copy-note,.security-main{
  background:#fff;
}
.prompt-box{background:#f7f7f8}
.security-main{background:linear-gradient(145deg,#fff,#fafafa)}
.final-card{background:linear-gradient(135deg,#fff 0%,#fff 55%,rgba(252,108,26,.08) 100%)}
.demo-wrap{background:#fff}

/* Slack demo — fully interactive, animated and Slack-like */
.demo-section{overflow:hidden}
.demo-section::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  right:-260px;
  top:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(252,108,26,.10),transparent 66%);
  animation:orbDrift 11s ease-in-out infinite alternate;
  pointer-events:none;
}
.demo-wrap{
  padding:18px;
  border-radius:40px;
  border:1px solid rgba(17,17,17,.08);
  box-shadow:0 34px 100px rgba(24,16,12,.13);
  position:relative;
  overflow:hidden;
}
.demo-wrap::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(115deg,rgba(252,108,26,.34),rgba(255,255,255,.2),rgba(17,17,17,.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.demo-window.slack-demo{
  display:grid;
  grid-template-columns:228px minmax(0,1fr);
  grid-template-rows:44px minmax(650px,1fr);
  min-height:694px;
  border-radius:24px;
  border:1px solid rgba(17,17,17,.09);
  background:#fff;
  overflow:hidden;
  box-shadow:0 14px 48px rgba(17,17,17,.08);
}
.slack-demo-topbar{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:150px minmax(220px,520px) 40px;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:6px 14px;
  background:var(--slack-plum);
  color:#fff;
  font-size:12px;
}
.slack-history{display:flex;gap:15px;align-items:center;opacity:.8}
.slack-history span{font-size:18px;line-height:1}
.slack-search{
  min-height:30px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  color:rgba(255,255,255,.86);
}
.slack-help{width:24px;height:24px;border:1px solid rgba(255,255,255,.52);border-radius:50%;display:grid;place-items:center;justify-self:end}
.demo-side{
  grid-column:1;
  grid-row:2;
  padding:0 10px 24px;
  background:var(--slack-plum-2);
  border-right:0;
  color:#fff;
  overflow:hidden;
}
.workspace-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:72px;
  padding:12px 8px;
  border-bottom:1px solid rgba(255,255,255,.16);
  margin:0 -10px 10px;
}
.workspace-mark{width:36px;height:36px;border-radius:9px;background:#fff;color:var(--slack-plum);display:grid;place-items:center;font-weight:900}
.workspace{font-size:16px;margin:0;color:#fff}
.workspace-status{font-size:11px;color:rgba(255,255,255,.62)}
.channel-group-label{font-size:12px;color:rgba(255,255,255,.64);padding:12px 8px 7px}
.demo-side .channel{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  margin-bottom:2px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:rgba(255,255,255,.82);
  font-size:14px;
  text-align:left;
  cursor:pointer;
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.demo-side .channel:hover{background:rgba(255,255,255,.10);color:#fff;transform:translateX(2px)}
.demo-side .channel.active{background:#1264a3;color:#fff;border:0;box-shadow:none}
.demo-side .channel span{font-weight:800;opacity:.8}
.channel-badge{margin-left:auto;min-width:25px;height:18px;padding:0 5px;border-radius:9px;background:#e01e5a;color:#fff;display:grid;place-items:center;font-size:10px;font-style:normal}
.demo-main{
  grid-column:2;
  grid-row:2;
  min-width:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:0;
  background:#fff;
}
.demo-channel-head{
  min-height:66px;
  padding:10px 20px;
  margin:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #ddd;
  background:#fff;
}
.demo-channel-head strong{font-size:18px;display:block}
.demo-channel-head small{display:block;margin-top:3px;color:#777;font-size:11px;font-weight:500}
.channel-head-actions{display:flex;gap:8px}
.channel-head-actions span{width:30px;height:30px;border:1px solid #ddd;border-radius:7px;display:grid;place-items:center;color:#555;font-size:13px}
.slack-feed{
  min-height:0;
  padding:18px 22px 16px;
  overflow-y:auto;
  scroll-behavior:smooth;
  background:#fff;
  scrollbar-width:thin;
  scrollbar-color:#c8c8c8 transparent;
}
.demo-date{display:flex;align-items:center;gap:10px;margin:2px 0 22px;color:#555;font-size:11px;font-weight:700}
.demo-date::before,.demo-date::after{content:"";height:1px;background:#ddd;flex:1}
.demo-date span{padding:5px 12px;border:1px solid #ddd;border-radius:999px;background:#fff}
.slack-feed .msg{margin-bottom:20px}
.slack-feed .msg[data-animating="in"]{animation:slackMessageIn .55s var(--ease-spring)}
.slack-feed .msg-text{font-size:15px;line-height:1.52;letter-spacing:-.006em}
.slack-feed .avatar{border-radius:8px}
.slack-typing{display:inline-flex;align-items:center;gap:4px;padding:9px 12px;border-radius:15px;background:#f2f2f2}
.slack-typing i{width:6px;height:6px;border-radius:50%;background:#777;animation:typingDot 1.15s ease-in-out infinite}
.slack-typing i:nth-child(2){animation-delay:.14s}.slack-typing i:nth-child(3){animation-delay:.28s}
.demo-process{
  display:grid;
  grid-template-columns:repeat(5,minmax(110px,1fr));
  gap:7px;
  margin:7px 0 20px 54px;
  overflow-x:auto;
  scrollbar-width:none;
}
.demo-process::-webkit-scrollbar{display:none}
.process-step{
  position:relative;
  padding:10px 8px;
  border-radius:8px;
  background:#f3f3f3;
  border:1px solid #e6e6e6;
  color:#777;
  font-size:11px;
  transition:background .34s ease,color .34s ease,border-color .34s ease,transform .34s var(--ease-spring),box-shadow .34s ease;
}
.process-step.on{background:#111;color:#fff;border-color:#111;transform:translateY(-2px);box-shadow:0 8px 18px rgba(17,17,17,.13)}
.process-step.on:last-child{background:var(--orange);border-color:var(--orange)}
.process-step::after{content:"";position:absolute;left:9px;right:9px;bottom:4px;height:2px;border-radius:10px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.process-step.on::after{transform:scaleX(1)}
.demo-recap{
  max-width:760px;
  margin-top:14px;
  padding:16px 18px;
  border-radius:10px;
  background:#f7f7f7;
  border-left:4px solid var(--orange);
  color:#222;
  font-size:14px;
  box-shadow:none;
}
.demo-recap b{color:var(--orange)}
.continue{
  display:inline-block;
  margin-top:12px;
  padding:12px 14px;
  border-radius:8px;
  background:#fff7f2;
  border:1px solid rgba(252,108,26,.25);
  color:#3a302a;
  font-size:14px;
}
.demo-recap[hidden],.continue[hidden],.demo-founder-message[hidden],.demo-typing-message[hidden],.demo-ziroo-message[hidden]{display:none!important}
.demo-recap.is-visible,.continue.is-visible{animation:slackMessageIn .55s var(--ease-spring)}
.slack-composer{
  position:relative;
  min-height:96px;
  margin:0 20px 18px;
  border:1px solid #9b9b9b;
  border-radius:9px;
  background:#fff;
  box-shadow:0 1px 0 rgba(17,17,17,.05);
  overflow:hidden;
  cursor:default;
}
.composer-tools{height:33px;display:flex;align-items:center;gap:18px;padding:0 13px;background:#f7f7f7;color:#555;font-size:12px}
.composer-line{position:relative;display:flex;align-items:center;min-height:53px;padding:11px 54px 11px 13px;font-size:14px;color:#222;line-height:1.45}
.composer-placeholder{color:#999}
.composer-text:not(:empty)+.type-caret,.composer-text:not(:empty)~.type-caret{display:inline-block}
.composer-text:not(:empty)~.composer-placeholder{display:none}
.type-caret{width:1.5px;height:18px;background:#222;margin-left:2px;display:none;animation:caretBlink .8s steps(1) infinite}
.composer-send{
  position:absolute;
  right:9px;
  bottom:9px;
  width:34px;
  height:34px;
  border:0;
  border-radius:7px;
  background:#e7e7e7;
  color:#999;
  display:grid;
  place-items:center;
  transition:background .25s ease,color .25s ease,transform .35s var(--ease-spring),box-shadow .25s ease;
}
.slack-composer.has-text .composer-placeholder{display:none}
.slack-composer.has-text .composer-send{background:#007a5a;color:#fff;box-shadow:0 7px 18px rgba(0,122,90,.22)}
.slack-composer.is-sending .composer-send{transform:scale(.84) translateX(4px) rotate(-8deg)}
.slack-composer.is-sending{animation:composerSend .55s var(--ease-spring)}
.slack-demo.is-switching .demo-channel-head{animation:channelFlash .48s ease}

/* Early access hover requested */
.funnel-step{overflow:hidden}
.funnel-number{
  background:#111!important;
  transition:background .34s ease,color .34s ease,transform .45s var(--ease-spring),box-shadow .34s ease;
}
.funnel-step:hover{transform:translateY(-8px);box-shadow:0 24px 55px rgba(17,17,17,.10);border-color:rgba(252,108,26,.24)}
.funnel-step:hover .funnel-number{
  background:var(--orange)!important;
  color:#fff;
  transform:rotate(-8deg) scale(1.1);
  box-shadow:0 12px 24px rgba(252,108,26,.28);
}

/* Better scroll reveal and text movement */
.ziroo-js [data-reveal]{
  opacity:0;
  transform:translate3d(0,34px,0) scale(.985);
  filter:blur(7px);
  transition:opacity .82s var(--ease-smooth),transform .82s var(--ease-smooth),filter .72s ease;
}
.ziroo-js [data-reveal].visible{opacity:1;transform:none;filter:blur(0)}
.motion-word{display:inline-block;opacity:0;transform:translateY(28px) rotateX(18deg);transform-origin:50% 100%;transition:opacity .65s var(--ease-smooth),transform .78s var(--ease-spring)}
.motion-word.is-visible{opacity:1;transform:none}

/* Keyframes */
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes haloBreathe{0%,100%{transform:scale(.94);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes heroWindowFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes cardOrbit{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes windowShine{0%,58%{transform:translateX(-95%)}78%,100%{transform:translateX(95%)}}
@keyframes checkIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes orbDrift{0%{transform:translate3d(-15px,-10px,0) scale(.95)}100%{transform:translate3d(35px,30px,0) scale(1.08)}}
@keyframes infinityDrift{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes panelEnter{from{opacity:0;transform:translate3d(24px,14px,0) rotateY(-3deg) scale(.985)}to{opacity:1;transform:none}}
@keyframes typingDot{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-4px);opacity:1}}
@keyframes slackMessageIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes caretBlink{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes composerSend{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes channelFlash{0%{background:#fff}50%{background:#f7f7f7}100%{background:#fff}}

/* Tablet */
@media (max-width:1080px){
  h1{font-size:clamp(48px,8vw,72px)}
  h2{font-size:clamp(36px,6vw,54px)}
  .lead{font-size:clamp(18px,2.2vw,21px)}
  .section{padding:92px 0}
  .hero{padding-top:138px}
  .demo-window.slack-demo{grid-template-columns:205px minmax(0,1fr)}
}

/* Mobile */
@media (max-width:820px){
  body{font-size:15px}
  .wrap{width:min(calc(100% - 28px),var(--max))}
  .section{padding:76px 0}
  .section-tight{padding:56px 0}
  h1{font-size:clamp(42px,11.4vw,58px);line-height:1.01;letter-spacing:-.052em}
  h2{font-size:clamp(33px,9vw,45px);line-height:1.04;letter-spacing:-.045em}
  h3{font-size:20px}
  .lead{font-size:17px;line-height:1.55}
  .eyebrow{font-size:10px;letter-spacing:.13em}
  .hero{padding:116px 0 58px;min-height:auto}
  .hero-grid{gap:30px}
  .hero-actions{margin-top:26px}
  .trust-note{font-size:12px;align-items:flex-start}
  .hero-visual{min-height:520px}
  .slack-window{min-height:500px}
  .section-head{margin-bottom:36px}
  .statement-card{padding:42px 24px}
  .department-shell{gap:12px}
  .dept-panel{min-height:330px}
  .demo-wrap{padding:8px;border-radius:25px}
  .demo-window.slack-demo{
    grid-template-columns:1fr;
    grid-template-rows:42px auto minmax(590px,auto);
    min-height:auto;
    border-radius:18px;
  }
  .slack-demo-topbar{grid-column:1;grid-row:1;grid-template-columns:1fr minmax(160px,2fr) auto;padding:5px 9px}
  .slack-history{display:none}
  .demo-side{
    grid-column:1;
    grid-row:2;
    display:flex;
    align-items:center;
    gap:4px;
    overflow-x:auto;
    padding:8px;
    border:0;
    scrollbar-width:none;
  }
  .demo-side::-webkit-scrollbar{display:none}
  .workspace-row,.channel-group-label{display:none}
  .demo-side .channel{width:auto;min-width:max-content;margin:0;padding:8px 11px}
  .demo-main{grid-column:1;grid-row:3;min-height:590px}
  .demo-channel-head{min-height:58px;padding:9px 13px}
  .slack-feed{padding:14px 13px 12px}
  .slack-feed .msg{grid-template-columns:34px minmax(0,1fr);gap:9px}
  .slack-feed .avatar{width:34px;height:34px}
  .slack-feed .msg-text{font-size:13px;line-height:1.48}
  .demo-process{margin-left:43px;grid-template-columns:repeat(5,108px)}
  .process-step{font-size:10px;padding:9px 6px}
  .demo-recap,.continue{font-size:12px}
  .slack-composer{margin:0 10px 10px;min-height:88px}
  .composer-tools{gap:13px}
  .composer-line{font-size:12px;min-height:48px;padding-right:48px}
  .funnel-step{min-height:190px}
  .funnel-number{margin-bottom:20px}
  .form-shell{border-radius:28px}
  .form-copy{padding:4px}
  .form-card{padding:20px;border-radius:22px}
  .security-main{padding:26px}
  .final-card{border-radius:28px}
  .ziroo-cursor-glow{display:none}
}

@media (max-width:620px){
  .header{min-height:62px;padding:9px 11px 9px 16px}
  .brand img{width:102px}
  .menu-toggle{width:40px;height:40px}
  .platform-row{gap:7px;margin-bottom:20px}
  .platform-pill{font-size:11px;padding:8px 10px}
  .hero-visual{min-height:485px}
  .slack-window{width:100%;min-height:470px;transform:translateX(-50%) scale(1)}
  .slack-body{grid-template-columns:82px 1fr;min-height:410px}
  .sidebar{padding:14px 6px}
  .channel{font-size:10px;padding:7px 5px}
  .messages{padding:15px 10px}
  .msg{grid-template-columns:30px minmax(0,1fr);gap:8px}
  .avatar{width:30px;height:30px;border-radius:9px}
  .msg-head{font-size:11px}.msg-text{font-size:11px}
  .action-card{padding:12px}.status-strip{font-size:10px;padding:9px}
  .department-shell{display:block}
  .dept-tabs{display:flex;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
  .dept-tabs::-webkit-scrollbar{display:none}
  .dept-tab{min-width:max-content;padding:12px 15px;font-size:13px}
  .dept-panel{padding:22px;min-height:300px}
  .prompt-box{font-size:17px;padding:18px}
  .outcome{font-size:15px;padding:18px}
  .traits-grid,.funnel{gap:12px}
  .trait-card{min-height:230px;padding:22px}
  .trait-index{margin-bottom:30px}
  .faq-q{font-size:16px;padding:20px 0}
}

@media (prefers-reduced-motion:reduce){
  .ziroo-scroll-progress,.ziroo-cursor-glow{display:none!important}
  .motion-word{opacity:1!important;transform:none!important}
  .slack-window,.halo,.float-card,.statement-card::before,.statement-card::after{animation:none!important}
}

/* =========================================================
   Ziroo v1.2 — Compact Editorial Scale & Interaction Polish
   ========================================================= */

/* Natural brand-gradient browser scrollbar */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--orange) #f2f2f2;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#f2f2f2}
::-webkit-scrollbar-thumb{
  min-height:42px;
  border:2px solid #f2f2f2;
  border-radius:999px;
  background:linear-gradient(180deg,#111 0%,var(--orange) 54%,var(--orange-2) 100%);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--orange) 0%,var(--orange-2) 100%);
}

/* More restrained type scale across the complete website */
body,
body.ziroo-site{font-size:15px;line-height:1.55}
h1{font-size:clamp(42px,5.15vw,74px);line-height:.99;letter-spacing:-.058em;margin-bottom:22px}
h2{font-size:clamp(30px,3.45vw,50px);line-height:1.04;letter-spacing:-.046em;margin-bottom:18px}
h3{font-size:clamp(18px,1.35vw,21px);line-height:1.18}
.lead{font-size:clamp(16px,1.25vw,19px);line-height:1.58;max-width:760px}
.body{font-size:16px;line-height:1.62}
.eyebrow{font-size:10px;letter-spacing:.15em}
.button{min-height:48px;padding:0 21px;font-size:14px}
.nav{font-size:14px}

/* Tighter, more connected section rhythm */
.section{padding:74px 0}
.section-tight{padding:48px 0}
.hero{padding:142px 0 58px;min-height:auto}
.section-head{gap:34px;margin-bottom:30px}
.statement-card{padding:54px 58px}
.trait-card{min-height:230px;padding:24px}
.trait-index{margin-bottom:30px}
.funnel-step{min-height:205px;padding:20px}
.form-shell{padding:38px;gap:30px}
.security-main{padding:38px}
.final-card{padding:58px 34px}
footer{padding:27px 0}

/* Redesigned department breadth: premium horizontal rail + balanced content */
#use-cases .section-head{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(360px,1.18fr);
  align-items:end;
  padding:0 8px;
}
#use-cases .section-head h2{max-width:520px;margin-bottom:0}
#use-cases .section-head .lead{justify-self:end;max-width:590px;margin-bottom:2px}
.department-shell{
  display:block;
  position:relative;
  padding:8px;
  border:1px solid rgba(17,17,17,.08);
  border-radius:30px;
  background:rgba(255,255,255,.82);
  box-shadow:0 22px 60px rgba(17,17,17,.075);
  overflow:hidden;
}
.department-shell::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-180px;
  bottom:-230px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(252,108,26,.13),transparent 68%);
  pointer-events:none;
}
.dept-tabs{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  padding:5px;
  margin-bottom:8px;
  border-radius:20px;
  background:#f5f5f5;
  border:1px solid rgba(17,17,17,.055);
}
.dept-tab{
  min-height:50px;
  padding:10px 14px;
  border:0;
  border-radius:15px;
  text-align:center;
  font-size:14px;
  font-weight:780;
  color:#66605b;
  background:transparent;
  transform:none!important;
  box-shadow:none;
  transition:background .38s var(--ease-smooth),color .28s ease,box-shadow .38s ease,transform .45s var(--ease-spring);
}
.dept-tab::before{
  content:"";
  width:6px;
  height:6px;
  display:inline-block;
  margin-right:8px;
  border-radius:50%;
  background:#c8c8c8;
  vertical-align:1px;
  transition:background .3s ease,box-shadow .3s ease,transform .38s var(--ease-spring);
}
.dept-tab:hover{color:#111;background:rgba(255,255,255,.75)}
.dept-tab.active{
  color:#111;
  background:#fff;
  box-shadow:0 8px 24px rgba(17,17,17,.08),inset 0 0 0 1px rgba(17,17,17,.055);
}
.dept-tab.active::before{
  background:var(--orange);
  box-shadow:0 0 0 5px rgba(252,108,26,.10);
  transform:scale(1.05);
}
.dept-panels{position:relative;z-index:1}
.dept-panel{
  min-height:0;
  padding:29px;
  border:0;
  border-radius:22px;
  background:#fff;
  box-shadow:none;
}
.dept-panel.active{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-areas:"label label" "prompt outcome";
  gap:14px 18px;
  animation:departmentPanelSoft .62s var(--ease-smooth);
}
.dept-panel::after{width:220px;height:220px;right:-95px;bottom:-125px;opacity:.8}
.dept-label{
  grid-area:label;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  letter-spacing:.16em;
  padding:0 4px 2px;
}
.dept-label::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(252,108,26,.35),transparent)}
.prompt-box{
  grid-area:prompt;
  display:flex;
  align-items:center;
  min-height:142px;
  margin:0;
  padding:24px;
  border-radius:18px;
  background:#111;
  border:1px solid #111;
  color:#fff;
  font-size:clamp(18px,1.65vw,23px);
  line-height:1.38;
  font-weight:720;
  position:relative;
  overflow:hidden;
}
.prompt-box::after{
  content:"";
  position:absolute;
  right:-45px;
  bottom:-60px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(252,108,26,.42),transparent 69%);
}
.outcome{
  grid-area:outcome;
  min-height:142px;
  margin:0;
  padding:24px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(135deg,#fff7f1 0%,#fff 75%);
  border:1px solid rgba(252,108,26,.23);
  font-size:16px;
  line-height:1.58;
}
.outcome::before{font-size:10px;margin-bottom:8px}

/* Deliberately limited section-level transitions: use-cases + Slack demo */
.ziroo-js .section-motion{
  opacity:0;
  filter:blur(8px);
  transition:opacity 1s var(--ease-smooth),transform 1.05s var(--ease-smooth),filter .9s ease;
  will-change:opacity,transform,filter;
}
.ziroo-js .section-motion-left{transform:translate3d(-38px,20px,0)}
.ziroo-js .section-motion-right{transform:translate3d(38px,20px,0)}
.ziroo-js .section-motion.is-section-visible{opacity:1;transform:none;filter:blur(0)}

/* Softer element reveals */
.ziroo-js [data-reveal]{
  transform:translate3d(0,22px,0) scale(.993);
  filter:blur(4px);
  transition-duration:.9s,.9s,.78s;
}

/* Smooth animated cursor companion; native cursor remains usable */
.ziroo-cursor-dot,
.ziroo-cursor-ring{
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:99998;
  opacity:0;
  transform:translate3d(-50%,-50%,0);
  transition:opacity .25s ease,width .32s var(--ease-spring),height .32s var(--ease-spring),background .25s ease,border-color .25s ease;
}
.ziroo-cursor-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(252,108,26,.10);
}
.ziroo-cursor-ring{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(17,17,17,.38);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
body.ziroo-cursor-ready .ziroo-cursor-dot,
body.ziroo-cursor-ready .ziroo-cursor-ring{opacity:1}
body.ziroo-cursor-hover .ziroo-cursor-ring{
  width:52px;
  height:52px;
  border-color:rgba(252,108,26,.72);
  background:rgba(252,108,26,.08);
}
body.ziroo-cursor-hover .ziroo-cursor-dot{background:#111}
body.ziroo-cursor-down .ziroo-cursor-ring{width:27px;height:27px;background:rgba(252,108,26,.14)}

/* Compact circular go-to-top control */
.ziroo-back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg,#111 5%,#2b201a 48%,var(--orange) 145%);
  box-shadow:0 14px 34px rgba(17,17,17,.18),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  z-index:80;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.88);
  transition:opacity .35s ease,visibility .35s ease,transform .48s var(--ease-spring),box-shadow .3s ease,background .3s ease;
}
.ziroo-back-to-top svg{width:20px;height:20px;transition:transform .38s var(--ease-spring)}
.ziroo-back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.ziroo-back-to-top:hover{background:var(--orange);box-shadow:0 16px 38px rgba(252,108,26,.28);transform:translateY(-3px)}
.ziroo-back-to-top:hover svg{transform:translateY(-2px)}
.ziroo-back-to-top:focus-visible{outline:3px solid rgba(252,108,26,.28);outline-offset:4px}

@keyframes departmentPanelSoft{
  from{opacity:0;transform:translate3d(0,12px,0) scale(.992);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

@media (max-width:1080px){
  h1{font-size:clamp(40px,6.7vw,64px)}
  h2{font-size:clamp(30px,4.7vw,44px)}
  .lead{font-size:17px}
  .section{padding:66px 0}
  .section-tight{padding:44px 0}
  #use-cases .section-head{grid-template-columns:.9fr 1.1fr}
  .dept-panel.active{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  body,body.ziroo-site{font-size:14px}
  h1{font-size:clamp(36px,9.8vw,50px);line-height:1.02}
  h2{font-size:clamp(27px,7.6vw,38px);line-height:1.06}
  h3{font-size:18px}
  .lead{font-size:16px;line-height:1.55}
  .body{font-size:15px}
  .section{padding:54px 0}
  .section-tight{padding:36px 0}
  .hero{padding:108px 0 44px}
  .section-head{margin-bottom:24px}
  .statement-card{padding:36px 22px}
  #use-cases .section-head{display:block;padding:0}
  #use-cases .section-head .lead{margin-top:13px;max-width:620px}
  .department-shell{padding:6px;border-radius:23px}
  .dept-tabs{
    display:flex;
    gap:5px;
    overflow-x:auto;
    margin-bottom:6px;
    border-radius:16px;
    scrollbar-width:none;
  }
  .dept-tabs::-webkit-scrollbar{display:none}
  .dept-tab{min-width:max-content;min-height:44px;padding:9px 13px;font-size:12px}
  .dept-panel{padding:20px;border-radius:17px}
  .dept-panel.active{display:grid;grid-template-columns:1fr;grid-template-areas:"label" "prompt" "outcome";gap:10px}
  .prompt-box,.outcome{min-height:0;padding:19px;border-radius:15px}
  .prompt-box{font-size:17px}
  .outcome{font-size:14px}
  .trait-card{min-height:205px}
  .funnel-step{min-height:170px}
  .form-shell{padding:24px}
  .ziroo-back-to-top{right:14px;bottom:14px;width:43px;height:43px}
  .ziroo-cursor-dot,.ziroo-cursor-ring{display:none!important}
}

@media (max-width:620px){
  h1{font-size:clamp(34px,10.8vw,45px)}
  h2{font-size:clamp(26px,8.3vw,35px)}
  .lead{font-size:15px}
  .button{min-height:46px;font-size:13px}
  .section{padding:48px 0}
  .section-tight{padding:32px 0}
  .hero{padding-top:100px}
  .statement-card{padding:32px 20px}
  .dept-tab::before{width:5px;height:5px;margin-right:6px}
  .prompt-box{font-size:16px;line-height:1.42}
  .outcome{font-size:13px}
  .copy-note{font-size:13px}
  .faq-q{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .ziroo-js .section-motion{opacity:1!important;transform:none!important;filter:none!important}
  .ziroo-cursor-dot,.ziroo-cursor-ring{display:none!important}
  .ziroo-back-to-top{transition:none}
}

/* =========================================================
   Ziroo v1.3 — Cinematic Hero + Mobile Off-canvas Navigation
   ========================================================= */

/* Hard overflow guard: prevents fixed controls, transforms and ambient layers
   from creating a sideways page on narrow screens. */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
@supports (overflow:clip){
  html,
  body{overflow-x:clip}
}
main,
section,
.wrap,
.hero-grid,
.hero-copy,
.hero-visual,
.slack-window,
.slack-body,
.messages{
  min-width:0;
  max-width:100%;
}
img,svg{max-width:100%}

/* Desktop navigation remains independent from the mobile drawer. */
.desktop-nav{display:flex}
.mobile-menu,
.mobile-menu-backdrop{display:none}

/* More cinematic, luxury hero treatment without changing the approved copy. */
.hero{
  isolation:isolate;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(700px circle at var(--hero-x,78%) var(--hero-y,34%),rgba(252,108,26,.095),transparent 64%),
    linear-gradient(180deg,#fff 0%,#fff 80%,rgba(252,108,26,.018) 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:86px 0 auto 0;
  height:1px;
  z-index:-1;
  background:linear-gradient(90deg,transparent 2%,rgba(17,17,17,.06) 18%,rgba(252,108,26,.25) 50%,rgba(17,17,17,.06) 82%,transparent 98%);
  transform-origin:center;
  animation:heroLineBreathe 5.8s ease-in-out infinite;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-2;
  width:680px;
  height:680px;
  right:-250px;
  top:90px;
  border-radius:50%;
  border:1px solid rgba(252,108,26,.08);
  box-shadow:
    0 0 0 64px rgba(252,108,26,.018),
    0 0 0 132px rgba(17,17,17,.012),
    inset 0 0 100px rgba(252,108,26,.025);
  animation:heroDiscRotate 24s linear infinite;
}
.hero-grid{position:relative;z-index:2}
.hero-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:280px;
  height:280px;
  left:-118px;
  top:28%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(252,108,26,.075),transparent 70%);
  filter:blur(4px);
  animation:heroCopyGlow 8s ease-in-out infinite;
}
.hero-copy h1{max-width:760px}
.hero-copy h1 .orange{
  display:inline;
  color:transparent;
  background:linear-gradient(100deg,#fc6c1a 0%,#ff8b49 35%,#fc6c1a 60%,#ffad7e 82%,#fc6c1a 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:orangeTextFlow 7s ease-in-out infinite;
}
.hero-copy .platform-pill{
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.62));
  box-shadow:0 12px 32px rgba(17,17,17,.045),inset 0 1px 0 #fff;
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}
.hero-copy .button-primary{
  box-shadow:0 14px 38px rgba(17,17,17,.18),0 0 0 1px rgba(255,255,255,.12) inset;
}
.hero-copy .trust-note{position:relative}

.hero-visual{
  transform:translate3d(var(--hero-shift-x,0),var(--hero-shift-y,0),0);
  transition:transform .85s var(--ease-smooth);
  isolation:isolate;
}
.hero-ambient{
  position:absolute;
  inset:-34px -52px -20px -52px;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;
  border-radius:52px;
}
.hero-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(252,108,26,.14);
  opacity:.75;
}
.orbit-one{
  width:560px;
  height:560px;
  right:-100px;
  top:-20px;
  border-style:dashed;
  animation:heroOrbitSpin 25s linear infinite;
}
.orbit-two{
  width:430px;
  height:430px;
  left:0;
  bottom:-120px;
  border-color:rgba(17,17,17,.075);
  animation:heroOrbitSpinReverse 19s linear infinite;
}
.hero-particle{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 8px rgba(252,108,26,.08),0 0 28px rgba(252,108,26,.34);
}
.particle-one{right:9%;top:12%;animation:heroParticleOne 7s ease-in-out infinite}
.particle-two{left:10%;top:38%;width:5px;height:5px;animation:heroParticleTwo 8.4s ease-in-out infinite}
.particle-three{right:20%;bottom:6%;width:6px;height:6px;animation:heroParticleThree 6.8s ease-in-out infinite}
.hero-scan{
  position:absolute;
  left:6%;
  right:6%;
  top:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(252,108,26,.6),transparent);
  filter:drop-shadow(0 0 8px rgba(252,108,26,.35));
  opacity:0;
  animation:heroScan 6.6s var(--ease-smooth) infinite;
}
.hero-visual .halo{
  width:min(540px,92%);
  height:min(540px,92%);
  right:-4%;
  top:1%;
  background:radial-gradient(circle,rgba(252,108,26,.22),rgba(252,108,26,.055) 44%,transparent 72%);
  filter:blur(4px);
}
.hero-visual .slack-window{
  border-color:rgba(17,17,17,.07);
  box-shadow:
    0 42px 120px rgba(30,20,14,.17),
    0 0 0 1px rgba(255,255,255,.78) inset,
    0 18px 50px rgba(252,108,26,.055);
}
.hero-visual .slack-top{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,249,245,.84));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.hero-visual .sidebar{background:linear-gradient(180deg,#fbfaf8,#f8f5f1)}
.hero-visual .messages{background:linear-gradient(180deg,#fff 0%,#fffdfa 100%)}
.hero-visual .channel{
  transition:background .45s var(--ease-smooth),color .35s ease,transform .5s var(--ease-spring),box-shadow .45s ease;
}
.hero-visual .channel.hero-channel-pulse{
  color:#111;
  background:#fff;
  transform:translateX(3px);
  box-shadow:0 8px 22px rgba(17,17,17,.07),inset 3px 0 0 var(--orange);
}
.hero-visual .action-list span{
  opacity:.58;
  animation:none;
  transform:translateX(-4px);
  transition:opacity .45s ease,transform .58s var(--ease-spring),color .35s ease;
}
.hero-visual .action-list span.hero-check-active{
  opacity:1;
  transform:none;
  color:#282522;
}
.hero-visual .status-strip{
  position:relative;
  overflow:hidden;
  transition:box-shadow .48s ease,transform .48s var(--ease-spring);
}
.hero-visual .status-strip::after{
  content:"";
  position:absolute;
  inset:-80% auto -80% -38%;
  width:28%;
  transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  opacity:0;
}
.hero-visual .status-strip.hero-status-active{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(17,17,17,.18);
}
.hero-visual .status-strip.hero-status-active::after{animation:heroStatusShine .92s var(--ease-smooth)}
.float-card{
  backdrop-filter:blur(18px) saturate(155%);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  background:rgba(255,255,255,.82);
}

/* Off-canvas mobile menu. */
.mobile-menu-backdrop{
  position:fixed;
  inset:0;
  z-index:9990;
  display:block;
  background:rgba(10,10,10,.24);
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s ease,visibility .5s ease,backdrop-filter .55s ease,-webkit-backdrop-filter .55s ease;
}
.mobile-menu-backdrop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.mobile-menu{
  position:fixed;
  inset:0 0 0 auto;
  z-index:10000;
  display:block;
  width:min(88vw,390px);
  height:100vh;
  height:100dvh;
  padding:12px;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(105%,0,0);
  transition:transform .78s cubic-bezier(.16,1,.3,1),visibility .78s ease;
  will-change:transform;
}
.mobile-menu::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(380px circle at 110% 12%,rgba(252,108,26,.19),transparent 64%),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.88));
  border-left:1px solid rgba(255,255,255,.92);
  box-shadow:-28px 0 90px rgba(17,17,17,.18);
  backdrop-filter:blur(34px) saturate(175%);
  -webkit-backdrop-filter:blur(34px) saturate(175%);
}
.mobile-menu.is-open{
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.mobile-menu-inner{
  position:relative;
  z-index:2;
  height:100%;
  padding:10px 10px 18px;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:5px 3px 22px}
.mobile-menu-brand img{display:block;width:112px;height:auto}
.mobile-menu-close{
  width:46px;
  height:46px;
  flex:0 0 auto;
  border:1px solid rgba(17,17,17,.09);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.76);
  color:#111;
  box-shadow:0 10px 30px rgba(17,17,17,.07),inset 0 1px 0 #fff;
  cursor:pointer;
  opacity:0;
  transform:rotate(-35deg) scale(.7);
  transition:transform .6s var(--ease-spring),opacity .45s ease,background .3s ease,color .3s ease;
}
.mobile-menu-close svg{width:21px;height:21px}
.mobile-menu.is-open .mobile-menu-close{opacity:1;transform:none;transition-delay:.18s}
.mobile-menu-close:hover{background:#111;color:#fff}
.mobile-menu-nav{display:grid;margin-top:24px;border-top:1px solid rgba(17,17,17,.09)}
.mobile-menu-nav a{
  display:grid;
  grid-template-columns:34px 1fr 30px;
  align-items:center;
  gap:9px;
  min-height:78px;
  padding:0 4px;
  border-bottom:1px solid rgba(17,17,17,.09);
  opacity:0;
  transform:translate3d(34px,0,0);
  transition:opacity .52s ease,transform .72s var(--ease-spring),color .3s ease;
}
.mobile-menu-nav a span{font-size:10px;font-weight:850;letter-spacing:.12em;color:var(--orange)}
.mobile-menu-nav a strong{font-size:25px;line-height:1;letter-spacing:-.045em}
.mobile-menu-nav a i{font-style:normal;font-size:18px;text-align:right;transition:transform .4s var(--ease-spring)}
.mobile-menu-nav a:hover i{transform:translate(3px,-3px)}
.mobile-menu.is-open .mobile-menu-nav a{opacity:1;transform:none}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(1){transition-delay:.17s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(2){transition-delay:.24s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(3){transition-delay:.31s}
.mobile-menu-cta{
  width:100%;
  margin-top:auto;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .5s ease,transform .72s var(--ease-spring),background .3s ease;
}
.mobile-menu.is-open .mobile-menu-cta{opacity:1;transform:none;transition-delay:.38s}
body.mobile-menu-open{overflow:hidden!important;overscroll-behavior:none}
body.mobile-menu-open .ziroo-back-to-top{opacity:0!important;visibility:hidden!important;pointer-events:none}

/* Back-to-top remains naturally inside the visual viewport. */
.ziroo-back-to-top{
  right:max(14px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));
  contain:layout paint;
  transform:translate3d(0,14px,0) scale(.88);
}
.ziroo-back-to-top.is-visible{transform:translate3d(0,0,0) scale(1)}

@keyframes heroLineBreathe{0%,100%{opacity:.35;transform:scaleX(.78)}50%{opacity:.9;transform:scaleX(1)}}
@keyframes heroDiscRotate{to{transform:rotate(360deg)}}
@keyframes heroCopyGlow{0%,100%{transform:translate3d(0,0,0) scale(.92);opacity:.62}50%{transform:translate3d(28px,-12px,0) scale(1.08);opacity:1}}
@keyframes orangeTextFlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes heroOrbitSpin{to{transform:rotate(360deg)}}
@keyframes heroOrbitSpinReverse{to{transform:rotate(-360deg)}}
@keyframes heroParticleOne{0%,100%{transform:translate3d(0,0,0);opacity:.4}50%{transform:translate3d(-24px,32px,0);opacity:1}}
@keyframes heroParticleTwo{0%,100%{transform:translate3d(0,0,0);opacity:.35}50%{transform:translate3d(28px,-18px,0);opacity:.9}}
@keyframes heroParticleThree{0%,100%{transform:translate3d(0,0,0);opacity:.45}50%{transform:translate3d(-18px,-34px,0);opacity:1}}
@keyframes heroScan{0%,13%{transform:translateY(0);opacity:0}24%{opacity:.7}68%{opacity:.45}82%,100%{transform:translateY(430px);opacity:0}}
@keyframes heroStatusShine{0%{transform:translateX(0) rotate(16deg);opacity:0}18%{opacity:1}100%{transform:translateX(620%) rotate(16deg);opacity:0}}

@media (max-width:820px){
  .header-shell{
    left:0;
    right:0;
    width:100%;
    padding:0 10px;
  }
  .header{
    width:100%;
    max-width:none;
    margin:0;
    grid-template-columns:minmax(0,1fr) 44px;
    min-height:62px;
    padding:8px 9px 8px 16px;
    overflow:hidden;
  }
  .desktop-nav,
  .header-cta{display:none!important}
  .menu-toggle{
    display:flex;
    position:relative;
    z-index:3;
    flex:0 0 42px;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(17,17,17,.075);
    background:rgba(255,255,255,.56);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.94);
  }
  .menu-toggle.active{background:#111}
  .menu-toggle.active span{background:#fff}
  .brand{min-width:0;overflow:hidden}
  .brand img{width:104px;max-width:104px}

  .hero{
    padding:108px 0 46px;
    overflow:hidden;
  }
  .hero::before{top:82px}
  .hero::after{
    width:430px;
    height:430px;
    right:-300px;
    top:170px;
    box-shadow:0 0 0 38px rgba(252,108,26,.014),0 0 0 82px rgba(17,17,17,.01);
  }
  .hero-grid{width:100%;gap:34px}
  .hero-copy{width:100%;overflow:visible}
  .hero-copy::before{width:210px;height:210px;left:-95px;top:22%}
  .hero-copy h1{font-size:clamp(36px,10.25vw,46px);line-height:1.02;letter-spacing:-.052em;max-width:100%;overflow-wrap:anywhere}
  .hero-copy .lead{font-size:14.5px;line-height:1.56;max-width:100%}
  .platform-row{max-width:100%;flex-wrap:wrap}
  .platform-pill{max-width:100%;white-space:normal}
  .hero-actions{width:100%;gap:10px}
  .hero-actions .button{width:100%}
  .trust-note{max-width:100%;line-height:1.48}

  .hero-visual{
    width:100%;
    min-height:auto;
    padding:20px 0 0;
    transform:none!important;
    perspective:none;
  }
  .hero-ambient{inset:-8px 0 -8px;border-radius:30px}
  .orbit-one{width:380px;height:380px;right:-190px;top:8px}
  .orbit-two{width:270px;height:270px;left:-125px;bottom:-90px}
  .hero-scan{left:2%;right:2%}
  .hero-visual .halo{inset:0 auto auto 50%;width:330px;height:330px;transform:translateX(-50%);max-width:none}
  .hero-visual .slack-window{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    width:100%;
    max-width:100%;
    min-height:0;
    margin:0;
    transform:none!important;
    animation:mobileHeroWindowFloat 7s ease-in-out infinite;
    border-radius:24px;
  }
  .slack-top{height:52px;padding:0 14px}
  .slack-brand{font-size:11px}
  .slack-body{grid-template-columns:76px minmax(0,1fr);min-height:410px}
  .sidebar{padding:14px 6px;min-width:0}
  .sidebar-title{font-size:12px;margin-bottom:14px;overflow:hidden;text-overflow:ellipsis}
  .sidebar .channel{font-size:9.5px;padding:7px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .messages{min-width:0;padding:15px 10px 18px;overflow:hidden}
  .messages .msg{grid-template-columns:30px minmax(0,1fr);gap:8px}
  .messages .avatar{width:30px;height:30px}
  .messages .msg-head{font-size:11px}
  .messages .msg-time{margin-left:4px}
  .messages .msg-text{font-size:10.5px;line-height:1.46;overflow-wrap:anywhere}
  .messages .action-card{padding:11px;border-radius:14px}
  .messages .action-list{font-size:10px;gap:6px}
  .messages .status-strip{font-size:9.5px;padding:9px 10px;gap:7px;flex-wrap:wrap}
  .float-card{display:none!important}

  .ziroo-back-to-top{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));
    width:42px;
    height:42px;
  }
}

@media (max-width:420px){
  .wrap{width:calc(100% - 28px)}
  .header-shell{padding:0 8px}
  .header{padding-left:13px}
  .brand img{width:96px;max-width:96px}
  .hero-copy h1{font-size:clamp(34px,9.8vw,40px)}
  .platform-pill{font-size:10px;padding:7px 9px}
  .slack-brand{gap:6px}
  .slack-brand b{width:24px;height:24px}
  .slack-body{grid-template-columns:68px minmax(0,1fr)}
  .sidebar .channel{font-size:8.8px}
  .messages{padding-inline:8px}
  .messages .msg-text{font-size:10px}
  .mobile-menu{width:min(91vw,370px);padding:8px}
  .mobile-menu-inner{padding:8px 8px 14px}
  .mobile-menu-nav a{min-height:72px}
  .mobile-menu-nav a strong{font-size:23px}
}

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.hero-copy::before,.hero-copy h1 .orange,.hero-orbit,.hero-particle,.hero-scan,.hero-visual .slack-window{animation:none!important}
  .mobile-menu,.mobile-menu-backdrop,.mobile-menu-close,.mobile-menu-nav a,.mobile-menu-cta{transition-duration:.01ms!important}
}

@keyframes mobileHeroWindowFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}

/* =========================================================
   Ziroo Theme v1.4 — mobile spacing + authentic Slack app
   ========================================================= */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
body.admin-bar .header-shell{top:48px}

/* A more deliberate hero entrance while retaining the approved copy. */
.ziroo-js .hero-copy.visible > *{
  animation:zirooHeroItemIn .9s var(--ease-smooth) both;
}
.ziroo-js .hero-copy.visible > *:nth-child(1){animation-delay:.04s}
.ziroo-js .hero-copy.visible > *:nth-child(2){animation-delay:.12s}
.ziroo-js .hero-copy.visible > *:nth-child(3){animation-delay:.2s}
.ziroo-js .hero-copy.visible > *:nth-child(4){animation-delay:.28s}
.ziroo-js .hero-copy.visible > *:nth-child(5){animation-delay:.36s}
@keyframes zirooHeroItemIn{
  from{opacity:0;transform:translate3d(0,20px,0);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* Authentic Slack desktop application shell. */
.demo-section{
  overflow:clip;
  background:
    radial-gradient(580px circle at 12% 18%,rgba(252,108,26,.055),transparent 70%),
    #fff;
}
.demo-wrap{
  position:relative;
  max-width:1180px;
  margin-inline:auto;
}
.demo-wrap::before{
  content:"";
  position:absolute;
  inset:-32px 6% auto;
  height:110px;
  border-radius:50%;
  background:rgba(252,108,26,.16);
  filter:blur(70px);
  pointer-events:none;
}
.demo-window.slack-demo{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:76px 278px minmax(0,1fr);
  grid-template-rows:49px minmax(690px,74vh);
  width:100%;
  min-width:0;
  min-height:739px;
  max-height:820px;
  overflow:hidden;
  border:1px solid rgba(34,8,35,.32);
  border-radius:24px;
  background:#fff;
  box-shadow:0 34px 100px rgba(35,11,36,.22),0 6px 24px rgba(17,17,17,.08);
  transform:none;
}
.slack-demo-topbar{
  grid-column:1/-1;
  grid-row:1;
  display:grid;
  grid-template-columns:120px 118px minmax(240px,1fr) 112px;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:0 14px;
  color:#f8edf8;
  background:linear-gradient(180deg,#4b154c 0%,#401041 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.slack-window-controls{display:flex;align-items:center;gap:9px}
.slack-window-controls i{display:block;width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 -1px 1px rgba(0,0,0,.15)}
.slack-window-controls i:nth-child(2){background:#ffbd2e}
.slack-window-controls i:nth-child(3){background:#28c840}
.slack-history{display:flex;align-items:center;gap:8px;justify-content:center}
.slack-history span{display:grid;place-items:center;width:27px;height:27px;border-radius:7px;color:rgba(255,255,255,.82)}
.slack-history svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.slack-global-search{
  justify-self:center;
  width:min(100%,500px);
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.23);
  border-radius:8px;
  color:rgba(255,255,255,.76);
  background:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  font-size:12px;
}
.slack-global-search svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.slack-top-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.slack-top-actions>span{display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(255,255,255,.44);border-radius:50%;font-size:12px;font-weight:800}
.slack-top-actions .slack-user-dot{border:0;background:#f0e8e1;color:#2a102b;box-shadow:0 0 0 2px rgba(255,255,255,.22)}

.slack-app-rail{
  grid-column:1;
  grid-row:2;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px 7px 12px;
  color:#fff;
  background:linear-gradient(180deg,#3f0e40 0%,#2c072d 100%);
  border-right:1px solid rgba(255,255,255,.12);
}
.slack-workspace-badge{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 auto;
  margin-bottom:11px;
  border-radius:12px;
  background:#fff;
  color:var(--orange);
  font-size:22px;
  font-weight:950;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.slack-rail-stack{display:grid;gap:7px;width:100%}
.slack-rail-item{
  width:100%;
  min-height:61px;
  padding:5px 1px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:rgba(255,255,255,.92);
  font-size:9px;
  font-weight:700;
  pointer-events:none;
}
.slack-rail-item.active{background:rgba(255,255,255,.17)}
.slack-rail-item svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.slack-rail-bottom{display:grid;gap:10px;margin-top:auto}
.slack-rail-bottom span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);font-size:22px}

.slack-workspace-panel{
  grid-column:2;
  grid-row:2;
  min-width:0;
  overflow:hidden;
  color:#d9c4da;
  background:#2a0d2c;
  border-right:1px solid rgba(255,255,255,.10);
}
.slack-workspace-header{
  height:64px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 20px 24px 24px;
  align-items:center;
  gap:8px;
  padding:0 17px;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.slack-workspace-header strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:19px;letter-spacing:-.025em}
.slack-workspace-header span,.slack-workspace-header i{font-style:normal;text-align:center;color:#dcc8dd}
.slack-find{
  height:42px;
  margin:12px 14px 10px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:9px;
  background:rgba(17,4,18,.34);
  color:#beaabe;
  font-size:13px;
}
.slack-find svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.slack-workspace-scroll{
  height:calc(100% - 128px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:0 10px 22px 14px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.24) transparent;
}
.slack-workspace-scroll::-webkit-scrollbar{width:6px}
.slack-workspace-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.slack-utility-list{display:grid;padding:4px 0 8px}
.slack-utility-list>div,.slack-section-title,.slack-dm,.slack-app-row{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 8px;
  border-radius:7px;
  font-size:13px;
}
.slack-utility-list span,.slack-section-title>span{width:18px;text-align:center;color:#d7c1d8}
.slack-panel-divider{height:1px;margin:8px 8px 12px;background:rgba(255,255,255,.12)}
.slack-section{margin:4px 0 8px}
.slack-section-title{color:#d9c4da;font-weight:650}
.slack-hint{padding:1px 8px 7px 36px;font-size:11px;line-height:1.45;color:#a78fa8}
.slack-channel-list{display:grid;gap:1px}
.slack-channel-list .demo-channel{
  position:relative;
  width:100%;
  min-width:0;
  min-height:31px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#cbb4cc;
  text-align:left;
  font-size:13px;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .35s var(--ease-spring);
}
.slack-channel-list .demo-channel:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateX(2px)}
.slack-channel-list .demo-channel.active{background:#7c3b86;color:#fff;font-weight:750;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.slack-channel-list .demo-channel>span{opacity:.85;font-weight:800}
.slack-channel-list .channel-badge{
  margin-left:auto;
  min-width:25px;
  padding:2px 5px;
  border-radius:999px;
  color:#fff;
  background:#e01e5a;
  font-size:9px;
  font-style:normal;
  text-align:center;
}
.slack-dm i,.slack-app-row i{
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  flex:0 0 auto;
  border-radius:7px;
  background:#d9e8e5;
  color:#173b35;
  font-size:8px;
  font-style:normal;
  font-weight:850;
}
.slack-dm b,.slack-app-row b{width:7px;height:7px;margin-left:auto;border-radius:50%;background:#2eb67d;box-shadow:0 0 0 2px #2a0d2c}
.slack-app-row i{background:linear-gradient(145deg,var(--orange),#ff9f68);color:#fff;font-size:15px}

.demo-main.slack-conversation{
  grid-column:3;
  grid-row:2;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:65px minmax(0,1fr) auto;
  padding:0;
  overflow:hidden;
  background:#fff;
}
.slack-conversation .demo-channel-head{
  min-width:0;
  min-height:65px;
  margin:0;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid #e3e3e3;
  background:#fff;
}
.slack-channel-title{min-width:0}
.slack-conversation .demo-channel-head strong{display:block;font-size:17px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slack-conversation .demo-channel-head small{display:block;margin-top:4px;color:#717171;font-size:11px;font-weight:500}
.channel-head-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.channel-head-actions span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #ddd;border-radius:7px;color:#4f4f4f;background:#fff;font-size:12px}
.slack-conversation .slack-feed{
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:18px 19px 24px;
  background:#fff;
  scrollbar-width:thin;
  scrollbar-color:#b8b8b8 transparent;
}
.slack-conversation .slack-feed::-webkit-scrollbar{width:7px}
.slack-conversation .slack-feed::-webkit-scrollbar-thumb{background:#b8b8b8;border-radius:99px}
.demo-date{position:relative;margin:4px 0 24px;text-align:center;color:#4f4f4f;font-size:10px;font-weight:750}
.demo-date::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#e2e2e2}
.demo-date span{position:relative;z-index:1;display:inline-flex;padding:5px 12px;border:1px solid #ddd;border-radius:999px;background:#fff}
.slack-conversation .msg{grid-template-columns:38px minmax(0,1fr);gap:10px;margin-bottom:20px}
.slack-conversation .avatar{width:38px;height:38px;border-radius:9px}
.slack-conversation .msg-head{font-size:13px}
.slack-conversation .msg-time{font-size:11px}
.slack-conversation .msg-text{font-size:13px;line-height:1.52;overflow-wrap:anywhere}
.slack-conversation [data-animating="in"]{animation:slackMessageIn .62s var(--ease-spring) both}
@keyframes slackMessageIn{from{opacity:0;transform:translate3d(0,12px,0);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.demo-process{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  margin:2px 0 18px 48px;
  padding:8px;
  border:1px solid #ece5ec;
  border-radius:11px;
  background:#faf7fa;
}
.process-step{
  min-width:0;
  padding:7px 5px;
  border-radius:7px;
  color:#806f80;
  background:#fff;
  font-size:9px;
  font-weight:750;
  text-align:center;
  transition:color .35s ease,background .35s ease,transform .5s var(--ease-spring),box-shadow .35s ease;
}
.process-step.on{color:#fff;background:#4a154b;transform:translateY(-2px);box-shadow:0 6px 14px rgba(74,21,75,.18)}
.slack-typing{display:inline-flex;gap:4px;padding:8px 11px;border:1px solid #e6e6e6;border-radius:11px;background:#fafafa}
.slack-typing i{width:5px;height:5px;border-radius:50%;background:#777;animation:slackTypingDot 1s ease-in-out infinite}
.slack-typing i:nth-child(2){animation-delay:.14s}.slack-typing i:nth-child(3){animation-delay:.28s}
@keyframes slackTypingDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.demo-recap{
  margin-top:12px;
  padding:14px 15px;
  border-left:4px solid var(--orange);
  border-radius:8px;
  color:#423842;
  background:#fff8f3;
  font-size:12px;
  line-height:1.45;
  box-shadow:inset 0 0 0 1px rgba(252,108,26,.14);
}
.continue{
  display:inline-flex;
  margin-top:10px;
  padding:9px 12px;
  border:1px solid #dfd7df;
  border-radius:8px;
  color:#4a154b;
  background:#fff;
  font-size:11px;
  font-weight:750;
}
.slack-conversation .slack-composer{
  position:relative;
  min-width:0;
  margin:0 16px 16px;
  border:1px solid #b9b9b9;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:border-color .3s ease,box-shadow .3s ease,transform .45s var(--ease-spring);
}
.slack-conversation .slack-composer.is-focused{border-color:#4a154b;box-shadow:0 0 0 3px rgba(74,21,75,.12)}
.slack-conversation .composer-tools{height:31px;padding:0 11px;gap:16px;background:#f8f8f8}
.slack-conversation .composer-line{min-height:49px;padding:10px 50px 10px 12px;font-size:12px}
.slack-conversation .composer-send{right:8px;bottom:8px;width:31px;height:31px}
.slack-demo.is-switching .slack-channel-title{animation:slackChannelSwitch .55s var(--ease-spring)}
@keyframes slackChannelSwitch{from{opacity:.2;transform:translateX(10px)}to{opacity:1;transform:none}}

/* Compact, refined mobile off-canvas typography. */
.mobile-menu{width:min(84vw,344px)}
.mobile-menu-inner{padding:8px 8px 14px}
.mobile-menu-nav{margin-top:13px}
.mobile-menu-nav a{
  grid-template-columns:26px 1fr 24px;
  min-height:61px;
  gap:8px;
  padding-inline:3px;
}
.mobile-menu-nav a strong{font-size:19px;line-height:1.05;letter-spacing:-.035em}
.mobile-menu-nav a i{font-size:15px}
.mobile-menu-nav a span{font-size:8.5px}
.mobile-menu-cta{min-height:48px;font-size:13px}

@media (max-width:1020px){
  .demo-window.slack-demo{grid-template-columns:66px 232px minmax(0,1fr)}
  .slack-demo-topbar{grid-template-columns:100px 96px minmax(200px,1fr) 84px}
  .slack-workspace-header strong{font-size:17px}
  .slack-workspace-panel{font-size:12px}
}

@media (max-width:820px){
  body.admin-bar .header-shell{top:55px}
  .header-shell{padding-inline:12px}
  .header{border-radius:25px}

  /* Restore the mobile container margins that were being overridden. */
  .hero{padding:136px 0 56px}
  body.admin-bar .hero{padding-top:180px}
  .hero-grid{
    width:min(calc(100% - 30px),var(--max));
    margin-inline:auto;
    gap:42px;
  }
  .hero-copy{padding-inline:0}
  .hero-copy .platform-row{margin-bottom:31px;gap:9px}
  .hero-copy h1{margin-bottom:28px}
  .hero-copy .lead{margin-bottom:0}
  .hero-actions{margin:31px 0 24px;gap:12px}
  .hero-copy .trust-note{margin-top:4px}
  .hero-visual{padding-top:20px}

  .mobile-menu{width:min(86vw,340px);padding:8px}
  .mobile-menu-inner{padding:7px 7px 12px}
  .mobile-menu-head{padding:3px 1px 15px}
  .mobile-menu-brand img{width:98px}
  .mobile-menu-close{width:40px;height:40px}
  .mobile-menu-nav{margin-top:8px}
  .mobile-menu-nav a{min-height:59px}
  .mobile-menu-nav a strong{font-size:18px}

  .demo-wrap{width:100%;max-width:100%}
  .demo-window.slack-demo{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:44px auto minmax(610px,72vh);
    min-height:700px;
    max-height:none;
    border-radius:19px;
  }
  .slack-demo-topbar{
    grid-column:1;
    grid-row:1;
    grid-template-columns:74px minmax(0,1fr) 58px;
    gap:7px;
    padding:0 9px;
  }
  .slack-window-controls i{width:9px;height:9px}
  .slack-history{display:none}
  .slack-global-search{height:27px;width:100%;font-size:10px;justify-content:flex-start}
  .slack-top-actions{gap:6px}
  .slack-top-actions>span{width:23px;height:23px;font-size:9px}
  .slack-app-rail{display:none}

  .slack-workspace-panel{
    grid-column:1;
    grid-row:2;
    overflow:hidden;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.13);
    background:#3f0e40;
  }
  .slack-workspace-header{
    height:48px;
    grid-template-columns:minmax(0,1fr) 18px 20px 20px;
    padding:0 12px;
  }
  .slack-workspace-header strong{font-size:14px}
  .slack-find,.slack-utility-list,.slack-panel-divider,.slack-starred-section,.slack-dm-section,.slack-apps-section,.slack-channels-section>.slack-section-title{display:none}
  .slack-workspace-scroll{
    height:auto;
    overflow:visible;
    padding:0 0 9px;
  }
  .slack-section{margin:0}
  .slack-channel-list{
    display:flex;
    gap:6px;
    width:100%;
    padding:0 9px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  .slack-channel-list::-webkit-scrollbar{display:none}
  .slack-channel-list .demo-channel{
    width:auto;
    min-width:max-content;
    min-height:31px;
    padding:5px 10px;
    color:#e5d5e6;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    font-size:11px;
    transform:none!important;
  }
  .slack-channel-list .demo-channel.active{background:#1264a3;border-color:#1264a3}
  .slack-channel-list .channel-badge{display:none}

  .demo-main.slack-conversation{
    grid-column:1;
    grid-row:3;
    grid-template-rows:58px minmax(0,1fr) auto;
    min-height:0;
  }
  .slack-conversation .demo-channel-head{min-height:58px;padding:9px 12px}
  .slack-conversation .demo-channel-head strong{font-size:15px}
  .channel-head-actions span{width:28px;height:28px}
  .slack-conversation .slack-feed{padding:14px 11px 18px}
  .slack-conversation .msg{grid-template-columns:32px minmax(0,1fr);gap:8px;margin-bottom:17px}
  .slack-conversation .avatar{width:32px;height:32px}
  .slack-conversation .msg-head{font-size:11.5px}
  .slack-conversation .msg-time{font-size:9.5px}
  .slack-conversation .msg-text{font-size:11px;line-height:1.46}
  .demo-process{
    grid-template-columns:repeat(5,minmax(92px,1fr));
    margin-left:40px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .demo-process::-webkit-scrollbar{display:none}
  .process-step{font-size:8px}
  .demo-recap{font-size:10.5px}
  .continue{font-size:10px}
  .slack-conversation .slack-composer{margin:0 9px 10px}
  .slack-conversation .composer-line{font-size:11px;min-height:46px}
}

@media (max-width:480px){
  .wrap{width:calc(100% - 28px)}
  .header-shell{padding-inline:9px}
  .header{min-height:64px;padding:8px 8px 8px 14px}
  .brand img{width:99px;max-width:99px}
  .hero{padding-top:128px}
  body.admin-bar .hero{padding-top:176px}
  .hero-grid{width:calc(100% - 28px);gap:38px}
  .hero-copy .platform-row{margin-bottom:27px}
  .hero-copy h1{font-size:clamp(34px,10.2vw,41px);line-height:1.04;margin-bottom:25px;overflow-wrap:normal;word-break:normal}
  .hero-copy .lead{font-size:14px;line-height:1.58}
  .hero-actions{margin-top:28px}
  .hero-actions .button{min-height:54px;font-size:13px}
  .hero-copy .trust-note{font-size:12px;line-height:1.5}
  .hero-visual{padding-top:12px}
  .mobile-menu{width:min(88vw,332px)}
  .mobile-menu-nav a strong{font-size:17px}
  .demo-window.slack-demo{grid-template-rows:43px auto minmax(580px,70vh);min-height:672px}
  .slack-global-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .slack-workspace-header i{font-size:11px}
  .slack-conversation .slack-feed{padding-inline:9px}
  .demo-process{margin-left:0}
}

@media (max-width:360px){
  .hero-grid{width:calc(100% - 22px)}
  .hero-copy h1{font-size:33px}
  .platform-pill{font-size:9.5px;padding:7px 8px}
  .mobile-menu{width:90vw}
  .mobile-menu-nav a{min-height:56px}
  .mobile-menu-nav a strong{font-size:16px}
  .slack-demo-topbar{grid-template-columns:66px minmax(0,1fr) 50px}
  .slack-top-actions>span:first-child{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ziroo-js .hero-copy.visible>*{animation:none!important}
  .slack-conversation [data-animating="in"],.slack-demo.is-switching .slack-channel-title{animation:none!important}
}

/* ========================================================================
   Ziroo 1.5 — client-approved structure and product-demo motion
   ======================================================================== */
body{
  background:#fff;
  cursor:auto;
  overflow-x:clip;
}
a,button,input,select,textarea{cursor:auto}
a,button,.demo-channel,[data-dept-channel]{cursor:pointer}
.ziroo-cursor-dot,.ziroo-cursor-ring,.ziroo-cursor-glow{display:none!important}
.section{padding:82px 0}
.section-tight{padding:54px 0}

/* Hero and rising Slack application demo. */
.hero-experience{
  --hero-progress:0;
  position:relative;
  height:205vh;
  min-height:1380px;
  overflow:clip;
  background:
    radial-gradient(780px circle at 14% 14%,rgba(252,108,26,.10),transparent 66%),
    radial-gradient(720px circle at 88% 33%,rgba(255,162,108,.13),transparent 70%),
    linear-gradient(180deg,#fff 0%,#fff 72%,#fffaf7 100%);
}
.hero-pin{
  position:sticky;
  top:0;
  height:100vh;
  min-height:720px;
  overflow:hidden;
  perspective:1600px;
}
.hero-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(2px);
  opacity:.7;
}
.hero-glow-one{
  width:520px;height:520px;left:-180px;top:18%;
  background:radial-gradient(circle,rgba(252,108,26,.16),rgba(252,108,26,.03) 52%,transparent 70%);
  transform:translate3d(calc(var(--hero-progress) * 80px),calc(var(--hero-progress) * -48px),0);
}
.hero-glow-two{
  width:640px;height:640px;right:-250px;top:7%;
  border:1px solid rgba(252,108,26,.09);
  background:radial-gradient(circle at 40% 45%,rgba(255,185,144,.13),transparent 64%);
  transform:rotate(calc(var(--hero-progress) * 22deg));
}
.hero-copy-shell{
  position:absolute;
  z-index:2;
  top:clamp(142px,17vh,190px);
  left:50%;
  transform:translateX(-50%);
  width:min(calc(100% - 40px),var(--max));
  will-change:transform,opacity,filter;
}
.hero-copy-centered{
  max-width:1050px;
  margin-inline:auto;
  text-align:center;
}
.hero-copy-centered .platform-row,
.hero-copy-centered .hero-actions,
.hero-copy-centered .trust-note{justify-content:center}
.hero-copy-centered h1{
  max-width:1040px;
  margin:0 auto 24px;
  font-size:clamp(54px,6.45vw,94px);
  line-height:.96;
}
.hero-copy-centered .lead{
  max-width:800px;
  margin:0 auto;
  font-size:clamp(17px,1.55vw,22px);
  line-height:1.55;
}
.hero-copy-centered .hero-actions{margin:30px 0 20px}
.hero-demo-motion{
  position:absolute;
  z-index:4;
  top:112px;
  left:50%;
  width:min(94vw,1280px);
  opacity:0;
  transform-origin:center bottom;
  will-change:transform,opacity,filter;
  pointer-events:none;
}
.hero-demo-wrap{
  width:100%;
  max-width:none;
  margin:0;
}
.hero-demo-wrap::before{
  inset:-50px 10% auto;
  height:160px;
  background:rgba(252,108,26,.18);
  filter:blur(92px);
}
.hero-demo-wrap .demo-window.slack-demo{
  grid-template-rows:49px minmax(560px,calc(100vh - 190px));
  min-height:609px;
  max-height:735px;
  border-radius:25px;
  box-shadow:0 44px 130px rgba(32,9,33,.24),0 12px 34px rgba(17,17,17,.09);
}
body.admin-bar .hero-demo-motion{top:144px}

/* Company statement spacing after the pinned demo. */
.new-company-section{padding-top:74px}

/* Editorial department breadth with a sticky, animated Slack demo. */
.department-story-section{
  overflow:clip;
  background:
    linear-gradient(180deg,#fff 0%,#fff 55%,#fffaf7 100%);
}
.department-story-head{margin-bottom:14px}
.department-story-head h2{max-width:660px}
.department-story-grid{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);
  gap:clamp(54px,7vw,112px);
  align-items:start;
}
.department-chapters{min-width:0}
.department-chapter{
  min-height:66vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:78px 0;
  opacity:.28;
  transform:translate3d(0,24px,0);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);
}
.department-chapter.is-active{opacity:1;transform:none}
.department-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:34px;
  color:#6f6b68;
  font-size:11px;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.department-kicker::after{content:"";width:150px;height:1px;background:#e8e8e8}
.department-kicker span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border:1px solid #e5e5e5;
  border-radius:999px;
  background:#fff;
}
.department-chapter h3{
  max-width:560px;
  margin-bottom:18px;
  font-size:clamp(36px,3.8vw,56px);
  line-height:1.02;
  letter-spacing:-.055em;
}
.department-chapter>p{
  max-width:610px;
  margin-bottom:24px;
  color:#74706d;
  font-size:clamp(16px,1.45vw,20px);
  line-height:1.5;
}
.department-outcome{
  max-width:610px;
  padding-left:18px;
  border-left:2px solid rgba(252,108,26,.48);
  color:#5e5955;
  font-size:15px;
  line-height:1.55;
}
.department-outcome b{
  display:block;
  margin-bottom:4px;
  color:var(--orange);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.department-demo-column{position:relative;min-width:0}
.department-demo-sticky{
  position:sticky;
  top:132px;
  min-width:0;
  padding-top:42px;
}
body.admin-bar .department-demo-sticky{top:164px}
.department-slack{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(34,8,35,.24);
  border-radius:25px;
  background:#fff;
  box-shadow:0 30px 90px rgba(33,11,34,.15),0 8px 30px rgba(17,17,17,.07);
}
.department-slack-top{
  min-height:48px;
  display:grid;
  grid-template-columns:92px minmax(160px,1fr) auto;
  align-items:center;
  gap:12px;
  padding:0 15px;
  color:#f8edf8;
  background:linear-gradient(180deg,#4b154c,#401041);
}
.department-search{
  justify-self:center;
  width:min(100%,330px);
  padding:7px 13px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.72);
  font-size:11px;
  text-align:center;
}
.department-status{font-size:10px;color:rgba(255,255,255,.8);white-space:nowrap}
.department-status i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#2eb67d}
.department-slack-body{
  display:grid;
  grid-template-columns:168px minmax(0,1fr);
  min-height:560px;
}
.department-slack-sidebar{
  padding:20px 12px;
  color:#d9c4da;
  background:#2a0d2c;
}
.department-slack-sidebar strong{display:block;margin:0 8px 24px;color:#fff;font-size:17px}
.department-slack-sidebar>span{display:block;margin:0 8px 8px;color:#a991aa;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.department-slack-sidebar button{
  width:100%;
  min-height:34px;
  padding:6px 10px;
  border:0;
  border-radius:7px;
  color:#cbb4cc;
  background:transparent;
  text-align:left;
  font-size:12px;
  transition:.3s ease;
}
.department-slack-sidebar button.is-active{color:#fff;background:#7c3b86;font-weight:750}
.department-conversation{
  min-width:0;
  display:grid;
  grid-template-rows:58px minmax(0,1fr) auto;
  background:#fff;
}
.department-channel-head{
  display:flex;
  align-items:center;
  padding:0 18px;
  border-bottom:1px solid #e7e7e7;
  font-size:16px;
  font-weight:800;
}
.department-feed{
  min-height:0;
  overflow-y:auto;
  padding:24px 18px;
  scrollbar-width:thin;
}
.department-message{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  margin-bottom:20px;
}
.department-message[data-animating="in"]{animation:slackMessageIn .6s cubic-bezier(.22,1,.36,1) both}
.department-message b{display:block;margin:1px 0 5px;font-size:13px}
.department-message p{margin:0;color:#393639;font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.department-done{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:13px;
  padding:9px 11px;
  border:1px solid rgba(252,108,26,.18);
  border-radius:9px;
  color:#5b3a27;
  background:#fff8f3;
  font-size:10px;
  font-weight:750;
}
.department-done span{color:var(--orange);font-weight:900}
.department-composer{
  position:relative;
  min-height:76px;
  margin:0 14px 14px;
  padding:15px 52px 15px 14px;
  border:1px solid #bcbcbc;
  border-radius:9px;
  color:#303030;
  background:#fff;
  font-size:11px;
  line-height:1.45;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.department-composer.is-focused{border-color:#4a154b;box-shadow:0 0 0 3px rgba(74,21,75,.12)}
.department-composer i{display:inline-block;width:1px;height:16px;margin-left:2px;background:#4a154b;vertical-align:-3px;animation:typeCaret .8s steps(1) infinite}
.department-composer button{
  position:absolute;
  right:9px;
  bottom:9px;
  width:32px;
  height:32px;
  border:0;
  border-radius:7px;
  color:#fff;
  background:#4a154b;
  transition:transform .3s ease,background .3s ease;
}
.department-composer.is-sending button{transform:scale(.82) rotate(-8deg);background:var(--orange)}

/* Four-field form. */
.form-shell-compact{align-items:center}
.form-grid-simple{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-grid-simple .field.full{grid-column:1/-1}
.form-grid-simple .button{width:100%}

/* Remove obsolete visual systems from earlier versions. */
.hero,.hero-grid,.hero-visual,.traits-grid,.funnel{display:none!important}

@media (max-width:1100px){
  .department-story-grid{grid-template-columns:minmax(0,.8fr) minmax(430px,1.2fr);gap:52px}
  .department-slack-body{grid-template-columns:145px minmax(0,1fr)}
  .department-slack-sidebar{padding-inline:9px}
  .department-chapter h3{font-size:clamp(34px,4.2vw,48px)}
}

@media (max-width:820px){
  .section{padding:66px 0}
  .section-tight{padding:42px 0}
  .hero-experience{
    height:auto;
    min-height:0;
    overflow:clip;
    background:
      radial-gradient(520px circle at 90% 20%,rgba(252,108,26,.10),transparent 70%),
      #fff;
  }
  .hero-pin{position:relative;height:auto;min-height:0;overflow:visible}
  .hero-copy-shell{
    position:relative;
    top:auto;
    left:auto;
    transform:none!important;
    width:min(calc(100% - 30px),var(--max));
    padding:142px 0 62px;
    opacity:1!important;
    filter:none!important;
  }
  body.admin-bar .hero-copy-shell{padding-top:186px}
  .hero-copy-centered{text-align:left}
  .hero-copy-centered .platform-row,
  .hero-copy-centered .hero-actions,
  .hero-copy-centered .trust-note{justify-content:flex-start}
  .hero-copy-centered h1{
    margin-inline:0;
    font-size:clamp(40px,10.6vw,58px);
    line-height:.99;
    letter-spacing:-.06em;
  }
  .hero-copy-centered .lead{
    margin-inline:0;
    font-size:15px;
    line-height:1.62;
  }
  .hero-copy-centered .hero-actions{display:grid;margin-top:28px}
  .hero-copy-centered .hero-actions .button{width:100%}
  .hero-demo-motion{
    position:relative;
    top:auto!important;
    left:auto;
    width:min(calc(100% - 24px),var(--max));
    margin:0 auto;
    padding-bottom:38px;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    pointer-events:auto!important;
  }
  .hero-demo-wrap .demo-window.slack-demo{
    grid-template-rows:43px auto minmax(565px,68vh);
    min-height:658px;
    max-height:none;
  }
  .new-company-section{padding-top:48px}
  .department-story-head{display:block;margin-bottom:34px}
  .department-story-head .lead{margin-top:18px}
  .department-story-grid{display:flex;flex-direction:column;gap:34px}
  .department-demo-column{order:-1}
  .department-demo-sticky{position:sticky;top:106px;padding-top:0;z-index:5}
  body.admin-bar .department-demo-sticky{top:150px}
  .department-chapter{
    min-height:auto;
    padding:58px 0;
    opacity:.48;
  }
  .department-chapter.is-active{opacity:1}
  .department-chapter h3{font-size:clamp(32px,9vw,44px)}
  .department-kicker{margin-bottom:24px}
  .department-kicker::after{width:90px}
  .department-slack{border-radius:20px}
  .department-slack-top{grid-template-columns:75px minmax(0,1fr);padding-inline:10px}
  .department-status{display:none}
  .department-slack-body{grid-template-columns:minmax(0,1fr);min-height:430px}
  .department-slack-sidebar{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:9px;
    scrollbar-width:none;
  }
  .department-slack-sidebar::-webkit-scrollbar{display:none}
  .department-slack-sidebar strong,.department-slack-sidebar>span{display:none}
  .department-slack-sidebar button{width:auto;min-width:max-content;padding-inline:12px;background:rgba(255,255,255,.08)}
  .department-conversation{grid-template-rows:48px minmax(220px,1fr) auto}
  .department-feed{padding:15px 12px}
  .department-composer{min-height:64px;margin:0 9px 9px;padding:12px 48px 12px 11px;font-size:10px}
  .form-grid-simple{grid-template-columns:1fr}
  .form-grid-simple .field.full{grid-column:auto}
}

@media (max-width:480px){
  .hero-copy-shell{width:calc(100% - 28px);padding-top:130px;padding-bottom:52px}
  body.admin-bar .hero-copy-shell{padding-top:176px}
  .hero-copy-centered h1{font-size:clamp(36px,11vw,46px);line-height:1.02}
  .hero-copy-centered .lead{font-size:14px}
  .hero-platform-row{margin-bottom:25px}
  .hero-demo-motion{width:calc(100% - 18px)}
  .hero-demo-wrap .demo-window.slack-demo{min-height:640px;grid-template-rows:43px auto minmax(548px,67vh)}
  .department-demo-sticky{top:94px}
  body.admin-bar .department-demo-sticky{top:140px}
  .department-chapter{padding:50px 0}
  .department-chapter h3{font-size:34px}
  .department-chapter>p{font-size:15px}
  .department-slack-top{grid-template-columns:66px minmax(0,1fr)}
  .department-search{font-size:9px;padding-inline:8px}
  .department-message{grid-template-columns:32px minmax(0,1fr)}
  .department-message .avatar{width:32px;height:32px}
  .department-message p{font-size:10.5px}
  .department-slack-body{min-height:400px}
  .form-shell-compact{padding:26px 18px}
}

@media (prefers-reduced-motion:reduce){
  .hero-copy-shell,.hero-demo-motion,.department-chapter{transition:none!important;transform:none!important;filter:none!important;opacity:1!important}
  .department-composer i{animation:none!important}
}

/* ========================================================================
   Ziroo 1.6 — centered hero, foreground Slack reveal, persistent department demo
   ======================================================================== */

/* The hero copy is centered by layout, not by a transform that scroll JS can overwrite. */
.hero-experience{
  z-index:8;
  isolation:isolate;
  height:220vh;
  min-height:1480px;
  overflow:visible;
}
.hero-pin{
  overflow:visible;
  perspective:1800px;
}
.hero-copy-shell{
  left:0;
  right:0;
  margin-inline:auto;
  transform:none;
  transform-origin:center center;
}
.hero-copy-centered{
  width:100%;
  max-width:1050px;
  margin-inline:auto;
}
.hero-copy-centered h1,
.hero-copy-centered .lead{
  margin-inline:auto;
}
.hero-demo-motion{
  z-index:30;
  left:0;
  right:0;
  margin-inline:auto;
  width:min(calc(100% - 56px),1320px);
  transform-origin:center center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hero-demo-wrap .demo-window.slack-demo{
  position:relative;
  z-index:3;
  box-shadow:
    0 48px 130px rgba(32,9,33,.19),
    0 18px 48px rgba(17,17,17,.08),
    0 0 0 1px rgba(255,255,255,.8) inset;
}
.hero-demo-wrap::after{
  content:"";
  position:absolute;
  z-index:0;
  left:7%;
  right:7%;
  bottom:-34px;
  height:90px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(44,17,43,.16),transparent 68%);
  filter:blur(28px);
  pointer-events:none;
}
.new-company-section{
  position:relative;
  z-index:1;
  padding-top:92px;
  background:#fff;
}

/* Keep the right-hand Slack application pinned for the full department story. */
.department-story-section{
  position:relative;
  z-index:2;
  overflow:visible;
}
.department-story-grid{
  align-items:stretch;
}
.department-chapters{
  position:relative;
  z-index:1;
}
.department-demo-column{
  position:relative;
  align-self:stretch;
  height:auto;
  min-height:100%;
  z-index:4;
}
.department-demo-sticky{
  position:sticky;
  top:124px;
  min-height:calc(100vh - 154px);
  padding-top:0;
  display:flex;
  align-items:center;
}
body.admin-bar .department-demo-sticky{
  top:156px;
  min-height:calc(100vh - 186px);
}
.department-slack{
  width:100%;
  max-width:100%;
  transform:translateZ(0);
  transition:box-shadow .65s cubic-bezier(.22,1,.36,1),border-color .65s cubic-bezier(.22,1,.36,1);
}
.department-slack:hover{
  border-color:rgba(74,21,75,.34);
  box-shadow:0 36px 100px rgba(33,11,34,.17),0 10px 34px rgba(17,17,17,.08);
}
.department-slack-body{
  height:clamp(440px,calc(100vh - 245px),560px);
  min-height:0;
}
.department-feed{
  overscroll-behavior:contain;
}
.department-slack.is-switching .department-channel-head{
  animation:departmentChannelSoftSwitch .52s cubic-bezier(.22,1,.36,1);
}
.department-slack.is-switching .department-conversation{
  animation:departmentConversationSoftFade .52s cubic-bezier(.22,1,.36,1);
}
.department-chapter{
  min-height:72vh;
  opacity:.24;
  transform:translate3d(0,18px,0);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1);
}
.department-chapter.is-active{
  opacity:1;
  transform:translate3d(0,0,0);
}
@keyframes departmentChannelSoftSwitch{
  0%{opacity:.58;transform:translate3d(0,4px,0)}
  100%{opacity:1;transform:none}
}
@keyframes departmentConversationSoftFade{
  0%{opacity:.82}
  100%{opacity:1}
}

@media (max-width:1100px){
  .hero-demo-motion{width:min(calc(100% - 36px),1240px)}
  .department-demo-sticky{top:116px;min-height:calc(100vh - 140px)}
  body.admin-bar .department-demo-sticky{top:148px;min-height:calc(100vh - 172px)}
  .department-slack-body{height:clamp(420px,calc(100vh - 225px),530px)}
}

@media (max-width:820px){
  .hero-experience{
    height:auto;
    min-height:0;
    overflow:clip;
    z-index:2;
  }
  .hero-pin{overflow:visible}
  .hero-copy-shell{
    left:auto;
    right:auto;
    margin-inline:auto;
    transform:none!important;
  }
  .hero-demo-motion{
    left:auto;
    right:auto;
    width:min(calc(100% - 24px),var(--max));
    margin-inline:auto;
    transform:none!important;
  }
  .new-company-section{padding-top:54px}
  .department-story-section{overflow:clip}
  .department-story-grid{align-items:start}
  .department-demo-column{
    align-self:auto;
    min-height:0;
    height:auto;
  }
  .department-demo-sticky{
    top:102px;
    min-height:0;
    display:block;
    align-items:initial;
  }
  body.admin-bar .department-demo-sticky{
    top:148px;
    min-height:0;
  }
  .department-slack-body{
    height:auto;
    min-height:430px;
  }
  .department-chapter{min-height:auto}
}

@media (max-width:480px){
  .hero-demo-motion{width:calc(100% - 18px)}
  .department-demo-sticky{top:92px}
  body.admin-bar .department-demo-sticky{top:138px}
  .department-slack-body{min-height:400px}
}

@media (prefers-reduced-motion:reduce){
  .department-slack.is-switching .department-channel-head,
  .department-slack.is-switching .department-conversation{animation:none!important}
}



/* ========================================================================
   Ziroo 1.8 — fixed integrations, premium security layout, softer hero accent
   ======================================================================== */

/* Softer and more premium hero highlight animation */
.hero-copy h1 .orange,
.hero-copy-centered h1 .orange{
  display:inline;
  color:transparent;
  background:linear-gradient(96deg,#fc6c1a 0%,#ff9558 28%,#ffb487 48%,#ff9558 68%,#fc6c1a 100%);
  background-size:180% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:orangeTextFlowSoft 13s cubic-bezier(.45,.05,.2,.96) infinite;
  will-change:background-position,filter;
}
@keyframes orangeTextFlowSoft{
  0%,100%{background-position:0% 50%;filter:saturate(1)}
  50%{background-position:100% 50%;filter:saturate(1.06)}
}

/* Integration section */
.integrations-section{
  position:relative;
  z-index:3;
  padding-top:86px;
  padding-bottom:52px;
  margin-top:34px;
  overflow:hidden;
  background:
    radial-gradient(680px circle at 14% 48%,rgba(252,108,26,.06),transparent 68%),
    radial-gradient(560px circle at 88% 12%,rgba(255,176,128,.11),transparent 70%),
    linear-gradient(180deg,#fff 0%,#fffaf7 100%);
}
.integrations-section::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,rgba(252,108,26,0),rgba(252,108,26,.28),rgba(252,108,26,0));
}
.integrations-head{
  position:relative;
  z-index:2;
  margin-bottom:30px;
  text-align:center;
}
.integrations-head .eyebrow::before{margin-inline:auto}
.integrations-head h2{
  margin-top:12px;
  margin-bottom:0;
  letter-spacing:-.055em;
}
.integration-marquee-shell{
  position:relative;
  z-index:2;
  display:grid;
  gap:18px;
}
.integration-marquee{
  position:relative;
  display:flex;
  overflow:hidden;
  width:100%;
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.integration-track{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:18px;
  min-width:max-content;
  padding-inline:9px;
  will-change:transform;
  animation:integrationMarqueeSoft 62s linear infinite;
}
.integration-marquee-two .integration-track{animation-name:integrationMarqueeSoftReverse;animation-duration:74s}
.integration-card{
  position:relative;
  flex:0 0 auto;
  min-width:clamp(190px,15vw,240px);
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 24px;
  border:1px solid rgba(17,17,17,.06);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,250,247,.96));
  box-shadow:0 12px 34px rgba(17,17,17,.045),inset 0 1px 0 rgba(255,255,255,.95);
}
.integration-card::after{
  content:"";
  position:absolute;
  inset:auto 16px 0;
  height:18px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(17,17,17,.08),transparent 72%);
  filter:blur(9px);
  opacity:.55;
  pointer-events:none;
}
.integration-card-small{
  min-width:clamp(170px,14vw,220px);
  height:84px;
  opacity:.92;
}
.integration-card img{
  position:relative;
  z-index:1;
  display:block;
  max-width:100%;
  max-height:46px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.integration-card-small img{max-height:38px}
@keyframes integrationMarqueeSoft{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-100% - 18px),0,0)}
}
@keyframes integrationMarqueeSoftReverse{
  from{transform:translate3d(calc(-100% - 18px),0,0)}
  to{transform:translate3d(0,0,0)}
}

/* Security / private-by-design section */
.security-section{
  position:relative;
  background:
    radial-gradient(600px circle at 16% 18%,rgba(252,108,26,.075),transparent 62%),
    linear-gradient(180deg,#fff 0%,#fffaf8 100%);
}
.security-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
  gap:26px;
  padding:34px;
  border:1px solid rgba(17,17,17,.06);
  border-radius:36px;
  background:linear-gradient(140deg,rgba(255,255,255,.98),rgba(255,248,242,.96));
  box-shadow:0 28px 86px rgba(17,17,17,.055),inset 0 1px 0 rgba(255,255,255,.95);
}
.security-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:8px 4px 8px 2px;
}
.security-copy h2{margin-bottom:16px}
.security-copy .lead{max-width:500px;margin-bottom:0}
.security-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.security-pill-row span{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 15px;
  border:1px solid rgba(17,17,17,.07);
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:#5b544d;
  font-size:12px;
  font-weight:700;
}
.security-visual{
  position:relative;
  min-width:0;
  display:grid;
  gap:18px;
}
.security-visual::before{
  content:"";
  position:absolute;
  right:-4%;
  bottom:-5%;
  width:250px;
  height:250px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(252,108,26,.16),transparent 70%);
  filter:blur(14px);
  pointer-events:none;
}
.security-feature-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:26px;
  border-radius:28px;
  border:1px solid rgba(17,17,17,.07);
  background:rgba(255,255,255,.88);
  box-shadow:0 16px 42px rgba(17,17,17,.045);
}
.security-feature-card::after{
  content:"";
  position:absolute;
  right:-28px;
  bottom:-38px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(252,108,26,.12),transparent 72%);
  pointer-events:none;
}
.security-feature-card-main{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:16px 18px;
  align-items:start;
  padding:30px;
  background:linear-gradient(145deg,#131313 0%,#1f1a18 52%,#7b3712 140%);
  border-color:rgba(17,17,17,.14);
  color:#fff;
}
.security-card-icon{
  position:relative;
  z-index:1;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 58px;
  border-radius:18px;
  color:var(--orange);
  background:linear-gradient(180deg,#fff7f1,#ffe9dc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 26px rgba(252,108,26,.12);
}
.security-feature-card-main .security-card-icon{
  color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 26px rgba(0,0,0,.18);
}
.security-card-icon svg{
  display:block;
  width:28px;
  height:28px;
  max-width:none;
  flex:0 0 auto;
}
.security-card-copy{position:relative;z-index:1;min-width:0}
.security-card-eyebrow{
  margin-bottom:10px;
  color:#ffb587;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.security-card-copy h3{
  margin-bottom:12px;
  font-size:28px;
  line-height:1.06;
  letter-spacing:-.04em;
}
.security-card-copy p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:15px;
  line-height:1.68;
}
.security-check-list{
  grid-column:1/-1;
  display:grid;
  gap:10px;
  margin:4px 0 0;
  padding:0;
  list-style:none;
}
.security-check-list li{
  position:relative;
  padding-left:18px;
  color:rgba(255,255,255,.84);
  font-size:14px;
  line-height:1.58;
}
.security-check-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ffb587;
}
.security-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.security-mini-grid .security-feature-card h3{
  position:relative;
  z-index:1;
  margin:18px 0 10px;
  font-size:19px;
  line-height:1.14;
}
.security-mini-grid .security-feature-card p{
  position:relative;
  z-index:1;
  margin:0;
  color:#6a625b;
  font-size:14px;
  line-height:1.62;
}

@media (max-width:1100px){
  .integrations-section{padding-top:74px}
  .integration-track{animation-duration:56s}
  .integration-marquee-two .integration-track{animation-duration:66s}
  .security-shell{grid-template-columns:1fr;gap:22px}
}
@media (max-width:820px){
  .integrations-section{padding-top:62px;padding-bottom:40px;margin-top:28px}
  .integrations-head{margin-bottom:24px}
  .integration-marquee-shell{gap:14px}
  .integration-track{gap:14px;padding-inline:7px;animation-duration:48s}
  .integration-marquee-two .integration-track{animation-duration:58s}
  .integration-card{min-width:168px;height:78px;padding:14px 18px;border-radius:22px}
  .integration-card img{max-height:34px}
  .integration-card-small{min-width:152px;height:70px}
  .integration-card-small img{max-height:30px}
  .security-shell{padding:24px;border-radius:28px}
  .security-feature-card-main{grid-template-columns:1fr;padding:24px}
  .security-card-copy h3{font-size:24px}
  .security-mini-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .integrations-section{padding-top:58px;margin-top:22px}
  .integration-card{min-width:148px;height:68px;padding:12px 14px;border-radius:18px}
  .integration-card img{max-height:28px}
  .integration-card-small{min-width:136px;height:62px}
  .integration-card-small img{max-height:24px}
  .security-shell{padding:18px;border-radius:24px}
  .security-pill-row span{min-height:34px;font-size:11px;padding-inline:12px}
  .security-feature-card{padding:20px}
  .security-card-icon{width:52px;height:52px;border-radius:16px}
  .security-card-icon svg{width:24px;height:24px}
  .security-card-copy h3{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy h1 .orange,.hero-copy-centered h1 .orange{animation:none!important}
  .integration-track{animation:none!important}
}


/* ========================================================================
   Ziroo 1.9 — single-line integrations, simplified trust UI, softer hero type
   ======================================================================== */

/* Keep the hero heading movement calm and remove the hard orange-word jump. */
.hero-copy-centered h1 .motion-word{
  transform:translate3d(0,5px,0);
  opacity:0;
  transition:
    opacity 1.05s cubic-bezier(.22,1,.36,1),
    transform 1.15s cubic-bezier(.22,1,.36,1);
}
.hero-copy-centered h1 .motion-word.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
.hero-copy h1 .orange,
.hero-copy-centered h1 .orange{
  background:linear-gradient(96deg,#fc6c1a 0%,#ff8e4e 45%,#fc6c1a 100%);
  background-size:125% 100%;
  animation:orangeTextFlowUltraSoft 28s ease-in-out infinite;
  filter:none;
}
@keyframes orangeTextFlowUltraSoft{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* The integration carousel is intentionally one uninterrupted row. */
.integration-marquee-shell{display:block}
.integration-marquee-one{min-height:100px}
.integration-marquee-one .integration-track{animation-duration:76s}
.integration-marquee-two{display:none!important}

/* Equal trust cards only — no oversized core-protection panel. */
.security-visual{align-self:center}
.security-mini-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.security-mini-grid .security-feature-card{
  min-height:230px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.security-mini-grid .security-feature-card h3{margin-top:22px}
.security-mini-grid .security-feature-card p{max-width:260px}
.security-feature-card-main{display:none!important}

@media (max-width:1100px){
  .integration-marquee-one .integration-track{animation-duration:68s}
  .security-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .integration-marquee-one .integration-track{animation-duration:58s}
  .security-mini-grid{grid-template-columns:1fr}
  .security-mini-grid .security-feature-card{min-height:auto}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy-centered h1 .motion-word{opacity:1!important;transform:none!important;transition:none!important}
  .hero-copy h1 .orange,.hero-copy-centered h1 .orange{animation:none!important;background-position:0 50%!important}
}


/* ========================================================================
   Ziroo 2.0 — robust hero highlight repair
   ======================================================================== */

/*
 * The highlighted phrase is intentionally solid brand orange. Previous
 * gradient clipping was applied to a parent whose text was split into child
 * spans, which could paint the background as a rectangle in Chromium.
 */
.hero-copy h1 .orange,
.hero-copy-centered h1 .orange{
  display:inline !important;
  color:var(--orange) !important;
  background:none !important;
  background-image:none !important;
  background-color:transparent !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--orange) !important;
  animation:none !important;
  filter:none !important;
}
.hero-copy h1 .orange *,
.hero-copy-centered h1 .orange *{
  color:var(--orange) !important;
  background:none !important;
  -webkit-text-fill-color:var(--orange) !important;
  animation:none !important;
  filter:none !important;
}

/* The hero arrives as one calm composition rather than word-by-word. */
.hero-copy-centered h1{
  opacity:1;
  transform:none;
}
.hero-copy-centered h1 .motion-word{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}


/* ========================================================================
   Ziroo 2.1 — cinematic hero headline entrance
   ======================================================================== */

.hero-heading-main,
.hero-heading-accent{
  display:block;
  position:relative;
  transform-origin:50% 100%;
}

/* These hidden states only apply when JavaScript has enabled the sequence. */
.hero-copy-centered h1.hero-motion-enabled .hero-heading-main{
  opacity:0;
  transform:translate3d(0,38px,0) scale(.985);
  filter:blur(7px);
  clip-path:inset(0 0 100% 0);
}
.hero-copy-centered h1.hero-motion-enabled .hero-heading-accent{
  opacity:0;
  transform:translate3d(0,42px,0) scale(.955);
  filter:blur(9px);
  clip-path:inset(0 0 100% 0);
}

.hero-copy-centered h1.hero-motion-enabled.is-animated .hero-heading-main{
  animation:zirooHeroMainReveal 1.18s cubic-bezier(.16,1,.3,1) .08s both;
}
.hero-copy-centered h1.hero-motion-enabled.is-animated .hero-heading-accent{
  animation:
    zirooHeroAccentReveal 1.34s cubic-bezier(.16,1,.3,1) .28s both,
    zirooHeroAccentPulse 1.8s ease-out 1.05s both;
}

/* A fine light streak gives energy without painting a box behind the text. */
.hero-copy-centered h1.hero-motion-enabled .hero-heading-accent::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#fc6c1a 24%,#ffb080 50%,#fc6c1a 76%,transparent);
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
}
.hero-copy-centered h1.hero-motion-enabled.is-animated .hero-heading-accent::after{
  animation:zirooHeroAccentLine 1.55s cubic-bezier(.16,1,.3,1) .82s both;
}

@keyframes zirooHeroMainReveal{
  0%{opacity:0;transform:translate3d(0,38px,0) scale(.985);filter:blur(7px);clip-path:inset(0 0 100% 0)}
  64%{opacity:1;filter:blur(0);clip-path:inset(0 0 0 0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);clip-path:inset(0 0 0 0)}
}
@keyframes zirooHeroAccentReveal{
  0%{opacity:0;transform:translate3d(0,42px,0) scale(.955);filter:blur(9px);clip-path:inset(0 0 100% 0)}
  65%{opacity:1;transform:translate3d(0,-3px,0) scale(1.008);filter:blur(0);clip-path:inset(0 0 0 0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);clip-path:inset(0 0 0 0)}
}
@keyframes zirooHeroAccentPulse{
  0%,100%{text-shadow:0 0 0 rgba(252,108,26,0)}
  45%{text-shadow:0 10px 36px rgba(252,108,26,.22)}
}
@keyframes zirooHeroAccentLine{
  0%{width:0;opacity:0}
  35%{width:min(240px,34%);opacity:.8}
  100%{width:min(300px,42%);opacity:0}
}

@media (max-width:820px){
  .hero-copy-centered h1.hero-motion-enabled .hero-heading-main{
    transform:translate3d(0,24px,0) scale(.99);
    filter:blur(5px);
  }
  .hero-copy-centered h1.hero-motion-enabled .hero-heading-accent{
    transform:translate3d(0,28px,0) scale(.97);
    filter:blur(6px);
  }
  .hero-copy-centered h1.hero-motion-enabled.is-animated .hero-heading-main{
    animation-duration:1.02s;
  }
  .hero-copy-centered h1.hero-motion-enabled.is-animated .hero-heading-accent{
    animation-duration:1.15s,1.6s;
  }
  .hero-copy-centered h1.hero-motion-enabled .hero-heading-accent::after{bottom:-6px;height:2px}
}

@media (prefers-reduced-motion:reduce){
  .hero-copy-centered h1.hero-motion-enabled .hero-heading-main,
  .hero-copy-centered h1.hero-motion-enabled .hero-heading-accent{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    animation:none!important;
  }
  .hero-copy-centered h1.hero-motion-enabled .hero-heading-accent::after{display:none!important}
}


/* ========================================================================
   Ziroo 2.2 — reliable hero text reveal with visible fallback
   ======================================================================== */

/*
 * The heading is visible by default. JavaScript only adds the animation
 * class, so a cache, delayed script, or disabled JavaScript can never hide
 * “runs your business.” again.
 */
.hero-copy-centered h1[data-hero-heading] .hero-heading-main,
.hero-copy-centered h1[data-hero-heading] .hero-heading-accent{
  display:block;
  position:relative;
  opacity:1 !important;
  transform:none;
  filter:none;
  clip-path:none;
  visibility:visible !important;
}
.hero-copy-centered h1[data-hero-heading] .hero-heading-accent{
  color:var(--orange) !important;
  -webkit-text-fill-color:var(--orange) !important;
  background:none !important;
}

/* Start a one-time cinematic reveal only after JS confirms the page is ready. */
.hero-copy-centered h1[data-hero-heading].is-animated .hero-heading-main{
  animation:zirooHeroMainInSafe 1.05s cubic-bezier(.16,1,.3,1) .04s both;
}
.hero-copy-centered h1[data-hero-heading].is-animated .hero-heading-accent{
  animation:zirooHeroAccentInSafe 1.22s cubic-bezier(.16,1,.3,1) .18s both;
}

/* Soft moving highlight that never changes text transparency. */
.hero-copy-centered h1[data-hero-heading] .hero-heading-accent::before{
  content:"";
  position:absolute;
  inset:-8% -3%;
  z-index:-1;
  border-radius:999px;
  background:radial-gradient(ellipse at center,rgba(252,108,26,.16),rgba(252,108,26,0) 68%);
  opacity:0;
  transform:scale(.76);
  pointer-events:none;
}
.hero-copy-centered h1[data-hero-heading].is-animated .hero-heading-accent::before{
  animation:zirooHeroAccentAura 1.75s cubic-bezier(.16,1,.3,1) .55s both;
}

/* Fine underline sweep for energy, without covering the letters. */
.hero-copy-centered h1[data-hero-heading] .hero-heading-accent::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#fc6c1a 22%,#ffb487 50%,#fc6c1a 78%,transparent);
  opacity:0;
  transform:translateX(-50%);
  pointer-events:none;
}
.hero-copy-centered h1[data-hero-heading].is-animated .hero-heading-accent::after{
  animation:zirooHeroUnderlineSafe 1.45s cubic-bezier(.16,1,.3,1) .72s both;
}

@keyframes zirooHeroMainInSafe{
  0%{opacity:0;transform:translate3d(0,30px,0) scale(.992);filter:blur(6px)}
  58%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes zirooHeroAccentInSafe{
  0%{opacity:0;transform:translate3d(0,38px,0) scale(.965);filter:blur(7px);letter-spacing:-.075em}
  64%{opacity:1;transform:translate3d(0,-2px,0) scale(1.006);filter:blur(0);letter-spacing:-.06em}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);letter-spacing:inherit}
}
@keyframes zirooHeroAccentAura{
  0%{opacity:0;transform:scale(.76)}
  45%{opacity:.75;transform:scale(1)}
  100%{opacity:0;transform:scale(1.08)}
}
@keyframes zirooHeroUnderlineSafe{
  0%{width:0;opacity:0}
  40%{width:min(260px,34%);opacity:.72}
  100%{width:min(360px,48%);opacity:0}
}

@media (max-width:820px){
  .hero-copy-centered h1[data-hero-heading].is-animated .hero-heading-main{
    animation-duration:.92s;
  }
  .hero-copy-centered h1[data-hero-heading].is-animated .hero-heading-accent{
    animation-duration:1.04s;
  }
  .hero-copy-centered h1[data-hero-heading] .hero-heading-accent::after{bottom:-5px}
}

@media (prefers-reduced-motion:reduce){
  .hero-copy-centered h1[data-hero-heading] .hero-heading-main,
  .hero-copy-centered h1[data-hero-heading] .hero-heading-accent,
  .hero-copy-centered h1[data-hero-heading] .hero-heading-accent::before,
  .hero-copy-centered h1[data-hero-heading] .hero-heading-accent::after{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .hero-copy-centered h1[data-hero-heading] .hero-heading-accent::before,
  .hero-copy-centered h1[data-hero-heading] .hero-heading-accent::after{display:none !important}
}


/* ========================================================================
   Ziroo 2.3 — reliable kinetic hero headline
   ======================================================================== */

.hero-copy-centered h1.hero-kinetic-heading{
  position:relative;
  max-width:1120px;
  overflow:visible;
  isolation:isolate;
}
.hero-kinetic-heading .hero-heading-line{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:0 .19em;
  width:100%;
  color:#0e0e0e;
  perspective:900px;
}
.hero-kinetic-heading .hero-heading-accent{
  margin-top:.04em;
  color:var(--orange) !important;
  -webkit-text-fill-color:var(--orange) !important;
  background:none !important;
  filter:none;
  animation:zirooAccentBreath 5.8s ease-in-out 2.65s infinite;
}
.hero-kinetic-heading .hero-word{
  display:inline-block;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
  background:none !important;
  opacity:0;
  transform-origin:50% 100%;
  transform:translate3d(0,1.05em,0) rotateX(-24deg) scale(.96);
  filter:blur(8px);
  animation:zirooHeroWordReveal 1.18s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.28s + (var(--word-index) * .105s));
  will-change:transform,opacity,filter;
}
.hero-kinetic-heading .hero-heading-accent .hero-word{
  animation-name:zirooHeroAccentWordReveal;
  animation-duration:1.28s;
}
.hero-kinetic-heading .hero-heading-accent::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:52%;
  width:min(720px,78%);
  height:1.15em;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(252,108,26,.16),rgba(252,108,26,0) 70%);
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  animation:zirooHeroAccentGlow 2.2s cubic-bezier(.16,1,.3,1) 1.25s both;
  pointer-events:none;
}
.hero-kinetic-heading .hero-heading-accent::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-.12em;
  width:min(370px,45%);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#fc6c1a 20%,#ffb17f 50%,#fc6c1a 80%,transparent);
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  animation:zirooHeroAccentSweep 6.2s cubic-bezier(.16,1,.3,1) 1.45s infinite;
  pointer-events:none;
}
@keyframes zirooHeroWordReveal{
  0%{opacity:0;transform:translate3d(0,1.05em,0) rotateX(-24deg) scale(.96);filter:blur(8px)}
  58%{opacity:1;filter:blur(0)}
  78%{transform:translate3d(0,-.035em,0) rotateX(0) scale(1.006)}
  100%{opacity:1;transform:translate3d(0,0,0) rotateX(0) scale(1);filter:blur(0)}
}
@keyframes zirooHeroAccentWordReveal{
  0%{opacity:0;transform:translate3d(0,1.12em,0) rotateX(-26deg) scale(.93);filter:blur(9px)}
  58%{opacity:1;filter:blur(0)}
  76%{transform:translate3d(0,-.055em,0) rotateX(0) scale(1.012)}
  100%{opacity:1;transform:translate3d(0,0,0) rotateX(0) scale(1);filter:blur(0)}
}
@keyframes zirooHeroAccentGlow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  42%{opacity:.88;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}
}
@keyframes zirooAccentBreath{
  0%,100%{text-shadow:0 0 0 rgba(252,108,26,0);transform:translateZ(0)}
  50%{text-shadow:0 12px 38px rgba(252,108,26,.16);transform:translate3d(0,-1px,0)}
}
@keyframes zirooHeroAccentSweep{
  0%,12%{opacity:0;transform:translateX(-50%) scaleX(0)}
  18%{opacity:.78}
  28%{opacity:0;transform:translateX(-50%) scaleX(1)}
  100%{opacity:0;transform:translateX(-50%) scaleX(1)}
}

@media (max-width:820px){
  .hero-kinetic-heading .hero-heading-line{
    justify-content:flex-start;
    gap:0 .17em;
  }
  .hero-kinetic-heading .hero-word{
    transform:translate3d(0,.72em,0) rotateX(-16deg) scale(.975);
    filter:blur(5px);
    animation-duration:.92s;
    animation-delay:calc(.18s + (var(--word-index) * .075s));
  }
  .hero-kinetic-heading .hero-heading-accent .hero-word{animation-duration:1.02s}
  .hero-kinetic-heading .hero-heading-accent::after{height:2px;bottom:-.08em}
}

@media (prefers-reduced-motion:reduce){
  .hero-kinetic-heading .hero-word{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    animation:none !important;
  }
  .hero-kinetic-heading .hero-heading-accent{
    animation:none !important;
  }
  .hero-kinetic-heading .hero-heading-accent::before,
  .hero-kinetic-heading .hero-heading-accent::after{
    display:none !important;
    animation:none !important;
  }
}


/* ========================================================================
   Ziroo 2.4 — final, conflict-free hero headline reveal
   ======================================================================== */

/*
 * Unique class names intentionally avoid every legacy .orange / .hero-word
 * rule from previous versions. Both lines remain present in the HTML and
 * finish fully visible after a single smooth landing sequence.
 */
.hero-copy-centered h1.ziroo-hero-heading{
  position:relative;
  display:block;
  max-width:1120px;
  margin-inline:auto;
  overflow:visible;
  isolation:isolate;
}
.ziroo-hero-heading .ziroo-hero-line{
  position:relative;
  display:block;
  width:100%;
  opacity:0;
  visibility:visible;
  transform-origin:50% 100%;
  will-change:transform,opacity,filter,clip-path;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.ziroo-hero-heading .ziroo-hero-line-primary{
  color:#0e0e0e;
  -webkit-text-fill-color:#0e0e0e;
  animation:zirooHeroPrimaryFinal 1.12s cubic-bezier(.16,1,.3,1) .12s forwards;
}
.ziroo-hero-heading .ziroo-hero-line-accent{
  margin-top:.035em;
  color:#fc6c1a;
  -webkit-text-fill-color:#fc6c1a;
  background:none;
  animation:
    zirooHeroAccentFinal 1.28s cubic-bezier(.16,1,.3,1) .34s forwards,
    zirooHeroAccentSettle 4.8s ease-in-out 1.8s infinite;
}
.ziroo-hero-heading .ziroo-hero-line-accent::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:54%;
  width:min(720px,76%);
  height:1.08em;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(252,108,26,.15),rgba(252,108,26,0) 70%);
  opacity:0;
  transform:translate(-50%,-50%) scale(.78);
  animation:zirooHeroAccentAuraFinal 1.9s cubic-bezier(.16,1,.3,1) .72s both;
  pointer-events:none;
}
.ziroo-hero-heading .ziroo-hero-line-accent::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-.09em;
  width:min(330px,38%);
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#fc6c1a 22%,#ffb182 50%,#fc6c1a 78%,transparent);
  opacity:0;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  animation:zirooHeroAccentLineFinal 1.6s cubic-bezier(.16,1,.3,1) .92s both;
  pointer-events:none;
}
@keyframes zirooHeroPrimaryFinal{
  0%{opacity:0;transform:translate3d(0,34px,0) scale(.988);filter:blur(7px);clip-path:inset(0 0 78% 0)}
  62%{opacity:1;filter:blur(0);clip-path:inset(0 0 0 0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);clip-path:inset(0 0 0 0)}
}
@keyframes zirooHeroAccentFinal{
  0%{opacity:0;transform:translate3d(0,44px,0) scale(.965);filter:blur(8px);clip-path:inset(0 0 82% 0)}
  64%{opacity:1;transform:translate3d(0,-2px,0) scale(1.006);filter:blur(0);clip-path:inset(0 0 0 0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);clip-path:inset(0 0 0 0)}
}
@keyframes zirooHeroAccentAuraFinal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.78)}
  46%{opacity:.72;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}
}
@keyframes zirooHeroAccentLineFinal{
  0%{opacity:0;transform:translateX(-50%) scaleX(0)}
  42%{opacity:.68;transform:translateX(-50%) scaleX(1)}
  100%{opacity:0;transform:translateX(-50%) scaleX(1)}
}
@keyframes zirooHeroAccentSettle{
  0%,100%{text-shadow:0 0 0 rgba(252,108,26,0);transform:translate3d(0,0,0)}
  50%{text-shadow:0 12px 38px rgba(252,108,26,.12);transform:translate3d(0,-1px,0)}
}

@media (max-width:820px){
  .hero-copy-centered h1.ziroo-hero-heading{margin-inline:0}
  .ziroo-hero-heading .ziroo-hero-line{
    text-align:left;
  }
  .ziroo-hero-heading .ziroo-hero-line-primary{
    animation-duration:.94s;
    animation-delay:.08s;
  }
  .ziroo-hero-heading .ziroo-hero-line-accent{
    animation-duration:1.04s,4.8s;
    animation-delay:.22s,1.55s;
  }
  .ziroo-hero-heading .ziroo-hero-line-accent::after{height:2px;bottom:-.06em}
}

@media (prefers-reduced-motion:reduce){
  .ziroo-hero-heading .ziroo-hero-line{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
    animation:none !important;
  }
  .ziroo-hero-heading .ziroo-hero-line-accent::before,
  .ziroo-hero-heading .ziroo-hero-line-accent::after{
    display:none !important;
    animation:none !important;
  }
}


/* ========================================================================
   Ziroo 2.5 — hero heading descender and line-box clipping fix
   ======================================================================== */
.hero-copy-centered h1.ziroo-hero-heading{
  line-height:1.04 !important;
  overflow:visible !important;
  padding-bottom:.08em;
}
.ziroo-hero-heading .ziroo-hero-line{
  overflow:visible !important;
  line-height:1.04 !important;
  padding-bottom:.075em;
  margin-bottom:-.025em;
  clip-path:none !important;
  -webkit-clip-path:none !important;
}
.ziroo-hero-heading .ziroo-hero-line-primary{
  animation:zirooHeroPrimarySafe 1.08s cubic-bezier(.16,1,.3,1) .12s forwards !important;
}
.ziroo-hero-heading .ziroo-hero-line-accent{
  margin-top:.015em;
  animation:
    zirooHeroAccentSafe 1.22s cubic-bezier(.16,1,.3,1) .32s forwards,
    zirooHeroAccentSettle 4.8s ease-in-out 1.75s infinite !important;
}
@keyframes zirooHeroPrimarySafe{
  0%{opacity:0;transform:translate3d(0,30px,0) scale(.99);filter:blur(6px)}
  65%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@keyframes zirooHeroAccentSafe{
  0%{opacity:0;transform:translate3d(0,38px,0) scale(.975);filter:blur(7px)}
  66%{opacity:1;transform:translate3d(0,-1px,0) scale(1.004);filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}
@media (max-width:820px){
  .hero-copy-centered h1.ziroo-hero-heading{
    line-height:1.08 !important;
    padding-bottom:.1em;
  }
  .ziroo-hero-heading .ziroo-hero-line{
    line-height:1.08 !important;
    padding-bottom:.09em;
    margin-bottom:-.02em;
  }
  .ziroo-hero-heading .ziroo-hero-line-primary{
    animation-duration:.9s !important;
    animation-delay:.08s !important;
  }
  .ziroo-hero-heading .ziroo-hero-line-accent{
    animation-duration:1s,4.8s !important;
    animation-delay:.2s,1.5s !important;
  }
}
@media (max-width:480px){
  .hero-copy-centered h1.ziroo-hero-heading{
    line-height:1.1 !important;
  }
  .ziroo-hero-heading .ziroo-hero-line{
    line-height:1.1 !important;
    padding-bottom:.1em;
  }
}
@media (prefers-reduced-motion:reduce){
  .ziroo-hero-heading .ziroo-hero-line{
    clip-path:none !important;
    -webkit-clip-path:none !important;
  }
}

/* ========================================================================
   Ziroo 2.6 — focused hero with an above-the-fold Slack preview
   ======================================================================== */

/* Shorter scroll journey: the application is already visible when the page opens. */
.hero-experience{
  height:168vh !important;
  min-height:1210px !important;
  overflow:visible !important;
}
.hero-pin{
  overflow:visible !important;
}
.hero-copy-shell{
  top:clamp(142px,16.5vh,176px) !important;
}
.hero-copy-centered{
  max-width:1120px !important;
}
.hero-copy-centered h1.ziroo-hero-heading{
  max-width:1120px !important;
  margin-bottom:30px !important;
}
.hero-copy-centered .hero-platform-row{
  margin-bottom:34px !important;
}
.hero-copy-centered .hero-actions{
  justify-content:center;
  margin:0 !important;
}

/* Initial fallback state also exposes the top of Slack before JS paints. */
.hero-demo-motion{
  top:92px !important;
  opacity:1 !important;
  transform:translate3d(0,min(66vh,610px),0) scale(.92) rotateX(1.15deg);
  transform-origin:center top !important;
  pointer-events:none;
}
body.admin-bar .hero-demo-motion{
  top:124px !important;
}
.hero-demo-wrap::before{
  opacity:.64;
}
.hero-demo-wrap .demo-window.slack-demo{
  box-shadow:
    0 42px 112px rgba(32,9,33,.17),
    0 14px 38px rgba(17,17,17,.07),
    0 0 0 1px rgba(255,255,255,.82) inset !important;
}

/* Give the preview a subtle visual invitation without copying the reference layout. */
.hero-demo-wrap::after{
  bottom:-26px !important;
  height:72px !important;
  opacity:.78;
}

@media (max-width:820px){
  .hero-experience{
    height:auto !important;
    min-height:0 !important;
    overflow:clip !important;
  }
  .hero-copy-shell{
    top:auto !important;
    padding-top:142px !important;
    padding-bottom:34px !important;
  }
  body.admin-bar .hero-copy-shell{
    padding-top:186px !important;
  }
  .hero-copy-centered .hero-platform-row{
    margin-bottom:28px !important;
  }
  .hero-copy-centered h1.ziroo-hero-heading{
    margin-bottom:28px !important;
  }
  .hero-copy-centered .hero-actions{
    display:grid;
    gap:12px;
    margin:0 !important;
  }
  .hero-demo-motion{
    top:auto !important;
    opacity:1 !important;
    transform:none !important;
    margin-top:4px !important;
    padding-bottom:38px !important;
    pointer-events:auto !important;
  }
}

@media (max-width:480px){
  .hero-copy-shell{
    padding-top:128px !important;
    padding-bottom:28px !important;
  }
  body.admin-bar .hero-copy-shell{
    padding-top:174px !important;
  }
  .hero-copy-centered .hero-platform-row{
    margin-bottom:25px !important;
  }
  .hero-copy-centered h1.ziroo-hero-heading{
    margin-bottom:24px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-demo-motion{
    opacity:1 !important;
  }
}

/* ========================================================================
   Ziroo 2.7 - client review rebuild
   ======================================================================== */
.hero-copy-centered h1{max-width:1120px}
.hero-subheading{max-width:720px!important;margin:22px auto 0!important;font-size:clamp(17px,1.45vw,21px)!important;line-height:1.55!important;color:#514b46}
.coming-soon{display:inline-flex;align-items:center;margin-left:5px;padding:3px 9px;border-radius:999px;background:#fff0e7;color:#b64b0c;font-size:.72em;font-weight:800;vertical-align:2px}
.ziroo-hero-line-primary{color:#111!important}
.ziroo-hero-line-accent{color:var(--orange)!important}

.avatar.ziroo{background:#fff!important;background-image:url('../images/ziroo-agent.png')!important;background-size:cover!important;background-position:center!important;border:1px solid rgba(17,17,17,.08)!important}
.avatar.ziroo::after{display:none!important}
.ziroo-agent-mini{background:url('../images/ziroo-agent.png') center/cover no-repeat!important;border-radius:8px!important}
.avatar-person{background:linear-gradient(145deg,#f1ebe6,#ded4cb)!important;color:#292420!important;font-size:11px!important;font-weight:850!important}
.demo-process,.demo-recap,.continue{display:none!important}

.integrations-head{text-align:left!important}
.integrations-head h2{margin:0!important}
.integration-count-card{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;padding-left:28px!important;background:linear-gradient(145deg,#111,#33180b)!important;color:#fff!important}
.integration-count-card strong{font-size:26px;line-height:1;color:#ff9b62}
.integration-count-card span{margin-top:7px;font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.06em;text-transform:uppercase}

.use-cases-section{background:linear-gradient(180deg,#fff 0%,#fffaf7 100%)}
.use-cases-head{margin-bottom:34px}
.use-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.use-case-card{padding:30px;border:1px solid rgba(17,17,17,.07);border-radius:30px;background:#fff;box-shadow:0 22px 64px rgba(17,17,17,.055)}
.use-case-label{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:#fff1e8;color:#c8510c;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.use-case-card h3{max-width:520px;margin:20px 0 26px;font-size:clamp(28px,2.7vw,42px);line-height:1.04}
.use-case-chat{display:grid;gap:18px;padding:20px;border-radius:22px;background:#f8f7f6}
.chat-row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:start}
.chat-row b{display:block;margin:2px 0 5px;font-size:13px}
.chat-row p{margin:0;color:#4b4642;font-size:14px;line-height:1.55}
.ziroo-row{padding-top:16px;border-top:1px solid rgba(17,17,17,.07)}

.final-offer-section{padding-top:52px;padding-bottom:72px}
.final-offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.8fr);gap:60px;align-items:center;padding:64px;border-radius:38px;color:#fff;background:linear-gradient(145deg,#17100d 0%,#5d260d 58%,#fc6c1a 150%);box-shadow:0 30px 90px rgba(35,14,4,.18)}
.final-offer-copy h2{max-width:720px;margin-bottom:22px;font-size:clamp(42px,5vw,72px);line-height:1.02;color:#fff}
.final-offer-copy h2 span{color:#ffad7e}
.final-offer-copy p{max-width:680px;margin:0 0 30px;color:rgba(255,255,255,.76);font-size:17px;line-height:1.68}
.button-light{background:#fff;color:#111;box-shadow:0 16px 38px rgba(0,0,0,.15)}
.button-light:hover{background:#ffefe5;color:#111;transform:translateY(-2px)}
.final-offer-points{display:grid}
.final-offer-points div{display:flex;align-items:center;gap:14px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:18px;font-weight:650}
.final-offer-points div:last-child{border-bottom:0}
.final-offer-points span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);color:#ffbd95;font-weight:900}

.footer-social{display:flex;align-items:center;gap:10px}
.footer-social a{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(17,17,17,.1);border-radius:50%;color:#111;background:#fff;transition:.3s ease}
.footer-social a:hover{color:#fff;background:var(--orange);transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px}

@media(max-width:820px){
 .hero-subheading{margin-top:18px!important;font-size:15px!important}
 .use-case-grid{grid-template-columns:1fr}
 .use-case-card{padding:24px;border-radius:24px}
 .final-offer{grid-template-columns:1fr;gap:34px;padding:34px 26px;border-radius:28px}
 .final-offer-copy h2{font-size:clamp(38px,11vw,52px)}
 .final-offer-points div{font-size:16px;padding:18px 0}
}
@media(max-width:480px){
 .coming-soon{display:inline-block;margin:4px 0 0}
 .use-case-card{padding:20px}
 .use-case-chat{padding:16px}
 .chat-row p{font-size:13px}
 .final-offer{padding:28px 20px}
}

/* ========================================================================
   Ziroo 2.8 - alternating Slack use-case stories
   ======================================================================== */
.use-case-grid{display:none!important}
.use-case-story-list{display:grid;gap:clamp(70px,8vw,118px)}
.use-case-story{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr);
  gap:clamp(44px,6.5vw,96px);
  align-items:center;
}
.use-case-story.is-reversed .use-case-copy{order:2}
.use-case-story.is-reversed .use-case-demo-wrap{order:1}
.use-case-copy{min-width:0}
.use-case-copy h3{
  max-width:560px;
  margin:20px 0 18px;
  font-size:clamp(36px,4vw,58px);
  line-height:1.02;
  letter-spacing:-.055em;
}
.use-case-copy>p{
  max-width:560px;
  margin:0 0 24px;
  color:#6a625c;
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.55;
}
.use-case-outcome{
  max-width:590px;
  padding-left:18px;
  border-left:2px solid rgba(252,108,26,.5);
  color:#5e5751;
  font-size:15px;
  line-height:1.62;
}
.use-case-outcome span{
  display:block;
  margin-bottom:5px;
  color:var(--orange);
  font-size:10px;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.use-case-demo-wrap{min-width:0;position:relative}
.use-case-demo-wrap::before{
  content:"";
  position:absolute;
  inset:12% 8% -7%;
  border-radius:40px;
  background:radial-gradient(circle at 50% 40%,rgba(252,108,26,.15),transparent 72%);
  filter:blur(34px);
  pointer-events:none;
}
.use-case-slack{
  position:relative;
  z-index:1;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(74,21,75,.22);
  border-radius:27px;
  background:#fff;
  box-shadow:0 32px 84px rgba(43,13,45,.16),0 10px 28px rgba(17,17,17,.07);
  transform:translateZ(0);
}
.use-slack-topbar{
  min-height:48px;
  display:grid;
  grid-template-columns:92px minmax(180px,1fr) 34px;
  align-items:center;
  gap:12px;
  padding:0 14px;
  color:#fff;
  background:linear-gradient(180deg,#4b154c,#3a0d3d);
}
.use-slack-search{
  justify-self:center;
  width:min(100%,330px);
  padding:7px 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  background:rgba(255,255,255,.11);
  color:rgba(255,255,255,.75);
  font-size:11px;
  text-align:center;
}
.use-slack-user{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fff;
  color:#3f1041;
  font-size:11px;
  font-weight:900;
}
.use-slack-layout{
  display:grid;
  grid-template-columns:166px minmax(0,1fr);
  min-height:430px;
}
.use-slack-sidebar{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:20px 12px;
  color:#cfb8d0;
  background:#2a0d2c;
}
.use-slack-sidebar strong{display:block;margin:0 9px 22px;color:#fff;font-size:17px}
.use-slack-sidebar>span{display:block;margin:0 9px 8px;color:#a991aa;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.use-slack-sidebar b,.use-slack-sidebar small{
  display:flex;
  align-items:center;
  min-height:34px;
  padding:6px 10px;
  border-radius:7px;
  color:#cdb8ce;
  font-size:12px;
  font-weight:500;
}
.use-slack-sidebar b{color:#fff;background:#7b3b85;font-weight:800}
.use-slack-main{
  min-width:0;
  display:grid;
  grid-template-rows:59px minmax(0,1fr) auto;
  background:#fff;
}
.use-slack-channel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 18px;
  border-bottom:1px solid #e8e8e8;
}
.use-slack-channel>div{display:grid;gap:3px}
.use-slack-channel strong{font-size:16px}
.use-slack-channel span{color:#8c8681;font-size:10px}
.use-slack-channel i{font-style:normal;color:#777;font-size:18px}
.use-slack-feed{
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:23px;
  padding:28px 22px;
}
.use-slack-message{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:11px;
  align-items:start;
}
.use-slack-message .msg-head{
  margin:1px 0 5px;
  color:#171717;
  font-size:13px;
  font-weight:820;
}
.use-slack-message .msg-head span{margin-left:7px;color:#938d88;font-size:10px;font-weight:500}
.use-slack-message p{
  margin:0;
  color:#3e3935;
  font-size:13px;
  line-height:1.58;
}
.use-slack-status{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:36px;
  margin:7px 0 11px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  color:#f5f3f5;
  background:#171418;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  font-size:11px;
  font-weight:650;
}
.use-slack-status i{
  width:13px;
  height:13px;
  flex:0 0 13px;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:#ff9457;
  border-radius:50%;
  animation:useSlackSpin .9s linear infinite;
}
.use-slack-reply{padding-right:6px}
.use-slack-composer{
  position:relative;
  min-height:68px;
  margin:0 14px 14px;
  padding:15px 48px 15px 14px;
  border:1px solid #bbb;
  border-radius:9px;
  color:#918b86;
  background:#fff;
  font-size:11px;
}
.use-slack-composer button{
  position:absolute;
  right:9px;
  bottom:9px;
  width:31px;
  height:31px;
  border:0;
  border-radius:7px;
  color:#fff;
  background:#4a154b;
}
.use-case-slack.is-preparing .use-slack-status,
.use-case-slack.is-preparing .use-slack-reply{opacity:0;transform:translate3d(0,8px,0)}
.use-case-slack.is-playing .use-slack-status{animation:useSlackStatusIn .58s cubic-bezier(.22,1,.36,1) .25s both}
.use-case-slack.is-playing .use-slack-reply{animation:useSlackReplyIn .7s cubic-bezier(.22,1,.36,1) 1.55s both}
.use-case-slack.is-playing .use-slack-status{animation-name:useSlackStatusIn,useSlackStatusOut;animation-duration:.58s,.45s;animation-delay:.25s,1.38s;animation-fill-mode:both,both;animation-timing-function:cubic-bezier(.22,1,.36,1),ease}
@keyframes useSlackSpin{to{transform:rotate(360deg)}}
@keyframes useSlackStatusIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes useSlackStatusOut{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-4px,0)}}
@keyframes useSlackReplyIn{from{opacity:0;transform:translate3d(0,9px,0);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

@media(max-width:1100px){
  .use-case-story{grid-template-columns:minmax(0,.74fr) minmax(440px,1.26fr);gap:44px}
  .use-slack-layout{grid-template-columns:140px minmax(0,1fr)}
  .use-case-copy h3{font-size:clamp(34px,4.4vw,50px)}
}
@media(max-width:820px){
  .use-case-story-list{gap:72px}
  .use-case-story{grid-template-columns:1fr;gap:30px}
  .use-case-story .use-case-copy,
  .use-case-story .use-case-demo-wrap,
  .use-case-story.is-reversed .use-case-copy,
  .use-case-story.is-reversed .use-case-demo-wrap{order:initial}
  .use-case-story.is-reversed .use-case-demo-wrap{order:2}
  .use-case-copy h3{font-size:clamp(32px,8.8vw,44px)}
  .use-slack-layout{grid-template-columns:1fr;min-height:400px}
  .use-slack-sidebar{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    padding:9px;
    scrollbar-width:none;
  }
  .use-slack-sidebar::-webkit-scrollbar{display:none}
  .use-slack-sidebar strong,.use-slack-sidebar>span{display:none}
  .use-slack-sidebar b,.use-slack-sidebar small{min-width:max-content;background:rgba(255,255,255,.07)}
  .use-slack-sidebar b{background:#7b3b85}
  .use-slack-main{grid-template-rows:52px minmax(240px,1fr) auto}
}
@media(max-width:480px){
  .use-case-story-list{gap:60px}
  .use-case-copy h3{font-size:34px}
  .use-case-copy>p{font-size:15px}
  .use-case-slack{border-radius:20px}
  .use-slack-topbar{grid-template-columns:70px minmax(0,1fr) 30px;padding-inline:9px}
  .use-slack-search{font-size:9px;padding-inline:8px}
  .use-slack-user{width:26px;height:26px}
  .use-slack-feed{padding:20px 14px;gap:20px}
  .use-slack-message{grid-template-columns:34px minmax(0,1fr);gap:9px}
  .use-slack-message .avatar{width:34px;height:34px}
  .use-slack-message p{font-size:11.5px}
  .use-slack-status{font-size:10px}
  .use-slack-composer{margin:0 9px 9px;min-height:60px}
}
@media(prefers-reduced-motion:reduce){
  .use-slack-status i{animation:none!important}
  .use-case-slack.is-playing .use-slack-status,
  .use-case-slack.is-playing .use-slack-reply{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
}

/* ========================================================================
   Ziroo 2.9 - use-case sizing, hero spacing, integrations count placement
   ======================================================================== */

/* Keep every alternating Slack demo at exactly the same visual width. */
.use-case-story{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:clamp(44px,5.4vw,82px)!important;
}
.use-case-demo-wrap,
.use-case-slack{
  width:100%;
  max-width:none;
}
.use-slack-layout{
  height:430px;
  min-height:430px;
}

/* Collapse the temporary processing strip after Ziroo's reply appears. */
.use-slack-status{
  max-height:46px;
  overflow:hidden;
  transition:
    opacity .32s ease,
    transform .32s ease,
    max-height .36s cubic-bezier(.22,1,.36,1),
    margin .36s cubic-bezier(.22,1,.36,1),
    padding .36s cubic-bezier(.22,1,.36,1),
    border-width .36s ease;
}
.use-case-slack.is-complete .use-slack-status{
  opacity:0!important;
  transform:translate3d(0,-4px,0)!important;
  max-height:0;
  min-height:0;
  margin:0;
  padding-top:0;
  padding-bottom:0;
  border-width:0;
  pointer-events:none;
}
.use-case-slack.is-complete .use-slack-reply{
  margin-top:0;
}

/* Give the hero CTAs clear breathing room below the subheading. */
.hero-copy-centered .hero-actions{
  margin:0 0 20px!important;
  padding-top:24px;
}

/* Keep the integrations carousel clean and place the count as quiet metadata. */
.integration-count-card{display:none!important}
.integration-count-note{
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  gap:6px;
  margin-top:14px;
  padding-right:8px;
  color:#746d67;
  font-size:12px;
  line-height:1.3;
  letter-spacing:.02em;
}
.integration-count-note strong{
  color:var(--orange);
  font-size:14px;
  font-weight:850;
}

@media(max-width:1100px){
  .use-case-story{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:38px!important;
  }
  .use-slack-layout{
    grid-template-columns:140px minmax(0,1fr);
    height:410px;
    min-height:410px;
  }
}

@media(max-width:820px){
  .hero-copy-centered .hero-actions{
    padding-top:22px;
    margin-bottom:18px!important;
  }
  .use-case-story{
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
  .use-slack-layout{
    height:auto;
    min-height:400px;
  }
  .integration-count-note{
    margin-top:12px;
    padding-right:2px;
    font-size:11px;
  }
  .integration-count-note strong{font-size:13px}
}

@media(max-width:480px){
  .hero-copy-centered .hero-actions{
    padding-top:20px;
  }
  .use-slack-layout{
    min-height:390px;
  }
}

@media(prefers-reduced-motion:reduce){
  .use-case-slack .use-slack-status{
    display:none!important;
  }
}

/* ========================================================================
   Ziroo 3.0 - unified in-channel thinking and answer transition
   ======================================================================== */

/* Main Slack demo: the thinking strip and final reply share one fixed slot. */
.demo-answer-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  min-height:78px;
  margin-top:7px;
}
.demo-thinking-box,
.demo-answer-copy{
  grid-area:1 / 1;
  width:100%;
  transition:
    opacity .38s cubic-bezier(.22,1,.36,1),
    transform .38s cubic-bezier(.22,1,.36,1),
    filter .38s cubic-bezier(.22,1,.36,1);
}
.demo-thinking-box{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  color:#f6f3f6;
  background:#171418;
  box-shadow:0 8px 20px rgba(0,0,0,.13);
  font-size:12px;
  font-weight:650;
  opacity:0;
  transform:translate3d(0,5px,0);
}
.demo-thinking-box i{
  width:13px;
  height:13px;
  flex:0 0 13px;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:#ff9457;
  border-radius:50%;
  animation:useSlackSpin .9s linear infinite;
}
.demo-answer-copy{
  min-height:38px;
  padding:2px 0 0;
  opacity:0;
  transform:translate3d(0,5px,0);
  filter:blur(2px);
}
.demo-answer-stage.is-thinking .demo-thinking-box{
  opacity:1;
  transform:none;
}
.demo-answer-stage.is-thinking .demo-answer-copy{
  opacity:0;
  transform:translate3d(0,5px,0);
}
.demo-answer-stage.is-answering .demo-thinking-box{
  opacity:0;
  transform:translate3d(0,-3px,0);
  pointer-events:none;
}
.demo-answer-stage.is-answering .demo-answer-copy{
  opacity:1;
  transform:none;
  filter:none;
}

/* Use-case demos: morph the black thinking strip into the reply in-place. */
.use-slack-answer-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  min-height:82px;
  margin-top:7px;
}
.use-slack-answer-stage .use-slack-status,
.use-slack-answer-stage .use-slack-reply{
  grid-area:1 / 1;
  width:100%;
  margin:0!important;
  animation:none!important;
  transition:
    opacity .38s cubic-bezier(.22,1,.36,1),
    transform .38s cubic-bezier(.22,1,.36,1),
    filter .38s cubic-bezier(.22,1,.36,1)!important;
}
.use-slack-answer-stage .use-slack-status{
  max-height:none!important;
  min-height:38px!important;
  padding:9px 12px!important;
  border-width:1px!important;
  opacity:0!important;
  transform:translate3d(0,5px,0)!important;
}
.use-slack-answer-stage .use-slack-reply{
  min-height:38px;
  padding:2px 6px 0 0;
  opacity:0!important;
  transform:translate3d(0,5px,0)!important;
  filter:blur(2px);
}
.use-case-slack.is-playing:not(.is-complete) .use-slack-answer-stage .use-slack-status{
  opacity:1!important;
  transform:none!important;
}
.use-case-slack.is-playing:not(.is-complete) .use-slack-answer-stage .use-slack-reply{
  opacity:0!important;
  transform:translate3d(0,5px,0)!important;
}
.use-case-slack.is-playing.is-complete .use-slack-answer-stage .use-slack-status{
  opacity:0!important;
  transform:translate3d(0,-3px,0)!important;
  pointer-events:none;
}
.use-case-slack.is-playing.is-complete .use-slack-answer-stage .use-slack-reply{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

@media(max-width:480px){
  .demo-answer-stage{min-height:88px}
  .demo-thinking-box{font-size:10px;padding:8px 10px}
  .use-slack-answer-stage{min-height:92px}
}

@media(prefers-reduced-motion:reduce){
  .demo-thinking-box i{animation:none!important}
  .demo-thinking-box,
  .demo-answer-copy,
  .use-slack-answer-stage .use-slack-status,
  .use-slack-answer-stage .use-slack-reply{transition:none!important}
  .demo-answer-stage.is-answering .demo-thinking-box,
  .use-case-slack.is-complete .use-slack-answer-stage .use-slack-status{opacity:0!important}
  .demo-answer-stage.is-answering .demo-answer-copy,
  .use-case-slack.is-complete .use-slack-answer-stage .use-slack-reply{opacity:1!important;transform:none!important;filter:none!important}
}

/* ========================================================================
   Ziroo 3.1 - replayable use-case typing and production hardening polish
   ======================================================================== */
.use-case-slack.is-animated .use-slack-message{
  transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1);
}
.use-case-slack.is-animated .use-slack-person,
.use-case-slack.is-animated .use-slack-ziroo{
  opacity:0;
  transform:translate3d(0,7px,0);
}
.use-case-slack.is-animated.show-person .use-slack-person,
.use-case-slack.is-animated.show-ziroo .use-slack-ziroo{
  opacity:1;
  transform:none;
}
.use-case-slack [data-use-prompt],
.use-case-slack [data-use-reply]{
  min-height:1.58em;
  overflow-wrap:anywhere;
}
.use-case-slack.is-typing-prompt [data-use-prompt]::after,
.use-case-slack.is-typing-reply [data-use-reply]::after{
  content:"";
  display:inline-block;
  width:1px;
  height:1.05em;
  margin-left:3px;
  background:#4a154b;
  vertical-align:-.12em;
  animation:zirooUseCaseCaret .72s steps(1,end) infinite;
}
.use-case-slack.is-typing-reply [data-use-reply]::after{
  background:var(--orange);
}
.use-case-slack.is-animated:not(.show-ziroo) .use-slack-answer-stage .use-slack-status,
.use-case-slack.is-animated:not(.show-ziroo) .use-slack-answer-stage .use-slack-reply{
  opacity:0!important;
}
@keyframes zirooUseCaseCaret{
  0%,48%{opacity:1}
  49%,100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .use-case-slack.is-animated .use-slack-person,
  .use-case-slack.is-animated .use-slack-ziroo{
    opacity:1!important;
    transform:none!important;
  }
  .use-case-slack.is-typing-prompt [data-use-prompt]::after,
  .use-case-slack.is-typing-reply [data-use-reply]::after{
    display:none!important;
    animation:none!important;
  }
}


/* ========================================================================
   Ziroo 3.2 - compact mobile hero and vertical Slack channel rail
   ======================================================================== */

@media (max-width:820px){
  /* Keep the hero compact so the live Slack preview follows the CTAs quickly. */
  .hero-experience,
  .hero-pin{
    min-height:0!important;
    height:auto!important;
  }
  .hero-copy-shell{
    padding-bottom:0!important;
  }
  .hero-copy-centered .hero-actions{
    margin-bottom:0!important;
  }
  .hero-demo-motion{
    margin-top:-82px!important;
    padding-bottom:30px!important;
  }

  /* Restore an authentic vertical Slack channel rail on mobile. */
  .use-case-slack{
    width:100%!important;
    max-width:100%!important;
  }
  .use-slack-layout{
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    min-height:420px!important;
    height:auto!important;
  }
  .use-slack-sidebar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    overflow:visible!important;
    padding:16px 8px!important;
    min-width:0!important;
  }
  .use-slack-sidebar strong{
    display:block!important;
    margin:0 7px 16px!important;
    font-size:14px!important;
    line-height:1.2!important;
  }
  .use-slack-sidebar>span{
    display:block!important;
    margin:0 7px 7px!important;
    font-size:8px!important;
    letter-spacing:.1em!important;
  }
  .use-slack-sidebar b,
  .use-slack-sidebar small{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    min-height:31px!important;
    padding:5px 8px!important;
    border-radius:7px!important;
    background:transparent!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:10px!important;
  }
  .use-slack-sidebar b{
    background:#7b3b85!important;
  }
  .use-slack-main{
    min-width:0!important;
    grid-template-rows:52px minmax(250px,1fr) auto!important;
  }
  .use-slack-channel{
    padding-inline:12px!important;
  }
  .use-slack-channel strong{
    font-size:14px!important;
  }
  .use-slack-feed{
    justify-content:flex-start!important;
    padding:18px 12px!important;
    gap:18px!important;
  }
  .use-slack-message{
    grid-template-columns:32px minmax(0,1fr)!important;
    gap:9px!important;
  }
  .use-slack-message .avatar{
    width:32px!important;
    height:32px!important;
  }
  .use-slack-message p{
    font-size:11px!important;
    line-height:1.5!important;
  }
  .use-slack-answer-stage{
    min-height:86px!important;
  }
  .use-slack-composer{
    margin:0 9px 9px!important;
    min-height:60px!important;
    padding:13px 45px 13px 11px!important;
  }
}

@media (max-width:480px){
  .hero-copy-shell{
    padding-bottom:0!important;
  }
  .hero-demo-motion{
    margin-top:-132px!important;
    padding-bottom:24px!important;
  }
  .use-case-story-list{
    gap:52px!important;
  }
  .use-case-story{
    gap:24px!important;
  }
  .use-slack-layout{
    grid-template-columns:104px minmax(0,1fr)!important;
    min-height:410px!important;
  }
  .use-slack-sidebar{
    padding:14px 7px!important;
  }
  .use-slack-sidebar strong{
    margin:0 6px 14px!important;
    font-size:13px!important;
  }
  .use-slack-sidebar>span{
    margin-inline:6px!important;
  }
  .use-slack-sidebar b,
  .use-slack-sidebar small{
    padding-inline:7px!important;
    font-size:9.5px!important;
  }
  .use-slack-topbar{
    grid-template-columns:68px minmax(0,1fr) 28px!important;
    padding-inline:8px!important;
  }
  .use-slack-search{
    font-size:8.5px!important;
  }
  .use-slack-feed{
    padding:16px 10px!important;
    gap:16px!important;
  }
  .use-slack-message{
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:8px!important;
  }
  .use-slack-message .avatar{
    width:30px!important;
    height:30px!important;
  }
  .use-slack-message .msg-head{
    font-size:11.5px!important;
  }
  .use-slack-message .msg-head span{
    margin-left:4px!important;
    font-size:8.5px!important;
  }
  .use-slack-message p{
    font-size:10.5px!important;
  }
  .use-slack-status{
    padding:8px 9px!important;
    font-size:9px!important;
  }
}


/* ========================================================================
   Ziroo 3.3 - mobile hero spacing and compact main Slack preview
   ======================================================================== */

@media (max-width:820px){
  /* Reduce the empty space under the fixed liquid-glass header. */
  .hero-copy-shell{
    padding-top:96px!important;
    padding-bottom:0!important;
  }
  body.admin-bar .hero-copy-shell{
    padding-top:138px!important;
  }
  .hero-copy-centered .hero-platform-row{
    margin-bottom:22px!important;
  }
  .hero-copy-centered h1.ziroo-hero-heading{
    margin-bottom:22px!important;
  }
  .hero-subheading{
    margin-top:16px!important;
  }
  .hero-copy-centered .hero-actions{
    margin-top:24px!important;
    margin-bottom:0!important;
    gap:12px!important;
  }

  /* Keep a clean visual gap between the secondary CTA and Slack preview. */
  .hero-demo-motion{
    margin-top:28px!important;
    padding-bottom:26px!important;
  }

  /* Compact the main Slack preview and keep the composer permanently visible. */
  .hero-demo-wrap .demo-window.slack-demo,
  .demo-window.slack-demo{
    grid-template-rows:43px auto 430px!important;
    min-height:0!important;
    max-height:590px!important;
    height:auto!important;
  }
  .demo-main.slack-conversation{
    grid-template-rows:56px minmax(0,1fr) 68px!important;
    min-height:0!important;
    height:430px!important;
    overflow:hidden!important;
  }
  .slack-conversation .slack-feed{
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    padding:14px 11px 10px!important;
  }
  .slack-conversation .slack-composer{
    display:block!important;
    min-height:58px!important;
    height:58px!important;
    margin:0 9px 10px!important;
    overflow:hidden!important;
  }
  .slack-conversation .composer-tools{
    display:none!important;
  }
  .slack-conversation .composer-line{
    min-height:56px!important;
    height:56px!important;
    padding:10px 48px 10px 12px!important;
  }
  .slack-conversation .composer-send{
    right:8px!important;
    bottom:12px!important;
  }
  .slack-conversation .msg{
    margin-bottom:14px!important;
  }
  .slack-conversation .demo-date{
    margin-bottom:12px!important;
  }
  .main-answer-stage,
  .demo-answer-stage{
    min-height:0!important;
  }
}

@media (max-width:480px){
  .hero-copy-shell{
    padding-top:82px!important;
  }
  body.admin-bar .hero-copy-shell{
    padding-top:122px!important;
  }
  .hero-copy-centered .hero-platform-row{
    margin-bottom:20px!important;
  }
  .hero-copy-centered h1.ziroo-hero-heading{
    margin-bottom:20px!important;
  }
  .hero-subheading{
    margin-top:14px!important;
  }
  .hero-copy-centered .hero-actions{
    margin-top:22px!important;
  }
  .hero-demo-motion{
    margin-top:24px!important;
    padding-bottom:22px!important;
  }
  .hero-demo-wrap .demo-window.slack-demo,
  .demo-window.slack-demo{
    grid-template-rows:43px auto 395px!important;
    min-height:0!important;
    max-height:550px!important;
  }
  .demo-main.slack-conversation{
    grid-template-rows:54px minmax(0,1fr) 66px!important;
    height:395px!important;
  }
  .slack-conversation .demo-channel-head{
    min-height:54px!important;
    padding:8px 10px!important;
  }
  .slack-conversation .slack-feed{
    padding:12px 9px 8px!important;
  }
  .slack-conversation .msg{
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:8px!important;
    margin-bottom:12px!important;
  }
  .slack-conversation .avatar{
    width:30px!important;
    height:30px!important;
  }
  .slack-conversation .msg-text{
    font-size:10.5px!important;
    line-height:1.42!important;
  }
  .slack-conversation .slack-composer{
    height:56px!important;
    min-height:56px!important;
  }
  .slack-conversation .composer-line{
    height:54px!important;
    min-height:54px!important;
    font-size:10.5px!important;
  }
}

@media (max-width:360px){
  .hero-copy-shell{
    padding-top:76px!important;
  }
  body.admin-bar .hero-copy-shell{
    padding-top:116px!important;
  }
  .hero-demo-wrap .demo-window.slack-demo,
  .demo-window.slack-demo{
    grid-template-rows:42px auto 375px!important;
    max-height:525px!important;
  }
  .demo-main.slack-conversation{
    height:375px!important;
  }
}

/* ========================================================================
   Ziroo 3.4 - compact mobile CTAs, clean labels, social row and sequences
   ======================================================================== */

/* Remove the decorative orange dash from all section labels. */
.eyebrow::before{display:none!important}
.eyebrow{gap:0!important}

/* Continuous channel conversations need a scrollable, top-aligned feed. */
.slack-conversation .slack-feed,
.use-slack-feed{
  justify-content:flex-start!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.demo-answer-stage,
.use-slack-answer-stage{
  position:relative;
  min-height:52px;
}
.demo-answer-stage .demo-thinking-box,
.demo-answer-stage .demo-answer-copy,
.use-slack-answer-stage .use-slack-status,
.use-slack-answer-stage .use-slack-reply{
  transition:opacity .34s ease,transform .34s ease,filter .34s ease;
}
.demo-answer-stage.is-thinking .demo-thinking-box,
.use-slack-answer-stage.is-thinking .use-slack-status{opacity:1!important;transform:none!important}
.demo-answer-stage.is-thinking .demo-answer-copy,
.use-slack-answer-stage.is-thinking .use-slack-reply{opacity:0!important;transform:translate3d(0,5px,0)!important;filter:blur(2px)}
.demo-answer-stage.is-answering .demo-thinking-box,
.use-slack-answer-stage.is-answering .use-slack-status{
  opacity:0!important;
  transform:translate3d(0,-4px,0)!important;
  position:absolute;
  inset:0 auto auto 0;
  pointer-events:none;
}
.demo-answer-stage.is-answering .demo-answer-copy,
.use-slack-answer-stage.is-answering .use-slack-reply{opacity:1!important;transform:none!important;filter:none!important}

/* Correct social brand icon rendering. */
.footer-social svg{display:block;width:19px;height:19px;max-width:none}
.footer-social a:first-child svg{width:18px;height:18px}

@media (max-width:820px){
  /* Keep both hero actions in one compact row on mobile. */
  .hero-copy-centered .hero-actions,
  .hero-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:center!important;
    width:100%!important;
    gap:8px!important;
    padding-top:20px!important;
    margin:0 0 28px!important;
  }
  .hero-copy-centered .hero-actions .button,
  .hero-actions .button{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:50px!important;
    padding:10px 8px!important;
    font-size:clamp(10px,2.75vw,12px)!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  .hero-demo-motion{margin-top:4px!important}

  /* Keep the footer logo and requested social links on one line. */
  .footer-inner{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    gap:18px!important;
  }
  .footer-logo,
  .footer-logo img{width:104px!important;max-width:104px!important;height:auto!important}
  .footer-social{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:8px!important;margin-left:auto!important}
  .footer-social a{width:38px!important;height:38px!important;flex:0 0 38px!important}

  /* Multi-message use-case sequences remain compact. */
  .use-slack-feed{padding:16px 11px!important;gap:15px!important}
  .use-slack-layout{min-height:420px!important;height:420px!important}
  .use-slack-main{min-height:0!important;overflow:hidden!important}
}

@media (max-width:480px){
  .hero-copy-centered .hero-actions,
  .hero-actions{gap:7px!important;margin-bottom:24px!important}
  .hero-copy-centered .hero-actions .button,
  .hero-actions .button{min-height:48px!important;padding-inline:6px!important;font-size:10.5px!important}
  .footer-logo,.footer-logo img{width:94px!important;max-width:94px!important}
  .footer-social a{width:36px!important;height:36px!important;flex-basis:36px!important}
  .use-slack-layout{min-height:398px!important;height:398px!important}
}

@media (max-width:340px){
  .hero-copy-centered .hero-actions .button,
  .hero-actions .button{font-size:9.5px!important;letter-spacing:-.01em!important}
}

@media (prefers-reduced-motion:reduce){
  .demo-answer-stage .demo-thinking-box,
  .demo-answer-stage .demo-answer-copy,
  .use-slack-answer-stage .use-slack-status,
  .use-slack-answer-stage .use-slack-reply{transition:none!important}
}


/* ========================================================================
   Ziroo 3.5 - premium graphic cards inside Slack replies
   ======================================================================== */
.ziroo-attachment-card{
  margin-top:16px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(95,51,84,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(251,243,240,.98));
  box-shadow:0 18px 40px rgba(53,23,48,.13);
  opacity:0;
  transform:translate3d(0,10px,0) scale(.985);
  transition:opacity .44s cubic-bezier(.22,1,.36,1),transform .44s cubic-bezier(.22,1,.36,1);
  max-width:min(100%, 470px);
}
.ziroo-attachment-card.is-visible{opacity:1;transform:none}
.ziroo-attachment-card.theme-gold .ziroo-attachment-shell{
  background:
    radial-gradient(220px circle at 16% 22%,rgba(255,188,103,.42),transparent 58%),
    radial-gradient(230px circle at 88% 10%,rgba(152,112,255,.2),transparent 56%),
    linear-gradient(180deg,#fff2d4 0%,#f7dcc0 56%,#f5efe8 100%);
}
.ziroo-attachment-card.theme-violet .ziroo-attachment-shell{
  background:
    radial-gradient(260px circle at 12% 18%,rgba(255,174,135,.18),transparent 54%),
    radial-gradient(220px circle at 92% 8%,rgba(125,85,205,.28),transparent 56%),
    linear-gradient(180deg,#f1e6ff 0%,#e7d9fa 42%,#f8f1ef 100%);
}
.ziroo-attachment-card.theme-ember .ziroo-attachment-shell{
  background:
    radial-gradient(220px circle at 18% 16%,rgba(255,181,144,.26),transparent 56%),
    radial-gradient(220px circle at 88% 12%,rgba(67,24,61,.2),transparent 58%),
    linear-gradient(180deg,#ffe8dc 0%,#f6d4c4 46%,#f7f0eb 100%);
}
.ziroo-attachment-shell{padding:18px 18px 0;}
.ziroo-attachment-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;}
.ziroo-attachment-meta{display:grid;gap:5px;min-width:0;}
.ziroo-attachment-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  color:#6b2e54;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.ziroo-attachment-title{font-size:18px;line-height:1.02;color:#20131d;letter-spacing:-.03em;}
.ziroo-attachment-subtitle{margin:0;color:#5d5360;font-size:12px;line-height:1.45;}
.ziroo-attachment-metric{display:grid;gap:4px;justify-items:end;text-align:right;min-width:96px;}
.ziroo-attachment-metric b{font-size:44px;line-height:.92;letter-spacing:-.06em;color:#23153b;}
.ziroo-attachment-metric span{font-size:11px;line-height:1.3;color:#4b4150;font-weight:700;text-transform:lowercase;}
.ziroo-attachment-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.ziroo-attachment-chips span{
  display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid rgba(84,53,84,.09);backdrop-filter:blur(10px);
  color:#4b3248;font-size:11px;font-weight:700;
}
.ziroo-attachment-bars{display:flex;align-items:flex-end;gap:8px;height:88px;margin-top:18px;padding:0 6px 12px;border-bottom:1px solid rgba(68,39,56,.12);}
.ziroo-attachment-bars i{
  flex:1 1 0;display:block;border-radius:999px 999px 10px 10px;
  height:calc(var(--bar-height, 50) * 1%);
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.18)),linear-gradient(180deg,#ffad66 0%,#f28d44 45%,#b46de9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.ziroo-attachment-bullets{display:grid;gap:10px;margin:16px 0 0;padding:0 0 14px;list-style:none;}
.ziroo-attachment-bullets li{position:relative;padding-left:18px;color:#403645;font-size:12px;line-height:1.5;font-weight:600;}
.ziroo-attachment-bullets li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#ff8a40,#6d34d3);box-shadow:0 0 0 3px rgba(255,255,255,.28);}
.ziroo-attachment-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:8px;padding:14px 18px 16px;background:rgba(255,255,255,.74);border-top:1px solid rgba(87,55,80,.08);
}
.ziroo-attachment-footer strong{display:block;font-size:14px;line-height:1.15;color:#1f1520;}
.ziroo-attachment-footer span{display:block;margin-top:4px;font-size:11px;line-height:1.4;color:#726973;}
.ziroo-attachment-reactions{display:flex;gap:10px;flex-wrap:wrap;padding-top:10px;}
.ziroo-attachment-reactions span{
  display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:#f2f0f5;
  color:#3f3541;font-size:12px;font-weight:700;border:1px solid rgba(84,53,84,.08);
}

.demo-answer-extra,.use-slack-reply-extra{display:grid;gap:10px;}
.demo-answer-text,.use-slack-reply-text{min-height:0;}
.use-slack-reply{display:grid;gap:10px;}
.use-slack-reply-text{margin:0;color:#3d353d;font-size:12px;line-height:1.7;font-weight:550;}
.ziroo-attachment-card.is-compact{max-width:100%;border-radius:18px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-shell{padding:14px 14px 0;}
.ziroo-attachment-card.is-compact .ziroo-attachment-title{font-size:15px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-subtitle{font-size:10.5px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-metric{min-width:74px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-metric b{font-size:31px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-metric span{font-size:9px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-chips{margin-top:10px;gap:6px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-chips span{min-height:22px;padding:0 10px;font-size:9.5px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-bars{height:68px;gap:6px;margin-top:12px;padding-bottom:10px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-bullets{gap:8px;margin-top:12px;padding-bottom:10px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-bullets li{font-size:10.5px;padding-left:15px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-footer{padding:12px 14px 14px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-footer strong{font-size:12px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-footer span{font-size:9.5px;}
.ziroo-attachment-card.is-compact .ziroo-attachment-reactions span{min-height:24px;font-size:10px;padding:0 10px;}

@media(max-width:820px){
  .ziroo-attachment-card{max-width:100%;}
  .ziroo-attachment-top{gap:12px;}
  .ziroo-attachment-title{font-size:16px;}
  .ziroo-attachment-metric b{font-size:34px;}
  .ziroo-attachment-bars{height:72px;gap:6px;}
}
@media(max-width:480px){
  .use-slack-reply-text{font-size:11px;}
  .ziroo-attachment-card{border-radius:18px;margin-top:12px;}
  .ziroo-attachment-shell{padding:14px 14px 0;}
  .ziroo-attachment-top{gap:10px;}
  .ziroo-attachment-title{font-size:15px;}
  .ziroo-attachment-subtitle{font-size:10.5px;}
  .ziroo-attachment-metric{min-width:72px;}
  .ziroo-attachment-metric b{font-size:28px;}
  .ziroo-attachment-metric span{font-size:9px;}
  .ziroo-attachment-chips{margin-top:10px;gap:6px;}
  .ziroo-attachment-chips span{font-size:9px;min-height:22px;padding:0 9px;}
  .ziroo-attachment-bars{height:62px;gap:5px;margin-top:12px;padding-bottom:10px;}
  .ziroo-attachment-bullets{gap:8px;margin-top:12px;padding-bottom:10px;}
  .ziroo-attachment-bullets li{font-size:10px;line-height:1.45;}
  .ziroo-attachment-footer{padding:12px 14px 14px;}
  .ziroo-attachment-footer strong{font-size:11.5px;}
  .ziroo-attachment-footer span{font-size:9px;}
  .ziroo-attachment-reactions span{font-size:10px;min-height:24px;padding:0 9px;}
}


/* ========================================================================
   Ziroo 3.6 - offer highlight and reliable use-case animation playback
   ======================================================================== */
.final-offer-copy h2 .final-offer-highlight{
  color:#ffc28f!important;
  text-shadow:0 8px 28px rgba(255,137,68,.18);
}

/* Each desktop use-case demo owns a stable scrolling viewport. New messages
   and visual cards remain visible as the independent sequence advances. */
@media (min-width:821px){
  .use-case-story .use-case-demo-wrap{
    width:100%;
    min-width:0;
  }
  .use-case-story .use-case-slack{
    width:100%;
    max-width:none;
  }
  .use-case-story .use-slack-layout{
    height:500px;
    min-height:500px;
  }
  .use-case-story .use-slack-main{
    min-height:0;
    overflow:hidden;
  }
  .use-case-story .use-slack-feed{
    min-height:0;
    overflow-y:auto!important;
    justify-content:flex-start!important;
    scroll-behavior:smooth;
  }
}

@media (max-width:820px){
  .final-offer-copy h2 .final-offer-highlight{
    color:#ffc28f!important;
  }
}


/* ========================================================================
   Ziroo 3.7 - precise final-offer heading colour split
   ======================================================================== */
.final-offer-copy h2 .final-offer-highlight,
.final-offer-copy h2 .final-offer-highlight .motion-word{
  color:#ff9f6a!important;
  text-shadow:0 8px 28px rgba(255,117,52,.18);
}
.final-offer-copy h2 .final-offer-continuation,
.final-offer-copy h2 .final-offer-continuation .motion-word{
  color:#fff!important;
  text-shadow:none!important;
}

/* ========================================================================
   Ziroo 3.8 - refined hero, how-it-works and legal pages
   ======================================================================== */

/* A lighter, single-line desktop hero statement. */
@media (min-width:1101px){
  .hero-copy-centered h1.ziroo-hero-heading{
    max-width:none!important;
    width:max-content;
    white-space:nowrap;
    font-family:Inter,"Avenir Next","Segoe UI",sans-serif!important;
    font-size:clamp(48px,5.25vw,80px)!important;
    font-weight:610!important;
    line-height:1.08!important;
    letter-spacing:-.055em!important;
    margin-inline:auto!important;
    margin-bottom:22px!important;
  }
  .ziroo-hero-heading .ziroo-hero-line{
    display:inline-block!important;
    width:auto!important;
    line-height:1.08!important;
    padding-bottom:.04em!important;
    margin-bottom:0!important;
  }
  .ziroo-hero-heading .ziroo-hero-line-accent{
    margin-top:0!important;
    margin-left:.14em!important;
  }
  .ziroo-hero-heading .ziroo-hero-line-accent::before,
  .ziroo-hero-heading .ziroo-hero-line-accent::after{display:none!important}
  .hero-subheading{
    max-width:none!important;
    margin-top:16px!important;
    font-size:clamp(15px,1.12vw,18px)!important;
    line-height:1.48!important;
    letter-spacing:-.012em;
  }
  .hero-subheading br + *{white-space:nowrap}
  .hero-subheading .coming-soon{
    display:inline-flex!important;
    align-items:center;
    margin:0 2px 0 4px!important;
    white-space:nowrap!important;
    vertical-align:baseline;
  }
}
@media (min-width:821px) and (max-width:1100px){
  .hero-copy-centered h1.ziroo-hero-heading{
    font-size:clamp(46px,7.2vw,68px)!important;
    font-weight:620!important;
    letter-spacing:-.052em!important;
  }
  .hero-subheading{font-size:16px!important;max-width:760px!important}
  .coming-soon{white-space:nowrap!important}
}

/* How it works */
.how-it-works-section{
  position:relative;
  overflow:hidden;
  padding-top:96px;
  padding-bottom:104px;
  background:
    radial-gradient(720px circle at 18% 8%,rgba(252,108,26,.08),transparent 66%),
    radial-gradient(620px circle at 90% 38%,rgba(100,52,176,.08),transparent 68%),
    linear-gradient(180deg,#fff 0%,#fffaf7 100%);
}
.how-it-works-head{text-align:center;max-width:920px;margin:0 auto 54px}
.section-kicker{margin-bottom:16px;color:#5f5751;font-size:13px;font-weight:700;letter-spacing:.04em}
.how-it-works-head h2{margin:0;font-size:clamp(44px,5vw,76px);line-height:1.02;letter-spacing:-.06em;font-weight:650}
.how-it-works-head h2 span{color:transparent;background:linear-gradient(100deg,#fc6c1a,#9a68e7 56%,#fc9560);-webkit-background-clip:text;background-clip:text}
.how-it-works-head p{margin:18px 0 0;color:#625b55;font-size:17px}
.how-it-works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.how-card{min-width:0;border:1px solid rgba(17,17,17,.06);border-radius:32px;background:rgba(255,255,255,.9);box-shadow:0 24px 70px rgba(33,19,26,.07);overflow:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.how-card:hover{transform:translateY(-7px);box-shadow:0 34px 90px rgba(33,19,26,.11)}
.how-card-visual{position:relative;min-height:310px;display:grid;place-items:center;overflow:hidden;background:
  radial-gradient(230px circle at 18% 12%,rgba(255,194,154,.55),transparent 62%),
  radial-gradient(270px circle at 90% 4%,rgba(173,119,247,.58),transparent 62%),
  linear-gradient(150deg,#fc6c1a 0%,#985ed8 52%,#37115f 100%)}
.how-card-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 45%,rgba(20,4,37,.2));pointer-events:none}
.how-card-copy{padding:26px 28px 30px}
.how-step{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.how-step span{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;color:#fff;background:linear-gradient(140deg,#fc6c1a,#6f35ca);box-shadow:0 9px 22px rgba(118,53,187,.2);font-size:13px;font-weight:800}
.how-step strong{font-size:22px;line-height:1.14;letter-spacing:-.035em}
.how-card-copy p{margin:0;color:#6a625c;font-size:15px;line-height:1.65}
.install-pill{position:relative;z-index:1;width:min(82%,340px);display:grid;grid-template-columns:44px minmax(0,1fr) 28px;align-items:center;gap:14px;padding:15px 18px;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 18px 45px rgba(32,10,45,.22);backdrop-filter:blur(14px)}
.install-pill i{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;font-style:normal;font-weight:850}
.install-slack{color:#5d2380;background:linear-gradient(145deg,#fff,#f3ddff)}
.install-teams{color:#5047b8;background:linear-gradient(145deg,#fff,#e2e5ff)}
.install-pill div{display:grid;gap:3px}.install-pill strong{font-size:15px}.install-pill span{color:#8a817d;font-size:11px}.install-pill b{font-size:22px;color:#45b954}.install-pill.is-coming{opacity:.84}.install-pill.is-coming b{color:#9c8ba6}
.install-or{position:relative;z-index:1;margin:10px;color:#fff;font-size:20px;font-weight:700}
.how-card-install{display:flex;flex-direction:column;justify-content:center}
.how-agent-core{position:relative;z-index:2;width:116px;height:116px;display:grid;place-items:center;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,244,236,.82));box-shadow:0 28px 60px rgba(39,9,57,.28),inset 0 1px 0 rgba(255,255,255,.9)}
.how-agent-core img{width:78px;height:78px;object-fit:contain}
.integration-orbit{position:absolute;z-index:1;width:68px;height:68px;display:grid;place-items:center;border-radius:20px;background:rgba(255,255,255,.9);box-shadow:0 18px 40px rgba(34,7,48,.22);animation:howOrbitFloat 5.2s ease-in-out infinite}
.integration-orbit img{max-width:48px;max-height:34px;object-fit:contain}.orbit-one{left:12%;top:18%}.orbit-two{left:18%;bottom:13%;animation-delay:-1.3s}.orbit-three{right:10%;bottom:15%;animation-delay:-2.6s}.orbit-four{right:16%;top:15%;animation-delay:-3.9s}
@keyframes howOrbitFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.mini-slack-window{position:relative;z-index:1;width:84%;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(30,8,44,.26)}
.mini-slack-head{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #ece7e4;color:#211820;font-size:13px;font-weight:800}
.mini-slack-message{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:15px 16px 8px}.mini-agent{width:38px;height:38px;border-radius:11px;background:#fff3e8;display:grid;place-items:center}.mini-agent img{width:27px;height:27px}.mini-slack-message strong{font-size:12px}.mini-slack-message p{margin:4px 0 0;color:#5e555a;font-size:10px;line-height:1.45}
.mini-result-card{margin:8px 16px 18px;padding:14px;border-radius:16px;background:linear-gradient(145deg,#fff1d6,#f1d9f8);display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mini-result-card>div{display:grid;gap:2px}.mini-result-card b{font-size:18px}.mini-result-card span{font-size:8px;color:#6e626d}.mini-bars{grid-column:1/-1!important;display:flex!important;align-items:end;height:48px;gap:5px}.mini-bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#fc6c1a,#7d3bd1)}.mini-bars i:nth-child(1){height:28%}.mini-bars i:nth-child(2){height:52%}.mini-bars i:nth-child(3){height:76%}.mini-bars i:nth-child(4){height:64%}.mini-bars i:nth-child(5){height:88%}
@media(max-width:1050px){.how-it-works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.how-card:last-child{grid-column:1/-1;max-width:620px;width:100%;justify-self:center}}
@media(max-width:700px){.how-it-works-section{padding-top:66px;padding-bottom:72px}.how-it-works-head{margin-bottom:34px;text-align:left}.how-it-works-head h2{font-size:clamp(38px,11vw,52px)}.how-it-works-head p{font-size:15px}.how-it-works-grid{grid-template-columns:1fr;gap:18px}.how-card:last-child{grid-column:auto;max-width:none}.how-card-visual{min-height:260px}.how-card-copy{padding:23px 22px 26px}.how-step strong{font-size:20px}.install-pill{width:86%;grid-template-columns:38px 1fr 24px;padding:13px 14px}.install-pill i{width:36px;height:36px}.how-agent-core{width:98px;height:98px}.how-agent-core img{width:66px;height:66px}.integration-orbit{width:58px;height:58px}.integration-orbit img{max-width:40px;max-height:29px}}
@media(prefers-reduced-motion:reduce){.integration-orbit{animation:none!important}.how-card{transition:none!important}}

/* Let visitors manually inspect the animated Slack history at any time. */
.slack-conversation .slack-feed{
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
  cursor:default;
}
.slack-conversation .slack-feed:hover{scrollbar-color:rgba(92,36,92,.42) transparent}

/* Legal pages */
body.ziroo-legal-body{margin:0;color:#f4f1f2;background:#080808;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.legal-site-header{height:76px;display:flex;align-items:center;padding:0 clamp(22px,4vw,70px);border-bottom:1px solid rgba(255,255,255,.09);background:#080808}
.legal-site-header a{display:inline-flex}.legal-site-header img,.legal-site-header .brand-logo{width:96px;height:auto}
.legal-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:48px;color:#aaa2a5;font-size:13px;text-decoration:none}.legal-back:hover{color:#fff}
.legal-main{min-height:70vh;padding:34px 22px 90px}.legal-article{width:min(760px,100%);margin:0 auto}.legal-article h1{margin:0 0 8px;font-size:clamp(34px,4.2vw,58px);line-height:1.08;font-weight:520;letter-spacing:-.045em}.legal-updated{margin:0 0 48px;color:#8e888b;font-size:12px;letter-spacing:.11em;text-transform:uppercase}.legal-article h2{margin:42px 0 14px;color:#f8f5f6;font-size:20px;line-height:1.3;font-weight:620;letter-spacing:-.02em}.legal-article h3{margin:28px 0 10px;color:#f4f1f2;font-size:16px;font-weight:620}.legal-article p,.legal-article li{color:#c6c0c3;font-size:14px;line-height:1.72}.legal-article p{margin:0 0 15px}.legal-article ul,.legal-article ol{margin:10px 0 18px;padding-left:24px}.legal-article a{color:#fff;text-decoration:underline;text-underline-offset:3px}.legal-article strong{color:#f8f5f6}.legal-article .legal-caps{font-size:12px;line-height:1.68;text-transform:uppercase;color:#d8d2d5}.legal-table-wrap{margin:20px 0 32px;overflow-x:auto}.legal-table{width:100%;min-width:650px;border-collapse:collapse}.legal-table th,.legal-table td{padding:15px 14px;border-bottom:1px solid rgba(255,255,255,.11);text-align:left;vertical-align:top}.legal-table th{color:#8f888c;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.legal-table td{color:#c8c2c5;font-size:13px;line-height:1.55}.legal-table td:first-child{color:#fff;font-weight:650}.legal-footer{border-top:1px solid rgba(255,255,255,.09);padding:25px clamp(22px,4vw,70px);background:#080808}.legal-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.legal-footer-links{display:flex;flex-wrap:wrap;gap:20px}.legal-footer-links a{color:#8f888c;font-size:10px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none}.legal-footer-links a:hover{color:#fff}.legal-footer-note{color:#777174;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.footer-legal-row{display:flex;justify-content:center;gap:20px;padding:0 0 22px}.footer-legal-row a{color:#766f69;font-size:12px;text-decoration:none}.footer-legal-row a:hover{color:#111}
@media(max-width:700px){.legal-site-header{height:68px}.legal-main{padding-top:25px}.legal-back{margin-bottom:36px}.legal-article h1{font-size:38px}.legal-updated{margin-bottom:36px}.legal-article h2{margin-top:34px}.legal-footer-inner{align-items:flex-start;flex-direction:column}.legal-footer-links{gap:14px 18px}.footer-legal-row{flex-wrap:wrap;gap:10px 18px;padding-inline:18px}}
@media (min-width:1101px){.hero-subheading-line{white-space:nowrap}}
@media (max-width:1100px){.hero-subheading-line{white-space:normal}}

/* ========================================================================
   Ziroo 3.9 - refined heading tracking, original how-it-works flow,
   and light premium legal centre
   ======================================================================== */

/* Keep the premium typography open enough that letters never collide. */
body.ziroo-site h1,
body.ziroo-site h2,
body.ziroo-site h3,
body.ziroo-site .hero-copy-centered h1.ziroo-hero-heading,
body.ziroo-site .use-case-copy h3,
body.ziroo-site .final-offer-copy h2,
body.ziroo-site .how-it-works-head h2,
body.ziroo-site .how-flow-copy h3{
  letter-spacing:-.024em!important;
}
body.ziroo-site h3,
body.ziroo-site .how-flow-copy h3,
body.ziroo-site .how-step strong{
  letter-spacing:-.016em!important;
}
body.ziroo-site .motion-word,
body.ziroo-site .hero-heading-main,
body.ziroo-site .hero-heading-accent{
  letter-spacing:inherit!important;
}

/* How it works: editorial, light and aligned with the rest of the Ziroo site. */
.how-it-works-section{
  position:relative;
  overflow:hidden;
  padding-top:96px;
  padding-bottom:104px;
  background:
    radial-gradient(680px circle at 8% 6%,rgba(252,108,26,.075),transparent 66%),
    radial-gradient(620px circle at 94% 86%,rgba(255,178,132,.08),transparent 66%),
    #fff;
}
.how-it-works-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(17,17,17,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,17,.018) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 80%,transparent);
  opacity:.34;
}
.how-it-works-head{
  position:relative;
  z-index:2;
  max-width:840px;
  margin:0 auto 58px;
  text-align:center;
}
.how-it-works-head .section-kicker{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border:1px solid rgba(17,17,17,.08);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 26px rgba(17,17,17,.045);
  color:#5c554f;
  font-size:12px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.how-it-works-head h2{
  margin:18px 0 0;
  font-size:clamp(42px,4.6vw,68px);
  line-height:1.04;
  font-weight:720;
  color:#111;
}
.how-it-works-head h2 span{
  color:var(--orange);
  background:none;
  -webkit-text-fill-color:currentColor;
}
.how-it-works-head p{
  margin:18px 0 0;
  color:#665f59;
  font-size:16px;
  line-height:1.65;
}
.how-flow-shell{
  position:relative;
  z-index:2;
  display:grid;
  gap:24px;
  padding:26px;
  border:1px solid rgba(17,17,17,.065);
  border-radius:38px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,249,245,.94));
  box-shadow:0 32px 90px rgba(36,21,16,.07),inset 0 1px 0 rgba(255,255,255,.98);
}
.how-flow-rail{
  position:absolute;
  top:96px;
  bottom:96px;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(252,108,26,.24) 10%,rgba(17,17,17,.08) 50%,rgba(252,108,26,.22) 90%,transparent);
  pointer-events:none;
}
.how-flow-rail i{
  position:absolute;
  left:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  border:3px solid var(--orange);
  box-shadow:0 0 0 7px rgba(252,108,26,.08);
}
.how-flow-rail i:nth-child(1){top:15%}
.how-flow-rail i:nth-child(2){top:50%}
.how-flow-rail i:nth-child(3){top:85%}
.how-flow-step{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:54px;
  align-items:center;
  min-height:420px;
  padding:34px;
  border:1px solid rgba(17,17,17,.055);
  border-radius:30px;
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 54px rgba(17,17,17,.045);
  overflow:hidden;
}
.how-flow-step::before{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  border-radius:50%;
  left:-105px;
  bottom:-125px;
  background:radial-gradient(circle,rgba(252,108,26,.11),transparent 70%);
  pointer-events:none;
}
.how-flow-step.is-reverse{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.how-flow-step.is-reverse .how-flow-copy{order:2}
.how-flow-step.is-reverse .how-flow-visual{order:1}
.how-flow-copy{
  position:relative;
  z-index:2;
  padding:18px 20px;
}
.how-flow-index{
  display:inline-grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-bottom:22px;
  border-radius:15px;
  background:linear-gradient(145deg,#111,#33231b);
  color:#ffb082;
  box-shadow:0 12px 25px rgba(17,17,17,.14);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
}
.how-flow-copy h3{
  margin:0 0 14px;
  font-size:clamp(30px,3vw,46px);
  line-height:1.05;
  color:#111;
}
.how-flow-copy p{
  max-width:470px;
  margin:0;
  color:#665f59;
  font-size:16px;
  line-height:1.7;
}
.how-flow-status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:24px;
  color:#3f3934;
  font-size:12px;
  font-weight:720;
}
.how-flow-status span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 5px rgba(252,108,26,.1);
}
.how-flow-visual{
  position:relative;
  z-index:1;
  min-width:0;
  min-height:330px;
  display:grid;
  place-items:center;
  padding:28px;
  border:1px solid rgba(17,17,17,.055);
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(330px circle at 22% 14%,rgba(252,108,26,.14),transparent 62%),
    radial-gradient(300px circle at 88% 90%,rgba(255,178,132,.13),transparent 66%),
    linear-gradient(145deg,#fffaf6,#f5f1ee);
}
.how-flow-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 26%,rgba(255,255,255,.65) 46%,transparent 65%);
  transform:translateX(-120%);
  animation:howSoftSweep 8s ease-in-out infinite;
}
@keyframes howSoftSweep{0%,62%,100%{transform:translateX(-120%)}78%{transform:translateX(120%)}}

.how-install-window{
  position:relative;
  z-index:2;
  width:min(100%,520px);
  padding:18px;
  border:1px solid rgba(17,17,17,.07);
  border-radius:24px;
  background:rgba(255,255,255,.91);
  box-shadow:0 24px 54px rgba(42,25,18,.1);
  backdrop-filter:blur(14px);
}
.how-install-window-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 3px 16px;
  color:#675f59;
  font-size:12px;
  font-weight:700;
}
.how-install-window-top i{font-style:normal;letter-spacing:.18em;color:#9c948d}
.how-install-choice{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  padding:15px;
  border:1px solid rgba(17,17,17,.07);
  border-radius:18px;
  background:#fff;
}
.how-install-choice + .how-install-choice{margin-top:11px}
.how-install-choice.is-active{border-color:rgba(252,108,26,.22);box-shadow:0 13px 32px rgba(252,108,26,.08)}
.how-install-choice>div:nth-child(2){display:grid;gap:4px;min-width:0}
.how-install-choice strong{font-size:14px;color:#161310}
.how-install-choice span{font-size:11px;color:#837b75}
.how-install-choice b{font-size:10px;color:#b95117;text-transform:uppercase;letter-spacing:.06em}
.how-install-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;font-style:normal;font-weight:850}
.how-install-slack{color:#fff;background:linear-gradient(145deg,#fc6c1a,#ff9e67)}
.how-install-teams{color:#6f63d8;background:#efedff}

.how-tool-cloud{position:relative;z-index:2;width:min(100%,560px);height:300px}
.how-tool-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.how-tool-lines path{fill:none;stroke:rgba(252,108,26,.24);stroke-width:2;stroke-dasharray:5 8;animation:howLineFlow 8s linear infinite}
@keyframes howLineFlow{to{stroke-dashoffset:-78}}
.how-tool-core{
  position:absolute;
  left:50%;top:50%;
  width:112px;height:112px;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  border-radius:32px;
  background:linear-gradient(145deg,#fff,#fff4ea);
  border:1px solid rgba(252,108,26,.16);
  box-shadow:0 25px 55px rgba(56,31,20,.14),0 0 0 14px rgba(255,255,255,.45);
}
.how-tool-core img{width:76px;height:76px;object-fit:contain}
.how-tool-card{
  position:absolute;
  z-index:2;
  width:92px;height:72px;
  display:grid;place-items:center;
  padding:13px;
  border-radius:22px;
  border:1px solid rgba(17,17,17,.065);
  background:rgba(255,255,255,.9);
  box-shadow:0 17px 38px rgba(17,17,17,.09);
  animation:howToolFloat 6s ease-in-out infinite;
}
.how-tool-card img{max-width:100%;max-height:42px;object-fit:contain}
.tool-hubspot{left:5%;top:5%}
.tool-linear{right:5%;top:5%;animation-delay:-1.4s}
.tool-notion{left:5%;bottom:5%;animation-delay:-2.8s}
.tool-google{right:5%;bottom:5%;animation-delay:-4.2s}
@keyframes howToolFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.how-result-window{
  position:relative;
  z-index:2;
  width:min(100%,520px);
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(17,17,17,.07);
  background:rgba(255,255,255,.94);
  box-shadow:0 24px 54px rgba(42,25,18,.11);
}
.how-result-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid rgba(17,17,17,.07)}
.how-result-head strong{font-size:14px}.how-result-head span{color:#8c847d;letter-spacing:.14em}
.how-result-message{display:grid;grid-template-columns:44px minmax(0,1fr);gap:13px;padding:18px}
.how-result-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#fff8eb;border:1px solid rgba(252,108,26,.16)}
.how-result-avatar img{width:30px;height:30px;object-fit:contain}
.how-result-message strong{font-size:13px}.how-result-message p{margin:5px 0 0;color:#645d57;font-size:12px;line-height:1.55}
.how-result-report{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 18px 18px;padding:18px;border-radius:18px;background:linear-gradient(145deg,#fff2e7,#f8e9e7)}
.how-result-report>div:not(.how-result-bars){display:grid;gap:3px}.how-result-report b{font-size:24px;line-height:1;color:#201611}.how-result-report span{color:#786e67;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.how-result-bars{grid-column:1/-1;height:64px;display:flex;align-items:flex-end;gap:7px;margin-top:8px}
.how-result-bars i{flex:1;height:42%;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#ff9860,#bd5420)}
.how-result-bars i:nth-child(2){height:62%}.how-result-bars i:nth-child(3){height:78%}.how-result-bars i:nth-child(4){height:58%}.how-result-bars i:nth-child(5){height:88%}.how-result-bars i:nth-child(6){height:72%}

/* Light legal centre, visually consistent with the primary landing page. */
body.ziroo-legal-body{
  margin:0;
  color:#171411;
  background:
    radial-gradient(720px circle at 7% 4%,rgba(252,108,26,.075),transparent 66%),
    radial-gradient(660px circle at 96% 30%,rgba(255,181,139,.08),transparent 68%),
    #fff;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.ziroo-legal-body .legal-site-header{
  position:sticky;
  top:18px;
  z-index:50;
  width:min(1460px,calc(100% - 44px));
  height:auto;
  margin:18px auto 0;
  padding:0;
  border:1px solid rgba(17,17,17,.06);
  border-radius:28px;
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 54px rgba(17,17,17,.075),inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
}
.admin-bar.ziroo-legal-body .legal-site-header{top:50px}
.legal-site-header-inner{min-height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;padding:0 26px}
.legal-brand{display:inline-flex;justify-self:start}.legal-brand img,.legal-brand .brand-logo{width:142px;height:auto}
.legal-site-nav{display:flex;align-items:center;justify-content:center;gap:36px}
.legal-site-nav a{color:#1d1916;font-size:14px;font-weight:700;text-decoration:none;transition:color .25s ease}.legal-site-nav a:hover{color:var(--orange)}
.legal-header-cta{justify-self:end;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;background:#111;color:#fff;font-size:13px;font-weight:750;text-decoration:none;box-shadow:0 12px 30px rgba(17,17,17,.13);transition:transform .25s ease}.legal-header-cta:hover{transform:translateY(-2px)}
.ziroo-legal-body .legal-main{min-height:70vh;padding:48px 22px 96px}
.legal-hero{padding:64px 0 42px}
.legal-hero-inner{width:min(1120px,100%);margin:0 auto}
.legal-back{display:inline-flex;align-items:center;gap:7px;margin:0 0 34px;color:#746c65;font-size:13px;font-weight:650;text-decoration:none}.legal-back:hover{color:#111}
.legal-kicker{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border:1px solid rgba(17,17,17,.07);border-radius:999px;background:rgba(255,255,255,.84);color:#a64716;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;box-shadow:0 10px 24px rgba(17,17,17,.035)}
.legal-hero h1{max-width:800px;margin:18px 0 10px;font-size:clamp(46px,6vw,82px);line-height:1.02;font-weight:720;color:#111;letter-spacing:-.024em!important}
.legal-updated{margin:0;color:#817970;font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.legal-content-shell{width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:30px;align-items:start}
.legal-sidebar{position:sticky;top:130px;display:grid;gap:16px}
.admin-bar .legal-sidebar{top:162px}
.legal-sidebar-card,.legal-sidebar-note{padding:22px;border:1px solid rgba(17,17,17,.065);border-radius:24px;background:rgba(255,255,255,.84);box-shadow:0 17px 44px rgba(17,17,17,.055);backdrop-filter:blur(12px)}
.legal-sidebar-card>span{display:block;margin-bottom:13px;color:#8b827b;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.legal-sidebar-card a{display:flex;align-items:center;min-height:43px;padding:0 12px;border-radius:13px;color:#49423d;font-size:13px;font-weight:700;text-decoration:none;transition:.25s ease}
.legal-sidebar-card a:hover{background:#fff6ef;color:#111}.legal-sidebar-card a.is-active{background:#111;color:#fff;box-shadow:0 10px 24px rgba(17,17,17,.12)}
.legal-sidebar-note strong{display:block;margin-bottom:8px;font-size:14px}.legal-sidebar-note p{margin:0 0 10px;color:#716960;font-size:12px;line-height:1.55}.legal-sidebar-note a{color:#b54b13;font-size:12px;font-weight:750;text-decoration:none}
.ziroo-legal-body .legal-article{
  width:100%;
  margin:0;
  padding:clamp(30px,5vw,64px);
  border:1px solid rgba(17,17,17,.06);
  border-radius:32px;
  background:rgba(255,255,255,.92);
  box-shadow:0 26px 76px rgba(17,17,17,.065),inset 0 1px 0 rgba(255,255,255,.98);
}
.ziroo-legal-body .legal-article h2{margin:44px 0 15px;color:#171411;font-size:22px;line-height:1.28;font-weight:760;letter-spacing:-.016em!important}.ziroo-legal-body .legal-article h2:first-child{margin-top:0}
.ziroo-legal-body .legal-article h3{margin:29px 0 10px;color:#26211d;font-size:16px;line-height:1.35;font-weight:740;letter-spacing:-.01em!important}
.ziroo-legal-body .legal-article p,.ziroo-legal-body .legal-article li{color:#5f5750;font-size:14px;line-height:1.78}
.ziroo-legal-body .legal-article p{margin:0 0 16px}.ziroo-legal-body .legal-article ul,.ziroo-legal-body .legal-article ol{margin:10px 0 20px;padding-left:24px}
.ziroo-legal-body .legal-article li+li{margin-top:7px}
.ziroo-legal-body .legal-article a{color:#b64d15;text-decoration:underline;text-decoration-color:rgba(182,77,21,.35);text-underline-offset:3px}
.ziroo-legal-body .legal-article strong{color:#211c18}
.ziroo-legal-body .legal-article .legal-caps{padding:18px;border-left:3px solid var(--orange);border-radius:0 14px 14px 0;background:#fff7f1;color:#4e4540;font-size:12px;line-height:1.7;text-transform:uppercase}
.ziroo-legal-body .legal-table-wrap{margin:22px 0 34px;overflow-x:auto;border:1px solid rgba(17,17,17,.065);border-radius:18px;background:#fff}
.ziroo-legal-body .legal-table{width:100%;min-width:650px;border-collapse:collapse}
.ziroo-legal-body .legal-table th,.ziroo-legal-body .legal-table td{padding:16px 15px;border-bottom:1px solid rgba(17,17,17,.07);text-align:left;vertical-align:top}
.ziroo-legal-body .legal-table tr:last-child td{border-bottom:0}
.ziroo-legal-body .legal-table th{background:#fff8f3;color:#8c6e5c;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.ziroo-legal-body .legal-table td{color:#5e5650;font-size:13px;line-height:1.58}.ziroo-legal-body .legal-table td:first-child{color:#1e1916;font-weight:750}
.ziroo-legal-body .legal-footer{padding:28px 22px 34px;border-top:1px solid rgba(17,17,17,.065);background:rgba(255,255,255,.88)}
.legal-footer-inner{width:min(1460px,100%);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.legal-footer-brand{display:inline-flex;justify-self:start}.legal-footer-brand img,.legal-footer-brand .brand-logo{width:84px;height:auto}
.legal-footer-links{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}.legal-footer-links a{color:#716960;font-size:10px;font-weight:750;letter-spacing:.11em;text-transform:uppercase;text-decoration:none}.legal-footer-links a:hover{color:#111}
.legal-footer-note{justify-self:end;color:#8a827b;font-size:9px;letter-spacing:.1em;text-transform:uppercase}

@media(max-width:1050px){
  .how-flow-step,.how-flow-step.is-reverse{grid-template-columns:1fr;gap:24px;min-height:0}
  .how-flow-step.is-reverse .how-flow-copy,.how-flow-step.is-reverse .how-flow-visual{order:initial}
  .how-flow-rail{display:none}
  .legal-site-nav{display:none}
  .legal-site-header-inner{grid-template-columns:1fr auto}
  .legal-content-shell{grid-template-columns:1fr}.legal-sidebar{position:static;grid-template-columns:1fr 1fr}.legal-sidebar-card,.legal-sidebar-note{height:100%}
}
@media(max-width:700px){
  body.ziroo-site h1,body.ziroo-site h2,body.ziroo-site h3,body.ziroo-site .hero-copy-centered h1.ziroo-hero-heading,body.ziroo-site .use-case-copy h3,body.ziroo-site .final-offer-copy h2,body.ziroo-site .how-it-works-head h2{letter-spacing:-.018em!important}
  .how-it-works-section{padding-top:68px;padding-bottom:72px}
  .how-it-works-head{margin-bottom:34px;text-align:left}
  .how-it-works-head .section-kicker{font-size:10px}
  .how-it-works-head h2{font-size:clamp(36px,10.5vw,48px);line-height:1.06}
  .how-it-works-head p{font-size:14px}
  .how-flow-shell{padding:14px;border-radius:28px;gap:16px}
  .how-flow-step{padding:18px;border-radius:23px;gap:18px}
  .how-flow-copy{padding:6px 4px 10px}
  .how-flow-index{width:40px;height:40px;margin-bottom:17px;border-radius:13px}
  .how-flow-copy h3{font-size:30px}
  .how-flow-copy p{font-size:14px;line-height:1.65}
  .how-flow-status{margin-top:19px;font-size:11px}
  .how-flow-visual{min-height:270px;padding:15px;border-radius:21px}
  .how-install-window{padding:12px;border-radius:19px}
  .how-install-choice{grid-template-columns:38px minmax(0,1fr);padding:12px;border-radius:15px}.how-install-choice b{grid-column:2}.how-install-icon{width:38px;height:38px;border-radius:12px}
  .how-tool-cloud{height:250px}.how-tool-core{width:88px;height:88px;border-radius:26px}.how-tool-core img{width:58px;height:58px}.how-tool-card{width:72px;height:58px;padding:10px;border-radius:17px}.how-tool-card img{max-height:32px}
  .how-result-message{padding:14px;grid-template-columns:38px minmax(0,1fr)}.how-result-avatar{width:38px;height:38px}.how-result-report{margin:0 12px 12px;padding:14px}.how-result-report b{font-size:20px}.how-result-bars{height:52px}
  .ziroo-legal-body .legal-site-header{top:10px;width:calc(100% - 20px);margin-top:10px;border-radius:22px}.admin-bar.ziroo-legal-body .legal-site-header{top:56px}
  .legal-site-header-inner{min-height:70px;padding:0 16px}.legal-brand img,.legal-brand .brand-logo{width:104px}.legal-header-cta{min-height:42px;padding:0 15px;font-size:11px}
  .ziroo-legal-body .legal-main{padding:26px 12px 66px}.legal-hero{padding:46px 6px 30px}.legal-back{margin-bottom:25px}.legal-hero h1{font-size:42px}.legal-content-shell{gap:18px}.legal-sidebar{grid-template-columns:1fr}.ziroo-legal-body .legal-article{padding:26px 20px;border-radius:24px}.ziroo-legal-body .legal-article h2{margin-top:36px;font-size:20px}.ziroo-legal-body .legal-article p,.ziroo-legal-body .legal-article li{font-size:13.5px}
  .legal-footer-inner{grid-template-columns:1fr;justify-items:start}.legal-footer-brand,.legal-footer-note{justify-self:start}.legal-footer-links{justify-content:flex-start;gap:14px 18px}
}
@media(prefers-reduced-motion:reduce){.how-flow-visual::after,.how-tool-card,.how-tool-lines path{animation:none!important}}


/* ========================================================================
   Ziroo 4.0 - playful hero personality and tighter Slack reveal
   ======================================================================== */

/* Bring the live Slack preview materially closer to the CTAs on desktop. */
@media (min-width:821px){
  .hero-experience{
    height:148vh!important;
    min-height:1050px!important;
  }
  .hero-demo-motion{
    transform:translate3d(0,min(40vh,350px),0) scale(.94) rotateX(.8deg);
  }
  .hero-copy-centered .hero-actions{
    margin-bottom:0!important;
  }
}

/* A friendlier, more expressive hero headline without losing premium polish. */
.hero-copy-centered h1.ziroo-hero-heading{
  perspective:900px;
  text-wrap:balance;
}
.ziroo-hero-heading .ziroo-hero-line{
  will-change:transform,opacity,filter;
}
.ziroo-hero-heading .ziroo-hero-line-primary{
  animation:zirooHeroPlayfulPrimary 1.05s cubic-bezier(.2,1.32,.32,1) .08s both!important;
}
.ziroo-hero-heading .ziroo-hero-line-accent{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(105deg,#fc6c1a 0%,#ff8d4b 38%,#ffb07d 58%,#fc6c1a 100%)!important;
  background-size:180% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  animation:
    zirooHeroPlayfulAccent 1.18s cubic-bezier(.2,1.42,.3,1) .24s both,
    zirooHeroAccentFloat 6.8s ease-in-out 1.75s infinite,
    zirooHeroAccentShimmer 8.5s ease-in-out 1.6s infinite!important;
}
.ziroo-hero-heading .ziroo-hero-line-accent::before{
  display:block!important;
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:54%;
  width:108%;
  height:1.02em;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(252,108,26,.14),rgba(252,108,26,0) 70%);
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  animation:zirooHeroPlayfulGlow 1.65s cubic-bezier(.2,1,.3,1) .58s both!important;
  pointer-events:none;
}
.ziroo-hero-heading .ziroo-hero-line-accent::after{
  display:block!important;
  content:"";
  position:absolute;
  right:-.12em;
  top:-.10em;
  left:auto!important;
  bottom:auto!important;
  width:.16em!important;
  height:.16em!important;
  border-radius:50%;
  background:#ff9b61!important;
  box-shadow:
    -.24em .14em 0 -.045em #ffd0af,
    .06em .28em 0 -.055em rgba(252,108,26,.58);
  opacity:0;
  transform:scale(.3) rotate(-12deg)!important;
  animation:zirooHeroSparklePop 1.15s cubic-bezier(.2,1.5,.35,1) .82s both!important;
  pointer-events:none;
}

@keyframes zirooHeroPlayfulPrimary{
  0%{opacity:0;transform:translate3d(-24px,28px,0) rotate(-1.8deg) scale(.975);filter:blur(7px)}
  62%{opacity:1;transform:translate3d(3px,-2px,0) rotate(.35deg) scale(1.008);filter:blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1);filter:none}
}
@keyframes zirooHeroPlayfulAccent{
  0%{opacity:0;transform:translate3d(26px,34px,0) rotate(2.2deg) scale(.94);filter:blur(8px)}
  58%{opacity:1;transform:translate3d(-4px,-5px,0) rotate(-.55deg) scale(1.025);filter:blur(0)}
  78%{transform:translate3d(2px,1px,0) rotate(.22deg) scale(.995)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1);filter:none}
}
@keyframes zirooHeroAccentFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(0,-2px,0) rotate(-.18deg)}
}
@keyframes zirooHeroAccentShimmer{
  0%,20%,100%{background-position:0% 50%}
  55%,75%{background-position:100% 50%}
}
@keyframes zirooHeroPlayfulGlow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  48%{opacity:.72;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:.18;transform:translate(-50%,-50%) scale(1.08)}
}
@keyframes zirooHeroSparklePop{
  0%{opacity:0;transform:scale(.25) rotate(-18deg)}
  58%{opacity:1;transform:scale(1.18) rotate(8deg)}
  100%{opacity:.92;transform:scale(1) rotate(0)}
}

@media (min-width:1101px){
  .hero-copy-centered h1.ziroo-hero-heading{
    font-weight:640!important;
    letter-spacing:-.035em!important;
  }
  .ziroo-hero-heading .ziroo-hero-line-primary{
    transform-origin:55% 100%;
  }
  .ziroo-hero-heading .ziroo-hero-line-accent{
    transform-origin:45% 100%;
  }
}

@media (max-width:820px){
  .ziroo-hero-heading .ziroo-hero-line-primary{
    animation-duration:.88s!important;
  }
  .ziroo-hero-heading .ziroo-hero-line-accent{
    animation-duration:1s,6.8s,8.5s!important;
  }
  .ziroo-hero-heading .ziroo-hero-line-accent::after{
    right:.01em!important;
    top:-.02em!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .ziroo-hero-heading .ziroo-hero-line-primary,
  .ziroo-hero-heading .ziroo-hero-line-accent,
  .ziroo-hero-heading .ziroo-hero-line-accent::before,
  .ziroo-hero-heading .ziroo-hero-line-accent::after{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}

/* ========================================================================
   Ziroo 4.1 - protected hero spacing, brand statement, official platform marks
   ======================================================================== */

/* Keep the hero CTAs visually clear of the live Slack preview. */
@media (min-width:821px){
  .hero-experience{
    height:158vh!important;
    min-height:1120px!important;
  }
  .hero-copy-centered .hero-actions{
    position:relative;
    z-index:6;
    margin-top:26px!important;
    margin-bottom:0!important;
  }
  .hero-demo-motion{
    z-index:4;
  }
}

/* Original statement moment between Integrations and How it Works. */
.ziroo-statement-section{
  position:relative;
  overflow:hidden;
  padding-top:58px;
  padding-bottom:76px;
  background:
    radial-gradient(620px circle at 50% 26%,rgba(252,108,26,.075),transparent 66%),
    linear-gradient(180deg,#fffaf7 0%,#fff 100%);
}
.ziroo-statement-card{
  position:relative;
  isolation:isolate;
  min-height:610px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:86px clamp(24px,7vw,108px);
  overflow:hidden;
  border:1px solid rgba(17,17,17,.055);
  border-radius:42px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,248,242,.92));
  box-shadow:
    0 34px 110px rgba(17,17,17,.07),
    inset 0 1px 0 rgba(255,255,255,.98);
  text-align:center;
}
.ziroo-statement-aura{
  position:absolute;
  z-index:-2;
  top:50%;
  left:50%;
  width:min(760px,76vw);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(252,108,26,.16) 0%,rgba(255,161,103,.07) 34%,rgba(255,255,255,0) 69%);
  filter:blur(8px);
  transform:translate(-50%,-50%);
  animation:zirooStatementAura 8s ease-in-out infinite;
}
.ziroo-statement-agent{
  position:relative;
  width:102px;
  height:102px;
  display:grid;
  place-items:center;
  margin-bottom:28px;
  border:1px solid rgba(252,108,26,.13);
  border-radius:31px;
  background:rgba(255,255,255,.88);
  box-shadow:0 22px 54px rgba(82,35,14,.12),inset 0 1px 0 #fff;
  animation:zirooStatementFloat 5.8s ease-in-out infinite;
}
.ziroo-statement-agent span{
  position:absolute;
  inset:-14px;
  border:1px solid rgba(252,108,26,.12);
  border-radius:39px;
  transform:rotate(8deg);
}
.ziroo-statement-agent img{
  width:66px;
  height:66px;
  object-fit:contain;
}
.ziroo-statement-kicker{
  margin:0 0 21px;
  color:#8a776a;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ziroo-statement-card h2{
  max-width:1120px;
  margin:0;
  color:#171311;
  font-size:clamp(54px,6.4vw,98px);
  font-weight:590;
  line-height:1.01;
  letter-spacing:-.025em!important;
  text-wrap:balance;
}
.ziroo-statement-card h2 span{
  color:var(--orange);
  font-weight:680;
}
.ziroo-statement-cta{
  position:relative;
  z-index:2;
  margin-top:42px;
  min-width:220px;
}
.ziroo-statement-orbit{
  position:absolute;
  z-index:-1;
  border:1px solid rgba(252,108,26,.09);
  border-radius:50%;
  pointer-events:none;
}
.ziroo-statement-orbit.orbit-one{
  width:490px;
  height:490px;
  left:-210px;
  bottom:-290px;
}
.ziroo-statement-orbit.orbit-two{
  width:360px;
  height:360px;
  right:-150px;
  top:-210px;
}
@keyframes zirooStatementAura{
  0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.72}
  50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}
}
@keyframes zirooStatementFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
  50%{transform:translate3d(0,-9px,0) rotate(1deg)}
}

/* Official local Slack and Microsoft Teams brand marks. */
.how-install-icon.how-install-slack,
.how-install-icon.how-install-teams{
  overflow:hidden;
  background:#fff!important;
}
.how-install-icon img{
  display:block;
  width:28px;
  height:28px;
  object-fit:contain;
}
.how-install-icon.how-install-teams img{
  width:30px;
  height:30px;
}

@media(max-width:820px){
  .ziroo-statement-section{padding-top:42px;padding-bottom:58px}
  .ziroo-statement-card{min-height:500px;padding:64px 26px;border-radius:30px}
  .ziroo-statement-agent{width:82px;height:82px;margin-bottom:23px;border-radius:25px}
  .ziroo-statement-agent img{width:53px;height:53px}
  .ziroo-statement-kicker{font-size:10px;letter-spacing:.11em}
  .ziroo-statement-card h2{font-size:clamp(40px,10vw,58px);line-height:1.04;letter-spacing:-.02em!important}
  .ziroo-statement-cta{margin-top:32px;min-width:0;width:min(100%,260px)}
}
@media(max-width:480px){
  .ziroo-statement-card{min-height:450px;padding:54px 20px;border-radius:25px}
  .ziroo-statement-agent{width:72px;height:72px;border-radius:22px}
  .ziroo-statement-agent img{width:46px;height:46px}
  .ziroo-statement-card h2{font-size:38px}
}
@media(prefers-reduced-motion:reduce){
  .ziroo-statement-aura,
  .ziroo-statement-agent{animation:none!important}
}


/* ========================================================================
   Ziroo 4.2 - compact statement moment + ultra-smooth hero hand-off
   ======================================================================== */

/* Keep the hero transition on the compositor and remove any flash-prone perspective. */
@media (min-width:821px){
  .hero-copy-shell,
  .hero-demo-motion{
    will-change:transform,opacity;
    backface-visibility:hidden;
    transform-style:flat!important;
  }
  .hero-demo-motion{
    perspective:none!important;
  }
}

/* A compact statement block that fits comfortably within one desktop screen. */
.ziroo-statement-section{
  padding-top:38px!important;
  padding-bottom:52px!important;
}
.ziroo-statement-card{
  min-height:0!important;
  padding:48px clamp(28px,5vw,76px)!important;
  border-radius:32px!important;
}
.ziroo-statement-aura{
  width:min(560px,58vw)!important;
  opacity:.72;
}
.ziroo-statement-agent{
  width:72px!important;
  height:72px!important;
  margin-bottom:18px!important;
  border-radius:22px!important;
  box-shadow:0 16px 38px rgba(82,35,14,.10),inset 0 1px 0 #fff!important;
}
.ziroo-statement-agent span{
  inset:-9px!important;
  border-radius:28px!important;
}
.ziroo-statement-agent img{
  width:45px!important;
  height:45px!important;
}
.ziroo-statement-kicker{
  margin-bottom:14px!important;
  font-size:10px!important;
  letter-spacing:.13em!important;
}
.ziroo-statement-card h2{
  max-width:960px!important;
  font-size:clamp(42px,4.8vw,70px)!important;
  line-height:1.045!important;
  letter-spacing:-.012em!important;
}
.ziroo-statement-cta{
  margin-top:26px!important;
  min-width:200px!important;
}
.ziroo-statement-orbit.orbit-one{
  width:360px!important;
  height:360px!important;
  left:-170px!important;
  bottom:-230px!important;
}
.ziroo-statement-orbit.orbit-two{
  width:280px!important;
  height:280px!important;
  right:-120px!important;
  top:-175px!important;
}

@media (max-width:820px){
  .ziroo-statement-section{
    padding-top:30px!important;
    padding-bottom:42px!important;
  }
  .ziroo-statement-card{
    min-height:0!important;
    padding:42px 24px!important;
    border-radius:27px!important;
  }
  .ziroo-statement-agent{
    width:64px!important;
    height:64px!important;
    margin-bottom:16px!important;
  }
  .ziroo-statement-agent img{
    width:40px!important;
    height:40px!important;
  }
  .ziroo-statement-card h2{
    font-size:clamp(34px,8.6vw,50px)!important;
    line-height:1.06!important;
  }
  .ziroo-statement-cta{
    margin-top:24px!important;
    width:min(100%,230px)!important;
  }
}
@media (max-width:480px){
  .ziroo-statement-card{
    min-height:0!important;
    padding:36px 18px!important;
    border-radius:23px!important;
  }
  .ziroo-statement-card h2{
    font-size:34px!important;
  }
}


/* ========================================================================
   Ziroo 4.3 - business network statement + global typography system
   ======================================================================== */
:root{
  --font-heading:"Fraunces",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-description:"Manrope",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html,body,
button,input,select,textarea,
p,li,td,th,label,small,
.nav,.button,.mobile-menu,.legal-page,.site-footer{
  font-family:var(--font-description)!important;
}
body{
  letter-spacing:0!important;
}
h1,h2,h3,h4,h5,h6,
.hero-copy-centered h1,
.use-case-copy h3,
.how-flow-copy h3,
.final-offer-title,
.legal-article h1,
.legal-article h2,
.legal-article h3,
.ziroo-business-card h2{
  font-family:var(--font-heading)!important;
  letter-spacing:-.018em!important;
  font-feature-settings:"kern" 1,"liga" 1;
}
p,.lead,.body,.muted,.use-case-copy>p,.how-flow-copy>p,.legal-article p,.legal-article li{
  letter-spacing:.004em;
}

.ziroo-statement-section{
  padding:48px 0 64px!important;
}
.ziroo-business-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr);
  align-items:center;
  gap:34px;
  min-height:610px;
  padding:58px clamp(42px,5vw,78px);
  overflow:hidden;
  border:1px solid rgba(17,17,17,.07);
  border-radius:38px;
  background:
    radial-gradient(460px circle at 75% 50%,rgba(252,108,26,.12),transparent 66%),
    radial-gradient(340px circle at 12% 20%,rgba(255,189,151,.12),transparent 66%),
    linear-gradient(140deg,#fff 0%,#fffaf6 54%,#fff 100%);
  box-shadow:0 28px 92px rgba(55,30,14,.075),inset 0 1px 0 rgba(255,255,255,.96);
}
.ziroo-business-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background-image:radial-gradient(circle,rgba(252,108,26,.28) 1px,transparent 1px);
  background-size:14px 14px;
  mask-image:linear-gradient(90deg,transparent 32%,#000 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 32%,#000 70%,transparent 100%);
}
.ziroo-business-copy{
  position:relative;
  z-index:3;
  max-width:590px;
}
.ziroo-business-kicker{
  position:relative;
  margin:0 0 24px;
  padding-left:22px;
  color:#e75e18;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em!important;
  text-transform:uppercase;
}
.ziroo-business-kicker::before{
  content:"";
  position:absolute;
  left:0;
  top:.15em;
  width:2px;
  height:22px;
  border-radius:10px;
  background:linear-gradient(180deg,#fc6c1a,#ffb58b);
}
.ziroo-business-card h2{
  max-width:650px;
  margin:0 0 24px;
  color:#111;
  font-size:clamp(46px,4.25vw,72px)!important;
  line-height:1.055!important;
}
.ziroo-business-card h2 span{
  color:var(--orange);
}
.ziroo-business-description{
  max-width:550px;
  margin:0;
  color:#4f4945;
  font-size:17px;
  line-height:1.7;
}
.ziroo-business-actions{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:34px;
}
.ziroo-business-actions .button{
  min-width:220px;
}
.ziroo-business-link{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#25211f;
  font-size:15px;
  font-weight:700;
  transition:color .25s ease,transform .25s ease;
}
.ziroo-business-link span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(17,17,17,.12);
  border-radius:50%;
  font-size:18px;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.ziroo-business-link:hover{color:var(--orange);transform:translateX(3px)}
.ziroo-business-link:hover span{color:#fff;background:var(--orange);border-color:var(--orange);transform:translateX(3px)}

.ziroo-business-network{
  position:relative;
  z-index:2;
  min-height:500px;
  isolation:isolate;
}
.ziroo-network-rings{
  position:absolute;
  left:50%;
  top:50%;
  width:430px;
  height:430px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(252,108,26,.12),transparent 64%);
}
.ziroo-network-rings i{
  position:absolute;
  inset:50%;
  border:1px solid rgba(252,108,26,.18);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.ziroo-network-rings i:nth-child(1){width:170px;height:170px}
.ziroo-network-rings i:nth-child(2){width:250px;height:250px}
.ziroo-network-rings i:nth-child(3){width:335px;height:335px}
.ziroo-network-rings i:nth-child(4){width:420px;height:420px}
.ziroo-network-rings::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(252,108,26,.17) 0 1deg,transparent 1deg 8deg);
  mask-image:radial-gradient(circle,transparent 0 45%,#000 72%,transparent 73%);
  -webkit-mask-image:radial-gradient(circle,transparent 0 45%,#000 72%,transparent 73%);
  animation:zirooNetworkSpin 34s linear infinite;
}
.ziroo-network-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.ziroo-network-lines path{
  fill:none;
  stroke:#fc6c1a;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:4 3;
  filter:drop-shadow(0 5px 10px rgba(252,108,26,.15));
  animation:zirooNetworkDash 9s linear infinite;
}
.ziroo-network-hub{
  position:absolute;
  left:50%;
  top:50%;
  width:154px;
  height:154px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border:1px solid rgba(252,108,26,.28);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 24px 55px rgba(88,38,14,.15),inset 0 0 0 10px rgba(255,244,237,.9);
  backdrop-filter:blur(16px);
}
.ziroo-network-hub span{
  position:absolute;
  inset:-12px;
  border:1px solid rgba(252,108,26,.17);
  border-radius:50%;
  animation:zirooHubPulse 3.8s ease-in-out infinite;
}
.ziroo-network-hub img{
  width:90px;
  height:90px;
  object-fit:contain;
}
.ziroo-network-card{
  position:absolute;
  width:min(48%,300px);
  min-height:104px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 30px;
  align-items:center;
  gap:14px;
  padding:18px;
  border:1px solid rgba(17,17,17,.07);
  border-radius:22px;
  background:rgba(255,255,255,.9);
  box-shadow:0 18px 46px rgba(58,28,11,.09),inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(18px);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;
}
.ziroo-network-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 58px rgba(58,28,11,.13),inset 0 1px 0 rgba(255,255,255,.96);
}
.ziroo-network-card.card-marketing{left:0;top:34px}
.ziroo-network-card.card-sales{right:0;top:34px}
.ziroo-network-card.card-operations{left:0;bottom:34px}
.ziroo-network-card.card-finance{right:0;bottom:34px}
.ziroo-network-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(145deg,#ff985d,#fc6c1a);
  box-shadow:0 10px 24px rgba(252,108,26,.24),inset 0 1px 0 rgba(255,255,255,.4);
}
.ziroo-network-icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ziroo-network-card strong{
  display:block;
  margin-bottom:5px;
  color:#181513;
  font-family:var(--font-heading)!important;
  font-size:17px;
  letter-spacing:-.01em;
}
.ziroo-network-card small{
  display:block;
  color:#706964;
  font-size:12px;
  line-height:1.35;
}
.ziroo-network-card>b{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  color:#4a7a45;
  background:#ecf4e9;
  font-size:13px;
}
@keyframes zirooNetworkSpin{to{transform:rotate(360deg)}}
@keyframes zirooNetworkDash{to{stroke-dashoffset:-70}}
@keyframes zirooHubPulse{0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.06);opacity:1}}

@media(max-width:1100px){
  .ziroo-business-card{
    grid-template-columns:1fr;
    gap:20px;
    min-height:0;
    padding:54px 36px;
  }
  .ziroo-business-copy{max-width:760px}
  .ziroo-business-network{min-height:490px}
}
@media(max-width:820px){
  .ziroo-statement-section{padding:34px 0 48px!important}
  .ziroo-business-card{
    padding:42px 22px;
    border-radius:28px;
  }
  .ziroo-business-card h2{
    font-size:clamp(38px,9vw,54px)!important;
    line-height:1.07!important;
  }
  .ziroo-business-description{font-size:15px;line-height:1.65}
  .ziroo-business-actions{gap:18px;flex-wrap:wrap;margin-top:28px}
  .ziroo-business-network{min-height:470px}
  .ziroo-network-card{width:min(48%,260px);padding:14px;grid-template-columns:44px minmax(0,1fr) 26px;border-radius:18px}
  .ziroo-network-icon{width:44px;height:44px;border-radius:13px}
  .ziroo-network-icon svg{width:22px;height:22px}
  .ziroo-network-hub{width:126px;height:126px}
  .ziroo-network-hub img{width:72px;height:72px}
  .ziroo-network-rings{width:360px;height:360px}
  .ziroo-network-rings i:nth-child(1){width:135px;height:135px}
  .ziroo-network-rings i:nth-child(2){width:205px;height:205px}
  .ziroo-network-rings i:nth-child(3){width:280px;height:280px}
  .ziroo-network-rings i:nth-child(4){width:350px;height:350px}
}
@media(max-width:600px){
  .ziroo-business-card{padding:36px 18px}
  .ziroo-business-kicker{font-size:10px;letter-spacing:.14em!important;margin-bottom:18px}
  .ziroo-business-card h2{font-size:36px!important}
  .ziroo-business-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .ziroo-business-actions .button{min-width:0;width:100%;padding-inline:14px;font-size:12px}
  .ziroo-business-link{justify-content:center;font-size:12px}
  .ziroo-business-link span{display:none}
  .ziroo-business-network{min-height:650px;margin-top:10px}
  .ziroo-network-lines{display:none}
  .ziroo-network-rings{top:50%;width:320px;height:320px}
  .ziroo-network-rings i:nth-child(4){width:310px;height:310px}
  .ziroo-network-hub{top:50%;width:116px;height:116px}
  .ziroo-network-hub img{width:66px;height:66px}
  .ziroo-network-card{width:100%;max-width:none;min-height:82px;grid-template-columns:42px minmax(0,1fr) 26px;padding:12px 14px}
  .ziroo-network-card.card-marketing{left:0;right:0;top:0}
  .ziroo-network-card.card-sales{left:0;right:0;top:96px}
  .ziroo-network-card.card-operations{left:0;right:0;bottom:96px}
  .ziroo-network-card.card-finance{left:0;right:0;bottom:0}
  .ziroo-network-icon{width:42px;height:42px}
  .ziroo-network-card strong{font-size:15px}
  .ziroo-network-card small{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .ziroo-network-rings::after,.ziroo-network-lines path,.ziroo-network-hub span{animation:none!important}
}

/* ========================================================================
   Ziroo 4.4 - simplified borderless business network section
   ======================================================================== */
.ziroo-statement-section{
  padding:30px 0 46px!important;
  overflow:hidden;
}
.ziroo-business-card{
  grid-template-columns:minmax(0,.82fr) minmax(480px,1.18fr);
  gap:28px;
  min-height:490px;
  padding:38px clamp(18px,3.5vw,54px);
  border:0!important;
  border-radius:0!important;
  background:
    radial-gradient(500px circle at 76% 48%,rgba(252,108,26,.09),transparent 68%),
    radial-gradient(360px circle at 20% 18%,rgba(255,190,153,.09),transparent 72%),
    transparent!important;
  box-shadow:none!important;
}
.ziroo-business-card::before{
  opacity:.28;
  background-size:18px 18px;
  mask-image:linear-gradient(90deg,transparent 34%,#000 72%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 72%,transparent 100%);
}
.ziroo-business-copy{
  max-width:510px;
}
.ziroo-business-kicker{
  margin-bottom:17px;
  padding-left:0;
  font-size:10px;
  letter-spacing:.15em!important;
}
.ziroo-business-kicker::before{display:none!important}
.ziroo-business-card h2{
  max-width:540px;
  margin-bottom:18px;
  color:#14110f;
  font-size:clamp(38px,3.25vw,54px)!important;
  line-height:1.06!important;
  letter-spacing:-.012em!important;
}
.ziroo-business-card h2 span{color:var(--orange)}
.ziroo-business-description{
  max-width:490px;
  font-size:15px;
  line-height:1.64;
}
.ziroo-business-actions{
  gap:22px;
  margin-top:26px;
}
.ziroo-business-actions .button{
  min-width:196px;
  min-height:50px;
  padding:14px 22px;
}
.ziroo-business-link{
  gap:10px;
  font-size:14px;
}
.ziroo-business-link span{
  width:30px;
  height:30px;
  border:0!important;
  background:#f3eee9;
}

.ziroo-business-network{
  min-height:420px;
  overflow:visible;
}
.ziroo-network-rings{
  width:350px;
  height:350px;
  background:
    radial-gradient(circle at center,rgba(252,108,26,.12),rgba(252,108,26,.045) 42%,transparent 69%);
  filter:drop-shadow(0 24px 44px rgba(252,108,26,.08));
}
.ziroo-network-rings i{
  border-color:rgba(252,108,26,.13);
}
.ziroo-network-rings i:nth-child(1){width:122px;height:122px}
.ziroo-network-rings i:nth-child(2){width:190px;height:190px}
.ziroo-network-rings i:nth-child(3){width:268px;height:268px}
.ziroo-network-rings i:nth-child(4){width:342px;height:342px}
.ziroo-network-rings::after{
  opacity:.62;
  mask-image:radial-gradient(circle,transparent 0 47%,#000 68%,transparent 69%);
  -webkit-mask-image:radial-gradient(circle,transparent 0 47%,#000 68%,transparent 69%);
  animation-duration:48s;
}
.ziroo-network-lines path{
  stroke-width:1.35;
  stroke-dasharray:2 7;
  opacity:.68;
  filter:none;
  animation-duration:16s;
}
.ziroo-network-hub{
  width:126px;
  height:126px;
  border:0!important;
  background:rgba(255,255,255,.88);
  box-shadow:
    0 26px 70px rgba(87,36,13,.12),
    0 0 0 12px rgba(255,245,238,.74),
    0 0 0 24px rgba(252,108,26,.055);
}
.ziroo-network-hub span{
  inset:-26px;
  border:0!important;
  background:radial-gradient(circle,rgba(252,108,26,.11),transparent 70%);
}
.ziroo-network-hub img{
  width:74px;
  height:74px;
}
.ziroo-network-card{
  width:min(45%,260px);
  min-height:82px;
  grid-template-columns:44px minmax(0,1fr) 24px;
  gap:12px;
  padding:12px 14px;
  border:0!important;
  border-radius:18px;
  background:rgba(255,255,255,.78);
  box-shadow:
    0 20px 48px rgba(54,25,12,.085),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(18px);
}
.ziroo-network-card::after{
  content:"";
  position:absolute;
  inset:auto 14px -10px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(55,25,12,.12),transparent 70%);
  filter:blur(10px);
  opacity:.42;
  pointer-events:none;
}
.ziroo-network-card:hover{
  transform:translateY(-3px) scale(1.012);
  box-shadow:0 24px 58px rgba(54,25,12,.11),inset 0 1px 0 rgba(255,255,255,.98);
}
.ziroo-network-card.card-marketing{left:3%;top:46px}
.ziroo-network-card.card-sales{right:3%;top:46px}
.ziroo-network-card.card-operations{left:3%;bottom:46px}
.ziroo-network-card.card-finance{right:3%;bottom:46px}
.ziroo-network-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(145deg,#ff9a5f,#fc6c1a);
  box-shadow:0 10px 22px rgba(252,108,26,.22);
}
.ziroo-network-icon svg{width:21px;height:21px}
.ziroo-network-card strong{
  margin-bottom:2px;
  font-size:15px;
}
.ziroo-network-card small{
  font-size:10.5px;
  line-height:1.3;
}
.ziroo-network-card>b{
  width:23px;
  height:23px;
  font-size:11px;
  background:#edf5ea;
}

/* Extra depth and motion without adding another boxed surface. */
.ziroo-business-network::before,
.ziroo-business-network::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.ziroo-business-network::before{
  width:250px;
  height:250px;
  background:conic-gradient(from 90deg,transparent,rgba(252,108,26,.08),transparent 42%,rgba(252,108,26,.06),transparent 76%);
  filter:blur(2px);
  animation:zirooNetworkAura 20s linear infinite;
}
.ziroo-business-network::after{
  width:12px;
  height:12px;
  background:#ff9a63;
  box-shadow:
    140px -58px 0 -3px rgba(252,108,26,.35),
    -150px 62px 0 -4px rgba(252,108,26,.28),
    126px 96px 0 -4px rgba(252,108,26,.24),
    -116px -108px 0 -4px rgba(252,108,26,.2);
  opacity:.7;
  animation:zirooNetworkFloat 7s ease-in-out infinite alternate;
}
@keyframes zirooNetworkAura{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes zirooNetworkFloat{to{transform:translate(-50%,-50%) translateY(-8px);opacity:1}}

@media(max-width:1100px){
  .ziroo-business-card{
    grid-template-columns:1fr;
    gap:8px;
    padding:40px 28px;
  }
  .ziroo-business-copy{max-width:650px}
  .ziroo-business-card h2{max-width:650px}
  .ziroo-business-network{min-height:410px}
}
@media(max-width:820px){
  .ziroo-statement-section{padding:24px 0 36px!important}
  .ziroo-business-card{
    padding:30px 16px;
    border-radius:0!important;
  }
  .ziroo-business-card h2{
    max-width:560px;
    font-size:clamp(34px,8.5vw,46px)!important;
    line-height:1.08!important;
  }
  .ziroo-business-description{font-size:14px}
  .ziroo-business-network{min-height:410px}
  .ziroo-network-card{width:min(46%,230px)}
}
@media(max-width:600px){
  .ziroo-business-card{padding:26px 10px}
  .ziroo-business-kicker{margin-bottom:14px}
  .ziroo-business-card h2{font-size:34px!important}
  .ziroo-business-actions{margin-top:22px}
  .ziroo-business-network{min-height:500px;margin-top:0}
  .ziroo-network-rings{width:285px;height:285px}
  .ziroo-network-rings i:nth-child(1){width:108px;height:108px}
  .ziroo-network-rings i:nth-child(2){width:165px;height:165px}
  .ziroo-network-rings i:nth-child(3){width:225px;height:225px}
  .ziroo-network-rings i:nth-child(4){width:278px;height:278px}
  .ziroo-network-hub{width:104px;height:104px}
  .ziroo-network-hub img{width:60px;height:60px}
  .ziroo-network-card{width:100%;min-height:72px;padding:10px 12px}
  .ziroo-network-card.card-marketing{top:0}
  .ziroo-network-card.card-sales{top:82px}
  .ziroo-network-card.card-operations{bottom:82px}
  .ziroo-network-card.card-finance{bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .ziroo-business-network::before,.ziroo-business-network::after{animation:none!important}
}


/* ========================================================================
   Ziroo 4.5 - calm network field, no orbit rotation or floating dots
   ======================================================================== */
.ziroo-business-network{
  isolation:isolate;
  overflow:hidden;
  border-radius:32px;
  background:
    linear-gradient(rgba(252,108,26,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(252,108,26,.035) 1px,transparent 1px),
    radial-gradient(280px circle at 50% 50%,rgba(252,108,26,.095),rgba(252,108,26,.025) 56%,transparent 75%);
  background-size:30px 30px,30px 30px,auto;
  background-position:center;
}

/* Remove the rotating circular field and the stray floating dot cluster. */
.ziroo-network-rings,
.ziroo-business-network::before,
.ziroo-business-network::after{
  display:none!important;
  content:none!important;
  animation:none!important;
}

/* Keep the connector system clean and static. */
.ziroo-network-lines{
  z-index:1;
  opacity:.72;
}
.ziroo-network-lines path{
  stroke:rgba(252,108,26,.5)!important;
  stroke-width:1.35!important;
  stroke-dasharray:none!important;
  stroke-dashoffset:0!important;
  animation:none!important;
  filter:none!important;
}

/* Calm central focus instead of orbiting circles. */
.ziroo-network-hub{
  z-index:3;
  background:rgba(255,255,255,.96)!important;
  box-shadow:
    0 24px 60px rgba(65,28,13,.11),
    0 0 0 10px rgba(255,247,241,.92),
    0 0 54px rgba(252,108,26,.12)!important;
}
.ziroo-network-hub::before{
  content:"";
  position:absolute;
  inset:-22px;
  z-index:-1;
  border-radius:30px;
  background:linear-gradient(135deg,rgba(252,108,26,.11),rgba(255,255,255,.18));
  filter:blur(10px);
  opacity:.78;
  pointer-events:none;
}
.ziroo-network-hub span{display:none!important}

/* Very gentle card motion only; nothing rotates around the hub. */
.ziroo-network-card{
  z-index:4;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1)!important;
}
.ziroo-network-card:nth-of-type(2){animation:zirooCardBreathe 7.5s ease-in-out infinite}
.ziroo-network-card:nth-of-type(3){animation:zirooCardBreathe 8.2s ease-in-out -2s infinite}
.ziroo-network-card:nth-of-type(4){animation:zirooCardBreathe 7.8s ease-in-out -4s infinite}
.ziroo-network-card:nth-of-type(5){animation:zirooCardBreathe 8.6s ease-in-out -6s infinite}
@keyframes zirooCardBreathe{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-3px,0)}
}

@media(max-width:600px){
  .ziroo-business-network{
    border-radius:24px;
    background-size:24px 24px,24px 24px,auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .ziroo-network-card{animation:none!important}
}


/* ========================================================================
   Ziroo 4.6 - requested global type system + supplied infinity hub image
   ======================================================================== */
:root{
  --font-heading:"Fraunces",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-description:"Manrope",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* Fraunces for every display heading. */
h1,h2,h3,h4,h5,h6,
.hero-copy-centered h1,
.ziroo-hero-heading,
.use-case-copy h3,
.how-flow-copy h3,
.final-offer-title,
.legal-article h1,
.legal-article h2,
.legal-article h3,
.ziroo-business-card h2,
.faq-q,
.footer-title{
  font-family:var(--font-heading)!important;
  font-optical-sizing:auto;
}

/* Manrope for descriptions, interface copy and controls across all pages. */
html,body,
body.ziroo-legal-body,
button,input,select,textarea,
p,li,td,th,label,small,
.nav,.button,.mobile-menu,.legal-page,.site-footer,
.eyebrow,.section-kicker,.integration-count-note,
.slack-demo,.use-case-slack{
  font-family:var(--font-description)!important;
}

/* Make this eyebrow identical to the existing section eyebrow system. */
.ziroo-business-kicker{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  margin:0 0 17px!important;
  padding:0!important;
  color:var(--orange)!important;
  font-family:var(--font-description)!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1.35!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}
.ziroo-business-kicker::before{
  display:none!important;
  content:none!important;
}

/* Keep the supplied white-background logo in the current central hub layout. */
.ziroo-network-hub{
  overflow:hidden;
}
.ziroo-network-hub img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
  background:#fff!important;
}

@media(max-width:600px){
  .ziroo-business-kicker{
    margin-bottom:14px!important;
    font-size:9px!important;
  }
}

/* Resolve legacy desktop hero specificity so the requested heading family wins. */
.hero-copy-centered h1.ziroo-hero-heading,
.hero-copy-centered h1.ziroo-hero-heading *,
h1 *,h2 *,h3 *,h4 *,h5 *,h6 *{
  font-family:var(--font-heading)!important;
}

/* ========================================================================
   Ziroo 5.1 - expressive editorial headings + professional body typography
   ======================================================================== */
:root{
  --font-heading:"Fraunces",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  --font-description:"Manrope",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  --font-interface:"Manrope",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  --font-accent:"Fraunces",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

/* Professional, highly readable body and interface copy. */
html,body,body.ziroo-site,body.ziroo-legal-body,
button,input,select,textarea,
p,li,td,th,label,small,a,
.nav,.button,.mobile-menu,.site-footer,
.slack-demo,.use-case-slack,.legal-page,
.eyebrow,.section-kicker,.integration-count-note{
  font-family:var(--font-description)!important;
  font-style:normal!important;
}

/* Distinctive, playful display typography for headings only. */
h1,h2,h3,h4,h5,h6,
h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,
.hero-copy-centered h1,.hero-copy-centered h1 *,
.ziroo-hero-heading,.ziroo-hero-heading *,
.use-case-copy h3,.how-flow-copy h3,
.final-offer-title,.final-offer-title *,
.legal-article h1,.legal-article h2,.legal-article h3,
.ziroo-business-card h2,.ziroo-business-card h2 *,
.faq-q,.footer-title,
.ziroo-hero-line-accent,
.how-it-works-head h2 span,
.final-offer-highlight,
.font-serif-accent{
  font-family:var(--font-heading)!important;
  font-style:normal!important;
}

h1,.ziroo-hero-heading{font-weight:700!important;letter-spacing:-.032em!important;}
h2,.final-offer-title,.ziroo-business-card h2{font-weight:700!important;letter-spacing:-.026em!important;}
h3,h4,h5,h6,.use-case-copy h3,.how-flow-copy h3,.faq-q{font-weight:650!important;letter-spacing:-.018em!important;}

p,.hero-sub,.section-description,.use-case-copy p,
.how-flow-copy p,.legal-article p,.legal-article li,
.final-offer-copy,.faq-a,.form-card label,
.slack-demo,.use-case-slack{
  font-family:var(--font-description)!important;
  font-weight:400!important;
  letter-spacing:-.005em!important;
}

button,.button,.nav a,.mobile-menu a,.eyebrow,.section-kicker{
  font-family:var(--font-interface)!important;
  font-weight:700!important;
}

/* The legal pages use the same liquid-glass header structure as the homepage. */
.ziroo-legal-body .legal-header-shell{
  position:fixed!important;
  top:16px!important;
  left:0!important;
  right:0!important;
  z-index:80!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
}
.ziroo-legal-body .legal-header-shell .header{pointer-events:auto!important;}
.admin-bar.ziroo-legal-body .legal-header-shell{top:48px!important;}
.ziroo-legal-body .legal-main{padding-top:132px!important;}
.ziroo-legal-body .legal-hero{padding-top:52px!important;}
.ziroo-legal-body .legal-site-header{display:none!important;}

@media(max-width:820px){
  h1,.ziroo-hero-heading{letter-spacing:-.026em!important;}
  h2,.final-offer-title,.ziroo-business-card h2{letter-spacing:-.022em!important;}
  .ziroo-legal-body .legal-header-shell{top:9px!important;padding:0 10px!important;}
  .admin-bar.ziroo-legal-body .legal-header-shell{top:55px!important;}
  .ziroo-legal-body .legal-main{padding-top:104px!important;}
  .ziroo-legal-body .legal-hero{padding-top:34px!important;}
}


/* ========================================================================
   Ziroo 5.1 - final typography lock
   Fraunces is restricted to display headings; Manrope remains body/UI.
   The stronger body-prefixed selectors prevent animated heading spans from
   inheriting Manrope through older high-specificity rules.
   ======================================================================== */
:root{
  --font-heading:"Fraunces",Georgia,"Times New Roman",serif!important;
  --font-description:"Manrope",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  --font-interface:"Manrope",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  --font-accent:"Fraunces",Georgia,"Times New Roman",serif!important;
}

html body,
html body p,
html body li,
html body td,
html body th,
html body label,
html body small,
html body a,
html body button,
html body input,
html body select,
html body textarea,
html body .nav,
html body .button,
html body .mobile-menu,
html body .site-footer,
html body .slack-demo,
html body .use-case-slack,
html body .legal-page,
html body .eyebrow,
html body .section-kicker,
html body .integration-count-note{
  font-family:var(--font-description)!important;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body h1 *,
html body h2 *,
html body h3 *,
html body h4 *,
html body h5 *,
html body h6 *,
html body .ziroo-hero-heading,
html body .ziroo-hero-heading *,
html body .hero-copy-centered h1,
html body .hero-copy-centered h1 *,
html body .use-case-copy h3,
html body .use-case-copy h3 *,
html body .how-flow-copy h3,
html body .how-flow-copy h3 *,
html body .final-offer-title,
html body .final-offer-title *,
html body .ziroo-business-card h2,
html body .ziroo-business-card h2 *,
html body .legal-article h1,
html body .legal-article h1 *,
html body .legal-article h2,
html body .legal-article h2 *,
html body .legal-article h3,
html body .legal-article h3 *,
html body .faq-q,
html body .faq-q *,
html body .footer-title,
html body .footer-title *{
  font-family:var(--font-heading)!important;
  font-style:normal!important;
  font-optical-sizing:auto;
}

html body h1,
html body .ziroo-hero-heading{
  font-weight:700!important;
  letter-spacing:-.025em!important;
}
html body h2,
html body .final-offer-title,
html body .ziroo-business-card h2{
  font-weight:700!important;
  letter-spacing:-.02em!important;
}
html body h3,
html body h4,
html body h5,
html body h6,
html body .use-case-copy h3,
html body .how-flow-copy h3,
html body .faq-q{
  font-weight:650!important;
  letter-spacing:-.012em!important;
}

/* ========================================================================
   Ziroo 5.2 - editable black heading colour fix
   ========================================================================
   These two headings previously inherited orange/gradient rules from child
   spans and WebKit text-fill declarations. Keep every generated/animated
   span on the same colour as its parent so Elementor/CSS colour changes work.
*/
#ziroo-statement-title,
#ziroo-statement-title *,
#how-it-works-title,
#how-it-works-title * {
  color:#111111 !important;
  -webkit-text-fill-color:#111111 !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
}

/* ========================================================================
   Ziroo 5.3 - compact responsive business network on mobile
   ======================================================================== */
@media (max-width: 600px){
  .ziroo-statement-section{
    padding:18px 0 30px!important;
    overflow:clip!important;
  }
  .ziroo-statement-section .wrap{
    width:min(100% - 28px, 1320px)!important;
  }
  .ziroo-business-card{
    display:block!important;
    min-height:0!important;
    padding:24px 0 0!important;
    gap:0!important;
  }
  .ziroo-business-copy{
    width:100%!important;
    max-width:none!important;
    padding:0 4px!important;
  }
  .ziroo-business-kicker{
    margin-bottom:13px!important;
    font-size:9px!important;
    line-height:1.35!important;
    letter-spacing:.13em!important;
  }
  .ziroo-business-card h2,
  .ziroo-business-card h2 *{
    max-width:none!important;
    margin-bottom:15px!important;
    font-size:clamp(30px,8.3vw,36px)!important;
    line-height:1.08!important;
    letter-spacing:-.018em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .ziroo-business-description{
    max-width:none!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.65!important;
  }
  .ziroo-business-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
    align-items:center!important;
    gap:10px!important;
    margin-top:20px!important;
  }
  .ziroo-business-actions .button{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:12px 12px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  .ziroo-business-link{
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  .ziroo-business-link span{
    display:none!important;
  }

  .ziroo-business-network{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:
      "marketing sales"
      "hub hub"
      "operations finance"!important;
    align-items:stretch!important;
    gap:12px!important;
    min-height:0!important;
    height:auto!important;
    margin:22px 0 0!important;
    padding:16px 0 4px!important;
    overflow:visible!important;
    border-radius:0!important;
    background:
      radial-gradient(190px circle at 50% 50%,rgba(252,108,26,.085),transparent 72%)!important;
  }
  .ziroo-network-lines{
    display:none!important;
  }
  .ziroo-network-card{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:76px!important;
    grid-template-columns:38px minmax(0,1fr) 20px!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:16px!important;
    animation:none!important;
    transform:none!important;
  }
  .ziroo-network-card.card-marketing{grid-area:marketing!important}
  .ziroo-network-card.card-sales{grid-area:sales!important}
  .ziroo-network-card.card-operations{grid-area:operations!important}
  .ziroo-network-card.card-finance{grid-area:finance!important}

  .ziroo-network-icon{
    width:38px!important;
    height:38px!important;
    border-radius:12px!important;
  }
  .ziroo-network-icon svg{
    width:18px!important;
    height:18px!important;
  }
  .ziroo-network-card strong{
    display:block!important;
    margin-bottom:2px!important;
    font-size:13px!important;
    line-height:1.15!important;
    overflow-wrap:anywhere!important;
  }
  .ziroo-network-card small{
    display:block!important;
    font-size:9.5px!important;
    line-height:1.3!important;
  }
  .ziroo-network-card>b{
    width:20px!important;
    height:20px!important;
    font-size:10px!important;
  }
  .ziroo-network-card::after{
    display:none!important;
  }
  .ziroo-network-hub{
    grid-area:hub!important;
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    justify-self:center!important;
    align-self:center!important;
    width:112px!important;
    height:112px!important;
    margin:8px auto!important;
    transform:none!important;
  }
}

@media (max-width: 410px){
  .ziroo-statement-section .wrap{
    width:min(100% - 20px, 1320px)!important;
  }
  .ziroo-business-card h2,
  .ziroo-business-card h2 *{
    font-size:29px!important;
  }
  .ziroo-business-actions{
    grid-template-columns:1fr!important;
  }
  .ziroo-business-link{
    min-height:42px!important;
  }
  .ziroo-business-network{
    gap:10px 8px!important;
  }
  .ziroo-network-card{
    min-height:72px!important;
    grid-template-columns:34px minmax(0,1fr) 18px!important;
    gap:7px!important;
    padding:9px 8px!important;
  }
  .ziroo-network-icon{
    width:34px!important;
    height:34px!important;
  }
  .ziroo-network-card strong{
    font-size:12px!important;
  }
  .ziroo-network-card small{
    font-size:8.8px!important;
  }
  .ziroo-network-hub{
    width:100px!important;
    height:100px!important;
  }
}

/* ========================================================================
   Ziroo 5.4 — Support page + complete navigation
   ======================================================================== */
.mobile-menu.is-open .mobile-menu-nav a:nth-child(4){transition-delay:.36s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(5){transition-delay:.41s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(6){transition-delay:.46s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(7){transition-delay:.51s}
.mobile-menu.is-open .mobile-menu-cta{transition-delay:.56s}

body.page-support,
body.page-template-page-support,
body.page-template-page-support-php{
  background:
    radial-gradient(900px circle at 8% 17%,rgba(252,108,26,.07),transparent 60%),
    radial-gradient(780px circle at 92% 12%,rgba(255,162,108,.08),transparent 62%),
    #fff;
}
.support-main{
  position:relative;
  overflow:hidden;
  padding-top:132px;
}
.admin-bar .support-main{padding-top:164px}
.support-hero{
  position:relative;
  padding:70px 0 92px;
}
.support-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(252,108,26,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(252,108,26,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,transparent 2%,#000 28%,#000 72%,transparent 98%);
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 28%,#000 72%,transparent 98%);
  opacity:.75;
}
.support-hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(360px,.74fr);
  gap:clamp(46px,7vw,108px);
  align-items:center;
}
.support-hero-copy{max-width:720px}
.support-back{
  display:inline-flex;
  margin-bottom:38px;
  color:#776e67;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  transition:color .25s ease,transform .25s ease;
}
.support-back:hover{color:#111;transform:translateX(-3px)}
.support-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#b64d15;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.support-kicker span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 6px rgba(252,108,26,.1);
}
.support-hero h1,
.support-hero h1 *{
  max-width:760px;
  margin:0;
  color:#111!important;
  font-size:clamp(50px,5.75vw,82px)!important;
  line-height:.99!important;
  letter-spacing:-.034em!important;
  -webkit-text-fill-color:#111!important;
  background:none!important;
}
.support-hero-copy>p{
  max-width:650px;
  margin:24px 0 0;
  color:#5f5750;
  font-size:clamp(16px,1.2vw,19px);
  line-height:1.7;
}
.support-hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  margin-top:34px;
}
.support-text-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#201b18;
  font-size:13px;
  font-weight:750;
  text-decoration:none;
}
.support-text-link span{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:50%;
  background:#f3ede8;
  transition:transform .25s ease,background .25s ease;
}
.support-text-link:hover span{transform:translateY(3px);background:#ffe9da}
.support-contact-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:470px;
  padding:42px;
  border:1px solid rgba(17,17,17,.075);
  border-radius:38px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,247,241,.9));
  box-shadow:0 34px 90px rgba(35,20,11,.1),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.support-card-orb{
  position:absolute;
  z-index:-1;
  width:330px;
  height:330px;
  right:-130px;
  top:-120px;
  border-radius:50%;
  background:radial-gradient(circle at 36% 38%,rgba(255,172,120,.52),rgba(252,108,26,.13) 42%,transparent 70%);
  filter:blur(2px);
}
.support-card-topline{
  display:flex;
  align-items:center;
  gap:10px;
  color:#6e655e;
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.support-status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 7px rgba(252,108,26,.1);
}
.support-contact-icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  margin:64px 0 30px;
  border-radius:22px;
  background:linear-gradient(145deg,#111,#2b211b);
  color:#fff;
  box-shadow:0 20px 42px rgba(17,17,17,.2);
}
.support-contact-icon svg{width:31px;height:31px}
.support-card-label{margin:0 0 6px;color:#8a7f77;font-size:12px}
.support-email{
  display:inline-block;
  color:#111;
  font-family:var(--font-heading)!important;
  font-size:clamp(25px,2.1vw,34px);
  font-weight:700;
  line-height:1.15;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.support-email:hover{color:var(--orange)}
.support-meta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:42px;
}
.support-meta-grid>div{
  padding:17px;
  border:1px solid rgba(17,17,17,.065);
  border-radius:18px;
  background:rgba(255,255,255,.76);
}
.support-meta-grid small{display:block;margin-bottom:6px;color:#93877f;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.support-meta-grid strong{display:block;color:#29231f;font-size:12px;line-height:1.45}

.support-details{padding:100px 0;background:linear-gradient(180deg,rgba(255,248,243,.45),#fff 30%)}
.support-section-heading{max-width:750px;margin-bottom:46px}
.support-section-heading .eyebrow{display:block;margin-bottom:15px;color:#b64d15}
.support-section-heading h2,
.support-section-heading h2 *{
  margin:0;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  background:none!important;
}
.support-section-heading p{max-width:650px;margin:16px 0 0;color:#706760;font-size:16px;line-height:1.7}
.support-card-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:20px;
}
.support-info-card{
  position:relative;
  overflow:hidden;
  min-height:290px;
  padding:34px;
  border:1px solid rgba(17,17,17,.07);
  border-radius:30px;
  background:rgba(255,255,255,.92);
  box-shadow:0 22px 62px rgba(17,17,17,.055);
}
.support-info-card-wide{grid-row:span 2;min-height:600px}
.support-info-index{
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  margin-bottom:50px;
  border-radius:14px;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}
.support-info-card h3,
.support-info-card h3 *{
  margin:0 0 15px;
  color:#111!important;
  font-size:clamp(25px,2.2vw,34px)!important;
  -webkit-text-fill-color:#111!important;
  background:none!important;
}
.support-info-card>p{margin:0;color:#6c635d;font-size:14px;line-height:1.75}
.support-checklist{display:grid;gap:13px;margin:30px 0 0;padding:0;list-style:none}
.support-checklist li{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:13px;
  align-items:start;
  padding:17px;
  border:1px solid rgba(17,17,17,.055);
  border-radius:18px;
  background:#fffaf7;
}
.support-checklist li span{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:#ffe6d6;color:#b84d14;font-size:13px;font-weight:900}
.support-checklist li p{margin:4px 0 0;color:#4f4843;font-size:13px;line-height:1.55}
.support-mini-note{
  display:grid;
  gap:4px;
  margin-top:28px;
  padding:17px 18px;
  border-radius:18px;
  background:#fff4ec;
}
.support-mini-note strong{color:#9f4213;font-size:12px}
.support-mini-note span{color:#6f625a;font-size:12px;line-height:1.5}
.support-info-card-accent{
  background:
    radial-gradient(300px circle at 100% 0,rgba(252,108,26,.15),transparent 60%),
    #111;
  border-color:#111;
}
.support-info-card-accent .support-info-index{background:var(--orange)}
.support-info-card-accent h3,
.support-info-card-accent h3 *{color:#fff!important;-webkit-text-fill-color:#fff!important}
.support-info-card-accent>p{color:#cfc6c0}
.support-info-card-accent>a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:27px;
  color:#fff;
  font-size:13px;
  font-weight:750;
  text-decoration:none;
}
.support-info-card-accent>a span{color:var(--orange);font-size:18px}
.support-final-section{padding:0 0 100px}
.support-final-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:52px 58px;
  border-radius:34px;
  background:
    radial-gradient(430px circle at 5% 100%,rgba(252,108,26,.34),transparent 65%),
    #111;
  box-shadow:0 28px 70px rgba(17,17,17,.15);
}
.support-final-card .eyebrow{display:block;margin-bottom:12px;color:#ffad7e}
.support-final-card h2,
.support-final-card h2 *{
  max-width:720px;
  margin:0;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:none!important;
}
.support-final-card .button-primary{background:#fff;color:#111;white-space:nowrap}
.support-final-card .button-primary:hover{background:#fff1e8;color:#111}

@media(max-width:980px){
  .support-hero-grid{grid-template-columns:1fr;gap:46px}
  .support-contact-card{min-height:0;max-width:720px;width:100%}
  .support-contact-icon{margin-top:45px}
  .support-card-grid{grid-template-columns:1fr 1fr}
  .support-info-card-wide{grid-column:1/-1;grid-row:auto;min-height:0}
}

@media(max-width:820px){
  .support-main{padding-top:104px}
  .admin-bar .support-main{padding-top:150px}
  .support-hero{padding:44px 0 68px}
  .support-back{margin-bottom:28px}
  .support-hero h1,
  .support-hero h1 *{font-size:clamp(39px,10.8vw,57px)!important;line-height:1.01!important}
  .support-contact-card{padding:30px;border-radius:29px}
  .support-contact-icon{margin:42px 0 25px}
  .support-details{padding:72px 0}
  .support-card-grid{grid-template-columns:1fr}
  .support-info-card-wide{grid-column:auto}
  .support-info-card{min-height:0;padding:27px;border-radius:25px}
  .support-info-index{margin-bottom:34px}
  .support-final-section{padding-bottom:72px}
  .support-final-card{align-items:flex-start;flex-direction:column;padding:38px 30px;border-radius:28px}
}

@media(max-width:620px){
  .desktop-nav .nav{gap:15px}
  .support-hero{padding-top:32px}
  .support-hero-actions{display:grid;grid-template-columns:1fr;gap:16px}
  .support-hero-actions .button{width:100%}
  .support-text-link{justify-content:center}
  .support-contact-card{padding:24px 20px}
  .support-contact-icon{width:62px;height:62px;margin-top:36px}
  .support-email{font-size:26px}
  .support-meta-grid{grid-template-columns:1fr;margin-top:30px}
  .support-section-heading{margin-bottom:31px}
  .support-section-heading p{font-size:14px}
  .support-checklist li{grid-template-columns:32px minmax(0,1fr);padding:14px}
  .support-checklist li span{width:29px;height:29px}
  .support-final-card{padding:33px 23px}
  .support-final-card .button-primary{width:100%;white-space:normal;text-align:center}

  /* Seven links now fit comfortably in short mobile viewports. */
  .mobile-menu-head{padding-bottom:10px}
  .mobile-menu-nav{margin-top:5px}
  .mobile-menu-nav a{min-height:49px!important}
  .mobile-menu-nav a strong{font-size:16px!important}
  .mobile-menu-nav a span{font-size:8px!important}
  .mobile-menu-cta{min-height:44px;margin-top:12px}
}

@media(max-height:700px) and (max-width:820px){
  .mobile-menu-nav a{min-height:43px!important}
  .mobile-menu-nav a strong{font-size:15px!important}
  .mobile-menu-head{padding-bottom:7px}
  .mobile-menu-brand img{width:88px}
  .mobile-menu-close{width:36px;height:36px}
  .mobile-menu-cta{min-height:41px;font-size:12px}
}

/* ========================================================================
   Ziroo v5.5 — guaranteed Support navigation + complete mobile drawer
   ======================================================================== */
@media (min-width:821px){
  .header .desktop-nav{gap:clamp(18px,2vw,34px)}
  .header .desktop-nav a{white-space:nowrap}
}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(4){transition-delay:.38s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(5){transition-delay:.45s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(6){transition-delay:.52s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(7){transition-delay:.59s}
@media (max-width:820px){
  .mobile-menu-inner{padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .mobile-menu-nav{flex:0 0 auto}
  .mobile-menu-cta{flex:0 0 auto}
}