/* ===== FOUT stabiliser =====
     Inter loads from the Google Fonts CDN over a system fallback whose metrics
     differ, so the hero text reflows/jumps the moment Inter arrives. This
     fallback re-shapes Arial to match Inter's line box, so the swap is
     invisible (no layout shift). Referenced first in the font stack below. */
  @font-face{
    font-family:'Inter Fallback';
    src:local('Arial');
    ascent-override:90.00%;
    descent-override:22.43%;
    line-gap-override:0.00%;
    size-adjust:107.12%;
  }
  /* ===== Base resets ===== */
  html,body{margin:0;padding:0;background:var(--bg-app);}
  *{box-sizing:border-box;}
  /* ===== Links ===== */
  a{color:var(--brand-blue-600);text-decoration:none;}
  a:hover{color:var(--brand-blue-500);}
  /* ===== Lucide icon sizing (driven by parent font-size) ===== */
  [data-lucide]{width:1em;height:1em;stroke-width:1.75;display:block;}
  /* ===== Motion keyframes ===== */
  @keyframes wfTipIn{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
  @keyframes wfFadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
  @keyframes wfCapIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
  @keyframes wfRowIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  @keyframes wfModalIn{from{opacity:0;transform:translateY(16px) scale(.95);}to{opacity:1;transform:none;}}
  @keyframes wfDrawerIn{from{transform:translateX(105%);}to{transform:none;}}
  @keyframes wfDDIn{from{opacity:0;transform:translateY(-6px) scale(.97);}to{opacity:1;transform:none;}}
  @keyframes wfRipple{0%{box-shadow:0 0 0 0 rgba(249,115,22,.5);}100%{box-shadow:0 0 0 16px rgba(249,115,22,0);}}
  @keyframes wfBadgePop{0%{transform:scale(.6);}55%{transform:scale(1.18);}100%{transform:scale(1);}}
  @keyframes wfToastIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
  @keyframes wfCaret{0%,100%{opacity:1;}50%{opacity:0;}}
  @keyframes wfSpin{to{transform:rotate(360deg);}}
  @keyframes wfDraw{to{stroke-dashoffset:0;}}
  @keyframes wfFadeIn{from{opacity:0;}to{opacity:1;}}
  @keyframes wfNodeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
  ::selection{background:rgba(249,115,22,0.22);}
  /* ===== Demo hover tooltips (descriptive, on real hover) ===== */
  [data-tt]{position:relative;}
  [data-tt]:hover::after{content:attr(data-tt);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:#fff;background:var(--ink-900,#0f172a);padding:6px 10px;border-radius:7px;box-shadow:var(--shadow-md);z-index:60;pointer-events:none;animation:wfTipIn .18s ease-out both;}
  [data-tt]:hover::before{content:'';position:absolute;left:50%;bottom:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink-900,#0f172a);margin-bottom:-2px;z-index:60;pointer-events:none;}
  [data-tt-right]:hover::after{left:calc(100% + 10px);bottom:auto;top:50%;transform:translateY(-50%);}
  [data-tt-right]:hover::before{left:100%;bottom:auto;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--ink-900,#0f172a);margin-bottom:0;margin-left:-2px;}
  [data-tt-end]:hover::after{left:auto;right:0;transform:none;}
  [data-tt-end]:hover::before{left:auto;right:14px;transform:none;}
  @media (prefers-reduced-motion:reduce){[data-cursor],[data-hero-cursor],[data-ai-cursor],[data-sup-cursor]{display:none!important;}[data-flow-dot]{display:none!important;}[data-flow-line]{stroke-dashoffset:0!important;animation:none!important;}}

  /* Thin scrollbars inside the demo/tour windows */
  [data-window] *,[data-hero-win] *,[data-ai-win] *,[data-sup-win] *{scrollbar-width:thin;scrollbar-color:#CDD3DD transparent;}
  [data-window] *::-webkit-scrollbar,[data-hero-win] *::-webkit-scrollbar,[data-ai-win] *::-webkit-scrollbar,[data-sup-win] *::-webkit-scrollbar{width:6px;height:6px;}
  [data-window] *::-webkit-scrollbar-track,[data-hero-win] *::-webkit-scrollbar-track,[data-ai-win] *::-webkit-scrollbar-track,[data-sup-win] *::-webkit-scrollbar-track{background:transparent;}
  [data-window] *::-webkit-scrollbar-thumb,[data-hero-win] *::-webkit-scrollbar-thumb,[data-ai-win] *::-webkit-scrollbar-thumb,[data-sup-win] *::-webkit-scrollbar-thumb{background:#CDD3DD;border-radius:99px;}
  [data-window] *::-webkit-scrollbar-thumb:hover,[data-hero-win] *::-webkit-scrollbar-thumb:hover,[data-ai-win] *::-webkit-scrollbar-thumb:hover,[data-sup-win] *::-webkit-scrollbar-thumb:hover{background:#B6BDC9;}
  /* Product-tour left nav: keep it scrollable but hide the scrollbar chrome. */
  [data-tour-nav]{scrollbar-width:none;-ms-overflow-style:none;}
  [data-tour-nav]::-webkit-scrollbar{width:0;height:0;display:none;}

  /* ============================================================
     RESPONSIVE / MOBILE  (rules only apply below breakpoints,
     so the desktop layout above these widths is unchanged)
     ============================================================ */
  /* the JS-created wrapper around each fixed-layout demo window */
  [data-fitwrap]{width:100%;}

  @media (max-width:1024px){
    /* Tablet: tighten the outer gutters a little */
    #tour,#ai-studio,#support,#features{padding-left:20px!important;padding-right:20px!important;}
  }

  @media (max-width:820px){
    /* --- Navbar: drop the centre links + Sign in, keep logo + CTA --- */
    header nav{padding:12px 16px!important;gap:12px!important;}
    header nav>div:nth-of-type(1){display:none!important;}          /* centre links */
    header nav>div:nth-of-type(2)>a:first-child{display:none!important;} /* Sign in */

    /* --- Hero: single column, roomier stacking --- */
    #top>div:last-child{grid-template-columns:1fr!important;gap:34px!important;padding:40px 16px 52px!important;}

    /* --- Section rhythm: smaller vertical + horizontal padding --- */
    #tour,#ai-studio,#support,#features{padding-top:56px!important;padding-bottom:56px!important;padding-left:16px!important;padding-right:16px!important;}
    #cta{padding:0 16px 56px!important;}
    #cta>div{padding:40px 22px!important;}
    footer{padding-left:16px!important;padding-right:16px!important;}

    /* --- Feature grid: 4 -> 2 --- */
    #features>div>div:last-child{grid-template-columns:repeat(2,1fr)!important;}

    /* --- Footer: 4 -> 2 --- */
    footer>div:first-child{grid-template-columns:1fr 1fr!important;gap:26px 20px!important;}
  }

  @media (max-width:520px){
    /* --- Feature grid + footer collapse to a single column --- */
    #features>div>div:last-child{grid-template-columns:1fr!important;}
    footer>div:first-child{grid-template-columns:1fr!important;}
  }