/* Homepage layout. Generated by tools/build_home.py from the Grayn design bundle. */
:root{--L-hero:7fr 5fr;--L-heroGap:56px;--L-heroTop:96px;--L-heroSub:20px;--L-logoCols:repeat(4,minmax(0,1fr));--L-logoMax:960px;--L-av:40;--L-logoDir:row;--L-logoAlign:center;--L-logoGap:48px;--L-logoWrap:nowrap;--L-logoH:28px;--L-stackCols:repeat(4,minmax(0,1fr));--L-stackGap:32px;--L-cardPad:22px 24px;--L-three:repeat(3,minmax(0,1fr));--L-cellPad:36px 32px;--L-half:repeat(2,minmax(0,1fr));--L-checks:repeat(2,minmax(0,1fr));--L-integ:160px minmax(0,1fr);--L-faq:5fr 7fr;--L-foot:2fr 1fr 1fr 1fr}
@media (max-width:899px){:root{--L-hero:minmax(0,1fr);--L-heroGap:24px;--L-heroTop:56px;--L-heroSub:18px;--L-logoCols:repeat(2,minmax(0,1fr));--L-logoMax:100%;--L-av:34;--L-logoDir:column;--L-logoAlign:flex-start;--L-logoGap:20px;--L-logoWrap:wrap;--L-logoH:22px;--L-stackCols:minmax(0,1fr);--L-stackGap:0px;--L-cardPad:18px 14px;--L-three:minmax(0,1fr);--L-cellPad:28px 20px;--L-half:minmax(0,1fr);--L-checks:minmax(0,1fr);--L-integ:minmax(0,1fr);--L-faq:minmax(0,1fr);--L-foot:repeat(2,minmax(0,1fr))}.only-desk{display:none!important}}
@media (min-width:900px){.only-m{display:none!important}}
@media (min-width:700px){.h1-a,.h1-b{display:block}}
html{scroll-padding-top:72px}
/* html clips sideways overflow; body must not become its own scroller or the sticky header stops sticking */
body{overflow-x:clip}
.menu-btn{align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;border:0;border-radius:8px;background:transparent;color:var(--grayn-ink);cursor:pointer;padding:0;display:inline-flex}
.menu-btn .ico-close{display:none}
.menu-btn[aria-expanded="true"] .ico-open{display:none}
.menu-btn[aria-expanded="true"] .ico-close{display:inline}
.mobile-menu{display:none;border-top:var(--border-hairline);background:var(--grayn-bg);padding:8px clamp(20px,5.6vw,80px) 16px;flex-direction:column}
.mobile-menu.is-open{display:flex}
.mobile-menu a{font-size:18px;color:var(--grayn-ink);text-decoration:none;min-height:52px;display:flex;align-items:center;border-bottom:var(--border-hairline)}
.mobile-menu a:last-child{border-bottom:0}
/* Demo frames: the iframe is wider than its column so card shadows are not clipped; negative margins cancel the padding inside the demo page. */
.embed{position:relative;z-index:1;margin:0 -64px}
.embed iframe{display:block;width:100%;border:0;margin:-40px 0 -80px;background:transparent;color-scheme:normal}
.embed-hero-feed iframe{height:731px}
.embed-slack-story iframe{height:1120px}
.embed-approval iframe{height:656px}
@media (min-width:1200px){.embed-slack-story iframe{height:740px}}
@media (max-width:899px){.embed-hero-feed iframe{height:779px}.embed-approval iframe{height:736px}.embed-slack-story iframe{height:1105px}}
.hv1:hover{transform:translate(-2px,-2px)!important;color:var(--cta-label)!important}
.hv2:hover{transform:translate(-2px,-2px)!important;color:var(--grayn-ink)!important}
.hv3:hover{transform:translate(-2px,-2px)!important;color:var(--grayn-bg)!important}
.hv4:hover{text-decoration:underline!important}
/* --- Integrations dropdown (shared by homepage and inner pages) --- */
.dd-btn{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;margin:0 -12px;border:0;border-radius:8px;
  background:transparent;color:#16241C;font:inherit;font-size:16px;font-weight:400;cursor:pointer}
.dd-btn:hover,.dd.is-open .dd-btn,.dd:focus-within .dd-btn{background:rgba(22,36,28,.06)}
.dd-chev{transition:transform .15s}
.dd.is-open .dd-chev{transform:rotate(180deg)}
.dd-panel{display:none;position:absolute;left:50%;top:calc(100% - 8px);transform:translateX(-50%);width:min(820px,calc(100vw - 40px));
  background:#FFFFFF;border:1px solid #E6E4DC;border-radius:14px;box-shadow:0 18px 48px rgba(22,36,28,.13);padding:28px 32px 20px;z-index:50}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.dd.is-open .dd-panel{display:block}
@media (hover:hover) and (pointer:fine){.dd:hover .dd-panel{display:block}.dd:hover .dd-chev{transform:rotate(180deg)}}
.dd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 36px}
.dd-col h3{margin:0 0 6px;padding:0 0 10px;border-bottom:1px solid #E6E4DC;font-size:13px;font-weight:600;color:#616061;
  font-family:inherit;text-transform:none;letter-spacing:0}
.dd-col a{display:flex;align-items:center;gap:12px;min-height:42px;font-size:15px;color:#16241C;text-decoration:none}
.dd-col a:hover span{color:#1E6E4F}
.dd-col img{width:22px;height:22px;object-fit:contain;flex:0 0 auto;border-radius:4px}
.dd-soon{font-style:normal;font-size:11px;font-weight:600;color:#616061;background:#F3F4EA;border:1px solid #E6E4DC;border-radius:4px;padding:1px 6px}
.dd-all{display:block;margin-top:14px;padding-top:14px;border-top:1px solid #E6E4DC;font-size:15px;font-weight:600;color:#1E6E4F;text-decoration:none}
.dd-all:hover{text-decoration:underline}
.mm-dd{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0;border:0;
  border-bottom:1px solid #E6E4DC;background:transparent;color:#16241C;font:inherit;font-size:18px;text-align:left;cursor:pointer}
.mm-dd[aria-expanded="true"] .dd-chev{transform:rotate(180deg)}
.mm-list[hidden]{display:none}
.mm-list{display:flex;flex-direction:column;border-bottom:1px solid #E6E4DC;padding:4px 0 8px}
.mobile-menu .mm-list a{min-height:44px;font-size:16px;gap:12px;border-bottom:0}
.mobile-menu .mm-list img{width:22px;height:22px;object-fit:contain;border-radius:4px}