/* V8, 15 Oct 2026: Alfredo's video feedback.
   Single-column hero on a dotted background, benefits right after the flowchart,
   integration tiles, contact block, no labels or side text beside headings.
   Loaded last so earlier rules stay untouched and the diff is easy to review. */

/* Hero: one column, fits a laptop screen with the buttons visible. */
.hero-band{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-band:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(23,23,22,.22) 1.1px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 70% 45%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 75% 85% at 70% 45%,#000 20%,transparent 75%)}
.hero-single{padding-block:clamp(56px,10vh,112px) clamp(48px,8vh,88px)}
.hero-single h1{font-size:clamp(46px,6.4vw,104px);line-height:1.04;letter-spacing:-.055em;font-weight:400}
.hero-single h1 span{color:#8f8f86}
.hero-single .hero-lead{font-size:clamp(16px,1.35vw,20px);line-height:1.65;max-width:600px;margin:28px 0 34px;color:#51514b}
.hero-single .release{margin-top:28px;font-size:12px;color:var(--muted)}

/* Headings stand alone: no side text, no labels above. */
.section-heading{display:block;margin-bottom:32px}
.intro-layout{display:block}
.intro-copy{max-width:680px;margin-top:22px}

/* Flowchart: smaller so the whole board fits on a laptop. */
.system-map{gap:36px 56px;padding:32px 28px 28px}
.system-node{padding:18px}
.system-node>.micro-label{margin-bottom:12px}
.system-tool{padding:9px 0;font-size:15px}
.system-tool img{width:22px;height:22px}
.system-hub{padding:22px 16px}
.system-hub h3{font-size:22px}
.system-logo{display:block;width:44px;height:44px;margin:0 auto 14px;filter:invert(1)}
.system-memory{margin-top:16px;padding-top:14px}
.system-memory strong{font-size:16px}
.system-space h3{font-size:17px;margin-bottom:6px}
.system-spaces{gap:14px}
.system-sources{padding:16px 20px}
.flow-more{margin-top:20px}

/* Benefits: three short, clearly signposted cards. */
.benefits{background:var(--ink);color:var(--paper)}
.benefits h2{color:var(--paper);margin-bottom:32px}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.benefit-grid article{border:1px solid #3a3a35;padding:28px 26px 30px;border-radius:4px}
.benefit-mark{display:block;font:12px/1 Consolas,monospace;color:#9d9d92;margin-bottom:40px}
.benefit-grid h3{font-size:clamp(22px,2vw,30px);letter-spacing:-.04em;line-height:1.15;margin-bottom:12px;color:var(--paper)}
.benefit-grid p{font-size:15px;line-height:1.7;color:#c9c9be}

/* Integrations as a tile grid. */
.integration-tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.integration-tiles li{display:grid;grid-template-columns:36px 1fr;column-gap:16px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.integration-tiles img{width:32px;height:32px;object-fit:contain;grid-row:1/3}
.integration-tiles img.logo-slack{transform:scale(1.18)}
.integration-tiles strong{font-size:16px;font-weight:600;letter-spacing:-.02em}
.integration-tiles span{font-size:12px;color:var(--muted)}
.integrations-compact .integration-note{margin-top:18px;font-size:12px}

/* Team and contact. */
.about-introduction{display:block;margin:0 0 32px}
.about-introduction>div{max-width:680px;margin-top:18px}
.contact-band{border-top:1px solid var(--line)}
.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-block:56px}
.contact-inner h2{font-size:clamp(32px,3.6vw,52px);letter-spacing:-.045em;line-height:1.1}
.contact-inner h2 span{color:#8f8f86}
.contact-inner p{max-width:560px;margin-top:14px;font-size:15px;line-height:1.75}
.contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex-shrink:0}
.faq-contact{margin-top:18px}
.faq-contact a{text-decoration:underline;text-underline-offset:4px}

/* A clear break between the content and the footer on every page. */
.footer{border-top:1px solid var(--line);background:var(--surface)}
.contact-band+.footer,.contact-band~.footer{border-top-color:#d0d0c8}
.policy-main{padding-bottom:72px}

/* Explore: dashboard functions without the concept diagram. */
.dashboard-editorial{display:block}
.dashboard-functions{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.explore-intro{padding-block:56px 40px}

/* Large screens: use the width. */
@media(min-width:1600px){.container{max-width:1520px}}
@media(min-width:2000px){.container{max-width:1760px}html{font-size:18px}}

@media(max-width:1100px){.integration-tiles{grid-template-columns:repeat(2,1fr)}.benefit-grid{gap:14px}.contact-inner{flex-direction:column;align-items:flex-start}}
@media(max-width:740px){
  .hero-single{padding-block:44px 40px}
  .hero-band:before{-webkit-mask-image:radial-gradient(ellipse 120% 70% at 70% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 120% 70% at 70% 30%,#000 10%,transparent 70%)}
  .benefit-grid{grid-template-columns:1fr}
  .benefit-mark{margin-bottom:20px}
  .integration-tiles{grid-template-columns:1fr}
  .dashboard-functions{grid-template-columns:1fr}
  .contact-inner{padding-block:44px}
}